From 1a7b4047ecf5143c52da936933a1908605420da4 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 9 Sep 2025 12:02:30 -0500
Subject: [PATCH 01/11] feat(Dialog): remove support for sx

---
 packages/react/src/Dialog/Dialog.module.css   | 12 ++++
 packages/react/src/Dialog/Dialog.tsx          | 56 +++++++++----------
 .../__tests__/primer-react.browser.test.tsx   | 30 ++++++++++
 .../styled-react/src/components/Dialog.tsx    | 42 ++++++++++++++
 packages/styled-react/src/experimental.tsx    |  4 +-
 packages/styled-react/src/index.tsx           |  8 ++-
 packages/styled-react/src/sx.ts               |  8 +++
 7 files changed, 125 insertions(+), 35 deletions(-)
 create mode 100644 packages/styled-react/src/components/Dialog.tsx
 create mode 100644 packages/styled-react/src/sx.ts

diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css
index fb773a6b1b4..d750854c158 100644
--- a/packages/react/src/Dialog/Dialog.module.css
+++ b/packages/react/src/Dialog/Dialog.module.css
@@ -270,6 +270,18 @@ Add a border between the body and footer if:
   flex-shrink: 0;
 }
 
+.HeaderInner {
+  display: flex;
+}
+
+.HeaderContent {
+  display: flex;
+  padding-inline: var(--base-size-8);
+  padding-block: var(--base-size-6);
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .Title {
   margin: 0; /* override default margin */
   font-size: var(--text-body-size-medium);
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 14f6151ede9..54a56ac4e69 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,10 +1,8 @@
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
-import Box from '../Box'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
-import type {SxProp} from '../sx'
 import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {FocusKeys} from '@primer/behaviors'
@@ -17,7 +15,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 
 import classes from './Dialog.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 /* Dialog Version 2 */
 
@@ -52,7 +49,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
 /**
  * Props to customize the rendering of the Dialog.
  */
-export interface DialogProps extends SxProp {
+export interface DialogProps {
   /**
    * Title of the Dialog. Also serves as the aria-label for this Dialog.
    */
@@ -198,13 +195,13 @@ const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({
   }, [onClose])
   return (
     <Dialog.Header>
-      <Box display="flex">
-        <Box display="flex" px={2} py="6px" flexDirection="column" flexGrow={1}>
+      <div className={classes.HeaderInner}>
+        <div className={classes.HeaderContent}>
           <Dialog.Title id={dialogLabelId}>{title ?? 'Dialog'}</Dialog.Title>
           {subtitle && <Dialog.Subtitle id={dialogDescriptionId}>{subtitle}</Dialog.Subtitle>}
-        </Box>
+        </div>
         <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
+      </div>
     </Dialog.Header>
   )
 }
@@ -245,7 +242,6 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     position = defaultPosition,
     returnFocusRef,
     initialFocusRef,
-    sx,
     className,
   } = props
   const dialogLabelId = useId()
@@ -311,8 +307,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
   return (
     <>
       <Portal>
-        <BoxWithFallback
-          as="div"
+        <div
           ref={backdropRef}
           className={classes.Backdrop}
           {...positionDataAttributes}
@@ -321,8 +316,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             setLastMouseDownIsBackdrop(e.target === e.currentTarget)
           }}
         >
-          <BoxWithFallback
-            as="div"
+          <div
             ref={dialogRef}
             role={role}
             aria-labelledby={dialogLabelId}
@@ -331,7 +325,6 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             {...positionDataAttributes}
             data-width={width}
             data-height={height}
-            sx={sx}
             className={clsx(className, classes.Dialog)}
           >
             {header}
@@ -339,50 +332,51 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
               {body}
             </ScrollableRegion>
             {footer}
-          </BoxWithFallback>
-        </BoxWithFallback>
+          </div>
+        </div>
       </Portal>
     </>
   )
 })
 _Dialog.displayName = 'Dialog'
 
-type StyledHeaderProps = React.ComponentProps<'div'> & SxProp
+type StyledHeaderProps = React.ComponentProps<'div'>
 
-const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header({className, ...rest}, forwardRef) {
-  return <BoxWithFallback as="div" ref={forwardRef} className={clsx(className, classes.Header)} {...rest} />
+const Header = React.forwardRef<HTMLDivElement, StyledHeaderProps>(function Header({className, ...rest}, forwardRef) {
+  return <div ref={forwardRef} className={clsx(className, classes.Header)} {...rest} />
 })
 Header.displayName = 'Dialog.Header'
 
-type StyledTitleProps = React.ComponentProps<'h1'> & SxProp
+type StyledTitleProps = React.ComponentProps<'h1'>
 
-const Title = React.forwardRef<HTMLElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
-  return <BoxWithFallback as="h1" ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
+// TODO: get rid of typecasting `forwardRef`
+const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
+  return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
 })
 Title.displayName = 'Dialog.Title'
 
-type StyledSubtitleProps = React.ComponentProps<'h2'> & SxProp
+type StyledSubtitleProps = React.ComponentProps<'h2'>
 
-const Subtitle = React.forwardRef<HTMLElement, StyledSubtitleProps>(function Subtitle(
+const Subtitle = React.forwardRef<HTMLHeadingElement, StyledSubtitleProps>(function Subtitle(
   {className, ...rest},
   forwardRef,
 ) {
-  return <BoxWithFallback as="h2" ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} />
+  return <h2 ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} />
 })
 Subtitle.displayName = 'Dialog.Subtitle'
 
-type StyledBodyProps = React.ComponentProps<'div'> & SxProp
+type StyledBodyProps = React.ComponentProps<'div'>
 
-const Body = React.forwardRef<HTMLElement, StyledBodyProps>(function Body({className, ...rest}, forwardRef) {
-  return <BoxWithFallback as="div" ref={forwardRef} className={clsx(className, classes.Body)} {...rest} />
+const Body = React.forwardRef<HTMLDivElement, StyledBodyProps>(function Body({className, ...rest}, forwardRef) {
+  return <div ref={forwardRef} className={clsx(className, classes.Body)} {...rest} />
 }) as PolymorphicForwardRefComponent<'div', StyledBodyProps>
 
 Body.displayName = 'Dialog.Body'
 
-type StyledFooterProps = React.ComponentProps<'div'> & SxProp
+type StyledFooterProps = React.ComponentProps<'div'>
 
-const Footer = React.forwardRef<HTMLElement, StyledFooterProps>(function Footer({className, ...rest}, forwardRef) {
-  return <BoxWithFallback as="div" ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} />
+const Footer = React.forwardRef<HTMLDivElement, StyledFooterProps>(function Footer({className, ...rest}, forwardRef) {
+  return <div ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} />
 })
 Footer.displayName = 'Dialog.Footer'
 
diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 7909455e5ae..f14a44a5e89 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -157,6 +157,36 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
+  test('Dialog.Header supports `sx` prop', () => {
+    render(
+      <Dialog
+        onClose={() => {}}
+        renderHeader={props => <Dialog.Header {...props} data-testid="component" sx={{background: 'red'}} />}
+      />,
+    )
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
+  test('Dialog.Body supports `sx` prop', () => {
+    render(
+      <Dialog
+        onClose={() => {}}
+        renderBody={props => <Dialog.Body {...props} data-testid="component" sx={{background: 'red'}} />}
+      />,
+    )
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
+  test('Dialog.Footer supports `sx` prop', () => {
+    render(
+      <Dialog
+        onClose={() => {}}
+        renderFooter={props => <Dialog.Footer {...props} data-testid="component" sx={{background: 'red'}} />}
+      />,
+    )
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('Flash supports `sx` prop', () => {
     render(<Flash data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
new file mode 100644
index 00000000000..348b36d1a58
--- /dev/null
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -0,0 +1,42 @@
+import {Dialog as PrimerDialog} from '@primer/react'
+import type {DialogProps as PrimerDialogProps, DialogHeaderProps as PrimerDialogHeaderProps} from '@primer/react'
+import styled from 'styled-components'
+import {sx} from '../sx'
+import type {SxProp} from '../sx'
+import {forwardRef, type PropsWithChildren} from 'react'
+
+const Wrapper = styled.div<SxProp>`
+  ${sx}
+`
+
+type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp
+
+const DialogImpl = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
+  return <Wrapper as={PrimerDialog} ref={ref} {...props} />
+})
+
+type DialogHeaderProps = PropsWithChildren<PrimerDialogHeaderProps> & SxProp
+
+const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
+  // @ts-expect-error - PrimerDialog.Header is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Header} ref={ref} {...props} />
+})
+
+const DialogBody = forwardRef<HTMLDivElement, DialogProps>(function DialogBody(props, ref) {
+  // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Body} ref={ref} {...props} />
+})
+
+const DialogFooter = forwardRef<HTMLDivElement, DialogProps>(function DialogFooter(props, ref) {
+  // @ts-expect-error - PrimerDialog.Footer is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Footer} ref={ref} {...props} />
+})
+
+const Dialog = Object.assign(DialogImpl, {
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+})
+
+export {Dialog}
+export type {DialogProps}
diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx
index 5ed22b2d9c1..bc0a1aabe53 100644
--- a/packages/styled-react/src/experimental.tsx
+++ b/packages/styled-react/src/experimental.tsx
@@ -1 +1,3 @@
-export {Dialog, PageHeader, Table, Tooltip, UnderlinePanels} from '@primer/react/experimental'
+export {Dialog} from './components/Dialog'
+
+export {PageHeader, Table, Tooltip, UnderlinePanels} from '@primer/react/experimental'
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index bb1405345f0..9266a753fb1 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -2,7 +2,8 @@ import {
   type BetterSystemStyleObject,
   Box,
   type BoxProps,
-  type SxProp,
+  Dialog as PrimerDialog,
+  type DialogProps as PrimerDialogProps,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -24,6 +25,8 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
+import type {SxProp} from './sx'
+import {Dialog} from './components/Dialog'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -65,7 +68,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {StateLabel, SubNav, ToggleSwitch}
+export {Dialog, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -79,7 +82,6 @@ export {
   CircleBadge,
   CounterLabel,
   Details,
-  Dialog,
   Flash,
   FormControl,
   Header,
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
new file mode 100644
index 00000000000..e3ff0277f10
--- /dev/null
+++ b/packages/styled-react/src/sx.ts
@@ -0,0 +1,8 @@
+import css from '@styled-system/css'
+import type {SxProp} from '@primer/react'
+
+export const sx = (props: SxProp) => {
+  return css(props.sx)
+}
+
+export type {SxProp}

From 1f09e57eb9d3b4aa368da3a8aa67692872859b37 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 9 Sep 2025 12:03:10 -0500
Subject: [PATCH 02/11] chore: add changeset

---
 .changeset/sweet-results-smell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sweet-results-smell.md

diff --git a/.changeset/sweet-results-smell.md b/.changeset/sweet-results-smell.md
new file mode 100644
index 00000000000..63155480051
--- /dev/null
+++ b/.changeset/sweet-results-smell.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `sx` from the Dialog component and sub-components

From 19b07414c57fa67f00f691079e53e1b6468d792c Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 11 Sep 2025 19:22:51 -0400
Subject: [PATCH 03/11] fixes typescript errors, removes Dialog's 'sx' prop dev
 stories

---
 .../react/src/Dialog/Dialog.dev.stories.tsx   | 107 ------------------
 .../src/Dialog/Dialog.features.stories.tsx    |   4 +-
 2 files changed, 2 insertions(+), 109 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.dev.stories.tsx b/packages/react/src/Dialog/Dialog.dev.stories.tsx
index abf3f391772..2cb2a5134e1 100644
--- a/packages/react/src/Dialog/Dialog.dev.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.dev.stories.tsx
@@ -87,113 +87,6 @@ export const WithCss = ({width, height, subtitle}: DialogStoryProps) => {
   )
 }
 
-function SxHeader({title, subtitle, dialogLabelId}: React.PropsWithChildren<DialogProps & {dialogLabelId: string}>) {
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Dialog.Header sx={{color: 'accent.emphasis'}}>
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-      </Dialog.Header>
-    )
-  }
-  return null
-}
-function SxBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{color: 'danger.emphasis'}}>{children}</Dialog.Body>
-}
-function SxFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{fontFamily: 'Times New Roman'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithSx = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={SxHeader}
-          renderBody={SxBody}
-          renderFooter={SxFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'},
-          ]}
-          sx={{borderColor: 'accent.emphasis', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-function SxAndCssHeader({
-  title,
-  subtitle,
-  dialogLabelId,
-}: React.PropsWithChildren<DialogProps & {dialogLabelId: string}>) {
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Dialog.Header sx={{color: 'accent.emphasis'}} className="testCustomClassnameColor">
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-      </Dialog.Header>
-    )
-  }
-  return null
-}
-function SxAndCssBody({children}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Body sx={{color: 'danger.emphasis'}} className="testCustomClassnameColor">
-      {children}
-    </Dialog.Body>
-  )
-}
-function SxAndCssFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{fontFamily: 'Times New Roman'}} className="testCustomClassnameMono">
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithSxAndCss = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={SxAndCssHeader}
-          renderBody={SxAndCssBody}
-          renderFooter={SxAndCssFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'},
-          ]}
-          sx={{borderColor: 'border.accent', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
-          className="testCustomClassnameBorder"
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
 export const WithScrollBody = () => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
diff --git a/packages/react/src/Dialog/Dialog.features.stories.tsx b/packages/react/src/Dialog/Dialog.features.stories.tsx
index 01a38d8e1f2..5f67b70948d 100644
--- a/packages/react/src/Dialog/Dialog.features.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.features.stories.tsx
@@ -79,11 +79,11 @@ function CustomHeader({
   return null
 }
 function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+  return <Dialog.Body style={{backgroundColor: 'var(--bgColor-danger-muted)'}}>{children}</Dialog.Body>
 }
 function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
   return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
+    <Dialog.Footer style={{backgroundColor: 'var(--bgColor-attention-muted)'}}>
       {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
     </Dialog.Footer>
   )

From 327e21e4b6e6c0dc86ba6e27862a074f24f9baef Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 12 Sep 2025 13:46:49 -0400
Subject: [PATCH 04/11] rm forgotten comment

---
 packages/react/src/Dialog/Dialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 54a56ac4e69..9bfacac1238 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -349,7 +349,6 @@ Header.displayName = 'Dialog.Header'
 
 type StyledTitleProps = React.ComponentProps<'h1'>
 
-// TODO: get rid of typecasting `forwardRef`
 const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
   return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
 })

From d61ebbb9029b4e73d1d04653120cc408f8add4bc Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 12 Sep 2025 14:17:14 -0400
Subject: [PATCH 05/11] rm outdated VRTs

---
 e2e/components/Dialog.test.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/e2e/components/Dialog.test.ts b/e2e/components/Dialog.test.ts
index 84365d50f31..f622e770b35 100644
--- a/e2e/components/Dialog.test.ts
+++ b/e2e/components/Dialog.test.ts
@@ -27,18 +27,6 @@ const stories = [
     title: 'Position sidesheet',
     id: 'components-dialog-features--side-sheet',
   },
-  {
-    title: 'Dev: With Css',
-    id: 'components-dialog-dev--with-css',
-  },
-  {
-    title: 'Dev: With Sx',
-    id: 'components-dialog-dev--with-sx',
-  },
-  {
-    title: 'Dev: With Sx And Css',
-    id: 'components-dialog-dev--with-sx-and-css',
-  },
 ] as const
 
 test.describe('Dialog', () => {

From 51cfe0a37450c5918e602f1c9496e7ac0124eeb0 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 17:08:29 -0500
Subject: [PATCH 06/11] fix: add automatic runtime to babel config for react

---
 packages/styled-react/rollup.config.js | 2 +-
 packages/styled-react/src/index.tsx    | 2 +-
 packages/styled-react/src/sx.ts        | 9 +--------
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js
index 3d8bd571154..f9a5266988b 100644
--- a/packages/styled-react/rollup.config.js
+++ b/packages/styled-react/rollup.config.js
@@ -21,7 +21,7 @@ export default defineConfig({
       tsconfig: 'tsconfig.build.json',
     }),
     babel({
-      presets: ['@babel/preset-typescript', '@babel/preset-react'],
+      presets: ['@babel/preset-typescript', ['@babel/preset-react', {runtime: 'automatic'}]],
       extensions: ['.ts', '.tsx'],
       babelHelpers: 'bundled',
     }),
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 4273fec0667..b97b36cf648 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -14,7 +14,7 @@ import {
   type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps,
   type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps,
 } from '@primer/react'
-import React, {forwardRef, type PropsWithChildren} from 'react'
+import {forwardRef, type PropsWithChildren} from 'react'
 import type {
   BackgroundProps,
   BorderProps,
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
index e3ff0277f10..e706676100f 100644
--- a/packages/styled-react/src/sx.ts
+++ b/packages/styled-react/src/sx.ts
@@ -1,8 +1 @@
-import css from '@styled-system/css'
-import type {SxProp} from '@primer/react'
-
-export const sx = (props: SxProp) => {
-  return css(props.sx)
-}
-
-export type {SxProp}
+export {sx, type SxProp} from '@primer/react'

From 9ca01f541294b9f88009e615b2ce5a0d7407e6e9 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 17:33:08 -0500
Subject: [PATCH 07/11] chore: try using Box instead of styled.div wrapper

---
 packages/styled-react/src/components/Box.tsx    |  1 +
 packages/styled-react/src/components/Dialog.tsx | 16 ++++++----------
 packages/styled-react/src/index.tsx             |  4 ++--
 3 files changed, 9 insertions(+), 12 deletions(-)
 create mode 100644 packages/styled-react/src/components/Box.tsx

diff --git a/packages/styled-react/src/components/Box.tsx b/packages/styled-react/src/components/Box.tsx
new file mode 100644
index 00000000000..3694e3b630c
--- /dev/null
+++ b/packages/styled-react/src/components/Box.tsx
@@ -0,0 +1 @@
+export {Box, type BoxProps} from '@primer/react'
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 348b36d1a58..965878e7877 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,35 +1,31 @@
 import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps, DialogHeaderProps as PrimerDialogHeaderProps} from '@primer/react'
-import styled from 'styled-components'
-import {sx} from '../sx'
+import {Box} from './Box'
 import type {SxProp} from '../sx'
 import {forwardRef, type PropsWithChildren} from 'react'
 
-const Wrapper = styled.div<SxProp>`
-  ${sx}
-`
-
 type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp
 
 const DialogImpl = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
-  return <Wrapper as={PrimerDialog} ref={ref} {...props} />
+  // @ts-expect-error - PrimerDialog is not recognized as a valid component type
+  return <Box as={PrimerDialog} ref={ref} {...props} />
 })
 
 type DialogHeaderProps = PropsWithChildren<PrimerDialogHeaderProps> & SxProp
 
 const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
   // @ts-expect-error - PrimerDialog.Header is not recognized as a valid component type
-  return <Wrapper as={PrimerDialog.Header} ref={ref} {...props} />
+  return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 
 const DialogBody = forwardRef<HTMLDivElement, DialogProps>(function DialogBody(props, ref) {
   // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
-  return <Wrapper as={PrimerDialog.Body} ref={ref} {...props} />
+  return <Box as={PrimerDialog.Body} ref={ref} {...props} />
 })
 
 const DialogFooter = forwardRef<HTMLDivElement, DialogProps>(function DialogFooter(props, ref) {
   // @ts-expect-error - PrimerDialog.Footer is not recognized as a valid component type
-  return <Wrapper as={PrimerDialog.Footer} ref={ref} {...props} />
+  return <Box as={PrimerDialog.Footer} ref={ref} {...props} />
 })
 
 const Dialog = Object.assign(DialogImpl, {
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index b97b36cf648..64916dbf945 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -28,7 +28,6 @@ import type {
   TypographyProps,
 } from 'styled-system'
 import type {SxProp} from './sx'
-import {Dialog} from './components/Dialog'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -91,7 +90,8 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {Dialog, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {Dialog, type DialogProps} from './components/Dialog'
+export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,

From aa70b545563b3d97799f1be9e0727d73807d0325 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 17:35:47 -0500
Subject: [PATCH 08/11] fix: update types to match original implementation

---
 packages/styled-react/src/components/Dialog.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 965878e7877..39b4a767ecb 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -18,13 +18,16 @@ const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function Dial
   return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 
-const DialogBody = forwardRef<HTMLDivElement, DialogProps>(function DialogBody(props, ref) {
+type StyledBodyProps = React.ComponentProps<'div'>
+
+const DialogBody = forwardRef<HTMLDivElement, StyledBodyProps>(function DialogBody(props, ref) {
   // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
   return <Box as={PrimerDialog.Body} ref={ref} {...props} />
 })
 
-const DialogFooter = forwardRef<HTMLDivElement, DialogProps>(function DialogFooter(props, ref) {
-  // @ts-expect-error - PrimerDialog.Footer is not recognized as a valid component type
+type StyledFooterProps = React.ComponentProps<'div'>
+
+const DialogFooter = forwardRef<HTMLDivElement, StyledFooterProps>(function DialogFooter(props, ref) {
   return <Box as={PrimerDialog.Footer} ref={ref} {...props} />
 })
 

From b3b1712ca7ee50d7d447d1916a812f95a393f8b1 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 17:42:59 -0500
Subject: [PATCH 09/11] chore: fix types for dialog and update tests

---
 .../src/__tests__/primer-react.browser.test.tsx            | 7 ++-----
 packages/styled-react/src/components/Dialog.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index a31f8c70a90..e034df9e4b1 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -168,10 +168,7 @@ describe('@primer/react', () => {
 
   test('Dialog.Body supports `sx` prop', () => {
     render(
-      <Dialog
-        onClose={() => {}}
-        renderBody={props => <Dialog.Body {...props} data-testid="component" sx={{background: 'red'}} />}
-      />,
+      <Dialog onClose={() => {}} renderBody={() => <Dialog.Body data-testid="component" sx={{background: 'red'}} />} />,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
@@ -180,7 +177,7 @@ describe('@primer/react', () => {
     render(
       <Dialog
         onClose={() => {}}
-        renderFooter={props => <Dialog.Footer {...props} data-testid="component" sx={{background: 'red'}} />}
+        renderFooter={() => <Dialog.Footer data-testid="component" sx={{background: 'red'}} />}
       />,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 39b4a767ecb..8686a60fda8 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -18,14 +18,14 @@ const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function Dial
   return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 
-type StyledBodyProps = React.ComponentProps<'div'>
+type StyledBodyProps = React.ComponentProps<'div'> & SxProp
 
 const DialogBody = forwardRef<HTMLDivElement, StyledBodyProps>(function DialogBody(props, ref) {
   // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
   return <Box as={PrimerDialog.Body} ref={ref} {...props} />
 })
 
-type StyledFooterProps = React.ComponentProps<'div'>
+type StyledFooterProps = React.ComponentProps<'div'> & SxProp
 
 const DialogFooter = forwardRef<HTMLDivElement, StyledFooterProps>(function DialogFooter(props, ref) {
   return <Box as={PrimerDialog.Footer} ref={ref} {...props} />

From 193e821382ff569665bdd2ab9439708e029ee9ac Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Thu, 18 Sep 2025 11:18:04 -0500
Subject: [PATCH 10/11] fix: add Dialog.Buttons to export, fix DialogHeader
 types

---
 packages/styled-react/src/components/Dialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 8686a60fda8..0330b633652 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -2,7 +2,7 @@ import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps, DialogHeaderProps as PrimerDialogHeaderProps} from '@primer/react'
 import {Box} from './Box'
 import type {SxProp} from '../sx'
-import {forwardRef, type PropsWithChildren} from 'react'
+import {forwardRef, type ComponentPropsWithoutRef, type PropsWithChildren} from 'react'
 
 type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp
 
@@ -11,10 +11,9 @@ const DialogImpl = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props
   return <Box as={PrimerDialog} ref={ref} {...props} />
 })
 
-type DialogHeaderProps = PropsWithChildren<PrimerDialogHeaderProps> & SxProp
+type DialogHeaderProps = ComponentPropsWithoutRef<'div'> & SxProp
 
 const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
-  // @ts-expect-error - PrimerDialog.Header is not recognized as a valid component type
   return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 
@@ -32,6 +31,7 @@ const DialogFooter = forwardRef<HTMLDivElement, StyledFooterProps>(function Dial
 })
 
 const Dialog = Object.assign(DialogImpl, {
+  Buttons: PrimerDialog.Buttons,
   Header: DialogHeader,
   Body: DialogBody,
   Footer: DialogFooter,

From d3fb451290f0366c3f48ff005a68cc1f06267ad8 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Thu, 18 Sep 2025 11:25:56 -0500
Subject: [PATCH 11/11] chore: fix eslint and type errors

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx    | 2 +-
 packages/styled-react/src/components/Dialog.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index e034df9e4b1..8e97615105b 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -160,7 +160,7 @@ describe('@primer/react', () => {
     render(
       <Dialog
         onClose={() => {}}
-        renderHeader={props => <Dialog.Header {...props} data-testid="component" sx={{background: 'red'}} />}
+        renderHeader={() => <Dialog.Header data-testid="component" sx={{background: 'red'}} />}
       />,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 0330b633652..827be448318 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,5 +1,5 @@
 import {Dialog as PrimerDialog} from '@primer/react'
-import type {DialogProps as PrimerDialogProps, DialogHeaderProps as PrimerDialogHeaderProps} from '@primer/react'
+import type {DialogProps as PrimerDialogProps} from '@primer/react'
 import {Box} from './Box'
 import type {SxProp} from '../sx'
 import {forwardRef, type ComponentPropsWithoutRef, type PropsWithChildren} from 'react'