diff --git a/.changeset/dry-seals-count.md b/.changeset/dry-seals-count.md
new file mode 100644
index 00000000000..87b384272ce
--- /dev/null
+++ b/.changeset/dry-seals-count.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert TextInput to CSS module behind feature flag
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
index 77f34f28978..b3186ad8f86 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
@@ -1,3 +1,18 @@
+.TextInputWrapper {
+  padding-top: var(--base-size-6);
+  padding-bottom: var(--base-size-6);
+  padding-left: var(--base-size-12);
+
+  &:where([data-block]) {
+    display: flex;
+    width: 100%;
+  }
+
+  &:where([data-token-wrapping]) {
+    overflow: auto;
+  }
+}
+
 .UnstyledTextInput {
   height: 100%;
 }
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 4ded926373d..54df57ca385 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -17,8 +17,9 @@ import TextInputWrapper from '../internal/components/TextInputWrapper'
 import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 import {useFeatureFlag} from '../FeatureFlags'
-
 import styles from './TextInputWithTokens.module.css'
+import {clsx} from 'clsx'
+import type {BetterSystemStyleObject} from '../sx'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
@@ -96,6 +97,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
+    style,
     ...rest
   }: TextInputWithTokensProps<TokenComponentType | typeof Token>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
@@ -255,10 +257,49 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
 
   const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
 
+  const stylingProps = React.useMemo(
+    () =>
+      enabled
+        ? {
+            className: clsx(className, styles.TextInputWrapper),
+            style: maxHeight ? {maxHeight, ...style} : style,
+            sx: sxProp,
+          }
+        : {
+            className,
+            style,
+            sx: {
+              paddingLeft: '12px',
+              py: '6px',
+              ...(block
+                ? {
+                    display: 'flex',
+                    width: '100%',
+                  }
+                : {}),
+
+              ...(maxHeight
+                ? {
+                    maxHeight,
+                    overflow: 'auto',
+                  }
+                : {}),
+
+              ...(preventTokenWrapping
+                ? {
+                    overflow: 'auto',
+                  }
+                : {}),
+
+              ...sxProp,
+            } as BetterSystemStyleObject,
+          },
+    [block, className, enabled, maxHeight, preventTokenWrapping, style, sxProp],
+  )
+
   return (
     <TextInputWrapper
       block={block}
-      className={className}
       contrast={contrast}
       disabled={disabled}
       hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
@@ -270,31 +311,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
-      sx={{
-        paddingLeft: '12px',
-        py: `calc(12px / 2)`,
-        ...(block
-          ? {
-              display: 'flex',
-              width: '100%',
-            }
-          : {}),
-
-        ...(maxHeight
-          ? {
-              maxHeight,
-              overflow: 'auto',
-            }
-          : {}),
-
-        ...(preventTokenWrapping
-          ? {
-              overflow: 'auto',
-            }
-          : {}),
-
-        ...sxProp,
-      }}
+      data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
+      {...stylingProps}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 1facb429f36..e2f8ab021b2 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -2,7 +2,21 @@
 
 exports[`snapshots renders a custom empty state message 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -200,20 +214,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -282,7 +282,21 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 exports[`snapshots renders a loading state 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -480,20 +494,6 @@ exports[`snapshots renders a loading state 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -619,7 +619,21 @@ exports[`snapshots renders a loading state 1`] = `
 
 exports[`snapshots renders a menu that contains an item to add to the menu 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -817,20 +831,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
 
 }
@@ -1575,7 +1575,21 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 exports[`snapshots renders a multiselect input 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -1773,20 +1787,6 @@ exports[`snapshots renders a multiselect input 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
 
 }
@@ -2409,7 +2409,21 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -2607,20 +2621,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
 
 }
@@ -3426,7 +3426,21 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 exports[`snapshots renders a single select input 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -3624,20 +3638,6 @@ exports[`snapshots renders a single select input 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
 
 }
@@ -4635,7 +4635,21 @@ exports[`snapshots renders with a custom text input component 1`] = `
 
 exports[`snapshots renders with an input value 1`] = `
 [
-  .c0 {
+  .c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+.c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
@@ -4833,20 +4847,6 @@ exports[`snapshots renders with an input value 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
 
 }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 9bf40421763..633e7f42c4f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextInput renders 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -199,20 +213,6 @@ exports[`TextInput renders 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -236,6 +236,20 @@ exports[`TextInput renders 1`] = `
 `;
 
 exports[`TextInput renders block 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -434,20 +448,6 @@ exports[`TextInput renders block 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -472,6 +472,20 @@ exports[`TextInput renders block 1`] = `
 `;
 
 exports[`TextInput renders contrast 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -670,20 +684,6 @@ exports[`TextInput renders contrast 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -708,6 +708,20 @@ exports[`TextInput renders contrast 1`] = `
 `;
 
 exports[`TextInput renders error 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -906,20 +920,6 @@ exports[`TextInput renders error 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -945,6 +945,20 @@ exports[`TextInput renders error 1`] = `
 `;
 
 exports[`TextInput renders large 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1143,20 +1157,6 @@ exports[`TextInput renders large 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -1181,6 +1181,20 @@ exports[`TextInput renders large 1`] = `
 `;
 
 exports[`TextInput renders leadingVisual 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1379,20 +1393,6 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -1446,6 +1446,20 @@ exports[`TextInput renders leadingVisual 1`] = `
 `;
 
 exports[`TextInput renders leadingVisual 2`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1644,20 +1658,6 @@ exports[`TextInput renders leadingVisual 2`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -1711,6 +1711,20 @@ exports[`TextInput renders leadingVisual 2`] = `
 `;
 
 exports[`TextInput renders leadingVisual 3`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1909,20 +1923,6 @@ exports[`TextInput renders leadingVisual 3`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -1958,6 +1958,20 @@ exports[`TextInput renders leadingVisual 3`] = `
 `;
 
 exports[`TextInput renders leadingVisual 4`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -2156,20 +2170,6 @@ exports[`TextInput renders leadingVisual 4`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -2205,6 +2205,20 @@ exports[`TextInput renders leadingVisual 4`] = `
 `;
 
 exports[`TextInput renders monospace 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -2403,20 +2417,6 @@ exports[`TextInput renders monospace 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -2441,6 +2441,20 @@ exports[`TextInput renders monospace 1`] = `
 `;
 
 exports[`TextInput renders placeholder 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -2639,20 +2653,6 @@ exports[`TextInput renders placeholder 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -2677,6 +2677,20 @@ exports[`TextInput renders placeholder 1`] = `
 `;
 
 exports[`TextInput renders small 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -2875,20 +2889,6 @@ exports[`TextInput renders small 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -3336,6 +3336,20 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   animation-delay: 0s;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -3534,20 +3548,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
   .c4:focus {
     outline: solid 1px transparent;
@@ -3975,6 +3975,20 @@ exports[`TextInput renders trailingAction text button 1`] = `
   height: var(--inner-action-size);
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -4173,20 +4187,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
   .c4:focus {
     outline: solid 1px transparent;
@@ -4693,6 +4693,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   animation-delay: 0s;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -4891,20 +4905,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (forced-colors:active) {
   .c4:focus {
     outline: solid 1px transparent;
@@ -5001,6 +5001,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 `;
 
 exports[`TextInput renders trailingVisual 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -5199,20 +5213,6 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -5266,6 +5266,20 @@ exports[`TextInput renders trailingVisual 1`] = `
 `;
 
 exports[`TextInput renders trailingVisual 2`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -5464,20 +5478,6 @@ exports[`TextInput renders trailingVisual 2`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -5531,6 +5531,20 @@ exports[`TextInput renders trailingVisual 2`] = `
 `;
 
 exports[`TextInput renders trailingVisual 3`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -5729,20 +5743,6 @@ exports[`TextInput renders trailingVisual 3`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -5778,6 +5778,20 @@ exports[`TextInput renders trailingVisual 3`] = `
 `;
 
 exports[`TextInput renders trailingVisual 4`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -5976,20 +5990,6 @@ exports[`TextInput renders trailingVisual 4`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -6053,6 +6053,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -6251,20 +6265,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -6369,6 +6369,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -6567,20 +6581,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -6723,6 +6723,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -6921,20 +6935,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -7048,6 +7048,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -7240,24 +7254,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c1:where(:not([data-leading-visual])) > select {
   padding-left: var(--base-size-12);
 }
-
-.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
-.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
-  padding-right: var(--base-size-12);
-}
-
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 @media (min-width:768px) {
@@ -7447,6 +7447,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -7645,20 +7659,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -7846,6 +7846,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -8044,20 +8058,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -8240,6 +8240,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -8438,20 +8452,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -8595,6 +8595,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -8793,20 +8807,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -8989,6 +8989,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -9187,20 +9201,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -9353,6 +9353,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -9551,20 +9565,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -9793,6 +9793,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -9991,20 +10005,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -10232,6 +10232,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -10430,20 +10444,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c5:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -10625,6 +10625,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
 `;
 
 exports[`TextInput should render a password input 1`] = `
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -10823,20 +10837,6 @@ exports[`TextInput should render a password input 1`] = `
   padding-right: var(--base-size-12);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 782b2826cb6..d06043e9a98 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -52,6 +52,21 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -206,8 +221,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -258,23 +273,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -992,6 +992,21 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1146,8 +1161,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -1198,23 +1213,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -1525,6 +1525,21 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-grow: 1;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1679,8 +1694,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1736,8 +1751,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1745,21 +1760,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
@@ -1844,6 +1844,21 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -1998,8 +2013,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   max-height: 20px;
   overflow: auto;
 }
@@ -2052,27 +2067,12 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   max-height: 20px;
   overflow: auto;
 }
 
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
 .c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2208,6 +2208,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 <span
   className="c0 c1"
   data-size="medium"
+  data-token-wrapping={true}
   onClick={[Function]}
 >
   <div
@@ -2698,6 +2699,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -2852,8 +2868,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -2904,23 +2920,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -3546,6 +3547,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -3700,8 +3716,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -3752,23 +3768,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -4394,6 +4395,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -4548,8 +4564,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -4600,23 +4616,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -5242,6 +5243,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -5396,8 +5412,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -5448,23 +5464,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -6092,6 +6093,21 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -6246,8 +6262,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   overflow: auto;
 }
 
@@ -6299,26 +6315,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
   overflow: auto;
 }
 
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
 .c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -6454,6 +6455,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 <span
   className="c0 c1"
   data-size="medium"
+  data-token-wrapping={true}
   onClick={[Function]}
 >
   <div
@@ -6944,6 +6946,21 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -7098,8 +7115,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -7150,23 +7167,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -7511,6 +7513,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -7665,8 +7682,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -7717,23 +7734,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -8422,6 +8424,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -8576,8 +8593,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -8628,23 +8645,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c6 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c6:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c7 {
@@ -9370,6 +9372,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -9524,8 +9541,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -9576,23 +9593,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -10290,6 +10292,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -10444,8 +10461,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -10496,23 +10513,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -11283,6 +11285,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -11437,8 +11454,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -11489,23 +11506,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -12276,6 +12278,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -12430,8 +12447,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -12482,23 +12499,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -13264,6 +13266,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -13418,8 +13435,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -13470,23 +13487,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -14214,6 +14216,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -14368,8 +14385,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -14420,23 +14437,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c6 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c6:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c7 {
@@ -15202,6 +15204,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -15356,8 +15373,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -15408,23 +15425,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -16161,6 +16163,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -16315,8 +16332,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -16367,23 +16384,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -17192,6 +17194,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -17346,8 +17363,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -17398,23 +17415,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -18225,6 +18227,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c7:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -18379,8 +18396,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -18431,23 +18448,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c7:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c8 {
@@ -19222,6 +19224,21 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   border-width: 0;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -19376,8 +19393,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -19428,23 +19445,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -20059,6 +20061,21 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-grow: 1;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -20213,8 +20230,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -20265,23 +20282,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c5 {
@@ -20868,6 +20870,21 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-grow: 1;
 }
 
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: var(--base-size-20);
@@ -21022,8 +21039,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c0 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .c1 {
@@ -21074,23 +21091,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c1 {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 @media (min-width:768px) {
diff --git a/packages/react/src/internal/components/TextInputWrapper.module.css b/packages/react/src/internal/components/TextInputWrapper.module.css
new file mode 100644
index 00000000000..2ce66ebc6be
--- /dev/null
+++ b/packages/react/src/internal/components/TextInputWrapper.module.css
@@ -0,0 +1,193 @@
+.TextInputBaseWrapper {
+  display: inline-flex;
+  min-height: var(--base-size-32);
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
+  align-items: stretch;
+
+  input,
+  textarea {
+    cursor: text;
+  }
+
+  select {
+    cursor: pointer;
+  }
+
+  input,
+  textarea,
+  select {
+    &::placeholder {
+      color: var(--fgColor-muted);
+    }
+  }
+
+  &:where([data-trailing-action][data-focused]),
+  &:where(:not([data-trailing-action]):focus-within) {
+    border-color: var(--borderColor-accent-emphasis);
+    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+    outline-offset: -1px;
+  }
+
+  > textarea {
+    padding: var(--base-size-12);
+  }
+
+  &:where([data-contrast]) {
+    background-color: var(--bgColor-inset);
+  }
+
+  &:where([data-disabled]) {
+    color: var(--fgColor-disabled);
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    box-shadow: none;
+
+    input,
+    textarea,
+    select {
+      cursor: not-allowed;
+    }
+  }
+
+  &:where([data-monospace]) {
+    font-family: var(--fontStack-monospace);
+  }
+
+  &:where([data-validation='error']) {
+    border-color: var(--borderColor-danger-emphasis);
+
+    &:where([data-trailing-action][data-focused]),
+    &:where(:not([data-trailing-action])):focus-within {
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--fgColor-accent);
+      outline: 2px solid var(--fgColor-accent);
+      outline-offset: -1px;
+    }
+  }
+
+  &:where([data-validation='success']) {
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--bgColor-success-emphasis);
+  }
+
+  &:where([data-block]) {
+    display: flex;
+    width: 100%;
+    align-self: stretch;
+  }
+
+  /* Ensures inputs don't zoom on mobile but are body-font size on desktop */
+  @media screen and (--viewportRange-regular) {
+    font-size: var(--text-body-size-medium);
+  }
+
+  --inner-action-size: var(--base-size-24); /* Default size */
+
+  &:where([data-size='small']) {
+    --inner-action-size: var(--base-size-20);
+
+    min-height: var(--base-size-28);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-body-size-small);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: var(--base-size-20);
+  }
+
+  &:where([data-size='large']) {
+    --inner-action-size: var(--base-size-28);
+
+    height: var(--base-size-40);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+  }
+
+  /* Deprecated */
+  &:where([data-variant='small']) {
+    min-height: 28px;
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: (--text-body-size-small);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: var(--base-size-20);
+  }
+
+  /* Deprecated */
+  &:where([data-variant='large']) {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-title-size-medium);
+  }
+}
+
+.TextInputWrapper {
+  padding-right: 0;
+  padding-left: 0;
+
+  > input,
+  > select {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* Repeat and position set for form states (success, error, etc) */
+  background-repeat: no-repeat;
+
+  /* For form validation. This keeps images 8px from right and centered vertically. */
+  background-position: right 8px center;
+
+  & > :not(:last-child) {
+    margin-right: var(--base-size-8);
+  }
+
+  & :global(.TextInput-icon),
+  & :global(.TextInput-action) {
+    align-self: center;
+    color: var(--fgColor-muted);
+    flex-shrink: 0;
+  }
+
+  &:where([data-leading-visual]) {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where([data-trailing-visual]:not([data-trailing-action])) {
+    padding-right: var(--base-size-12);
+  }
+
+  &:where(:not([data-leading-visual])) > input,
+  &:where(:not([data-leading-visual])) > select {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+    padding-right: var(--base-size-12);
+  }
+}
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index c12ea54094e..e8075f19106 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,14 +1,20 @@
-import React from 'react'
+import React, {type ComponentProps} from 'react'
 import styled from 'styled-components'
-import {maxWidth, minWidth, width, type ResponsiveValue} from 'styled-system'
+import {maxWidth as maxWidthFn, minWidth as minWidthFn, width as widthFn, type ResponsiveValue} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
+import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput'
+import {toggleStyledComponent} from '../utils/toggleStyledComponent'
+import {useFeatureFlag} from '../../FeatureFlags'
+import {clsx} from 'clsx'
+
+import styles from './TextInputWrapper.module.css'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
-export type StyledBaseWrapperProps = {
+type StyledTextInputBaseWrapperProps = {
   block?: boolean
   contrast?: boolean
   disabled?: boolean
@@ -22,6 +28,7 @@ export type StyledBaseWrapperProps = {
   className?: string
   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. */
@@ -30,241 +37,286 @@ export type StyledBaseWrapperProps = {
   maxWidth?: string | number | ResponsiveValue<string | number>
 } & SxProp
 
-export type StyledWrapperProps = {
+type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
-} & StyledBaseWrapperProps
-
-export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
-  font-size: ${get('fontSizes.1')};
-  line-height: var(--base-size-20);
-  color: ${get('colors.fg.default')};
-  vertical-align: middle;
-  background-color: ${get('colors.canvas.default')};
-  border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')});
-  border-radius: ${get('radii.2')};
-  outline: none;
-  box-shadow: ${get('shadows.primer.shadow.inset')};
-  display: inline-flex;
-  align-items: stretch;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-
-  input,
-  textarea {
-    cursor: text;
-  }
+} & StyledTextInputBaseWrapperProps
 
-  select {
-    cursor: pointer;
-  }
+const StyledTextInputBaseWrapper = toggleStyledComponent(
+  TEXT_INPUT_CSS_MODULES_FEATURE_FLAG,
+  'span',
+  styled.span<StyledTextInputBaseWrapperProps>`
+    font-size: ${get('fontSizes.1')};
+    line-height: var(--base-size-20);
+    color: ${get('colors.fg.default')};
+    vertical-align: middle;
+    background-color: ${get('colors.canvas.default')};
+    border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')});
+    border-radius: ${get('radii.2')};
+    outline: none;
+    box-shadow: ${get('shadows.primer.shadow.inset')};
+    display: inline-flex;
+    align-items: stretch;
+    min-height: var(--base-size-32);
+    overflow: hidden;
 
-  input,
-  textarea,
-  select {
-    &::placeholder {
-      color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')});
+    input,
+    textarea {
+      cursor: text;
     }
-  }
-
-  &:where([data-trailing-action][data-focused]),
-  &:where(:not([data-trailing-action]):focus-within) {
-    border-color: ${get('colors.accent.fg')};
-    outline: 2px solid ${get('colors.accent.fg')};
-    outline-offset: -1px;
-  }
 
-  > textarea {
-    padding: var(--base-size-12);
-  }
-
-  &:where([data-contrast]) {
-    background-color: ${get('colors.canvas.inset')};
-  }
-
-  &:where([data-disabled]) {
-    color: ${get('colors.primer.fg.disabled')};
-    background-color: ${get('colors.input.disabledBg')};
-    box-shadow: none;
-    border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
+    select {
+      cursor: pointer;
+    }
 
     input,
     textarea,
     select {
-      cursor: not-allowed;
+      &::placeholder {
+        color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')});
+      }
     }
-  }
-
-  &:where([data-monospace]) {
-    font-family: ${get('fonts.mono')};
-  }
-
-  &:where([data-validation='error']) {
-    border-color: ${get('colors.danger.emphasis')};
 
     &:where([data-trailing-action][data-focused]),
-    &:where(:not([data-trailing-action])):focus-within {
+    &:where(:not([data-trailing-action]):focus-within) {
       border-color: ${get('colors.accent.fg')};
       outline: 2px solid ${get('colors.accent.fg')};
       outline-offset: -1px;
     }
-  }
 
-  &:where([data-validation='success']) {
-    border-color: ${get('colors.success.emphasis')};
-  }
+    > textarea {
+      padding: var(--base-size-12);
+    }
 
-  &:where([data-block]) {
-    width: 100%;
-    display: flex;
-    align-self: stretch;
-  }
+    &:where([data-contrast]) {
+      background-color: ${get('colors.canvas.inset')};
+    }
 
-  /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
-  @media (min-width: ${get('breakpoints.1')}) {
-    font-size: var(--text-body-size-medium);
-  }
+    &:where([data-disabled]) {
+      color: ${get('colors.primer.fg.disabled')};
+      background-color: ${get('colors.input.disabledBg')};
+      box-shadow: none;
+      border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
+
+      input,
+      textarea,
+      select {
+        cursor: not-allowed;
+      }
+    }
 
-  --inner-action-size: var(--base-size-24); /* Default size */
+    &:where([data-monospace]) {
+      font-family: ${get('fonts.mono')};
+    }
 
-  &:where([data-size='small']) {
-    --inner-action-size: var(--base-size-20);
+    &:where([data-validation='error']) {
+      border-color: ${get('colors.danger.emphasis')};
 
-    min-height: var(--base-size-28);
-    padding-top: 3px;
-    padding-right: var(--base-size-8);
-    padding-bottom: 3px;
-    padding-left: var(--base-size-8);
-    font-size: var(--text-body-size-small);
-    line-height: var(--base-size-20);
-  }
+      &:where([data-trailing-action][data-focused]),
+      &:where(:not([data-trailing-action])):focus-within {
+        border-color: ${get('colors.accent.fg')};
+        outline: 2px solid ${get('colors.accent.fg')};
+        outline-offset: -1px;
+      }
+    }
 
-  &:where([data-size='large']) {
-    --inner-action-size: var(--base-size-28);
+    &:where([data-validation='success']) {
+      border-color: ${get('colors.success.emphasis')};
+    }
 
-    height: var(--base-size-40);
-    padding-top: 10px;
-    padding-right: var(--base-size-8);
-    padding-bottom: 10px;
-    padding-left: var(--base-size-8);
-  }
+    &:where([data-block]) {
+      width: 100%;
+      display: flex;
+      align-self: stretch;
+    }
 
-  /* Deprecated */
-  &:where([data-variant='small']) {
-    min-height: 28px;
-    padding-top: 3px;
-    padding-right: var(--base-size-8);
-    padding-bottom: 3px;
-    padding-left: var(--base-size-8);
-    font-size: (--text-body-size-small);
-    line-height: var(--base-size-20);
-  }
+    /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
+    @media (min-width: ${get('breakpoints.1')}) {
+      font-size: var(--text-body-size-medium);
+    }
 
-  /* Deprecated */
-  &:where([data-variant='large']) {
-    padding-top: 10px;
-    padding-right: var(--base-size-8);
-    padding-bottom: 10px;
-    padding-left: var(--base-size-8);
-    font-size: var(--text-title-size-medium);
-  }
+    --inner-action-size: var(--base-size-24); /* Default size */
 
-  & {
-    ${width}
-    ${minWidth}
-    ${maxWidth}
-    ${sx}
-  }
-`
-
-export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWrapperProps>) {
-  const {
-    variant,
-    size,
-    isInputFocused,
-    hasTrailingAction,
-    validationStatus,
-    disabled,
-    contrast,
-    monospace,
-    block,
-    ...restProps
-  } = props
-  return (
-    <StyledTextInputBaseWrapper
-      data-variant={variant}
-      data-size={size}
-      data-focused={isInputFocused || undefined}
-      data-trailing-action={hasTrailingAction || undefined}
-      data-validation={validationStatus}
-      data-disabled={disabled || undefined}
-      data-contrast={contrast || undefined}
-      data-monospace={monospace || undefined}
-      data-block={block || undefined}
-      {...restProps}
-    />
-  )
-}
-
-const StyledTextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
-  /* Repeat and position set for form states (success, error, etc) */
-  background-repeat: no-repeat;
-
-  /* For form validation. This keeps images 8px from right and centered vertically. */
-  background-position: right 8px center;
-
-  & > :not(:last-child) {
-    margin-right: ${get('space.2')};
-  }
+    &:where([data-size='small']) {
+      --inner-action-size: var(--base-size-20);
 
-  .TextInput-icon,
-  .TextInput-action {
-    align-self: center;
-    color: ${get('colors.fg.muted')};
-    flex-shrink: 0;
-  }
+      min-height: var(--base-size-28);
+      padding-top: 3px;
+      padding-right: var(--base-size-8);
+      padding-bottom: 3px;
+      padding-left: var(--base-size-8);
+      font-size: var(--text-body-size-small);
+      line-height: var(--base-size-20);
+    }
 
-  padding-right: 0;
-  padding-left: 0;
+    &:where([data-size='large']) {
+      --inner-action-size: var(--base-size-28);
+
+      height: var(--base-size-40);
+      padding-top: 10px;
+      padding-right: var(--base-size-8);
+      padding-bottom: 10px;
+      padding-left: var(--base-size-8);
+    }
+
+    /* Deprecated */
+    &:where([data-variant='small']) {
+      min-height: 28px;
+      padding-top: 3px;
+      padding-right: var(--base-size-8);
+      padding-bottom: 3px;
+      padding-left: var(--base-size-8);
+      font-size: (--text-body-size-small);
+      line-height: var(--base-size-20);
+    }
+
+    /* Deprecated */
+    &:where([data-variant='large']) {
+      padding-top: 10px;
+      padding-right: var(--base-size-8);
+      padding-bottom: 10px;
+      padding-left: var(--base-size-8);
+      font-size: var(--text-title-size-medium);
+    }
+
+    & {
+      ${widthFn}
+      ${minWidthFn}
+      ${maxWidthFn}
+      ${sx}
+    }
+  `,
+)
+
+export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInputWrapperProps>(
+  function TextInputBaseWrapper(
+    {
+      className,
+      style,
+      variant,
+      size,
+      isInputFocused,
+      hasTrailingAction,
+      validationStatus,
+      disabled,
+      contrast,
+      monospace,
+      block,
+      width,
+      minWidth,
+      maxWidth,
+      ...restProps
+    },
+    forwardRef,
+  ) {
+    const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
+    const widthProps = enabled ? {} : {width, minWidth, maxWidth}
+
+    return (
+      <StyledTextInputBaseWrapper
+        ref={forwardRef}
+        className={clsx(className, enabled && styles.TextInputBaseWrapper)}
+        data-block={block || undefined}
+        data-contrast={contrast || undefined}
+        data-disabled={disabled || undefined}
+        data-focused={isInputFocused || undefined}
+        data-monospace={monospace || undefined}
+        data-size={size || undefined}
+        data-trailing-action={hasTrailingAction || undefined}
+        data-validation={validationStatus || undefined}
+        data-variant={variant || undefined}
+        style={enabled && typeof width === 'string' ? {width, ...style} : style}
+        {...widthProps}
+        {...restProps}
+      />
+    )
+  },
+)
+TextInputBaseWrapper.displayName = 'TextInputBaseWrapper'
+
+const StyledTextInputWrapper = toggleStyledComponent(
+  TEXT_INPUT_CSS_MODULES_FEATURE_FLAG,
+  TextInputBaseWrapper,
+  styled(TextInputBaseWrapper)<StyledTextInputWrapperProps>`
+    /* Repeat and position set for form states (success, error, etc) */
+    background-repeat: no-repeat;
+
+    /* For form validation. This keeps images 8px from right and centered vertically. */
+    background-position: right 8px center;
+
+    & > :not(:last-child) {
+      margin-right: ${get('space.2')};
+    }
+
+    .TextInput-icon,
+    .TextInput-action {
+      align-self: center;
+      color: ${get('colors.fg.muted')};
+      flex-shrink: 0;
+    }
 
-  > input,
-  > select {
     padding-right: 0;
     padding-left: 0;
-  }
 
-  &:where([data-leading-visual]) {
-    padding-left: var(--base-size-12);
-  }
+    > input,
+    > select {
+      padding-right: 0;
+      padding-left: 0;
+    }
 
-  &:where([data-trailing-visual]:not([data-trailing-action])) {
-    padding-right: var(--base-size-12);
-  }
+    &:where([data-leading-visual]) {
+      padding-left: var(--base-size-12);
+    }
 
-  &:where(:not([data-leading-visual])) > input,
-  &:where(:not([data-leading-visual])) > select {
-    padding-left: var(--base-size-12);
-  }
+    &:where([data-trailing-visual]:not([data-trailing-action])) {
+      padding-right: var(--base-size-12);
+    }
 
-  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
-  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
-    padding-right: var(--base-size-12);
-  }
+    &:where(:not([data-leading-visual])) > input,
+    &:where(:not([data-leading-visual])) > select {
+      padding-left: var(--base-size-12);
+    }
 
-  & {
-    ${sx}
+    &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+    &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+      padding-right: var(--base-size-12);
+    }
+
+    & {
+      ${sx}
+    }
+  `,
+)
+
+export const TextInputWrapper = React.forwardRef<HTMLElement, StyledBaseWrapperProps>(function TextInputWrapper(
+  {className, hasLeadingVisual, hasTrailingVisual, ...restProps},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
+
+  if (enabled) {
+    return (
+      <TextInputBaseWrapper
+        ref={forwardRef}
+        className={clsx(className, styles.TextInputWrapper)}
+        data-leading-visual={hasLeadingVisual || undefined}
+        data-trailing-visual={hasTrailingVisual || undefined}
+        {...restProps}
+      />
+    )
+  } else {
+    return (
+      <StyledTextInputWrapper
+        ref={forwardRef}
+        className={className}
+        data-leading-visual={hasLeadingVisual || undefined}
+        data-trailing-visual={hasTrailingVisual || undefined}
+        {...restProps}
+      />
+    )
   }
-`
-
-export function TextInputWrapper(props: React.PropsWithChildren<StyledWrapperProps>) {
-  const {hasLeadingVisual, hasTrailingVisual, ...restProps} = props
-  return (
-    <StyledTextInputWrapper
-      data-leading-visual={hasLeadingVisual || undefined}
-      data-trailing-visual={hasTrailingVisual || undefined}
-      {...restProps}
-    />
-  )
-}
+})
 
+export type StyledBaseWrapperProps = ComponentProps<typeof TextInputBaseWrapper>
+export type StyledWrapperProps = ComponentProps<typeof TextInputWrapper>
 export default TextInputWrapper