From 78ef0a3b611ee5269c6d49d65f47c529211ffb32 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 10 Sep 2025 16:56:01 -0500
Subject: [PATCH 1/5] feat(Flash): remove support for sx

---
 .changeset/metal-deer-refuse.md               |  5 +++
 .../Flash/Flash.features.stories.module.css   | 18 ++++++++
 .../src/Flash/Flash.features.stories.tsx      | 42 ++++++-------------
 .../react/src/Flash/Flash.stories.module.css  | 12 ++++++
 packages/react/src/Flash/Flash.tsx            | 13 +++---
 packages/styled-react/src/index.tsx           | 12 +++++-
 6 files changed, 64 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/metal-deer-refuse.md
 create mode 100644 packages/react/src/Flash/Flash.stories.module.css

diff --git a/.changeset/metal-deer-refuse.md b/.changeset/metal-deer-refuse.md
new file mode 100644
index 00000000000..3bdef214521
--- /dev/null
+++ b/.changeset/metal-deer-refuse.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove the `sx` prop from `Flash`
diff --git a/packages/react/src/Flash/Flash.features.stories.module.css b/packages/react/src/Flash/Flash.features.stories.module.css
index c5bc932ffa1..25afbaac64b 100644
--- a/packages/react/src/Flash/Flash.features.stories.module.css
+++ b/packages/react/src/Flash/Flash.features.stories.module.css
@@ -31,4 +31,22 @@
 .Close {
   grid-area: close;
   margin-left: var(--base-size-8);
+
+  & svg {
+    margin: 0;
+    color: var(--fgColor-muted);
+  }
+}
+
+.WithIconActionDismiss {
+  display: grid;
+  grid-template-columns: min-content 1fr minmax(0, auto);
+  grid-template-rows: min-content;
+  grid-template-areas: 'visual message actions close';
+
+  @media screen and (max-width: 543.98px) {
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content;
+    grid-template-areas: 'visual message close' '. actions actions';
+  }
 }
diff --git a/packages/react/src/Flash/Flash.features.stories.tsx b/packages/react/src/Flash/Flash.features.stories.tsx
index b37bac97fc4..e5d76a03569 100644
--- a/packages/react/src/Flash/Flash.features.stories.tsx
+++ b/packages/react/src/Flash/Flash.features.stories.tsx
@@ -1,6 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
 import Flash from './Flash'
-import Octicon from '../Octicon'
 import {AlertIcon, CheckCircleIcon, InfoIcon, XIcon} from '@primer/octicons-react'
 import {Button, IconButton} from '../Button'
 import Link from '../Link'
@@ -14,14 +13,14 @@ export default {
 export const Success = () => (
   <Flash
     variant="success"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={CheckCircleIcon} aria-label="Success" />
+      <CheckCircleIcon aria-label="Success" />
     </div>
     <div className={classes.Message}>Success</div>
   </Flash>
@@ -30,14 +29,14 @@ export const Success = () => (
 export const Danger = () => (
   <Flash
     variant="danger"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Danger" />
+      <InfoIcon aria-label="Danger" />
     </div>
     <div className={classes.Message}>Danger</div>
   </Flash>
@@ -46,14 +45,14 @@ export const Danger = () => (
 export const Warning = () => (
   <Flash
     variant="warning"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={AlertIcon} aria-label="Warning" />
+      <AlertIcon aria-label="Warning" />
     </div>
     <div className={classes.Message}>Warning</div>
   </Flash>
@@ -62,14 +61,14 @@ export const Warning = () => (
 export const Full = () => (
   <Flash
     full
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>Full</div>
   </Flash>
@@ -77,7 +76,7 @@ export const Full = () => (
 
 export const WithIconAndAction = () => (
   <Flash
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateRows: 'min-content',
@@ -93,7 +92,7 @@ export const WithIconAndAction = () => (
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>
       This is a flash message with an icon and an action.
@@ -106,24 +105,9 @@ export const WithIconAndAction = () => (
 )
 
 export const WithIconActionDismiss = () => (
-  <Flash
-    sx={{
-      display: 'grid',
-      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
-      gridTemplateRows: 'min-content',
-      gridTemplateAreas: `'visual message actions close'`,
-      '@media screen and (max-width: 543.98px)': {
-        gridTemplateColumns: 'min-content 1fr',
-        gridTemplateRows: 'min-content min-content',
-        gridTemplateAreas: `
-        'visual message close'
-        '.      actions actions'
-      `,
-      },
-    }}
-  >
+  <Flash className={classes.WithIconActionDismiss}>
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>
       This is a flash message with an icon and an action.
@@ -133,7 +117,7 @@ export const WithIconActionDismiss = () => (
       <Button>Join waitlist</Button>
     </div>
     <div className={classes.Close}>
-      <IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" sx={{svg: {margin: '0', color: 'fg.muted'}}} />
+      <IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" />
     </div>
   </Flash>
 )
diff --git a/packages/react/src/Flash/Flash.stories.module.css b/packages/react/src/Flash/Flash.stories.module.css
new file mode 100644
index 00000000000..2c9b110988f
--- /dev/null
+++ b/packages/react/src/Flash/Flash.stories.module.css
@@ -0,0 +1,12 @@
+.WithIconActionDismiss {
+  display: 'grid';
+  grid-template-columns: 'min-content 1fr minmax(0, auto)';
+  grid-template-rows: 'min-content';
+  grid-template-areas: 'visual message actions close';
+
+  @media screen and (max-width: 543.98px) {
+    grid-template-columns: 'min-content 1fr';
+    grid-template-rows: 'min-content min-content';
+    grid-template-areas: 'visual message close' '. actions actions';
+  }
+}
diff --git a/packages/react/src/Flash/Flash.tsx b/packages/react/src/Flash/Flash.tsx
index 557f0e33cce..6f95ca311c1 100644
--- a/packages/react/src/Flash/Flash.tsx
+++ b/packages/react/src/Flash/Flash.tsx
@@ -1,26 +1,25 @@
 import {clsx} from 'clsx'
 import React from 'react'
-import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Flash.module.css'
 
 export type FlashProps = React.ComponentPropsWithoutRef<'div'> & {
   className?: string
   variant?: 'default' | 'warning' | 'success' | 'danger'
   full?: boolean
-} & SxProp
+}
 
-const Flash = React.forwardRef(function Flash({as, className, variant = 'default', full, sx, ...rest}, ref) {
+const Flash = React.forwardRef(function Flash(
+  {as: BaseComponent = 'div', className, variant = 'default', full, ...rest},
+  ref,
+) {
   return (
-    <BoxWithFallback
+    <BaseComponent
       {...rest}
       ref={ref}
-      as={as}
       className={clsx(classes.Flash, className)}
       data-full={full ? '' : undefined}
       data-variant={variant}
-      sx={sx}
     />
   )
 }) as PolymorphicForwardRefComponent<'div', FlashProps>
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index bb1405345f0..e533f253cae 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -3,6 +3,8 @@ import {
   Box,
   type BoxProps,
   type SxProp,
+  type FlashProps as PrimerFlashProps,
+  Flash as PrimerFlash,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -24,6 +26,7 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
+import type {ForwardRefComponent} from './polymorphic'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -37,6 +40,12 @@ type StyledProps = SxProp &
   PositionProps &
   ShadowProps
 
+type FlashProps = PrimerFlashProps & SxProp
+
+const Flash = forwardRef(function Flash(props, ref) {
+  return <Box as={PrimerFlash} ref={ref} {...props} />
+}) as ForwardRefComponent<'div', FlashProps>
+
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
@@ -65,7 +74,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {StateLabel, SubNav, ToggleSwitch}
+export {Flash, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -80,7 +89,6 @@ export {
   CounterLabel,
   Details,
   Dialog,
-  Flash,
   FormControl,
   Header,
   Heading,

From 03fbc599a131cee2295a8ea01d4d472e4ab237af Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 10 Sep 2025 17:06:48 -0500
Subject: [PATCH 2/5] chore: remove sx references from stories

---
 packages/react/src/Flash/Flash.stories.module.css    | 12 ------------
 .../SelectPanel2/SelectPanel.examples.stories.tsx    |  4 ++--
 2 files changed, 2 insertions(+), 14 deletions(-)
 delete mode 100644 packages/react/src/Flash/Flash.stories.module.css

diff --git a/packages/react/src/Flash/Flash.stories.module.css b/packages/react/src/Flash/Flash.stories.module.css
deleted file mode 100644
index 2c9b110988f..00000000000
--- a/packages/react/src/Flash/Flash.stories.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.WithIconActionDismiss {
-  display: 'grid';
-  grid-template-columns: 'min-content 1fr minmax(0, auto)';
-  grid-template-rows: 'min-content';
-  grid-template-areas: 'visual message actions close';
-
-  @media screen and (max-width: 543.98px) {
-    grid-template-columns: 'min-content 1fr';
-    grid-template-rows: 'min-content min-content';
-    grid-template-areas: 'visual message close' '. actions actions';
-  }
-}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index 26f5e1f05f8..0d81ff12f76 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -745,7 +745,7 @@ export const NestedSelection = () => {
     <>
       <h1>Nested selection</h1>
 
-      <Flash variant="warning" sx={{mb: 2}}>
+      <Flash variant="warning" style={{marginBottom: '8px'}}>
         This story is not fully accessible, do not copy it without review!
       </Flash>
 
@@ -1065,7 +1065,7 @@ const CreateNewLabelDialog = ({
         {type: 'submit', buttonType: 'primary', content: 'Save', onClick: () => formSubmitRef.current?.click()},
       ]}
     >
-      <Flash sx={{marginBottom: 2}} variant="warning">
+      <Flash style={{marginBottom: '8px'}} variant="warning">
         Note this Dialog is not accessible. Do not copy this.
       </Flash>
       <form onSubmit={onSubmit}>

From db2f5b920eb476b2a39f0fa05006a32bf03c2873 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 17 Sep 2025 12:12:17 -0500
Subject: [PATCH 3/5] refactor: fix type error, adjust polymorphic type

---
 packages/react/src/Flash/Flash.docs.json        |  5 -----
 .../src/Flash/Flash.features.stories.module.css | 13 +++++++++++++
 .../react/src/Flash/Flash.features.stories.tsx  | 17 +----------------
 packages/styled-react/src/components/Flash.tsx  | 15 +++++++++++++++
 packages/styled-react/src/index.tsx             | 12 ++----------
 packages/styled-react/src/sx.ts                 |  1 +
 6 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 packages/styled-react/src/components/Flash.tsx
 create mode 100644 packages/styled-react/src/sx.ts

diff --git a/packages/react/src/Flash/Flash.docs.json b/packages/react/src/Flash/Flash.docs.json
index 1164558d461..5b154bce1ee 100644
--- a/packages/react/src/Flash/Flash.docs.json
+++ b/packages/react/src/Flash/Flash.docs.json
@@ -48,11 +48,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"div\""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
diff --git a/packages/react/src/Flash/Flash.features.stories.module.css b/packages/react/src/Flash/Flash.features.stories.module.css
index 25afbaac64b..306f5e99bb3 100644
--- a/packages/react/src/Flash/Flash.features.stories.module.css
+++ b/packages/react/src/Flash/Flash.features.stories.module.css
@@ -38,6 +38,19 @@
   }
 }
 
+.WithIconAndAction {
+  display: grid;
+  grid-template-columns: min-content 1fr minmax(0, auto);
+  grid-template-rows: min-content;
+  grid-template-areas: 'visual message actions';
+
+  @media screen and (max-width: 543.98px) {
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content;
+    grid-template-areas: 'visual message' '. actions';
+  }
+}
+
 .WithIconActionDismiss {
   display: grid;
   grid-template-columns: min-content 1fr minmax(0, auto);
diff --git a/packages/react/src/Flash/Flash.features.stories.tsx b/packages/react/src/Flash/Flash.features.stories.tsx
index e5d76a03569..19e19123cdf 100644
--- a/packages/react/src/Flash/Flash.features.stories.tsx
+++ b/packages/react/src/Flash/Flash.features.stories.tsx
@@ -75,22 +75,7 @@ export const Full = () => (
 )
 
 export const WithIconAndAction = () => (
-  <Flash
-    style={{
-      display: 'grid',
-      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
-      gridTemplateRows: 'min-content',
-      gridTemplateAreas: `'visual message actions'`,
-      '@media screen and (max-width: 543.98px)': {
-        gridTemplateColumns: 'min-content 1fr',
-        gridTemplateRows: 'min-content min-content',
-        gridTemplateAreas: `
-        'visual message'
-        '.      actions'
-      `,
-      },
-    }}
-  >
+  <Flash className={classes.WithIconAndAction}>
     <div className={classes.Visual}>
       <InfoIcon aria-label="Info" />
     </div>
diff --git a/packages/styled-react/src/components/Flash.tsx b/packages/styled-react/src/components/Flash.tsx
new file mode 100644
index 00000000000..c4ae4624e96
--- /dev/null
+++ b/packages/styled-react/src/components/Flash.tsx
@@ -0,0 +1,15 @@
+import {type FlashProps as PrimerFlashProps, Flash as PrimerFlash} from '@primer/react'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+
+type FlashProps = PrimerFlashProps & SxProp
+
+const Flash: ForwardRefComponent<'div', FlashProps> = styled(PrimerFlash).withConfig<FlashProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+export {Flash}
+export type {FlashProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index e533f253cae..7f10163ecda 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -3,8 +3,6 @@ import {
   Box,
   type BoxProps,
   type SxProp,
-  type FlashProps as PrimerFlashProps,
-  Flash as PrimerFlash,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -26,7 +24,6 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
-import type {ForwardRefComponent} from './polymorphic'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -40,12 +37,6 @@ type StyledProps = SxProp &
   PositionProps &
   ShadowProps
 
-type FlashProps = PrimerFlashProps & SxProp
-
-const Flash = forwardRef(function Flash(props, ref) {
-  return <Box as={PrimerFlash} ref={ref} {...props} />
-}) as ForwardRefComponent<'div', FlashProps>
-
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
@@ -74,7 +65,8 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {Flash, StateLabel, SubNav, ToggleSwitch}
+export {Flash} from './components/Flash'
+export {StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
new file mode 100644
index 00000000000..e706676100f
--- /dev/null
+++ b/packages/styled-react/src/sx.ts
@@ -0,0 +1 @@
+export {sx, type SxProp} from '@primer/react'

From dadf45438ba158da582c084a81108e79c8f0efa5 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 14:19:12 -0400
Subject: [PATCH 4/5] format

---
 packages/styled-react/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index def5a17b1a8..3ca324f2baa 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -105,8 +105,8 @@ type ToggleSwitchProps = PrimerToggleSwitchProps & Omit<StyledProps, keyof Prime
 
 const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
-})  
-        
+})
+
 export {Flash} from './components/Flash'
 export {LinkButton, type LinkButtonProps, Checkbox, CounterLabel, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 

From b25c42a8274953b53e3dc36ef00c597a7e641f7d Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 15:03:10 -0400
Subject: [PATCH 5/5] format

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

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index ba0fd175e17..8c07e2d11db 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -133,7 +133,6 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
   Item: UnderlineNavItem,
 })
 
-
 export {Flash} from './components/Flash'
 
 export {