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.
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`)
- })
- })
- }
- })
})
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..3e57053e674
--- /dev/null
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -0,0 +1,12 @@
+.MemexOverlayIssueTitleInput {
+ padding-block: var(--base-size-2);
+ padding-inline: var(--base-size-8);
+ 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..2ef19a17af0 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}
>
-
-
+
+
Create a list to organize your starred repositories.
-
-
+
+
-
+
)}
@@ -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}
/>
) : (