From 345fb7503a9f40e1137f5f9b8a34b6ffbf8436ba Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 18:59:41 -0400
Subject: [PATCH 1/9] chore: rmeove unnecessary sx prop migrations

---
 .../src/components/FormControl.tsx            | 27 +++++--------------
 .../src/components/PageLayout.tsx             | 18 ++-----------
 2 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/packages/styled-react/src/components/FormControl.tsx b/packages/styled-react/src/components/FormControl.tsx
index b4affd914be..1e087a44afb 100644
--- a/packages/styled-react/src/components/FormControl.tsx
+++ b/packages/styled-react/src/components/FormControl.tsx
@@ -14,30 +14,15 @@ const FormControlImpl = forwardRef<HTMLDivElement, FormControlProps>(function Fo
   return <Box ref={ref} as={PrimerFormControl} {...props} />
 })
 
-type FormControlCaptionProps = PropsWithChildren<PrimerFormControlCaptionProps> & SxProp
-const FormControlCaption = (props: FormControlCaptionProps) => {
-  return <Box as={PrimerFormControl.Caption} {...props} />
-}
-
-type FormControlValidationProps = PropsWithChildren<PrimerFormControlValidationProps> & SxProp
-
-const FormControlValidation = (props: FormControlValidationProps) => {
-  return <Box as={PrimerFormControl.Validation} {...props} />
-}
-
-const FormControlLeadingVisual = (props: PropsWithChildren<SxProp>) => {
-  return <Box as={PrimerFormControl.LeadingVisual} {...props} />
-}
-
 const FormControl = Object.assign(FormControlImpl, {
-  Caption: FormControlCaption,
-  LeadingVisual: FormControlLeadingVisual,
-  Validation: FormControlValidation,
+  Caption: PrimerFormControl.Caption,
+  LeadingVisual: PrimerFormControl.LeadingVisual,
+  Validation: PrimerFormControl.Validation,
   Label: PrimerFormControl.Label,
 }) as typeof FormControlImpl & {
-  Caption: typeof FormControlCaption
-  LeadingVisual: typeof FormControlLeadingVisual
-  Validation: typeof FormControlValidation
+  Caption: typeof PrimerFormControl.Caption
+  LeadingVisual: typeof PrimerFormControl.LeadingVisual
+  Validation: typeof PrimerFormControl.Validation
   Label: typeof PrimerFormControl.Label
 }
 
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index de4670c6528..619db31a7d1 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -27,31 +27,17 @@ const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProp
   return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
 })
 
-type PageLayoutHeaderProps = PropsWithChildren<PrimerPageLayoutHeaderProps> & SxProp
-
-const PageLayoutHeader = React.forwardRef<HTMLDivElement, PageLayoutHeaderProps>((props, ref) => {
-  // @ts-expect-error - PrimerPageLayout.Header is not recognized as a valid component type
-  return <Wrapper as={PrimerPageLayout.Header} ref={ref} {...props} />
-})
-
 type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
 
 const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
   return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
 })
 
-type PageLayoutFooterProps = PropsWithChildren<PrimerPageLayoutFooterProps> & SxProp
-
-const PageLayoutFooter = React.forwardRef<HTMLDivElement, PageLayoutFooterProps>((props, ref) => {
-  // @ts-expect-error - PrimerPageLayout.Footer is not recognized as a valid component type
-  return <Wrapper as={PrimerPageLayout.Footer} ref={ref} {...props} />
-})
-
 const PageLayout = Object.assign(PageLayoutImpl, {
   Content: PageLayoutContent,
-  Header: PageLayoutHeader,
+  Header: PrimerPageLayout.Header,
   Pane: PageLayoutPane,
-  Footer: PageLayoutFooter,
+  Footer: PrimerPageLayout.Footer,
 })
 
 export {PageLayout, type PageLayoutProps}

From 97eb6a2e2147e3e133b3041a6b308a4b3db38661 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 19:13:01 -0400
Subject: [PATCH 2/9] support style in FormControl subcomponents

---
 .../src/FormControl/FormControlCaption.tsx     |  4 +++-
 .../react/src/FormControl/FormControlLabel.tsx | 16 +++++++++++++++-
 .../FormControl/FormControlLeadingVisual.tsx   |  7 ++++++-
 .../src/FormControl/_FormControlValidation.tsx | 13 +++++++++----
 .../src/internal/components/InputLabel.tsx     |  5 +++--
 .../internal/components/InputValidation.tsx    | 18 ++++++++++++++----
 6 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/FormControl/FormControlCaption.tsx b/packages/react/src/FormControl/FormControlCaption.tsx
index d01b2bd710e..ac96260c2d0 100644
--- a/packages/react/src/FormControl/FormControlCaption.tsx
+++ b/packages/react/src/FormControl/FormControlCaption.tsx
@@ -7,9 +7,10 @@ import {useFormControlContext} from './_FormControlContext'
 export type FormControlCaptionProps = React.PropsWithChildren<{
   id?: string
   className?: string
+  style?: React.CSSProperties
 }>
 
-function FormControlCaption({id, children, className}: FormControlCaptionProps) {
+function FormControlCaption({id, children, className, style}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
@@ -17,6 +18,7 @@ function FormControlCaption({id, children, className}: FormControlCaptionProps)
       id={id ?? captionId}
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
+      style={style}
     >
       {children}
     </Text>
diff --git a/packages/react/src/FormControl/FormControlLabel.tsx b/packages/react/src/FormControl/FormControlLabel.tsx
index 59b6f4a5fcd..e35dc9bc1a0 100644
--- a/packages/react/src/FormControl/FormControlLabel.tsx
+++ b/packages/react/src/FormControl/FormControlLabel.tsx
@@ -11,11 +11,23 @@ export type Props = {
   requiredIndicator?: boolean
   id?: string
   className?: string
+  style?: React.CSSProperties
 }
 
 const FormControlLabel: React.FC<
   React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps<typeof InputLabel> & Props>
-> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => {
+> = ({
+  as,
+  children,
+  htmlFor,
+  id,
+  visuallyHidden,
+  requiredIndicator = true,
+  requiredText,
+  className,
+  style,
+  ...props
+}) => {
   const {disabled, id: formControlId, required} = useFormControlContext()
 
   /**
@@ -27,6 +39,7 @@ const FormControlLabel: React.FC<
           as,
           id,
           className,
+          style,
           visuallyHidden,
           required,
           requiredText,
@@ -38,6 +51,7 @@ const FormControlLabel: React.FC<
           as,
           id,
           className,
+          style,
           visuallyHidden,
           htmlFor: htmlFor || formControlId,
           required,
diff --git a/packages/react/src/FormControl/FormControlLeadingVisual.tsx b/packages/react/src/FormControl/FormControlLeadingVisual.tsx
index fa253d1aa4f..6f009e4b442 100644
--- a/packages/react/src/FormControl/FormControlLeadingVisual.tsx
+++ b/packages/react/src/FormControl/FormControlLeadingVisual.tsx
@@ -1,14 +1,19 @@
 import type React from 'react'
 import {useFormControlContext} from './_FormControlContext'
 import classes from './FormControlLeadingVisual.module.css'
+import type {HTMLAttributes} from 'react'
 
-const FormControlLeadingVisual: React.FC<React.PropsWithChildren> = ({children}) => {
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren> & HTMLAttributes<HTMLDivElement> = ({
+  children,
+  ...props
+}) => {
   const {disabled, captionId} = useFormControlContext()
   return (
     <div
       className={classes.LeadingVisual}
       data-control-disabled={disabled ? '' : undefined}
       data-has-caption={captionId ? '' : undefined}
+      {...props}
     >
       {children}
     </div>
diff --git a/packages/react/src/FormControl/_FormControlValidation.tsx b/packages/react/src/FormControl/_FormControlValidation.tsx
index 4c3610128ad..0c58021a400 100644
--- a/packages/react/src/FormControl/_FormControlValidation.tsx
+++ b/packages/react/src/FormControl/_FormControlValidation.tsx
@@ -1,6 +1,5 @@
 import type React from 'react'
 import InputValidation from '../internal/components/InputValidation'
-import type {SxProp} from '../sx'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {useFormControlContext} from './_FormControlContext'
 
@@ -8,18 +7,24 @@ export type FormControlValidationProps = {
   variant: FormValidationStatus
   id?: string
   className?: string
-} & SxProp
+  style?: React.CSSProperties
+}
 
 const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({
   children,
   className,
   variant,
-  sx,
   id,
+  style,
 }) => {
   const {validationMessageId} = useFormControlContext()
   return (
-    <InputValidation className={className} validationStatus={variant} id={id || validationMessageId || ''} sx={sx}>
+    <InputValidation
+      className={className}
+      validationStatus={variant}
+      id={id || validationMessageId || ''}
+      style={style}
+    >
       {children}
     </InputValidation>
   )
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 63e7bf86086..5543966be6a 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -12,6 +12,7 @@ type BaseProps = SxProp & {
   visuallyHidden?: boolean
   id?: string
   className?: string
+  style?: React.CSSProperties
 }
 
 export type LabelProps = BaseProps & {
@@ -35,16 +36,16 @@ function InputLabel({
   requiredText,
   requiredIndicator,
   visuallyHidden,
-  sx,
   as = 'label',
   className,
+  style,
   ...props
 }: Props) {
   return (
     // @ts-ignore weird typing issue with union for `as` prop
     <BoxWithFallback
       as={as}
-      sx={sx}
+      style={style}
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx
index 4dd5bb5bf95..110ae21077f 100644
--- a/packages/react/src/internal/components/InputValidation.tsx
+++ b/packages/react/src/internal/components/InputValidation.tsx
@@ -2,7 +2,6 @@ import type {IconProps} from '@primer/octicons-react'
 import {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'
 import type React from 'react'
 import Text from '../../Text'
-import type {SxProp} from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import classes from './InputValidation.module.css'
 import {clsx} from 'clsx'
@@ -11,7 +10,8 @@ type Props = {
   className?: string
   id: string
   validationStatus?: FormValidationStatus
-} & SxProp
+  style?: React.CSSProperties
+}
 
 const validationIconMap: Record<
   NonNullable<Props['validationStatus']>,
@@ -21,7 +21,13 @@ const validationIconMap: Record<
   error: AlertFillIcon,
 }
 
-const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  className,
+  id,
+  validationStatus,
+  style: inlineStyle,
+}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -31,7 +37,11 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, cl
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus}>
+    <Text
+      className={clsx(className, classes.InputValidation)}
+      data-validation-status={validationStatus}
+      style={inlineStyle}
+    >
       {IconComponent ? (
         <span
           aria-hidden="true"

From 3ce45aa83877bb10101afa9722c177de89fd8b72 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 19:13:29 -0400
Subject: [PATCH 3/9] remove sXProp from InputLabel

---
 packages/react/src/internal/components/InputLabel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 5543966be6a..d34a412ea6d 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -1,10 +1,9 @@
 import {clsx} from 'clsx'
 import type React from 'react'
-import {type SxProp} from '../../sx'
 import classes from './InputLabel.module.css'
 import {BoxWithFallback} from './BoxWithFallback'
 
-type BaseProps = SxProp & {
+type BaseProps = {
   disabled?: boolean
   required?: boolean
   requiredText?: string

From c0ab0caa75f49990d7dea842c8918ca20b09d2f6 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 19:25:37 -0400
Subject: [PATCH 4/9] revert pane changes

---
 packages/styled-react/src/components/PageLayout.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 619db31a7d1..888e02bd3e7 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -27,16 +27,10 @@ const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProp
   return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
 })
 
-type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
-
-const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
-  return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
-})
-
 const PageLayout = Object.assign(PageLayoutImpl, {
   Content: PageLayoutContent,
   Header: PrimerPageLayout.Header,
-  Pane: PageLayoutPane,
+  Pane: PrimerPageLayout.Pane,
   Footer: PrimerPageLayout.Footer,
 })
 

From 4db9e49efe0bbdd3d73b3e4150c17c335960f75c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 20:06:43 -0400
Subject: [PATCH 5/9] error fixes

---
 .../CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx | 6 ++----
 packages/styled-react/src/components/FormControl.tsx        | 2 --
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
index 34cc2c084cd..c42928622be 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
@@ -1,22 +1,20 @@
 import React from 'react'
 import InputValidation from '../InputValidation'
-import type {SxProp} from '../../../sx'
 import type {FormValidationStatus} from '../../../utils/types/FormValidationStatus'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 
 export type CheckboxOrRadioGroupValidationProps = {
   /** Changes the visual style to match the validation status */
   variant: FormValidationStatus
-} & SxProp
+}
 
 const CheckboxOrRadioGroupValidation: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({
   children,
   variant,
-  sx,
 }) => {
   const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <InputValidation validationStatus={variant} id={validationMessageId} sx={sx}>
+    <InputValidation validationStatus={variant} id={validationMessageId}>
       {children}
     </InputValidation>
   )
diff --git a/packages/styled-react/src/components/FormControl.tsx b/packages/styled-react/src/components/FormControl.tsx
index 1e087a44afb..c37a300b56a 100644
--- a/packages/styled-react/src/components/FormControl.tsx
+++ b/packages/styled-react/src/components/FormControl.tsx
@@ -2,8 +2,6 @@ import {
   Box,
   FormControl as PrimerFormControl,
   type FormControlProps as PrimerFormControlProps,
-  type FormControlCaptionProps as PrimerFormControlCaptionProps,
-  type FormControlValidationProps as PrimerFormControlValidationProps,
   type SxProp,
 } from '@primer/react'
 import {forwardRef, type PropsWithChildren} from 'react'

From 7b547f663745a9efb144f15d456551a4012ec47d Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Thu, 2 Oct 2025 20:07:58 -0400
Subject: [PATCH 6/9] Remove unnecessary sx prop migrations

---
 .changeset/cyan-panthers-shop.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/cyan-panthers-shop.md

diff --git a/.changeset/cyan-panthers-shop.md b/.changeset/cyan-panthers-shop.md
new file mode 100644
index 00000000000..e3ce5f535c7
--- /dev/null
+++ b/.changeset/cyan-panthers-shop.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"@primer/styled-react": patch
+---
+
+chore: remove unnecessary sx prop migrations

From e651a3f687db438044f9dfb8b1bea99cfe5b16b2 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 20:11:32 -0400
Subject: [PATCH 7/9] remove unused imports

---
 packages/styled-react/src/components/PageLayout.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 888e02bd3e7..1676abc3fc9 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -3,9 +3,6 @@ import styled from 'styled-components'
 import type {
   PageLayoutProps as PrimerPageLayoutProps,
   PageLayoutContentProps as PrimerPageLayoutContentProps,
-  PageLayoutHeaderProps as PrimerPageLayoutHeaderProps,
-  PageLayoutPaneProps as PrimerPageLayoutPaneProps,
-  PageLayoutFooterProps as PrimerPageLayoutFooterProps,
 } from '@primer/react'
 import {PageLayout as PrimerPageLayout} from '@primer/react'
 import {sx, type SxProp} from '../sx'

From a6fb07ea8983d5cf22e17d4e04840c6a2603b5f5 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 20:15:53 -0400
Subject: [PATCH 8/9] remove  tests

---
 .../src/__tests__/primer-react.browser.test.tsx   | 15 ---------------
 .../styled-react/src/components/PageLayout.tsx    |  9 ++++++++-
 2 files changed, 8 insertions(+), 16 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 26a3f1ad75f..b5e0d68c0bd 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -346,11 +346,6 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
-  test('PageLayout.Header supports `sx` prop', () => {
-    const {container} = render(<PageLayout.Header data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('PageLayout.Content supports `sx` prop', () => {
     const {container} = render(
       <PageLayout.Content as="section" data-testid="component" sx={{background: 'red'}} aria-labelledby="normal" />,
@@ -361,16 +356,6 @@ describe('@primer/react', () => {
     expect(outerElement).toHaveAttribute('aria-labelledby', 'normal')
   })
 
-  test('PageLayout.Pane supports `sx` prop', () => {
-    const {container} = render(<PageLayout.Pane data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
-  test('PageLayout.Footer supports `sx` prop', () => {
-    const {container} = render(<PageLayout.Footer data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('RadioGroup supports `sx` prop', () => {
     const {container} = render(
       <RadioGroup data-testid="component" name="test" sx={{background: 'red'}}>
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 1676abc3fc9..882c18c3504 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import type {
   PageLayoutProps as PrimerPageLayoutProps,
   PageLayoutContentProps as PrimerPageLayoutContentProps,
+  PageLayoutPaneProps as PrimerPageLayoutPaneProps,
 } from '@primer/react'
 import {PageLayout as PrimerPageLayout} from '@primer/react'
 import {sx, type SxProp} from '../sx'
@@ -24,10 +25,16 @@ const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProp
   return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
 })
 
+type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
+
+const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
+  return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
+})
+
 const PageLayout = Object.assign(PageLayoutImpl, {
   Content: PageLayoutContent,
   Header: PrimerPageLayout.Header,
-  Pane: PrimerPageLayout.Pane,
+  Pane: PageLayoutPane,
   Footer: PrimerPageLayout.Footer,
 })
 

From 4cc75f5741993fc42a69908da4ffabf73be111b7 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 2 Oct 2025 23:45:52 -0400
Subject: [PATCH 9/9] add style to FormControl

---
 packages/react/src/FormControl/FormControl.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index 802418f6fc0..567d2a02abb 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -40,10 +40,11 @@ export type FormControlProps = {
    */
   layout?: 'horizontal' | 'vertical'
   className?: string
+  style?: React.CSSProperties
 }
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
-  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className}, ref) => {
+  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className, style}, ref) => {
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -170,6 +171,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             ref={ref}
             data-has-leading-visual={slots.leadingVisual ? '' : undefined}
             className={clsx(className, classes.ControlHorizontalLayout)}
+            style={style}
           >
             {InputChildren}
           </div>
@@ -178,6 +180,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
             className={clsx(className, classes.ControlVerticalLayout)}
+            style={style}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&