From 48181d7af63e24c612498f330b7bdb6bf5fde840 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 12:58:34 -0400
Subject: [PATCH 01/19] chore(TextInput): remove sx

---
 packages/react/src/TextInput/TextInput.tsx    |  3 --
 packages/react/src/TextInput/index.ts         |  1 +
 packages/react/src/index.ts                   |  2 +-
 .../components/TextInputInnerAction.tsx       |  2 +-
 .../internal/components/TextInputWrapper.tsx  | 15 +++++-----
 .../styled-react/src/components/TextInput.tsx | 28 +++++++++++++++++++
 6 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 packages/styled-react/src/components/TextInput.tsx

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 9062b461411..48cf706abfb 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -46,7 +46,6 @@ export type TextInputNonPassthroughProps = {
     | 'contrast'
     | 'disabled'
     | 'monospace'
-    | 'sx'
     | 'width'
     | 'maxWidth'
     | 'minWidth'
@@ -75,7 +74,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
-      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
@@ -137,7 +135,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
-        sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
diff --git a/packages/react/src/TextInput/index.ts b/packages/react/src/TextInput/index.ts
index 9395085508e..7df2e878207 100644
--- a/packages/react/src/TextInput/index.ts
+++ b/packages/react/src/TextInput/index.ts
@@ -1,2 +1,3 @@
 export {default} from './TextInput'
 export type {TextInputProps, TextInputNonPassthroughProps} from './TextInput'
+export type {TextInputActionProps} from '../internal/components/TextInputInnerAction'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 418e9308cfb..50de424a40f 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -166,7 +166,7 @@ export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
 export {default as ToggleSwitch} from './ToggleSwitch'
 export type {ToggleSwitchProps} from './ToggleSwitch'
 export {default as TextInput} from './TextInput'
-export type {TextInputProps} from './TextInput'
+export type {TextInputProps, TextInputActionProps} from './TextInput'
 export {default as TextInputWithTokens} from './TextInputWithTokens'
 export type {TextInputWithTokensProps} from './TextInputWithTokens'
 export {default as Text} from './Text'
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 03093d32575..45c5d60438f 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -9,7 +9,7 @@ import {clsx} from 'clsx'
 
 import styles from './TextInputInnerAction.module.css'
 
-type TextInputActionProps = Omit<
+export type TextInputActionProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   'aria-label' | 'size' | 'tooltipDirection'
 > & {
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 4d7a1a9280a..7b67c91b2eb 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -5,7 +5,6 @@ import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
 import styles from './TextInputWrapper.module.css'
-import {BoxWithFallback} from './BoxWithFallback'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
@@ -59,8 +58,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
     forwardRef,
   ) {
     return (
-      <BoxWithFallback
-        as="span"
+      <span
         ref={forwardRef}
         className={clsx(className, styles.TextInputBaseWrapper)}
         data-block={block || undefined}
@@ -72,11 +70,12 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-trailing-action={hasTrailingAction || undefined}
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
-        style={
-          typeof width === 'string' || typeof minWidth === 'string' || typeof maxWidth === 'string'
-            ? {width, maxWidth, minWidth, ...style}
-            : style
-        }
+        style={{
+          ...(typeof width === 'string' || typeof width === 'number' ? {width} : {}),
+          ...(typeof minWidth === 'string' || typeof minWidth === 'number' ? {minWidth} : {}),
+          ...(typeof maxWidth === 'string' || typeof maxWidth === 'number' ? {maxWidth} : {}),
+          ...style,
+        }}
         {...restProps}
       />
     )
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
new file mode 100644
index 00000000000..747d42eb6b6
--- /dev/null
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -0,0 +1,28 @@
+import {
+  TextInput as PrimerTextInput,
+  TextInputProps as PrimerTextInputProps,
+  TextInputActionProps as PrimerTextInputActionProps,
+} from '@primer/react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {SxProp} from '../sx'
+
+export type TextInputProps = PrimerTextInputProps & SxProp
+export type TextInputActionProps = PrimerTextInputActionProps & SxProp
+
+const TextInputImpl = (props: TextInputProps) => <PrimerTextInput {...props} />
+
+const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>((props, ref) => {
+  return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
+})
+
+type TextInputComposite = ((props: TextInputProps) => JSX.Element) & {
+  Action: typeof TextInputAction
+}
+
+export const TextInput: TextInputComposite = Object.assign(TextInputImpl, {
+  Action: TextInputAction,
+})
+
+TextInputAction.displayName = 'TextInputAction'
+TextInputImpl.displayName = 'TextInput'

From 75c5b503f28122f78164cd19f545d75689ee056a Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Tue, 30 Sep 2025 13:00:20 -0400
Subject: [PATCH 02/19] Remove sx prop from TextInput component

Removed the 'sx' prop from the TextInput component.
---
 .changeset/spicy-items-watch.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/spicy-items-watch.md

diff --git a/.changeset/spicy-items-watch.md b/.changeset/spicy-items-watch.md
new file mode 100644
index 00000000000..bffcfa80181
--- /dev/null
+++ b/.changeset/spicy-items-watch.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"@primer/styled-react": patch
+---
+
+chore(TextInput): remove sx

From 3d10343b17a4dc48af13fe5041bfc379a7d1c4fc Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 20:39:02 -0400
Subject: [PATCH 03/19] type fix

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

diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 747d42eb6b6..3c20cb6e64d 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -1,7 +1,7 @@
 import {
   TextInput as PrimerTextInput,
-  TextInputProps as PrimerTextInputProps,
-  TextInputActionProps as PrimerTextInputActionProps,
+  type TextInputProps as PrimerTextInputProps,
+  type TextInputActionProps as PrimerTextInputActionProps,
 } from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'

From 607edd37fef027f4393332e5b5a44699ad879e6a Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 20:46:25 -0400
Subject: [PATCH 04/19] remove sx from TextInputWIthTokens

---
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index a0f3b0a2954..18c609dc045 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -83,7 +83,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -272,7 +271,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
       style={maxHeight ? {maxHeight, ...style} : style}
-      sx={sxProp}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot

From 1b33c3d9957a81301caf3a172025c1cb9b73509d Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 20:49:22 -0400
Subject: [PATCH 05/19] remove unnecessary stories

---
 .../src/TextInput/TextInput.dev.stories.tsx    | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
index 356f21970c3..ebcf5fc62cd 100644
--- a/packages/react/src/TextInput/TextInput.dev.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -18,21 +18,3 @@ export const WithCSS = () => (
     </FormControl>
   </form>
 )
-
-export const WithSx = () => (
-  <form>
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} />
-    </FormControl>
-  </form>
-)
-
-export const WithSxAndCSS = () => (
-  <form>
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
-    </FormControl>
-  </form>
-)

From 05785b5af4e262c92f55c70142f3e96490f7593d Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 21:00:56 -0400
Subject: [PATCH 06/19] remove sx prop from Textarea

---
 packages/react/src/Textarea/Textarea.tsx      |  2 --
 .../__snapshots__/exports.test.ts.snap        |  1 +
 .../src/components/Autocomplete.tsx           | 13 +++++++++++--
 .../styled-react/src/components/TextInput.tsx | 14 +++++++++++---
 .../styled-react/src/components/Textarea.tsx  | 19 +++++++++++++++++++
 packages/styled-react/src/index.tsx           |  2 +-
 6 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 packages/styled-react/src/components/Textarea.tsx

diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 6cabcd57f01..55b7b33c711 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -58,7 +58,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
-      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -76,7 +75,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ): ReactElement => {
     return (
       <TextInputBaseWrapper
-        sx={sxProp}
         validationStatus={validationStatus}
         disabled={disabled}
         block={block}
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index f61edd54c03..004bc493dc5 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -179,6 +179,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "Textarea",
   "type TextareaProps",
   "TextInput",
+  "type TextInputActionProps",
   "type TextInputProps",
   "TextInputWithTokens",
   "type TextInputWithTokensProps",
diff --git a/packages/styled-react/src/components/Autocomplete.tsx b/packages/styled-react/src/components/Autocomplete.tsx
index 2028c65d111..2dcff5c6922 100644
--- a/packages/styled-react/src/components/Autocomplete.tsx
+++ b/packages/styled-react/src/components/Autocomplete.tsx
@@ -1,6 +1,7 @@
 import {
   Autocomplete as PrimerAutocomplete,
   type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+  type AutocompleteInputProps as PrimerAutocompleteInputProps,
 } from '@primer/react'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
@@ -16,17 +17,25 @@ const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> = style
   ${sx}
 `
 
+export type AutocompleteInputProps = PrimerAutocompleteInputProps & SxProp
+
+const AutocompleteInput: React.ComponentType<AutocompleteInputProps> = styled(PrimerAutocomplete.Input).withConfig({
+  shouldForwardProp: prop => (prop as keyof AutocompleteInputProps) !== 'sx',
+})<AutocompleteInputProps>`
+  ${sx}
+`
+
 interface AutocompleteExport {
   (props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode
   Context: typeof PrimerAutocomplete.Context
-  Input: typeof PrimerAutocomplete.Input
+  Input: typeof AutocompleteInput
   Menu: typeof PrimerAutocomplete.Menu
   Overlay: typeof AutocompleteOverlay
 }
 
 const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, {
   Context: PrimerAutocomplete.Context,
-  Input: PrimerAutocomplete.Input,
+  Input: AutocompleteInput,
   Menu: PrimerAutocomplete.Menu,
   Overlay: AutocompleteOverlay,
 })
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 3c20cb6e64d..f40196bd377 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -7,16 +7,24 @@ import {forwardRef} from 'react'
 import {Box} from './Box'
 import type {SxProp} from '../sx'
 
-export type TextInputProps = PrimerTextInputProps & SxProp
+export type TextInputProps = PrimerTextInputProps & SxProp & {as?: React.ElementType}
 export type TextInputActionProps = PrimerTextInputActionProps & SxProp
 
-const TextInputImpl = (props: TextInputProps) => <PrimerTextInput {...props} />
+const StyledTextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
+  return <Box as={PrimerTextInput} ref={ref} {...props} />
+})
+
+const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...props}, ref) => {
+  return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
+})
 
 const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>((props, ref) => {
   return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
 })
 
-type TextInputComposite = ((props: TextInputProps) => JSX.Element) & {
+import type {ForwardRefExoticComponent, RefAttributes} from 'react'
+
+type TextInputComposite = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
   Action: typeof TextInputAction
 }
 
diff --git a/packages/styled-react/src/components/Textarea.tsx b/packages/styled-react/src/components/Textarea.tsx
new file mode 100644
index 00000000000..2e8ad764e10
--- /dev/null
+++ b/packages/styled-react/src/components/Textarea.tsx
@@ -0,0 +1,19 @@
+import {Textarea as PrimerTextarea, type TextareaProps as PrimerTextareaProps} from '@primer/react'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+import {forwardRef} from 'react'
+
+type TextareaProps = PrimerTextareaProps & SxProp & {as?: React.ElementType}
+
+const StyledTextarea = styled(PrimerTextarea).withConfig<TextareaProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+` as ForwardRefComponent<'textarea', TextareaProps>
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({as, ...props}, ref) => {
+  return <StyledTextarea {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+}) as ForwardRefComponent<'textarea', TextareaProps>
+
+export {Textarea, type TextareaProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index d5dd28c2cb9..38a93977b7a 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -7,7 +7,6 @@ export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Text} from '@primer/react'
-export {Textarea} from '@primer/react'
 export {TextInput} from '@primer/react'
 export {Tooltip} from '@primer/react'
 export {type TextInputProps} from '@primer/react'
@@ -55,6 +54,7 @@ export {
 export {Spinner, type SpinnerProps} from './components/Spinner'
 export {StateLabel, type StateLabelProps} from './components/StateLabel'
 export {SubNav, type SubNavProps, type SubNavLinkProps} from './components/SubNav'
+export {Textarea, type TextareaProps} from './components/Textarea'
 export {
   Timeline,
   type TimelineProps,

From 7f53ab9e2fae5ff2e6bf51ee0f6e21d403f6b24f Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 21:02:14 -0400
Subject: [PATCH 07/19] fix exports

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

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 38a93977b7a..6efa5ae52fe 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -7,9 +7,7 @@ export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Text} from '@primer/react'
-export {TextInput} from '@primer/react'
 export {Tooltip} from '@primer/react'
-export {type TextInputProps} from '@primer/react'
 
 // theming depends on styled-components
 export {ThemeProvider} from '@primer/react'
@@ -55,6 +53,7 @@ export {Spinner, type SpinnerProps} from './components/Spinner'
 export {StateLabel, type StateLabelProps} from './components/StateLabel'
 export {SubNav, type SubNavProps, type SubNavLinkProps} from './components/SubNav'
 export {Textarea, type TextareaProps} from './components/Textarea'
+export {TextInput, type TextInputProps, type TextInputActionProps} from './components/TextInput'
 export {
   Timeline,
   type TimelineProps,

From 07be57e0f076ea14bf12536af475f024d241566c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 21:04:51 -0400
Subject: [PATCH 08/19] fix import

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

diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index f40196bd377..3ad2b560b95 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -6,6 +6,7 @@ import {
 import {forwardRef} from 'react'
 import {Box} from './Box'
 import type {SxProp} from '../sx'
+import type {ForwardRefExoticComponent, RefAttributes} from 'react'
 
 export type TextInputProps = PrimerTextInputProps & SxProp & {as?: React.ElementType}
 export type TextInputActionProps = PrimerTextInputActionProps & SxProp
@@ -22,8 +23,6 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>((pro
   return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
 })
 
-import type {ForwardRefExoticComponent, RefAttributes} from 'react'
-
 type TextInputComposite = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
   Action: typeof TextInputAction
 }

From a251708d760787ae220b190cf13639731cf21b7f Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 21:12:54 -0400
Subject: [PATCH 09/19] remove sx stories snapshots

---
 ...Input-Dev-WithSx-dark-colorblind-linux.png | Bin 6222 -> 0 bytes
 ...TextInput-Dev-WithSx-dark-dimmed-linux.png | Bin 6268 -> 0 bytes
 ...ut-Dev-WithSx-dark-high-contrast-linux.png | Bin 6126 -> 0 bytes
 .../TextInput-Dev-WithSx-dark-linux.png       | Bin 6222 -> 0 bytes
 ...Input-Dev-WithSx-dark-tritanopia-linux.png | Bin 6222 -> 0 bytes
 ...nput-Dev-WithSx-light-colorblind-linux.png | Bin 6177 -> 0 bytes
 ...t-Dev-WithSx-light-high-contrast-linux.png | Bin 6144 -> 0 bytes
 .../TextInput-Dev-WithSx-light-linux.png      | Bin 6177 -> 0 bytes
 ...nput-Dev-WithSx-light-tritanopia-linux.png | Bin 6177 -> 0 bytes
 ...Dev-WithSxAndCSS-dark-colorblind-linux.png | Bin 6244 -> 0 bytes
 ...put-Dev-WithSxAndCSS-dark-dimmed-linux.png | Bin 6266 -> 0 bytes
 ...-WithSxAndCSS-dark-high-contrast-linux.png | Bin 6191 -> 0 bytes
 .../TextInput-Dev-WithSxAndCSS-dark-linux.png | Bin 6244 -> 0 bytes
 ...Dev-WithSxAndCSS-dark-tritanopia-linux.png | Bin 6244 -> 0 bytes
 ...ev-WithSxAndCSS-light-colorblind-linux.png | Bin 6230 -> 0 bytes
 ...WithSxAndCSS-light-high-contrast-linux.png | Bin 6200 -> 0 bytes
 ...TextInput-Dev-WithSxAndCSS-light-linux.png | Bin 6230 -> 0 bytes
 ...ev-WithSxAndCSS-light-tritanopia-linux.png | Bin 6230 -> 0 bytes
 e2e/components/TextInput.test.ts              |  36 ------------------
 19 files changed, 36 deletions(-)
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png
 delete mode 100644 .playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png
deleted file mode 100644
index df3df41d1747633b615eb588dd2872da531114d5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6222
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png
deleted file mode 100644
index 7c5497e2b96b5760fd99f8acb894f65794752911..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6268
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
Ik@D~V0n4if#sB~S

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png
deleted file mode 100644
index 36a573d7a127a715d4881cd8993d9331a2051dd8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6126
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
CRk>3D

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png
deleted file mode 100644
index df3df41d1747633b615eb588dd2872da531114d5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6222
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png
deleted file mode 100644
index df3df41d1747633b615eb588dd2872da531114d5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6222
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png
deleted file mode 100644
index 785dcf53bb94b927acb855299b20455246185874..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6177
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png
deleted file mode 100644
index adef3e640fb53abac5a6bf778b557629db8a9873..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6144
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
AjQ{`u

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png
deleted file mode 100644
index 785dcf53bb94b927acb855299b20455246185874..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6177
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png
deleted file mode 100644
index 785dcf53bb94b927acb855299b20455246185874..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6177
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png
deleted file mode 100644
index 081099aacdb79529b71bc4db491dd2b56e17e3e0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6244
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png
deleted file mode 100644
index 5c4c510e792fc95009cbe0f1b1c693747fc8ed50..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6266
zcmeHLYg7|w8Xm=pEh3(BSSvwOk5xBv5alA*Kr2`z6r!Pk$R$;ZsRT%nh6o{~Tdl22
zL0tiDf#9Wq0s;k^fJsSEB$R8)B?ib%lqBRvxR}I{knGqW{nc*!WB1oG=ggTi?{{X-
z^FH76Jl{8S<#<el;~TDT007_^c`O_S0Cq3H6WFvKth^S^3Is3fa#0aSfaVc5B>=qT
z6B+*AhZm}}V$wBqI=OEV;~9B4u?^C;;bzI~k<RdUM!a?(+gw~<in?^|xLa}HMf$BR
z84(+5C3`=@+<M>M<M01CGy1ppu-6Xm>3s}2M!WXW(B+M1_H9Fa>7TiN>brMX4>Ws8
zN@$MPgv0af!->oNYP|p_58wqzO~ckjYCDD(|3S4R82~;@L(A|^Ah^wrIpAg2V>kd@
z+G+%Vtw%(5z`L9NYeoNp9O>lb1$7fTb?NEFnw43Coj55jj{ahXCS6gG(6%4GaNu-;
zch37_f`^tj&s71yLd4yI+Ys)=lOkh~?fgP64u|V&F4aQ>p-Z@{nUkF}dcV{V%=|Z)
zs@5fCIkM?O#t-AxX}Taa=-k*Wk7CXJGJhuk9P|1)$OwnSks+p86~BqZGO)>V;kE<G
z{^lL+Xv*Nr#phA5!3qy-O8Z&-Hu!844z4@M11ZVhSg5exrrN<N6rmJqDOA#K4%_A;
z6gIwvkB!$&b=BRuGxIIBIlvr^x$5fMK&R`eIMMjj)C2s?HeS(qB?9JP%bsb7Ys_9<
zYJyt2?UPQOQmNJGf_kl0C$ed#>9jHuI2|`YXbn!ud_LbdThxgYo12C!DFks{Nd6p?
zkfxsJ*sQ35NJqygXzI!pjx{_fNvNyBi#l@z7MZX2*`c=%oqx=Agm4yzahYPK{wWGa
zvE5H>Z)UIbJXfg`R?qP79xdMD=6@WKZ)8bxl{8&eAg!KEGC%7rt|?IADLr7f5#w8f
zb2){kHb;oxL}@*|!z3CQ81NKXIuu>{pX{L)Ne5?H>u}(L5F|JWkw155kLOPdp|r9+
zPVgTyO>Ozh@|1j8IaqrnCQ8Kzt&e%+m3F;ePx+Z{&<crCvauXBJ<Slc&XrcT%v;D2
zsYEfs!^0!g)Q@BvyX_QI(!5?E#eZ^cXl^uDK4cnoqI8n`48^AoFg0xfw6cnd3S^<>
zc@SEhZ%)ABq)&=^^nM>ueM}1+HvsU@xGZ<du$fJYC|I4(;Sqlf_q)hC27?i@GMRQY
zWM!@)j??)xYunclKTt8$DRx&^+0u|V_DNHcfXO60jCPo}d>KSBJm$rBG&gTg$>l2R
zY`eAv{*wDt(O8s<nBupp7yF>nb|Oy~biV&zdmOS)Er@%i<XN*+$|R__*VUxP#^&Pd
zYis2UVK(W4vIp#$2$MZZY)8OuCND`)17xFAFg;zM>oUg2$FmjBjGOy!+JV&fy$u~S
zImX5DX=M^N`-(HD9B<4>vR7{Z9X^-Ktq!tDJq%O{^+B$p`cT%X=;65rl?sIzo*NDG
z>fdz_`@YQtf|&4WWikt9zrXI{;^OP;YY*j2nN%ZLLPj|%wQ#W)H2{ez3WLd>&UQ%i
z%y+y$$XvP%@>aSh%-M*c=AVV7gC?NUK~2`xSWP`qHvKQED31Q5rOqbzzOfI<OdH(+
zd4lUy*(Ib*oFBy|xFe3j(r3TAevyi?yj-kV)nE)7v5}U<`7y1p6co-EAoQ@taz4jO
zJ_;T%8i&IvYvYh8Fj+-Xwo)X{$I}}dvA=)}bdUONxGGC7GRekkqt%+ZWLBPbFbREt
zHc<jU4VEeoXQ|X$cbY~wU!+|Gn*;GogER5`YA8EhUBTtXZt>8HJ37k7@Tf3Y`m}O9
zRdF}YrNz&5F1D@|^v5{Ykz<j01_cE{T)CV)dUmGx((BF$82Fw8w4cVT2w1v$(DNpW
zX(ZyNf2`Ni7>DllX`I0zbc@}XuV5F1>r4DZCleF%RrNRaMhDV6I*e*#VHb#h^|C%I
z%d^W=l`H4f*i<(53fo<3M3~(LXv!+qm`5NGKFymbX{yYfs^Z4FVzGU0g)AAj1X3e?
zVJYj6l~X>o{<GX&qTi=mslF*`Cm~_!s&la|w}`zrknjg&vq2hC+eIe9WcQWh7*3i&
zGu7Tf??7gL`*MWHUXBP|$$`;WBwLA}r1QLNpxBe$S+)d42A@Eflt?IP@ayeR^JHIz
zr|qFhQ7sUOEV7nD8d=DANDc)6{0qmW5i$rdDryjn3|CifOJe(3&<yeSPo6+1)oPYf
zUYQWmwe-lrvx;OA*^*g?SCgk!n@hArNxp!QB@B7-(5YlQyx`&IuT}clR9bIL%r{<y
z#b>=dxKWgdiRR2AJx%gZa(hclOF=jvr_s)7PFgR@Xk`zU<<-YYk92Oh<(9*t3tjg6
zqh#p9+1<PlvnGLKpr`C$HQyo~C8wmoXkBC>Xk!Crx%m_S*3+gXP_3SxwBW_Z&c*Y|
z69S=erm=;3aOOMKJQLe{+Scv?M#8uIYh!Rb=eL9F+^&N@Esr(;z~$;rd*HLJ&%lM@
z$X6r)*tBbY9q{(0-z$deZxas-VuCqEi1D9STKT?Vfp7MGF+y!-%%?O4rWR%+g?Qe2
zVC$J{ITYC?xz%c=NLyQ*NQ!yMY8c$b6!X1nK+eRKVFE5V>(ibwEzi;D4*;+KifNAO
zzR!nf(3lqudRp7vGSrC^IUk?hok*cjV6+!{^!c$$Y{UBp#8wR+xdFfrK^DA?!*rZR
zr?V}V>RsZ>L5~km9|pYai9Hc#>e*q7OW7|)34KJ)>j1aqjc!JTAUd^!)pU0Z{mjc}
z|9*FYwn%AV!g}DFfbK)M?h=VlL(!nMbhr2BzIw(gYj3HmpC}eo`>SWu8nJoCJm@#4
z{bLA*JVCzVO`!WUWN6$M+&Fw<y0RX4>&>0jf0f1GrS{K?oBij5NKBAG!pE0q{Cyc2
zA4VVrc;vcQOyETw1YM?UBIVT(-=~cYGXC38i)zwRF<tv>TXJVfXNI7-2macxE$7%o
zR0eg7*#ENq>QJy7Q4(YwHm_{CFJz^6+OGrr<#E*)P|x2rW=@(10_f4+8I>yt3K7k-
zS|z)^A^qI=lEADNkvdmmJX%TlxQ{ur(;j&Hz1|7s@I_(3J%%!i5DT)HkdWd%5qrJm
zUR@)It0BdciE#oBez*||MoBl+Mfc!;%G;kP`p;-zd;AZ>V2!%J5}9i(t+Di<7u7X|
ztSMwoA%C>xTyw{oJJ#H>=8nJkg}N3O|4(sYfnHxXX_t3<L<9b=1tO2egf}1g=<|OA
DeNgvy

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png
deleted file mode 100644
index 6f5df61ea46646cf8ac33b575316990f4aae5c80..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6191
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
J>p;Zie*ye7)dBzj

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png
deleted file mode 100644
index 081099aacdb79529b71bc4db491dd2b56e17e3e0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6244
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png
deleted file mode 100644
index 081099aacdb79529b71bc4db491dd2b56e17e3e0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6244
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png
deleted file mode 100644
index 14413c4b12e7a548e9ceb9cd5a81af109005c09e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6230
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png
deleted file mode 100644
index 2e8b221001e7b122aebdf1333f87390fe3123821..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6200
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png
deleted file mode 100644
index 14413c4b12e7a548e9ceb9cd5a81af109005c09e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6230
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

diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png
deleted file mode 100644
index 14413c4b12e7a548e9ceb9cd5a81af109005c09e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6230
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

diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index fceb98ca879..114854866b2 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -219,24 +219,6 @@ test.describe('TextInput', () => {
     }
   })
 
-  test.describe('Dev: With Sx', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSx.${theme}.png`)
-        })
-      })
-    }
-  })
-
   test.describe('Dev: With CSS', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -254,22 +236,4 @@ test.describe('TextInput', () => {
       })
     }
   })
-
-  test.describe('Dev: With Sx and CSS', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx-and-css',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSxAndCSS.${theme}.png`)
-        })
-      })
-    }
-  })
 })

From b55c591ab0b23f23a200236cdf33b15d817debe8 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 30 Sep 2025 23:15:27 -0400
Subject: [PATCH 10/19] use component name instead of component reference to
 associate FormControl

---
 .../react/src/Autocomplete/Autocomplete.tsx   |  2 +
 .../react/src/FormControl/FormControl.tsx     | 58 ++++++++++---------
 packages/react/src/Select/Select.tsx          |  2 +
 .../react/src/SelectPanel/SelectPanel.tsx     |  2 +
 4 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/Autocomplete/Autocomplete.tsx b/packages/react/src/Autocomplete/Autocomplete.tsx
index b5bee8299cf..7cfe651f54b 100644
--- a/packages/react/src/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.tsx
@@ -93,6 +93,8 @@ const Autocomplete: React.FC<React.PropsWithChildren<{id?: string}>> = ({childre
   )
 }
 
+Autocomplete.displayName = 'Autocomplete'
+
 export type AutocompleteProps = ComponentProps<typeof Autocomplete>
 export type {AutocompleteInputProps} from './AutocompleteInput'
 export type {AutocompleteMenuProps} from './AutocompleteMenu'
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index 802418f6fc0..bbaa729f993 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -1,13 +1,5 @@
 import {clsx} from 'clsx'
 import React, {useContext} from 'react'
-import Autocomplete from '../Autocomplete'
-import Checkbox from '../Checkbox'
-import Radio from '../Radio'
-import Select from '../Select/Select'
-import {SelectPanel} from '../SelectPanel'
-import TextInput from '../TextInput'
-import TextInputWithTokens from '../TextInputWithTokens'
-import Textarea from '../Textarea'
 import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
 import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
 import {useSlots} from '../hooks/useSlots'
@@ -20,6 +12,23 @@ import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'
 import classes from './FormControl.module.css'
 
+/**
+ * Utility function to get the component name from a React element
+ */
+function getComponentName(child: React.ReactElement): string | undefined {
+  if (!React.isValidElement(child)) return undefined
+  const componentType = child.type as React.ComponentType
+  return componentType.displayName || componentType.name
+}
+
+/**
+ * Utility function to check if a component name matches any of the expected names
+ */
+function isComponentNameInList(child: React.ReactElement, componentNames: string[]): boolean {
+  const componentName = getComponentName(child)
+  return componentName ? componentNames.includes(componentName) : false
+}
+
 export type FormControlProps = {
   children?: React.ReactNode
   /**
@@ -50,15 +59,15 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
       leadingVisual: FormControlLeadingVisual,
       validation: FormControlValidation,
     })
-    const expectedInputComponents = [
-      Autocomplete,
-      Checkbox,
-      Radio,
-      Select,
-      TextInput,
-      TextInputWithTokens,
-      Textarea,
-      SelectPanel,
+    const expectedInputComponentNames = [
+      'Autocomplete',
+      'Checkbox',
+      'Radio',
+      'Select',
+      'TextInput',
+      'TextInputWithTokens',
+      'Textarea',
+      'SelectPanel',
     ]
     const choiceGroupContext = useContext(CheckboxOrRadioGroupContext)
     const disabled = choiceGroupContext.disabled || disabledProp
@@ -66,13 +75,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     const validationMessageId = slots.validation ? `${id}-validationMessage` : undefined
     const captionId = slots.caption ? `${id}-caption` : undefined
     const validationStatus = slots.validation?.props.variant
-    const InputComponent = childrenWithoutSlots.find(child =>
-      expectedInputComponents.some(inputComponent => React.isValidElement(child) && child.type === inputComponent),
+    const InputComponent = childrenWithoutSlots.find(
+      child => React.isValidElement(child) && isComponentNameInList(child, expectedInputComponentNames),
     )
     const inputProps = React.isValidElement(InputComponent) && InputComponent.props
     const isChoiceInput =
-      React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio)
-    const isRadioInput = React.isValidElement(InputComponent) && InputComponent.type === Radio
+      React.isValidElement(InputComponent) && isComponentNameInList(InputComponent, ['Checkbox', 'Radio'])
+    const isRadioInput = React.isValidElement(InputComponent) && getComponentName(InputComponent) === 'Radio'
 
     if (InputComponent) {
       warning(
@@ -135,8 +144,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               )
             : null}
           {childrenWithoutSlots.filter(
-            child =>
-              React.isValidElement(child) && ![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
+            child => React.isValidElement(child) && !isComponentNameInList(child, ['Checkbox', 'Radio']),
           )}
         </div>
         {slots.leadingVisual ? (
@@ -195,9 +203,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                 ),
               )}
             {childrenWithoutSlots.filter(
-              child =>
-                React.isValidElement(child) &&
-                !expectedInputComponents.some(inputComponent => child.type === inputComponent),
+              child => React.isValidElement(child) && !isComponentNameInList(child, expectedInputComponentNames),
             )}
             {slots.validation ? (
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index ad5b2fec98f..77eb911cc08 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -87,6 +87,8 @@ const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupEle
   <optgroup {...props} />
 )
 
+Select.displayName = 'Select'
+
 export default Object.assign(Select, {
   Option,
   OptGroup,
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 0bc994590c7..57f765751d2 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -961,6 +961,8 @@ const SecondaryLink: React.FC<LinkButtonProps & ButtonProps> = props => {
   )
 }
 
+Panel.displayName = 'SelectPanel'
+
 export const SelectPanel = Object.assign(Panel, {
   SecondaryActionButton: SecondaryButton,
   SecondaryActionLink: SecondaryLink,

From b03bc502473e5667a5c1802ed9dff5735f4e982c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 00:02:35 -0400
Subject: [PATCH 11/19] Revert "use component name instead of component
 reference to associate FormControl"

This reverts commit b55c591ab0b23f23a200236cdf33b15d817debe8.
---
 .../react/src/Autocomplete/Autocomplete.tsx   |  2 -
 .../react/src/FormControl/FormControl.tsx     | 58 +++++++++----------
 packages/react/src/Select/Select.tsx          |  2 -
 .../react/src/SelectPanel/SelectPanel.tsx     |  2 -
 4 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/react/src/Autocomplete/Autocomplete.tsx b/packages/react/src/Autocomplete/Autocomplete.tsx
index 7cfe651f54b..b5bee8299cf 100644
--- a/packages/react/src/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.tsx
@@ -93,8 +93,6 @@ const Autocomplete: React.FC<React.PropsWithChildren<{id?: string}>> = ({childre
   )
 }
 
-Autocomplete.displayName = 'Autocomplete'
-
 export type AutocompleteProps = ComponentProps<typeof Autocomplete>
 export type {AutocompleteInputProps} from './AutocompleteInput'
 export type {AutocompleteMenuProps} from './AutocompleteMenu'
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index bbaa729f993..802418f6fc0 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -1,5 +1,13 @@
 import {clsx} from 'clsx'
 import React, {useContext} from 'react'
+import Autocomplete from '../Autocomplete'
+import Checkbox from '../Checkbox'
+import Radio from '../Radio'
+import Select from '../Select/Select'
+import {SelectPanel} from '../SelectPanel'
+import TextInput from '../TextInput'
+import TextInputWithTokens from '../TextInputWithTokens'
+import Textarea from '../Textarea'
 import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
 import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
 import {useSlots} from '../hooks/useSlots'
@@ -12,23 +20,6 @@ import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'
 import classes from './FormControl.module.css'
 
-/**
- * Utility function to get the component name from a React element
- */
-function getComponentName(child: React.ReactElement): string | undefined {
-  if (!React.isValidElement(child)) return undefined
-  const componentType = child.type as React.ComponentType
-  return componentType.displayName || componentType.name
-}
-
-/**
- * Utility function to check if a component name matches any of the expected names
- */
-function isComponentNameInList(child: React.ReactElement, componentNames: string[]): boolean {
-  const componentName = getComponentName(child)
-  return componentName ? componentNames.includes(componentName) : false
-}
-
 export type FormControlProps = {
   children?: React.ReactNode
   /**
@@ -59,15 +50,15 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
       leadingVisual: FormControlLeadingVisual,
       validation: FormControlValidation,
     })
-    const expectedInputComponentNames = [
-      'Autocomplete',
-      'Checkbox',
-      'Radio',
-      'Select',
-      'TextInput',
-      'TextInputWithTokens',
-      'Textarea',
-      'SelectPanel',
+    const expectedInputComponents = [
+      Autocomplete,
+      Checkbox,
+      Radio,
+      Select,
+      TextInput,
+      TextInputWithTokens,
+      Textarea,
+      SelectPanel,
     ]
     const choiceGroupContext = useContext(CheckboxOrRadioGroupContext)
     const disabled = choiceGroupContext.disabled || disabledProp
@@ -75,13 +66,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     const validationMessageId = slots.validation ? `${id}-validationMessage` : undefined
     const captionId = slots.caption ? `${id}-caption` : undefined
     const validationStatus = slots.validation?.props.variant
-    const InputComponent = childrenWithoutSlots.find(
-      child => React.isValidElement(child) && isComponentNameInList(child, expectedInputComponentNames),
+    const InputComponent = childrenWithoutSlots.find(child =>
+      expectedInputComponents.some(inputComponent => React.isValidElement(child) && child.type === inputComponent),
     )
     const inputProps = React.isValidElement(InputComponent) && InputComponent.props
     const isChoiceInput =
-      React.isValidElement(InputComponent) && isComponentNameInList(InputComponent, ['Checkbox', 'Radio'])
-    const isRadioInput = React.isValidElement(InputComponent) && getComponentName(InputComponent) === 'Radio'
+      React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio)
+    const isRadioInput = React.isValidElement(InputComponent) && InputComponent.type === Radio
 
     if (InputComponent) {
       warning(
@@ -144,7 +135,8 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               )
             : null}
           {childrenWithoutSlots.filter(
-            child => React.isValidElement(child) && !isComponentNameInList(child, ['Checkbox', 'Radio']),
+            child =>
+              React.isValidElement(child) && ![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
           )}
         </div>
         {slots.leadingVisual ? (
@@ -203,7 +195,9 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                 ),
               )}
             {childrenWithoutSlots.filter(
-              child => React.isValidElement(child) && !isComponentNameInList(child, expectedInputComponentNames),
+              child =>
+                React.isValidElement(child) &&
+                !expectedInputComponents.some(inputComponent => child.type === inputComponent),
             )}
             {slots.validation ? (
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 77eb911cc08..ad5b2fec98f 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -87,8 +87,6 @@ const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupEle
   <optgroup {...props} />
 )
 
-Select.displayName = 'Select'
-
 export default Object.assign(Select, {
   Option,
   OptGroup,
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 57f765751d2..0bc994590c7 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -961,8 +961,6 @@ const SecondaryLink: React.FC<LinkButtonProps & ButtonProps> = props => {
   )
 }
 
-Panel.displayName = 'SelectPanel'
-
 export const SelectPanel = Object.assign(Panel, {
   SecondaryActionButton: SecondaryButton,
   SecondaryActionLink: SecondaryLink,

From 861ffc8b891d07a3022b72007f171d177330b540 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 17:12:47 -0400
Subject: [PATCH 12/19] memoize style

---
 .../src/internal/components/TextInputWrapper.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 7b67c91b2eb..7c08193aa8c 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -57,6 +57,15 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
     },
     forwardRef,
   ) {
+    const memoizedStyle = React.useMemo(() => {
+      return {
+        ...(typeof width === 'string' || typeof width === 'number' ? {width} : {}),
+        ...(typeof minWidth === 'string' || typeof minWidth === 'number' ? {minWidth} : {}),
+        ...(typeof maxWidth === 'string' || typeof maxWidth === 'number' ? {maxWidth} : {}),
+        ...style,
+      }
+    }, [width, minWidth, maxWidth, style])
+
     return (
       <span
         ref={forwardRef}
@@ -70,12 +79,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-trailing-action={hasTrailingAction || undefined}
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
-        style={{
-          ...(typeof width === 'string' || typeof width === 'number' ? {width} : {}),
-          ...(typeof minWidth === 'string' || typeof minWidth === 'number' ? {minWidth} : {}),
-          ...(typeof maxWidth === 'string' || typeof maxWidth === 'number' ? {maxWidth} : {}),
-          ...style,
-        }}
+        style={memoizedStyle}
         {...restProps}
       />
     )

From 55488c7bfe59c637df2bb13e5fe67767813d849d Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 18:13:10 -0400
Subject: [PATCH 13/19] remove sx from TextInput.Action

---
 .../react/src/internal/components/TextInputInnerAction.tsx  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 45c5d60438f..22d45d0b6d0 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -4,7 +4,6 @@ import type {IconProps} from '@primer/octicons-react'
 import {Button, IconButton} from '../../Button'
 import {Tooltip} from '../../TooltipV2'
 import type {ButtonProps} from '../../Button'
-import type {SxProp} from '../../sx'
 import {clsx} from 'clsx'
 
 import styles from './TextInputInnerAction.module.css'
@@ -26,7 +25,7 @@ export type TextInputActionProps = Omit<
    * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
    */
   variant?: ButtonProps['variant']
-} & SxProp
+}
 
 const ConditionalTooltip: React.FC<
   React.PropsWithChildren<{
@@ -54,14 +53,13 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
       tooltipDirection,
       children,
       icon,
-      sx: sxProp,
       className,
       variant = 'invisible',
       ...rest
     },
     forwardedRef,
   ) => {
-    const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className), sx: sxProp || {}}
+    const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className)}
 
     if ((icon && !ariaLabel) || (!children && !ariaLabel)) {
       // eslint-disable-next-line no-console

From d52d8b75055782e6dc5cb242df020cf6f7f0a7f4 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 18:15:59 -0400
Subject: [PATCH 14/19] update snapshot

---
 .../TextInput/__snapshots__/TextInput.test.tsx.snap  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
index 04f3f456271..4d816592e47 100644
--- a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -294,7 +294,7 @@ exports[`TextInput > renders trailingAction icon button 1`] = `
       <button
         aria-describedby=":r23:-loading-announcement"
         aria-labelledby=":r22:"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
         data-component="IconButton"
         data-loading="false"
         data-no-visuals="true"
@@ -352,7 +352,7 @@ exports[`TextInput > renders trailingAction text button 1`] = `
     >
       <button
         aria-describedby=":r1p:-loading-announcement"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
@@ -360,7 +360,8 @@ exports[`TextInput > renders trailingAction text button 1`] = `
         type="button"
       >
         <span
-          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
+          class="prc-Button-ButtonContent-KZ5Bz"
+          data-align="center"
           data-component="buttonContent"
         >
           <span
@@ -395,7 +396,7 @@ exports[`TextInput > renders trailingAction text button with a tooltip 1`] = `
     >
       <button
         aria-describedby=":r1u:-loading-announcement :r1t:"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
@@ -403,7 +404,8 @@ exports[`TextInput > renders trailingAction text button with a tooltip 1`] = `
         type="button"
       >
         <span
-          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
+          class="prc-Button-ButtonContent-KZ5Bz"
+          data-align="center"
           data-component="buttonContent"
         >
           <span

From f09d16f023c4a8ae650c49ca1bb7aa5ffdea4cb1 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 09:24:59 -0400
Subject: [PATCH 15/19] chore: remove sx prop import

---
 packages/react/src/Textarea/Textarea.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 55b7b33c711..c7eb10d693c 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -2,7 +2,6 @@ import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
-import type {SxProp} from '../sx'
 import classes from './TextArea.module.css'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
@@ -46,8 +45,7 @@ export type TextareaProps = {
    * CSS styles to apply to the Textarea
    */
   style?: React.CSSProperties
-} & TextareaHTMLAttributes<HTMLTextAreaElement> &
-  SxProp
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
 
 /**
  * An accessible, native textarea component that supports validation states.

From f81329e8ccd2c3b67460ee97cd9303efbf231ee0 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 09:32:11 -0400
Subject: [PATCH 16/19] TextInputWrapper: remove responsive value

---
 .../react/src/internal/components/TextInputWrapper.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 7c08193aa8c..54199270350 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,6 +1,4 @@
 import React, {type ComponentProps} from 'react'
-import {type ResponsiveValue} from 'styled-system'
-import type {SxProp} from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
@@ -24,12 +22,12 @@ type StyledTextInputBaseWrapperProps = {
   onClick?: React.MouseEventHandler
   children?: React.ReactNode
   /** @deprecated Update `width` using CSS modules or style. */
-  width?: string | number | ResponsiveValue<string | number>
+  width?: string | number
   /** @deprecated Update `min-width` using CSS modules or style. */
-  minWidth?: string | number | ResponsiveValue<string | number>
+  minWidth?: string | number
   /** @deprecated Update `max-width` using CSS modules or style. */
-  maxWidth?: string | number | ResponsiveValue<string | number>
-} & SxProp
+  maxWidth?: string | number
+}
 
 type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean

From f5243271e6e6f8f6778ec9725f73452738bb7d6c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 11:49:52 -0400
Subject: [PATCH 17/19] styled-react select component

---
 .../src/__tests__/primer-react.browser.test.tsx |  2 +-
 packages/styled-react/src/components/Select.tsx | 17 +++++++++++++++++
 packages/styled-react/src/index.tsx             |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/styled-react/src/components/Select.tsx

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..f1c8f9eddea 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -419,7 +419,7 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
-  test.skip('Select supports `sx` prop', () => {
+  test('Select supports `sx` prop', () => {
     render(<Select as="select" data-testid="component" sx={{background: 'red'}} required />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(screen.getByTestId('component')).toHaveAttribute('required')
diff --git a/packages/styled-react/src/components/Select.tsx b/packages/styled-react/src/components/Select.tsx
new file mode 100644
index 00000000000..32d83513142
--- /dev/null
+++ b/packages/styled-react/src/components/Select.tsx
@@ -0,0 +1,17 @@
+import {Select as PrimerSelect, type SelectProps as PrimerSelectProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+import styled from 'styled-components'
+
+type SelectProps = PrimerSelectProps & SxProp & {as?: React.ElementType}
+
+const StyledSelect: ForwardRefComponent<'select', SelectProps> = styled(PrimerSelect).withConfig({
+  shouldForwardProp: prop => (prop as keyof SelectProps) !== 'sx',
+})<SelectProps>`
+  ${sx}
+`
+const Select = ({as, ...props}: SelectProps) => {
+  return <StyledSelect {...props} {...(as ? {forwardedAs: as as React.ElementType} : {})} />
+}
+
+export {Select, type SelectProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 930e894bf2b..b4341a80b80 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -4,7 +4,6 @@ export {Button} from '@primer/react'
 export {Details} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
-export {Select} from '@primer/react'
 
 // theming depends on styled-components
 export {ThemeProvider} from '@primer/react'
@@ -47,6 +46,7 @@ export {
   type SegmentedControlButtonProps,
   type SegmentedControlIconButtonProps,
 } from './components/SegmentedControl'
+export {Select, type SelectProps} from './components/Select'
 export {Spinner, type SpinnerProps} from './components/Spinner'
 export {StateLabel, type StateLabelProps} from './components/StateLabel'
 export {SubNav, type SubNavProps, type SubNavLinkProps} from './components/SubNav'

From f5a18abca10b6a89438f7507f475557d128f2502 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 7 Oct 2025 17:43:08 -0400
Subject: [PATCH 18/19] use styled() wrappr in TextInput

---
 packages/styled-react/src/components/TextInput.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 3ad2b560b95..76ccf62207b 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -5,15 +5,19 @@ import {
 } from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
-import type {SxProp} from '../sx'
+import {sx, type SxProp} from '../sx'
 import type {ForwardRefExoticComponent, RefAttributes} from 'react'
+import {type ForwardRefComponent} from '../polymorphic'
+import styled from 'styled-components'
 
 export type TextInputProps = PrimerTextInputProps & SxProp & {as?: React.ElementType}
 export type TextInputActionProps = PrimerTextInputActionProps & SxProp
 
-const StyledTextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
-  return <Box as={PrimerTextInput} ref={ref} {...props} />
-})
+const StyledTextInput: ForwardRefComponent<'input', TextInputProps> = styled(PrimerTextInput).withConfig({
+  shouldForwardProp: prop => (prop as keyof TextInputProps) !== 'sx',
+})<TextInputProps>`
+  ${sx}
+`
 
 const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...props}, ref) => {
   return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />

From 5dbabf9c4b287c02804302400bc87a04beec2de2 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 8 Oct 2025 12:02:25 -0400
Subject: [PATCH 19/19] use styled wrapper instead of Box in TextInputAction

---
 packages/styled-react/src/components/TextInput.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 76ccf62207b..bbd7744ca98 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -4,7 +4,6 @@ import {
   type TextInputActionProps as PrimerTextInputActionProps,
 } from '@primer/react'
 import {forwardRef} from 'react'
-import {Box} from './Box'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefExoticComponent, RefAttributes} from 'react'
 import {type ForwardRefComponent} from '../polymorphic'
@@ -23,9 +22,11 @@ const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...prop
   return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
 })
 
-const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>((props, ref) => {
-  return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
-})
+const TextInputAction: ForwardRefComponent<'button', TextInputActionProps> = styled(PrimerTextInput.Action).withConfig({
+  shouldForwardProp: prop => (prop as keyof TextInputActionProps) !== 'sx',
+})<TextInputActionProps>`
+  ${sx}
+`
 
 type TextInputComposite = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
   Action: typeof TextInputAction