From 0bc34c6b6c8cfa0d0d0a9b9ce10a6075b3ad599f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 11 Aug 2025 16:42:18 +0000
Subject: [PATCH 1/2] Initial plan


From ed056370a2ce5c732bd5581395a3b71e272d1feb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 11 Aug 2025 16:57:36 +0000
Subject: [PATCH 2/2] Update Dialog.stories.tsx to no longer use
 styled-components

Co-authored-by: hectahertz <24622853+hectahertz@users.noreply.github.com>
---
 .../react/src/DialogV1/Dialog.stories.module.css     |  7 +++++++
 packages/react/src/DialogV1/Dialog.stories.tsx       | 12 +++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/DialogV1/Dialog.stories.module.css

diff --git a/packages/react/src/DialogV1/Dialog.stories.module.css b/packages/react/src/DialogV1/Dialog.stories.module.css
new file mode 100644
index 00000000000..ecc1cc343d0
--- /dev/null
+++ b/packages/react/src/DialogV1/Dialog.stories.module.css
@@ -0,0 +1,7 @@
+.BannerContainer {
+  margin-bottom: var(--base-size-24);
+}
+
+.ContentContainer {
+  padding: var(--base-size-24);
+}
\ No newline at end of file
diff --git a/packages/react/src/DialogV1/Dialog.stories.tsx b/packages/react/src/DialogV1/Dialog.stories.tsx
index 99d89b30a1b..ea78e674023 100644
--- a/packages/react/src/DialogV1/Dialog.stories.tsx
+++ b/packages/react/src/DialogV1/Dialog.stories.tsx
@@ -1,9 +1,11 @@
 import {useState, useRef} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
-import {Box, Text} from '..'
+import {Text} from '..'
 import {Banner} from '../Banner'
 import {default as Dialog} from './Dialog'
+import {clsx} from 'clsx'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 1*/
 
@@ -17,13 +19,13 @@ export const Default = () => {
   const returnFocusRef = useRef(null)
   return (
     <div>
-      <Box sx={{mb: 3}}>
+      <div className={clsx(classes.BannerContainer)}>
         <Banner
           title="This component is deprecated"
           description="We recommend using Dialog instead."
           variant="warning"
         />
-      </Box>
+      </div>
       <Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
         Show Dialog
       </Button>
@@ -35,9 +37,9 @@ export const Default = () => {
       >
         <div data-testid="inner">
           <Dialog.Header id="header">Title</Dialog.Header>
-          <Box p={3}>
+          <div className={clsx(classes.ContentContainer)}>
             <Text>Some content</Text>
-          </Box>
+          </div>
         </div>
       </Dialog>
     </div>