Refactor Dialog and Drawer stories to use IconButtonIcon

- Updated the `Dialog` and `Drawer` stories to import and utilize `IconButtonIcon` for rendering the close icon, enhancing the visual consistency and modularity of the components.
- This change improves the integration of icon buttons within the dialog and drawer components, aligning with recent updates to the UI library.

Author: codingwolf-at

packages/propel/src/ui/dialog/dialog.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { X } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { IconButton } from "../../components/icon-button";
 import { Button } from "../button";
+import { IconButton, IconButtonIcon } from "../icon-button";
 import {
   Dialog,
   DialogActions,
@@ -78,7 +78,9 @@ export const Anatomy: Story = {
                 aria-label="Close"
                 render={<DialogClose />}
               >
-                <X />
+                <IconButtonIcon>
+                  <X />
+                </IconButtonIcon>
               </IconButton>
             </DialogHeader>
             <DialogBody>

packages/propel/src/ui/drawer/drawer.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { X } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { IconButton } from "../../components/icon-button";
 import { Button } from "../button";
+import { IconButton, IconButtonIcon } from "../icon-button";
 import {
   Drawer,
   DrawerBackdrop,
@@ -82,7 +82,9 @@ export const Anatomy: Story = {
                   aria-label="Close"
                   render={<DrawerClose />}
                 >
-                  <X />
+                  <IconButtonIcon>
+                    <X />
+                  </IconButtonIcon>
                 </IconButton>
               </DrawerHeader>
               <DrawerBody>Panel body content goes here.</DrawerBody>