From 5d76f0bd41c136257ee5e2a28da316d7cb84b82f Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 14:28:26 -0400
Subject: [PATCH 1/8] rms sx prop from TextInputWrapper and related components

---
 .../Overlay.features.stories.module.css       | 12 ++++++++++
 .../src/Overlay/Overlay.features.stories.tsx  | 23 ++++++++----------
 packages/react/src/Select/Select.tsx          |  2 --
 .../src/TextInput/TextInput.dev.stories.tsx   | 24 +++----------------
 packages/react/src/TextInput/TextInput.tsx    |  3 ---
 .../TextInputWithTokens.tsx                   |  2 --
 packages/react/src/Textarea/Textarea.tsx      |  6 +----
 .../internal/components/TextInputWrapper.tsx  |  3 +--
 8 files changed, 27 insertions(+), 48 deletions(-)
 create mode 100644 packages/react/src/Overlay/Overlay.features.stories.module.css

diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
new file mode 100644
index 00000000000..f8d01927c2d
--- /dev/null
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -0,0 +1,12 @@
+.memexOverlayIssueTitleInput {
+  padding-block: 2px;
+  padding-inline: 7px;
+  text-align: left;
+  color: var(--fgColor-default);
+}
+
+.memexOverlayIssueTitleInput input {
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-medium);
+  padding-inline: 0;
+}
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index d28150add28..55076d4852d 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -17,8 +17,11 @@ import {
   ActionList,
   ActionMenu,
   useFocusTrap,
+  Stack,
+  Textarea,
 } from '..'
 import {Tooltip} from '../TooltipV2'
+import classes from './Overlay.features.stories.module.css'
 
 export default {
   title: 'Private/Components/Overlay/Features',
@@ -387,17 +390,17 @@ export const NestedOverlays = ({role, open}: Args) => {
               aria-label={role === 'dialog' ? 'Create a list' : undefined}
               ref={secondaryContainer}
             >
-              <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}} aria-label="Set Duration Form">
-                <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
+              <Stack as="form" gap="condensed" padding="normal" aria-label="Set Duration Form">
+                <Text color="fg.muted" size="medium">
                   Create a list to organize your starred repositories.
                 </Text>
-                <TextInput placeholder="Name this list" sx={{mb: 2}} />
-                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
+                <TextInput placeholder="Name this list" />
+                <Textarea placeholder="Write a description" rows={3} />
 
                 <Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
                   Create
                 </Button>
-              </Box>
+              </Stack>
             </Overlay>
           )}
         </Overlay>
@@ -486,14 +489,8 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                   }
                 }}
                 ref={inputRef}
-                sx={{
-                  width: '100%',
-                  py: '2px',
-                  px: '7px',
-                  textAlign: 'left',
-                  color: 'fg.default',
-                  input: {fontWeight: 'bold', fontSize: 4, px: 0},
-                }}
+                block
+                className={classes.memexOverlayIssueTitleInput}
               />
             ) : (
               <Button
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 7b79c7ef4f7..8f645975758 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -45,7 +45,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       size,
       required,
       validationStatus,
-      sx,
       ...rest
     }: SelectProps,
     ref,
@@ -58,7 +57,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         size={size}
         validationStatus={validationStatus}
         className={clsx(classes.TextInputWrapper, className)}
-        sx={sx}
       >
         <select
           {...rest}
diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
index 3e3a5ea021a..ebcf5fc62cd 100644
--- a/packages/react/src/TextInput/TextInput.dev.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -1,6 +1,6 @@
 import type React from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {Box, FormControl} from '..'
+import {FormControl} from '..'
 import TextInput from '.'
 import {textInputExcludedControlKeys} from '../utils/story-helpers'
 
@@ -11,28 +11,10 @@ export default {
 } as Meta<React.ComponentProps<typeof TextInput>>
 
 export const WithCSS = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <TextInput className="testCustomClassnameBorderColor" />
     </FormControl>
-  </Box>
-)
-
-export const WithSx = () => (
-  <Box as="form">
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} />
-    </FormControl>
-  </Box>
-)
-
-export const WithSxAndCSS = () => (
-  <Box as="form">
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
-    </FormControl>
-  </Box>
+  </form>
 )
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/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 934dd956825..529ae600e1b 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -80,7 +80,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -269,7 +268,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
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 6cabcd57f01..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.
@@ -58,7 +56,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
-      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -76,7 +73,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ): ReactElement => {
     return (
       <TextInputBaseWrapper
-        sx={sxProp}
         validationStatus={validationStatus}
         disabled={disabled}
         block={block}
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 4d7a1a9280a..b6d63b7b09c 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,6 +1,5 @@
 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'
 
@@ -30,7 +29,7 @@ type StyledTextInputBaseWrapperProps = {
   minWidth?: string | number | ResponsiveValue<string | number>
   /** @deprecated Update `max-width` using CSS modules or style. */
   maxWidth?: string | number | ResponsiveValue<string | number>
-} & SxProp
+}
 
 type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean

From 33561872cbef18c97bc4825b3e0161b257a9e9ad Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 14:47:14 -0400
Subject: [PATCH 2/8] rms 'width', 'minWidth', 'maxWidth' from TextInputWrapper

---
 packages/react/src/TextInput/TextInput.tsx    | 20 +------------------
 .../TextInputWithTokens.tsx                   |  6 ------
 .../internal/components/TextInputWrapper.tsx  | 16 ---------------
 3 files changed, 1 insertion(+), 41 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 48cf706abfb..2aa6c615451 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -40,19 +40,7 @@ export type TextInputNonPassthroughProps = {
    */
   trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Partial<
-  Pick<
-    StyledWrapperProps,
-    | 'block'
-    | 'contrast'
-    | 'disabled'
-    | 'monospace'
-    | 'width'
-    | 'maxWidth'
-    | 'minWidth'
-    | 'variant'
-    | 'size'
-    | 'validationStatus'
-  >
+  Pick<StyledWrapperProps, 'block' | 'contrast' | 'disabled' | 'monospace' | 'variant' | 'size' | 'validationStatus'>
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -78,9 +66,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onFocus,
       onBlur,
       // start deprecated props
-      width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
       variant: variantProp,
       // end deprecated props
       type = 'text',
@@ -136,9 +121,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         disabled={disabled}
         monospace={monospace}
         size={sizeProp}
-        width={widthProp}
-        minWidth={minWidthProp}
-        maxWidth={maxWidthProp}
         variant={variantProp}
         hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
         hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 529ae600e1b..4e172aa00e0 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -87,9 +87,6 @@ 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,9 +255,6 @@ 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
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index b6d63b7b09c..8f5c1d49fef 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,5 +1,4 @@
 import React, {type ComponentProps} from 'react'
-import {type ResponsiveValue} from 'styled-system'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
@@ -23,12 +22,6 @@ 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>
 }
 
 type StyledTextInputWrapperProps = {
@@ -40,7 +33,6 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
   function TextInputBaseWrapper(
     {
       className,
-      style,
       variant,
       size,
       isInputFocused,
@@ -50,9 +42,6 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
       contrast,
       monospace,
       block,
-      width,
-      minWidth,
-      maxWidth,
       ...restProps
     },
     forwardRef,
@@ -71,11 +60,6 @@ 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}
       />
     )

From 55947fed7b511acf03d381e4fabf3374bec79a44 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 14:54:14 -0400
Subject: [PATCH 3/8] rms 'width', 'minWidth', 'maxWidth' from component API
 docs

---
 .../react/src/TextInput/TextInput.docs.json   | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json
index 0f99df7356e..2360d1590dc 100644
--- a/packages/react/src/TextInput/TextInput.docs.json
+++ b/packages/react/src/TextInput/TextInput.docs.json
@@ -140,27 +140,6 @@
       "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",
@@ -228,4 +207,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}

From cabae9794e7969fca290efa2127f88d7ad41cc5d Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 15:04:12 -0400
Subject: [PATCH 4/8] appeases Stylelint

---
 packages/react/src/Overlay/Overlay.features.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 55076d4852d..2ef19a17af0 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -490,7 +490,7 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                 }}
                 ref={inputRef}
                 block
-                className={classes.memexOverlayIssueTitleInput}
+                className={classes.MemexOverlayIssueTitleInput}
               />
             ) : (
               <Button

From bb312d5eda61dd5b1528202e33da06b9ab0058a2 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 15:05:32 -0400
Subject: [PATCH 5/8] adds changeset

---
 .changeset/gold-dingos-sneeze.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-dingos-sneeze.md

diff --git a/.changeset/gold-dingos-sneeze.md b/.changeset/gold-dingos-sneeze.md
new file mode 100644
index 00000000000..a2aa897240c
--- /dev/null
+++ b/.changeset/gold-dingos-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes styled-system usage from TextInputWrapper and related components and Storybook stories.

From 231a177b91594952c5800a8a7918aa85edde459f Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 25 Aug 2025 15:11:13 -0400
Subject: [PATCH 6/8] forgot to add CSS file lint fixes

---
 .../react/src/Overlay/Overlay.features.stories.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index f8d01927c2d..3e57053e674 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -1,11 +1,11 @@
-.memexOverlayIssueTitleInput {
-  padding-block: 2px;
-  padding-inline: 7px;
+.MemexOverlayIssueTitleInput {
+  padding-block: var(--base-size-2);
+  padding-inline: var(--base-size-8);
   text-align: left;
   color: var(--fgColor-default);
 }
 
-.memexOverlayIssueTitleInput input {
+.MemexOverlayIssueTitleInput input {
   font-weight: var(--base-text-weight-semibold);
   font-size: var(--text-title-size-medium);
   padding-inline: 0;

From 5d28459ea9425f1b62f78d7b2ea60fdc1fcbe3b0 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 26 Aug 2025 18:03:15 -0400
Subject: [PATCH 7/8] fixes broken SelectPanel styles

---
 packages/react/src/SelectPanel/SelectPanel.module.css | 5 +++++
 packages/react/src/SelectPanel/SelectPanel.tsx        | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css
index c1174442f80..a6e3f06478f 100644
--- a/packages/react/src/SelectPanel/SelectPanel.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.module.css
@@ -52,6 +52,11 @@
   color: var(--fgColor-muted);
 }
 
+.FilterInputWrapper {
+  margin: var(--base-size-8);
+  width: auto;
+}
+
 .Notice {
   display: flex;
   padding-top: var(--base-size-12);
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 0e17c5c5958..569d2cd41ce 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -656,10 +656,10 @@ function Panel({
 
   const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
     return {
-      sx: {m: 2},
       contrast: true,
       leadingVisual: SearchIcon,
       'aria-label': inputLabel,
+      className: classes.FilterInputWrapper,
       ...textInputProps,
     }
   }, [inputLabel, textInputProps])

From 15248ef8eed274e734954a2bc64cedea44bf6bae Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 26 Aug 2025 18:18:43 -0400
Subject: [PATCH 8/8] rms unused VRTs

---
 e2e/components/TextInput.test.ts | 36 --------------------------------
 1 file changed, 36 deletions(-)

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`)
-        })
-      })
-    }
-  })
 })