From a3f4b1e291b5c9a703d0ddca8da72cb1c540721d Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 11:36:19 -0500
Subject: [PATCH 01/13] feat(Heading): remove support for sx prop

---
 packages/react/src/Heading/Heading.docs.json     |  5 -----
 .../src/Heading/Heading.features.stories.tsx     | 11 -----------
 packages/react/src/Heading/Heading.tsx           | 16 +---------------
 packages/styled-react/src/components/Box.tsx     |  1 +
 packages/styled-react/src/components/Heading.tsx | 14 ++++++++++++++
 packages/styled-react/src/index.tsx              |  2 +-
 packages/styled-react/src/sx.ts                  |  1 +
 7 files changed, 18 insertions(+), 32 deletions(-)
 create mode 100644 packages/styled-react/src/components/Box.tsx
 create mode 100644 packages/styled-react/src/components/Heading.tsx
 create mode 100644 packages/styled-react/src/sx.ts

diff --git a/packages/react/src/Heading/Heading.docs.json b/packages/react/src/Heading/Heading.docs.json
index eda0b578973..85f20e94203 100644
--- a/packages/react/src/Heading/Heading.docs.json
+++ b/packages/react/src/Heading/Heading.docs.json
@@ -6,11 +6,6 @@
   "stories": [],
   "importPath": "@primer/react",
   "props": [
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "as",
       "type": "React.ElementType",
diff --git a/packages/react/src/Heading/Heading.features.stories.tsx b/packages/react/src/Heading/Heading.features.stories.tsx
index 38486183286..5f8b4bb091c 100644
--- a/packages/react/src/Heading/Heading.features.stories.tsx
+++ b/packages/react/src/Heading/Heading.features.stories.tsx
@@ -5,17 +5,6 @@ export default {
   title: 'Components/Heading/Features',
 }
 
-export const TestSx: StoryFn<typeof Heading> = () => (
-  <Heading
-    sx={{
-      fontSize: 2,
-      fontWeight: 'normal',
-    }}
-  >
-    Heading with sx override
-  </Heading>
-)
-
 export const Small: StoryFn<typeof Heading> = () => <Heading variant="small">Small heading</Heading>
 
 export const Medium: StoryFn<typeof Heading> = () => <Heading variant="medium">Medium heading</Heading>
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 3064d1b82f3..1388abdc46c 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -1,16 +1,14 @@
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import type {SxProp} from '../sx'
 import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './Heading.module.css'
-import Box from '../Box'
 
 type StyledHeadingProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   variant?: 'large' | 'medium' | 'small'
-} & SxProp
+}
 
 const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)
@@ -33,18 +31,6 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
     }, [innerRef])
   }
 
-  if (props.sx) {
-    return (
-      <Box
-        as={Component}
-        className={clsx(className, classes.Heading)}
-        data-variant={variant}
-        {...props}
-        // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
-        ref={innerRef}
-      />
-    )
-  }
   return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
 }) as PolymorphicForwardRefComponent<'h2', StyledHeadingProps>
 
diff --git a/packages/styled-react/src/components/Box.tsx b/packages/styled-react/src/components/Box.tsx
new file mode 100644
index 00000000000..34c761f9363
--- /dev/null
+++ b/packages/styled-react/src/components/Box.tsx
@@ -0,0 +1 @@
+export {Box} from '@primer/react'
diff --git a/packages/styled-react/src/components/Heading.tsx b/packages/styled-react/src/components/Heading.tsx
new file mode 100644
index 00000000000..3a1c5307d5e
--- /dev/null
+++ b/packages/styled-react/src/components/Heading.tsx
@@ -0,0 +1,14 @@
+import {Heading as PrimerHeading} from '@primer/react'
+import type {HeadingProps as PrimerHeadingProps} from '@primer/react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {ForwardRefComponent} from '../polymorphic'
+import type {SxProp} from '../sx'
+
+type HeadingProps = PrimerHeadingProps & SxProp
+
+const Heading = forwardRef(function Heading(props, ref) {
+  return <Box ref={ref} as={PrimerHeading} {...props} />
+}) as ForwardRefComponent<'h2', HeadingProps>
+
+export {Heading, type HeadingProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 66763c5389a..7ac684eb4d0 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -90,6 +90,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
+export {Heading} from './components/Heading'
 export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
@@ -108,7 +109,6 @@ export {
   Flash,
   FormControl,
   Header,
-  Heading,
   IconButton,
   Label,
   Link,
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
new file mode 100644
index 00000000000..01f43b165e3
--- /dev/null
+++ b/packages/styled-react/src/sx.ts
@@ -0,0 +1 @@
+export type {SxProp} from '@primer/react'

From ecebfa689fe1b195ed854cb500d1f0165ffefab0 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 11:36:46 -0500
Subject: [PATCH 02/13] chore: add changeset

---
 .changeset/weak-papers-drive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/weak-papers-drive.md

diff --git a/.changeset/weak-papers-drive.md b/.changeset/weak-papers-drive.md
new file mode 100644
index 00000000000..e9dcc746de1
--- /dev/null
+++ b/.changeset/weak-papers-drive.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `sx` from the `Heading` component

From fdf7112b317903956ccc70ebdf04e3058604d622 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 12:23:52 -0500
Subject: [PATCH 03/13] refactor: remove upstream sx usage on Heading

---
 .../src/Heading/__tests__/Heading.test.tsx    | 106 ------------------
 .../src/PageHeader/PageHeader.dev.stories.tsx |  50 ---------
 packages/react/src/PageHeader/PageHeader.tsx  |  19 +---
 packages/react/src/Popover/Popover.figma.tsx  |   8 +-
 4 files changed, 3 insertions(+), 180 deletions(-)

diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index 7b9836e3af6..c1acbd0c5d4 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -38,89 +38,6 @@ describe('Heading', () => {
     expect(heading.tagName).toBe('H2')
   })
 
-  it('respects fontWeight', () => {
-    const {container} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontWeight: 'bold'}} />
-      </ThemeProvider>,
-    )
-    const heading = container.firstChild as HTMLElement
-    expect(heading).toHaveStyle(`font-weight: ${theme.fontWeights.bold}`)
-
-    const {container: container2} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontWeight: 'normal'}} />
-      </ThemeProvider>,
-    )
-    const heading2 = container2.firstChild as HTMLElement
-    expect(heading2).toHaveStyle(`font-weight: ${theme.fontWeights.normal}`)
-
-    const {container: container3} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontWeight: 'semibold'}} />
-      </ThemeProvider>,
-    )
-    const heading3 = container3.firstChild as HTMLElement
-    expect(heading3).toHaveStyle(`font-weight: ${theme.fontWeights.semibold}`)
-
-    const {container: container4} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontWeight: 'light'}} />
-      </ThemeProvider>,
-    )
-    const heading4 = container4.firstChild as HTMLElement
-    expect(heading4).toHaveStyle(`font-weight: ${theme.fontWeights.light}`)
-  })
-
-  it('respects lineHeight', () => {
-    const {container} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{lineHeight: 'normal'}} />
-      </ThemeProvider>,
-    )
-    const heading = container.firstChild as HTMLElement
-    ///These sx tests should go away right?
-    expect(heading).toHaveStyle(`line-height: 48px`)
-
-    const {container: container2} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{lineHeight: 'condensed'}} />
-      </ThemeProvider>,
-    )
-    const heading2 = container2.firstChild as HTMLElement
-    expect(heading2).toHaveStyle(`line-height: 40px`)
-
-    const {container: container3} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{lineHeight: 'condensedUltra'}} />
-      </ThemeProvider>,
-    )
-    const heading3 = container3.firstChild as HTMLElement
-    expect(heading3).toHaveStyle(`line-height: 32px`)
-  })
-
-  it('respects fontFamily="mono"', () => {
-    const {container} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontFamily: 'mono'}} />
-      </ThemeProvider>,
-    )
-    const heading = container.firstChild as HTMLElement
-    expect(heading).toHaveStyle(`font-family: ${theme.fonts.mono}`)
-  })
-
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      const {container} = render(
-        <ThemeProvider theme={theme}>
-          <Heading sx={{fontSize}} />
-        </ThemeProvider>,
-      )
-      const heading = container.firstChild as HTMLElement
-      expect(heading).toHaveStyle(`font-size: ${fontSize}`)
-    }
-  })
-
   it('logs a warning when trying to render invalid "as" prop', () => {
     const consoleSpy = vi.spyOn(globalThis.console, 'warn').mockImplementation(() => {})
 
@@ -130,15 +47,6 @@ describe('Heading', () => {
 
     consoleSpy.mockRestore()
   })
-  it('respects the "fontStyle" prop', () => {
-    const {container} = render(
-      <ThemeProvider theme={theme}>
-        <Heading sx={{fontStyle: 'italic'}} />
-      </ThemeProvider>,
-    )
-    const heading = container.firstChild as HTMLElement
-    expect(heading).toHaveStyle('font-style: italic')
-  })
 
   // How can we test for generated class names?
   it.skip('should only include css modules class', () => {
@@ -148,18 +56,4 @@ describe('Heading', () => {
     // for this component
     expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/)
   })
-
-  it('should support overrides with sx if provided', () => {
-    render(
-      <Heading
-        sx={{
-          fontWeight: '900',
-        }}
-      >
-        test
-      </Heading>,
-    )
-
-    expect(screen.getByText('test')).toHaveStyle('font-weight: 900')
-  })
 })
diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
index 66fc9fdd471..ed30893f569 100644
--- a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
@@ -47,53 +47,3 @@ export const LargeVariantWithMultilineTitle = () => (
     </PageHeader>
   </div>
 )
-
-export const ArrayTypeFontSizeOnTitle = () => (
-  <div className={classes.Container}>
-    <PageHeader role="banner" aria-label="Issue Title">
-      <PageHeader.TitleArea>
-        <PageHeader.Title
-          sx={{
-            lineHeight: '1.25',
-            fontWeight: 'normal',
-            fontSize: ['26px', '26px', 'var(--text-title-size-large, 32px)', 'var(--text-title-size-large, 32px)'], // it doesn't support this format right now.
-          }}
-        >
-          Issue Title
-        </PageHeader.Title>
-      </PageHeader.TitleArea>
-    </PageHeader>
-  </div>
-)
-
-export const ThemeBaseFontSizeOnTitle = () => (
-  <div className={classes.Container}>
-    <PageHeader role="banner" aria-label="Issue Title">
-      <PageHeader.TitleArea>
-        <PageHeader.Title
-          sx={{
-            fontSize: 8,
-          }}
-        >
-          Issue Title
-        </PageHeader.Title>
-      </PageHeader.TitleArea>
-    </PageHeader>
-  </div>
-)
-
-export const StringTypeFontSizeOnTitle = () => (
-  <div className={classes.Container}>
-    <PageHeader role="banner" aria-label="Issue Title">
-      <PageHeader.TitleArea>
-        <PageHeader.Title
-          sx={{
-            fontSize: '56px',
-          }}
-        >
-          Issue Title
-        </PageHeader.Title>
-      </PageHeader.TitleArea>
-    </PageHeader>
-  </div>
-)
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index f78a6890b12..64630b9b5b9 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -313,30 +313,15 @@ const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 
 export type TitleProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-} & ChildrenPropTypes
-
-const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
-  children,
-  className,
-  sx: sxProp = defaultSxProp,
-  hidden = false,
-  as = 'h2',
-}) => {
-  const style: CSSCustomProperties = {}
-  // @ts-ignore sxProp can have color attribute
-  const {fontSize, lineHeight, fontWeight} = sxProp
-  if (fontSize) style['--custom-font-size'] = fontSize
-  if (lineHeight) style['--custom-line-height'] = lineHeight
-  if (fontWeight) style['--custom-font-weight'] = fontWeight
+} & Omit<ChildrenPropTypes, 'sx'>
 
+const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, className, hidden = false, as = 'h2'}) => {
   return (
     <Heading
       className={clsx(classes.Title, className)}
       data-component="PH_Title"
       data-hidden={hidden}
       as={as}
-      style={style}
-      sx={sxProp}
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
diff --git a/packages/react/src/Popover/Popover.figma.tsx b/packages/react/src/Popover/Popover.figma.tsx
index 4eb8d307373..289b7a1be3c 100644
--- a/packages/react/src/Popover/Popover.figma.tsx
+++ b/packages/react/src/Popover/Popover.figma.tsx
@@ -24,13 +24,7 @@ figma.connect(Popover, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Prim
   example: ({caret, heading, body, action}) => (
     <Popover caret={caret}>
       <Popover.Content>
-        <Heading
-          sx={{
-            fontSize: 2,
-          }}
-        >
-          {heading}
-        </Heading>
+        <Heading>{heading}</Heading>
         <Text as="p">{body}</Text>
         {action}
       </Popover.Content>

From 3d7d2d570e2245bd6294495799b975883f439acc Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 12:25:41 -0500
Subject: [PATCH 04/13] docs: remove sx from PageHeader.docs.json for
 PageHeader.Title

---
 packages/react/src/PageHeader/PageHeader.docs.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/PageHeader/PageHeader.docs.json b/packages/react/src/PageHeader/PageHeader.docs.json
index 4ead3c802ed..2d22c8f7a6d 100644
--- a/packages/react/src/PageHeader/PageHeader.docs.json
+++ b/packages/react/src/PageHeader/PageHeader.docs.json
@@ -273,11 +273,6 @@
           "defaultValue": "false",
           "description": "Whether the content is hidden."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "as",
           "type": "React.ElementType",
@@ -434,4 +429,5 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
+

From 699326f9fb83ebfb5e97af0001f2125c757a4031 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 16 Sep 2025 17:37:56 -0500
Subject: [PATCH 05/13] chore: remove unused imports

---
 .../src/Heading/__tests__/Heading.test.tsx    | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index c1acbd0c5d4..573bc2405e9 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -1,30 +1,6 @@
 import {describe, expect, it, vi} from 'vitest'
 import {Heading} from '../..'
 import {render, screen} from '@testing-library/react'
-import ThemeProvider from '../../ThemeProvider'
-
-const theme = {
-  breakpoints: ['400px', '640px', '960px', '1280px'],
-  colors: {
-    green: ['#010', '#020', '#030', '#040', '#050', '#060'],
-  },
-  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
-  fonts: {
-    normal: 'Helvetica,sans-serif',
-    mono: 'Consolas,monospace',
-  },
-  lineHeights: {
-    normal: 1.5,
-    condensed: 1.25,
-    condensedUltra: 1,
-  },
-  fontWeights: {
-    light: '300',
-    normal: '400',
-    semibold: '500',
-    bold: '600',
-  },
-}
 
 describe('Heading', () => {
   it('should support `className` on the outermost element', () => {

From 6b87e9b0aa01e330508434f2cb2bd8a547f7ef18 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 15:25:37 -0400
Subject: [PATCH 06/13] fix styled component export

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

diff --git a/packages/styled-react/src/components/Heading.tsx b/packages/styled-react/src/components/Heading.tsx
index 3a1c5307d5e..9e4f2f4d584 100644
--- a/packages/styled-react/src/components/Heading.tsx
+++ b/packages/styled-react/src/components/Heading.tsx
@@ -1,14 +1,15 @@
 import {Heading as PrimerHeading} from '@primer/react'
-import type {HeadingProps as PrimerHeadingProps} from '@primer/react'
-import {forwardRef} from 'react'
-import {Box} from './Box'
+import {sx, type HeadingProps as PrimerHeadingProps} from '@primer/react'
 import type {ForwardRefComponent} from '../polymorphic'
 import type {SxProp} from '../sx'
+import styled from 'styled-components'
 
 type HeadingProps = PrimerHeadingProps & SxProp
 
-const Heading = forwardRef(function Heading(props, ref) {
-  return <Box ref={ref} as={PrimerHeading} {...props} />
-}) as ForwardRefComponent<'h2', HeadingProps>
+const Heading: ForwardRefComponent<'h2', HeadingProps> = styled(PrimerHeading).withConfig({
+  shouldForwardProp: prop => (prop as keyof HeadingProps) !== 'sx',
+})<HeadingProps>`
+  ${sx}
+`
 
 export {Heading, type HeadingProps}

From a6dbeb16681e8b6707ecf324b5b0ed1d6c65b8c1 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 15:34:38 -0400
Subject: [PATCH 07/13] remove unused eslint bypass

---
 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 640ab179e69..be492b28900 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -63,7 +63,6 @@ type StyledProps = SxProp &
 type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 
 function RelativeTime(props: RelativeTimeProps) {
-  // @ts-expect-error the types for Box are not correctly inferred here
   return <Box as={PrimerRelativeTime} {...props} />
 }
 

From 23ef5afe28b9500eea59c4f31874dea56e793783 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 15:40:10 -0400
Subject: [PATCH 08/13] re-add eslint ignore

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

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 7db4afadc08..0b26d02cd18 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -63,6 +63,7 @@ type StyledProps = SxProp &
 type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 
 function RelativeTime(props: RelativeTimeProps) {
+  // @ts-expect-error the types for Box are not correctly inferred here
   return <Box as={PrimerRelativeTime} {...props} />
 }
 

From 21d567b1089915ae52bfb82eb210ca5ac4baef0a Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 15:46:10 -0400
Subject: [PATCH 09/13] fix type-check

---
 packages/react/src/Header/Header.dev.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/Header/Header.dev.module.css b/packages/react/src/Header/Header.dev.module.css
index 4cc998f661c..cec71865407 100644
--- a/packages/react/src/Header/Header.dev.module.css
+++ b/packages/react/src/Header/Header.dev.module.css
@@ -11,3 +11,7 @@
 .HeaderDevLink {
   color: var(--color-prettylights-syntax-carriage-return-text);
 }
+
+.Icon {
+  margin-right: var(--base-size-8);
+}

From da84eb7d28d01bb806643b0b6cfeccaa359498f2 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 17:35:14 -0400
Subject: [PATCH 10/13] export everything from PageHeader

---
 .../styled-react/src/components/PageHeader.tsx     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx
index 739c677c3e1..ccd053caf8c 100644
--- a/packages/styled-react/src/components/PageHeader.tsx
+++ b/packages/styled-react/src/components/PageHeader.tsx
@@ -64,8 +64,20 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
 }
 
 const PageHeader = Object.assign(PageHeaderImpl, {
-  Actions: PageHeaderActions,
+  ContextArea: PrimerPageHeader.ContextArea,
+  ParentLink: PrimerPageHeader.ParentLink,
+  ContextBar: PrimerPageHeader.ContextBar,
+  TitleArea: PrimerPageHeader.TitleArea,
+  ContextAreaActions: PrimerPageHeader.ContextAreaActions,
+  LeadingAction: PrimerPageHeader.LeadingAction,
+  Breadcrumbs: PrimerPageHeader.Breadcrumbs,
+  LeadingVisual: PrimerPageHeader.LeadingVisual,
   Title: PageHeaderTitle,
+  TrailingVisual: PrimerPageHeader.TrailingVisual,
+  TrailingAction: PrimerPageHeader.TrailingAction,
+  Actions: PageHeaderActions,
+  Description: PrimerPageHeader.Description,
+  Navigation: PrimerPageHeader.Navigation,
 })
 
 export {PageHeader}

From 012855f27479cd472c66a61049adba4ec30988f2 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 22 Sep 2025 17:43:35 -0400
Subject: [PATCH 11/13] make linter happy

---
 .../styled-react/src/components/PageHeader.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx
index ccd053caf8c..f7d3b45a073 100644
--- a/packages/styled-react/src/components/PageHeader.tsx
+++ b/packages/styled-react/src/components/PageHeader.tsx
@@ -63,7 +63,22 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   return <Box {...rest} as={PrimerPageHeader.Title} style={style} sx={sx} />
 }
 
-const PageHeader = Object.assign(PageHeaderImpl, {
+const PageHeader: typeof PageHeaderImpl & {
+  ContextArea: typeof PrimerPageHeader.ContextArea
+  ParentLink: typeof PrimerPageHeader.ParentLink
+  ContextBar: typeof PrimerPageHeader.ContextBar
+  TitleArea: typeof PrimerPageHeader.TitleArea
+  ContextAreaActions: typeof PrimerPageHeader.ContextAreaActions
+  LeadingAction: typeof PrimerPageHeader.LeadingAction
+  Breadcrumbs: typeof PrimerPageHeader.Breadcrumbs
+  LeadingVisual: typeof PrimerPageHeader.LeadingVisual
+  Title: typeof PageHeaderTitle
+  TrailingVisual: typeof PrimerPageHeader.TrailingVisual
+  TrailingAction: typeof PrimerPageHeader.TrailingAction
+  Actions: typeof PageHeaderActions
+  Description: typeof PrimerPageHeader.Description
+  Navigation: typeof PrimerPageHeader.Navigation
+} = Object.assign(PageHeaderImpl, {
   ContextArea: PrimerPageHeader.ContextArea,
   ParentLink: PrimerPageHeader.ParentLink,
   ContextBar: PrimerPageHeader.ContextBar,

From 89d1da6e6b03c39ee720dbcc700e143af9498918 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 23 Sep 2025 22:37:33 -0400
Subject: [PATCH 12/13] fix type

---
 packages/styled-react/src/components/Heading.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/styled-react/src/components/Heading.tsx b/packages/styled-react/src/components/Heading.tsx
index 46840d940a5..92c364a449b 100644
--- a/packages/styled-react/src/components/Heading.tsx
+++ b/packages/styled-react/src/components/Heading.tsx
@@ -4,9 +4,11 @@ import type {ForwardRefComponent} from '../polymorphic'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 
+type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
 type HeadingProps = PrimerHeadingProps & SxProp
 
-const Heading: ForwardRefComponent<'h2', HeadingProps> = styled(PrimerHeading).withConfig({
+const Heading: ForwardRefComponent<HeadingLevels, HeadingProps> = styled(PrimerHeading).withConfig({
   shouldForwardProp: prop => (prop as keyof HeadingProps) !== 'sx',
 })<HeadingProps>`
   ${sx}

From c6400b22e46f10fac1be6fd903bc404a883b0e3f Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 23 Sep 2025 23:26:49 -0400
Subject: [PATCH 13/13] fix type

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

diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 1388abdc46c..56c7c7ed149 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -5,8 +5,10 @@ import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './Heading.module.css'
 
+type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
 type StyledHeadingProps = {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  as?: HeadingLevels
   variant?: 'large' | 'medium' | 'small'
 }
 
@@ -32,7 +34,7 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
   }
 
   return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
-}) as PolymorphicForwardRefComponent<'h2', StyledHeadingProps>
+}) as PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>
 
 Heading.displayName = 'Heading'