From be72ce433520bf01b0d2b7864ad25ec78da90b67 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 12 Sep 2025 13:26:36 -0400
Subject: [PATCH 1/4] adds sx prop back to TextInput

---
 .../src/TextInput/TextInput.dev.stories.tsx    | 18 ++++++++++++++++++
 packages/react/src/TextInput/TextInput.tsx     |  7 ++++++-
 .../internal/components/TextInputWrapper.tsx   |  3 ++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
index ebcf5fc62cd..356f21970c3 100644
--- a/packages/react/src/TextInput/TextInput.dev.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -18,3 +18,21 @@ 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>
+)
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 2aa6c615451..e787ab4f785 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -40,7 +40,10 @@ export type TextInputNonPassthroughProps = {
    */
   trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Partial<
-  Pick<StyledWrapperProps, 'block' | 'contrast' | 'disabled' | 'monospace' | 'variant' | 'size' | 'validationStatus'>
+  Pick<
+    StyledWrapperProps,
+    'block' | 'contrast' | 'disabled' | 'monospace' | 'variant' | 'size' | 'sx' | 'validationStatus'
+  >
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -67,6 +70,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       // start deprecated props
       variant: variantProp,
+      sx: sxProp,
       // end deprecated props
       type = 'text',
       required,
@@ -128,6 +132,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         isInputFocused={isInputFocused}
         onClick={focusInput}
         aria-busy={Boolean(loading)}
+        sx={sxProp}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
         <TextInputInnerVisualSlot
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 8f5c1d49fef..721c239db26 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -4,6 +4,7 @@ import {clsx} from 'clsx'
 
 import styles from './TextInputWrapper.module.css'
 import {BoxWithFallback} from './BoxWithFallback'
+import type {SxProp} from '../..'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
@@ -22,7 +23,7 @@ type StyledTextInputBaseWrapperProps = {
   style?: React.CSSProperties
   onClick?: React.MouseEventHandler
   children?: React.ReactNode
-}
+} & SxProp
 
 type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean

From 1fb6fe79c3491c765f3812491402e5269ad2a80a Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 12 Sep 2025 13:28:07 -0400
Subject: [PATCH 2/4] adds changeset

---
 .changeset/silly-parks-give.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silly-parks-give.md

diff --git a/.changeset/silly-parks-give.md b/.changeset/silly-parks-give.md
new file mode 100644
index 00000000000..aaf865164d0
--- /dev/null
+++ b/.changeset/silly-parks-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds `sx` prop back to TextInput

From d0afc0845d059d42b20a68bbabf39fce25e27be0 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 12 Sep 2025 14:03:05 -0400
Subject: [PATCH 3/4] adds 'sx' prop back to Textarea

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

diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index c7eb10d693c..174b49125c7 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import classes from './TextArea.module.css'
+import type {SxProp} from '../sx'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
 export const DEFAULT_TEXTAREA_COLS = 30
@@ -45,7 +46,8 @@ export type TextareaProps = {
    * CSS styles to apply to the Textarea
    */
   style?: React.CSSProperties
-} & TextareaHTMLAttributes<HTMLTextAreaElement>
+} & TextareaHTMLAttributes<HTMLTextAreaElement> &
+  SxProp
 
 /**
  * An accessible, native textarea component that supports validation states.
@@ -67,6 +69,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       minHeight,
       maxHeight,
       style,
+      sx: sxProp,
       ...rest
     }: TextareaProps,
     ref,
@@ -78,6 +81,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         block={block}
         contrast={contrast}
         className={className}
+        sx={sxProp}
       >
         <textarea
           value={value}

From 82c953ad80f6a862ff7f3756fda5f5f47d5eb65f Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 15 Sep 2025 16:43:23 -0400
Subject: [PATCH 4/4] revert all component and styled-react changes from PR
 #6666

---
 e2e/components/TextInput.test.ts              | 36 +++++++++++++++++++
 .../src/SelectPanel/SelectPanel.module.css    |  9 +++--
 .../react/src/SelectPanel/SelectPanel.tsx     |  2 +-
 .../react/src/TextInput/TextInput.docs.json   | 21 +++++++++++
 packages/react/src/TextInput/TextInput.tsx    | 22 ++++++++++--
 .../TextInputWithTokens.tsx                   |  8 +++++
 packages/react/src/Textarea/Textarea.tsx      |  6 ++--
 .../internal/components/TextInputWrapper.tsx  | 18 +++++++++-
 .../src/components/Autocomplete.tsx           | 33 -----------------
 .../styled-react/src/components/Select.tsx    | 25 -------------
 .../styled-react/src/components/TextInput.tsx | 21 -----------
 packages/styled-react/src/index.tsx           | 24 ++++---------
 packages/styled-react/src/sx.ts               |  8 -----
 13 files changed, 115 insertions(+), 118 deletions(-)
 delete mode 100644 packages/styled-react/src/components/Autocomplete.tsx
 delete mode 100644 packages/styled-react/src/components/Select.tsx
 delete mode 100644 packages/styled-react/src/components/TextInput.tsx
 delete mode 100644 packages/styled-react/src/sx.ts

diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index 114854866b2..fceb98ca879 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -219,6 +219,24 @@ 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, () => {
@@ -236,4 +254,22 @@ 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`)
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css
index 28fc342bfa7..3a999ad1a60 100644
--- a/packages/react/src/SelectPanel/SelectPanel.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.module.css
@@ -52,11 +52,6 @@
   color: var(--fgColor-muted);
 }
 
-.FilterInputWrapper {
-  margin: var(--base-size-8);
-  width: auto;
-}
-
 .Notice {
   margin-top: var(--base-size-4);
   margin-right: var(--base-size-8);
@@ -235,3 +230,7 @@
   inset: 0;
   background-color: var(--overlay-backdrop-bgColor);
 }
+
+.TextInput {
+  margin: var(--base-size-8);
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index c4457c787ee..4c7dae093d9 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -648,7 +648,7 @@ function Panel({
 
   const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
     return {
-      className: classes.FilterInputWrapper,
+      className: classes.TextInput,
       contrast: true,
       leadingVisual: SearchIcon,
       'aria-label': inputLabel,
diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json
index 2360d1590dc..66de3f3ac0a 100644
--- a/packages/react/src/TextInput/TextInput.docs.json
+++ b/packages/react/src/TextInput/TextInput.docs.json
@@ -140,6 +140,27 @@
       "deprecated": true,
       "description": "(Use size) Creates a smaller or larger input than the default."
     },
+    {
+      "name": "width",
+      "type": "string | number | Array<string | number>",
+      "defaultValue": "",
+      "deprecated": true,
+      "description": "(Use sx prop) Set the width of the input"
+    },
+    {
+      "name": "maxWidth",
+      "type": "string | number | Array<string | number>",
+      "defaultValue": "",
+      "deprecated": true,
+      "description": "(Use sx prop) Set the maximum width of the input"
+    },
+    {
+      "name": "minWidth",
+      "type": "string | number | Array<string | number>",
+      "defaultValue": "",
+      "deprecated": true,
+      "description": "(Use sx prop) Set the minimum width of the input"
+    },
     {
       "name": "icon",
       "type": "React.ComponentType",
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index e787ab4f785..9062b461411 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -42,7 +42,17 @@ export type TextInputNonPassthroughProps = {
 } & Partial<
   Pick<
     StyledWrapperProps,
-    'block' | 'contrast' | 'disabled' | 'monospace' | 'variant' | 'size' | 'sx' | 'validationStatus'
+    | 'block'
+    | 'contrast'
+    | 'disabled'
+    | 'monospace'
+    | 'sx'
+    | 'width'
+    | 'maxWidth'
+    | 'minWidth'
+    | 'variant'
+    | 'size'
+    | 'validationStatus'
   >
 >
 
@@ -65,12 +75,15 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
+      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
       // start deprecated props
+      width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
       variant: variantProp,
-      sx: sxProp,
       // end deprecated props
       type = 'text',
       required,
@@ -124,7 +137,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
+        sx={sxProp}
         size={sizeProp}
+        width={widthProp}
+        minWidth={minWidthProp}
+        maxWidth={maxWidthProp}
         variant={variantProp}
         hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
         hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
@@ -132,7 +149,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         isInputFocused={isInputFocused}
         onClick={focusInput}
         aria-busy={Boolean(loading)}
-        sx={sxProp}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
         <TextInputInnerVisualSlot
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index c5786604548..a0f3b0a2954 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -83,6 +83,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
+    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -90,6 +91,9 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     size = 'xlarge',
     hideTokenRemoveButtons = false,
     maxHeight,
+    width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
@@ -258,6 +262,9 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       disabled={disabled}
       hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
       hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
+      width={widthProp}
+      minWidth={minWidthProp}
+      maxWidth={maxWidthProp}
       size={inputSizeMap[size]}
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead
@@ -265,6 +272,7 @@ 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
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 174b49125c7..6cabcd57f01 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -2,8 +2,8 @@ import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
-import classes from './TextArea.module.css'
 import type {SxProp} from '../sx'
+import classes from './TextArea.module.css'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
 export const DEFAULT_TEXTAREA_COLS = 30
@@ -58,6 +58,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
+      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -69,19 +70,18 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       minHeight,
       maxHeight,
       style,
-      sx: sxProp,
       ...rest
     }: TextareaProps,
     ref,
   ): ReactElement => {
     return (
       <TextInputBaseWrapper
+        sx={sxProp}
         validationStatus={validationStatus}
         disabled={disabled}
         block={block}
         contrast={contrast}
         className={className}
-        sx={sxProp}
       >
         <textarea
           value={value}
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 721c239db26..4d7a1a9280a 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,10 +1,11 @@
 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'
 
 import styles from './TextInputWrapper.module.css'
 import {BoxWithFallback} from './BoxWithFallback'
-import type {SxProp} from '../..'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
@@ -23,6 +24,12 @@ type StyledTextInputBaseWrapperProps = {
   style?: React.CSSProperties
   onClick?: React.MouseEventHandler
   children?: React.ReactNode
+  /** @deprecated Update `width` using CSS modules or style. */
+  width?: string | number | ResponsiveValue<string | number>
+  /** @deprecated Update `min-width` using CSS modules or style. */
+  minWidth?: string | number | ResponsiveValue<string | number>
+  /** @deprecated Update `max-width` using CSS modules or style. */
+  maxWidth?: string | number | ResponsiveValue<string | number>
 } & SxProp
 
 type StyledTextInputWrapperProps = {
@@ -34,6 +41,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
   function TextInputBaseWrapper(
     {
       className,
+      style,
       variant,
       size,
       isInputFocused,
@@ -43,6 +51,9 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
       contrast,
       monospace,
       block,
+      width,
+      minWidth,
+      maxWidth,
       ...restProps
     },
     forwardRef,
@@ -61,6 +72,11 @@ 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
+        }
         {...restProps}
       />
     )
diff --git a/packages/styled-react/src/components/Autocomplete.tsx b/packages/styled-react/src/components/Autocomplete.tsx
deleted file mode 100644
index a27a2715589..00000000000
--- a/packages/styled-react/src/components/Autocomplete.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  Autocomplete as PrimerAutocomplete,
-  type AutocompleteInputProps as PrimerAutocompleteInputProps,
-  Box,
-} from '@primer/react'
-import {forwardRef, type PropsWithChildren} from 'react'
-import type {SxProp} from '../sx'
-
-type AutocompleteProps = PropsWithChildren<Parameters<typeof PrimerAutocomplete>[0]> & SxProp
-
-const AutocompleteImpl = forwardRef<HTMLDivElement, AutocompleteProps>(function Autocomplete(props, ref) {
-  return <Box as={PrimerAutocomplete as React.ElementType} ref={ref} {...props} />
-})
-
-type AutocompleteInputProps = PropsWithChildren<PrimerAutocompleteInputProps> & SxProp
-
-const AutocompleteInput = forwardRef<HTMLInputElement, AutocompleteInputProps>(function AutocompleteInput(props, ref) {
-  return <Box as={PrimerAutocomplete.Input} ref={ref} {...props} />
-})
-
-// Type annotation needed because Autocomplete's subcomponents use `@primer/react` internals
-const Autocomplete: typeof AutocompleteImpl & {
-  Input: typeof AutocompleteInput
-  Menu: typeof PrimerAutocomplete.Menu
-  Overlay: typeof PrimerAutocomplete.Overlay
-} = Object.assign(AutocompleteImpl, {
-  Input: AutocompleteInput,
-  Menu: PrimerAutocomplete.Menu,
-  Overlay: PrimerAutocomplete.Overlay,
-})
-
-export {Autocomplete}
-export type {AutocompleteProps}
diff --git a/packages/styled-react/src/components/Select.tsx b/packages/styled-react/src/components/Select.tsx
deleted file mode 100644
index 3ff96611563..00000000000
--- a/packages/styled-react/src/components/Select.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Box, Select as PrimerSelect, type SelectProps as PrimerSelectProps} from '@primer/react'
-import {forwardRef, type PropsWithChildren} from 'react'
-import type {SxProp} from '../sx'
-
-type SelectProps = PropsWithChildren<PrimerSelectProps> & SxProp
-
-const SelectImpl: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>> = forwardRef<
-  HTMLSelectElement,
-  SelectProps
->(function Select(props, ref) {
-  return <Box as={PrimerSelect as React.ElementType} ref={ref} {...props} />
-})
-
-// Type annotation needed because Select uses `@primer/react` internals:
-// `TextInputWrapper` component and `FormValidationStatus` type
-const Select: typeof SelectImpl & {
-  Option: typeof PrimerSelect.Option
-  OptGroup: typeof PrimerSelect.OptGroup
-} = Object.assign(SelectImpl, {
-  Option: PrimerSelect.Option,
-  OptGroup: PrimerSelect.OptGroup,
-})
-
-export {Select}
-export type {SelectProps}
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
deleted file mode 100644
index 85752b03be4..00000000000
--- a/packages/styled-react/src/components/TextInput.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Box, TextInput as PrimerTextInput, type TextInputProps as PrimerTextInputProps} from '@primer/react'
-import {forwardRef, type PropsWithChildren} from 'react'
-import type {SxProp} from '../sx'
-
-type TextInputProps = PropsWithChildren<PrimerTextInputProps> & SxProp
-
-const TextInputImpl: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>> =
-  forwardRef<HTMLInputElement, TextInputProps>(function TextInput(props, ref) {
-    return <Box as={PrimerTextInput as React.ElementType} ref={ref} {...props} />
-  })
-
-// Type annotation needed because TextInput uses `@primer/react` internals:
-// `TextInputWrapper` component and `FormValidationStatus` type
-const TextInput: typeof TextInputImpl & {
-  Action: typeof PrimerTextInput.Action
-} = Object.assign(TextInputImpl, {
-  Action: PrimerTextInput.Action,
-})
-
-export {TextInput}
-export type {TextInputProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 6bb625118f4..66763c5389a 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -1,5 +1,3 @@
-import type React from 'react'
-import {forwardRef, type PropsWithChildren} from 'react'
 import {
   type BetterSystemStyleObject,
   Box,
@@ -10,8 +8,6 @@ import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
   type SubNavLinkProps as PrimerSubNavLinkProps,
-  Textarea as PrimerTextarea,
-  type TextareaProps as PrimerTextareaProps,
   ToggleSwitch as PrimerToggleSwitch,
   type ToggleSwitchProps as PrimerToggleSwitchProps,
   type SegmentedControlProps as PrimerSegmentedControlProps,
@@ -19,6 +15,7 @@ import {
   type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps,
   type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps,
 } from '@primer/react'
+import React, {forwardRef, type PropsWithChildren} from 'react'
 import type {
   BackgroundProps,
   BorderProps,
@@ -31,9 +28,6 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
-import {Autocomplete} from './components/Autocomplete'
-import {Select} from './components/Select'
-import {TextInput} from './components/TextInput'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -96,21 +90,12 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-type TextareaProps = PropsWithChildren<PrimerTextareaProps> & SxProp
-
-// Type annotation needed because TextInput uses `FormValidationStatus` internal type
-const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>> = forwardRef<
-  HTMLTextAreaElement,
-  TextareaProps
->(function Textarea(props, ref) {
-  return <Box as={PrimerTextarea} ref={ref} {...props} />
-})
-
-export {Autocomplete, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch}
+export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
   ActionMenu,
+  Autocomplete,
   Avatar,
   Breadcrumbs,
   Button,
@@ -135,8 +120,11 @@ export {
   ProgressBar,
   RadioGroup,
   RelativeTime,
+  Select,
   Spinner,
   Text,
+  Textarea,
+  TextInput,
   Timeline,
   Token,
   Tooltip,
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
deleted file mode 100644
index e3ff0277f10..00000000000
--- a/packages/styled-react/src/sx.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import css from '@styled-system/css'
-import type {SxProp} from '@primer/react'
-
-export const sx = (props: SxProp) => {
-  return css(props.sx)
-}
-
-export type {SxProp}