From 1ea1878fe4fe8cb3b877cfebd1e74957c325402d Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 16:46:44 -0500
Subject: [PATCH] =?UTF-8?q?Revert=20"feat(TextInput):=20Update=20TextInput?=
 =?UTF-8?q?=20to=20use=20data=20attributes=20for=20styling=20=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 706d272e1e3e97809e2e3f5a91959b5e3aae5b93.
---
 .changeset/real-fans-tap.md                   |    5 -
 .../TextInputWithTokens.tsx                   |    6 +-
 .../react/src/__tests__/Textarea.test.tsx     |    8 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  | 1141 +---
 .../__snapshots__/TextInput.test.tsx.snap     | 5607 ++++-------------
 .../TextInputWithTokens.test.tsx.snap         | 4915 ++++-----------
 .../internal/components/TextInputWrapper.tsx  |  363 +-
 packages/react/src/utils/testing.tsx          |   12 +-
 8 files changed, 2784 insertions(+), 9273 deletions(-)
 delete mode 100644 .changeset/real-fans-tap.md

diff --git a/.changeset/real-fans-tap.md b/.changeset/real-fans-tap.md
deleted file mode 100644
index f419b1ad11d..00000000000
--- a/.changeset/real-fans-tap.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": minor
----
-
-Convert TextInput to use data attributes
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index fa03c61a48e..e2c97ac77f1 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -13,7 +13,7 @@ import Token from '../Token/Token'
 import type {TokenSizeKeys} from '../Token/TokenBase'
 
 import type {TextInputSizes} from '../internal/components/TextInputWrapper'
-import TextInputWrapper from '../internal/components/TextInputWrapper'
+import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
 import UnstyledTextInput from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 
@@ -266,8 +266,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
       sx={{
-        paddingLeft: '12px',
-        py: `calc(12px / 2)`,
+        paddingLeft: textInputHorizPadding,
+        py: `calc(${textInputHorizPadding} / 2)`,
         ...(block
           ? {
               display: 'flex',
diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index b460655558c..2bc0c7f6e20 100644
--- a/packages/react/src/__tests__/Textarea.test.tsx
+++ b/packages/react/src/__tests__/Textarea.test.tsx
@@ -84,11 +84,11 @@ describe('Textarea', () => {
       width: '100%',
       display: 'flex',
     }
-    const defaultStyles = renderStyles(<Textarea />)
-    const blockStyles = renderStyles(<Textarea block />)
+    const defaultStyles = renderStyles(<Textarea block />)
+    const blockStyles = renderStyles(<Textarea />)
 
-    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
   })
 
   it('renders default resize values correctly', () => {
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 878a316cad6..c3dd83b8058 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -3,26 +3,25 @@
 exports[`snapshots renders a custom empty state message 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -37,138 +36,46 @@ exports[`snapshots renders a custom empty state message 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -176,28 +83,16 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -214,9 +109,9 @@ exports[`snapshots renders a custom empty state message 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -262,7 +157,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -283,26 +178,25 @@ exports[`snapshots renders a custom empty state message 1`] = `
 exports[`snapshots renders a loading state 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -317,138 +211,46 @@ exports[`snapshots renders a loading state 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -456,28 +258,16 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -494,9 +284,9 @@ exports[`snapshots renders a loading state 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -565,7 +355,7 @@ exports[`snapshots renders a loading state 1`] = `
   border-width: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -620,26 +410,25 @@ exports[`snapshots renders a loading state 1`] = `
 exports[`snapshots renders a menu that contains an item to add to the menu 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -654,138 +443,46 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -793,28 +490,16 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -855,9 +540,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -1176,7 +861,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -1576,26 +1261,25 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 exports[`snapshots renders a multiselect input 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1610,138 +1294,46 @@ exports[`snapshots renders a multiselect input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1749,28 +1341,16 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -1799,9 +1379,9 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -2067,7 +1647,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -2410,26 +1990,25 @@ exports[`snapshots renders a multiselect input 1`] = `
 exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -2444,138 +2023,46 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2583,28 +2070,16 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -2645,9 +2120,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -3084,7 +2559,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -3427,26 +2902,25 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 exports[`snapshots renders a single select input 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -3461,138 +2935,46 @@ exports[`snapshots renders a single select input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3600,28 +2982,16 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -3646,9 +3016,9 @@ exports[`snapshots renders a single select input 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -3870,7 +3240,7 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -4636,26 +4006,25 @@ exports[`snapshots renders with a custom text input component 1`] = `
 exports[`snapshots renders with an input value 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -4670,138 +4039,46 @@ exports[`snapshots renders with an input value 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4809,28 +4086,16 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -4855,9 +4120,9 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -4911,7 +4176,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 45716fa41e9..36f7ae4f8bc 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2,26 +2,25 @@
 
 exports[`TextInput renders 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -36,138 +35,46 @@ exports[`TextInput renders 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -175,28 +82,16 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -213,9 +108,9 @@ exports[`TextInput renders 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -237,26 +132,33 @@ exports[`TextInput renders 1`] = `
 
 exports[`TextInput renders block 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
 .c0 input,
@@ -271,138 +173,46 @@ exports[`TextInput renders block 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -410,28 +220,16 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -448,16 +246,15 @@ exports[`TextInput renders block 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-block={true}
   onClick={[Function]}
 >
   <input
@@ -473,26 +270,26 @@ exports[`TextInput renders block 1`] = `
 
 exports[`TextInput renders contrast 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0 input,
@@ -507,138 +304,46 @@ exports[`TextInput renders contrast 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -646,28 +351,16 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -684,16 +377,15 @@ exports[`TextInput renders contrast 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-contrast={true}
   onClick={[Function]}
 >
   <input
@@ -709,26 +401,26 @@ exports[`TextInput renders contrast 1`] = `
 
 exports[`TextInput renders error 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0 input,
@@ -743,167 +435,69 @@ exports[`TextInput renders error 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
+  padding: 12px;
 }
 
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
 }
 
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
+.c1 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted);
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -920,16 +514,15 @@ exports[`TextInput renders error 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-validation="error"
   onClick={[Function]}
 >
   <input
@@ -946,26 +539,31 @@ exports[`TextInput renders error 1`] = `
 
 exports[`TextInput renders large 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 40px;
 }
 
 .c0 input,
@@ -980,138 +578,46 @@ exports[`TextInput renders large 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1119,28 +625,16 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -1157,17 +651,17 @@ exports[`TextInput renders large 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-size="large"
   onClick={[Function]}
+  size="large"
 >
   <input
     className="c2"
@@ -1182,26 +676,25 @@ exports[`TextInput renders large 1`] = `
 
 exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1216,138 +709,46 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1355,28 +756,16 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -1393,16 +782,15 @@ exports[`TextInput renders leadingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1447,26 +835,25 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1481,193 +868,88 @@ exports[`TextInput renders leadingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
+  padding: 12px;
 }
 
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
 }
 
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
+.c1 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
 }
 
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
+.c2:focus {
+  outline: 0;
 }
 
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted);
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.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:var(--breakpoint-medium)) {
-  .c0 {
-    font-size: var(--text-body-size-medium);
-  }
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1712,26 +994,25 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1746,138 +1027,46 @@ exports[`TextInput renders leadingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1885,28 +1074,16 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -1923,16 +1100,15 @@ exports[`TextInput renders leadingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1959,26 +1135,25 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1993,138 +1168,46 @@ exports[`TextInput renders leadingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2132,28 +1215,16 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -2170,16 +1241,15 @@ exports[`TextInput renders leadingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -2206,26 +1276,26 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 exports[`TextInput renders monospace 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0 input,
@@ -2240,138 +1310,46 @@ exports[`TextInput renders monospace 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2379,28 +1357,16 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -2417,16 +1383,15 @@ exports[`TextInput renders monospace 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-monospace={true}
   onClick={[Function]}
 >
   <input
@@ -2442,26 +1407,25 @@ exports[`TextInput renders monospace 1`] = `
 
 exports[`TextInput renders placeholder 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -2476,138 +1440,46 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
 }
 
-.c0: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);
+.c0 > textarea {
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2615,28 +1487,16 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -2653,9 +1513,9 @@ exports[`TextInput renders placeholder 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
@@ -2678,26 +1538,33 @@ exports[`TextInput renders placeholder 1`] = `
 
 exports[`TextInput renders small 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .c0 input,
@@ -2712,138 +1579,46 @@ exports[`TextInput renders small 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2851,28 +1626,16 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -2889,17 +1652,29 @@ exports[`TextInput renders small 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width:544px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c0 {
+    font-size: 12px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-size="small"
   onClick={[Function]}
+  size="small"
 >
   <input
     className="c2"
@@ -3337,26 +2112,25 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -3371,138 +2145,40 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3510,28 +2186,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -3574,16 +2238,15 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3976,172 +2639,73 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  min-height: 32px;
+  overflow: hidden;
 }
 
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+.c0 select {
+  cursor: pointer;
 }
 
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 > textarea {
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4149,28 +2713,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -4207,16 +2759,15 @@ exports[`TextInput renders trailingAction text button 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -4694,26 +3245,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -4728,138 +3278,40 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4867,28 +3319,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -4931,16 +3371,15 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -5002,26 +3441,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -5036,138 +3474,46 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5175,28 +3521,16 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -5213,16 +3547,15 @@ exports[`TextInput renders trailingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -5267,26 +3600,25 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 exports[`TextInput renders trailingVisual 2`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -5301,138 +3633,46 @@ exports[`TextInput renders trailingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5440,28 +3680,16 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -5478,16 +3706,15 @@ exports[`TextInput renders trailingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -5532,26 +3759,25 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 exports[`TextInput renders trailingVisual 3`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -5566,138 +3792,46 @@ exports[`TextInput renders trailingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5705,28 +3839,16 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -5743,16 +3865,15 @@ exports[`TextInput renders trailingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -5779,26 +3900,25 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -5813,138 +3933,46 @@ exports[`TextInput renders trailingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5952,28 +3980,16 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -5990,16 +4006,15 @@ exports[`TextInput renders trailingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
-  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -6054,26 +4069,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -6088,138 +4102,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6227,28 +4149,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -6261,20 +4171,35 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c2:focus {
-  outline: 0;
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
 }
 
-@media (min-width:var(--breakpoint-medium)) {
-  .c0 {
-    font-size: var(--text-body-size-medium);
-  }
+@media (min-width:768px) {
+
 }
 
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -6370,26 +4295,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -6404,138 +4328,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6543,28 +4375,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c4 {
@@ -6581,16 +4401,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -6724,26 +4559,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -6758,138 +4592,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6897,28 +4639,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -6935,16 +4665,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -7049,26 +4794,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -7083,138 +4827,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7222,28 +4874,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c5 {
@@ -7260,16 +4900,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -7448,26 +5103,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -7482,138 +5136,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7621,28 +5183,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c5 {
@@ -7659,16 +5209,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -7847,26 +5412,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -7881,138 +5445,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8020,28 +5492,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c5 {
@@ -8058,17 +5518,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -8241,26 +5715,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -8275,138 +5748,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8414,28 +5795,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -8452,16 +5821,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -8596,26 +5980,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -8630,138 +6013,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8769,28 +6060,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c4 {
@@ -8807,17 +6086,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -8990,26 +6283,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -9024,138 +6316,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9163,28 +6363,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
 .c2 {
@@ -9201,16 +6389,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -9354,26 +6557,33 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .c0 input,
@@ -9388,138 +6598,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9527,28 +6645,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c5 {
@@ -9561,23 +6667,41 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
-  outline: 0;
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media screen and (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 12px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
-    data-size="small"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="small"
   >
     <span
       className="TextInput-icon"
@@ -9794,26 +6918,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -9828,138 +6951,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9967,28 +6998,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c5 {
@@ -10005,17 +7024,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
-    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -10233,26 +7266,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 40px;
 }
 
 .c0 input,
@@ -10267,138 +7305,46 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10406,28 +7352,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c5 {
@@ -10444,19 +7378,33 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
-    data-leading-visual={true}
-    data-size="large"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="large"
   >
     <span
       className="TextInput-icon"
@@ -10626,26 +7574,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 exports[`TextInput should render a password input 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -10660,138 +7607,46 @@ exports[`TextInput should render a password input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10799,28 +7654,16 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c2 {
@@ -10837,9 +7680,9 @@ exports[`TextInput should render a password input 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index bd6c3c5cf5f..8c73ced8815 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -53,26 +53,29 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -87,144 +90,49 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -232,34 +140,16 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c4 {
@@ -403,18 +293,16 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-leading-visual={true}
-  data-size="medium"
-  data-trailing-visual={true}
   onClick={[Function]}
+  size="medium"
 >
   <span
     aria-hidden="true"
@@ -977,26 +865,29 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -1011,144 +902,49 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1156,34 +952,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -1327,16 +1105,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -1506,26 +1284,42 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
 }
 
 .c0 input,
@@ -1540,124 +1334,42 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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: 12px;
 }
 
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1668,21 +1380,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1690,39 +1389,16 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
+  padding-right: 12px;
 }
 
 .c4 {
@@ -1740,17 +1416,16 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-block={true}
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -1825,158 +1500,81 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  max-height: 20px;
+  overflow: auto;
 }
 
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
+.c0 select {
+  cursor: pointer;
 }
 
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
 }
 
-.c0: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);
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c0 {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1984,21 +1582,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   overflow: auto;
 }
 
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2006,36 +1591,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  max-height: 20px;
-  overflow: auto;
+  padding-right: 12px;
 }
 
 .c4 {
@@ -2179,16 +1744,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -2663,26 +2228,36 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -2697,144 +2272,49 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2842,34 +2322,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -3011,16 +2473,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c0 {
+    font-size: 12px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="small"
   onClick={[Function]}
+  size="small"
 >
   <div
     className="c2"
@@ -3495,26 +2969,36 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -3529,144 +3013,49 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3674,34 +3063,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -3843,16 +3214,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c0 {
+    font-size: 12px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="small"
   onClick={[Function]}
+  size="small"
 >
   <div
     className="c2"
@@ -4327,26 +3710,29 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -4361,144 +3747,49 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4506,34 +3797,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -4675,16 +3948,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -5159,26 +4444,29 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -5193,144 +4481,49 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5338,34 +4531,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -5509,16 +4684,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -5993,26 +5180,30 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
 }
 
 .c0 input,
@@ -6027,145 +5218,50 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6173,35 +5269,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  padding-right: 12px;
 }
 
 .c4 {
@@ -6345,16 +5422,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -6829,26 +5906,29 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -6863,144 +5943,49 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7008,34 +5993,16 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -7129,16 +6096,16 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -7396,26 +6363,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -7430,144 +6400,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7575,34 +6450,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 0;
 }
 
 .c4 {
@@ -7746,17 +6603,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <div
       className="c2"
@@ -8291,178 +7159,86 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
 .c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+  cursor: text;
 }
 
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8470,34 +7246,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c6 {
@@ -8641,17 +7399,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -9223,26 +7992,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -9257,144 +8029,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9402,34 +8079,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 0;
 }
 
 .c4 {
@@ -9573,17 +8232,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <div
       className="c2"
@@ -10127,26 +8797,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -10161,144 +8834,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10306,34 +8884,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c7 {
@@ -10477,17 +9037,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -11104,26 +9675,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -11138,144 +9712,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
+  padding-left: 12px;
   padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -11283,34 +9762,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c7 {
@@ -11454,17 +9915,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -12081,26 +10553,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -12115,144 +10590,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -12260,34 +10640,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c7 {
@@ -12431,18 +10793,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -13053,26 +11425,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -13087,144 +11462,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -13232,34 +11512,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 0;
 }
 
 .c4 {
@@ -13403,17 +11665,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <div
       className="c2"
@@ -13987,26 +12260,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -14021,144 +12297,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -14166,34 +12347,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c6 {
@@ -14337,18 +12500,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -14959,26 +13132,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -14993,144 +13169,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -15138,34 +13219,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 0;
 }
 
 .c4 {
@@ -15309,17 +13372,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <div
       className="c2"
@@ -15902,178 +13976,93 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
-}
-
-.c0:where([data-trailing-action][data-focused]),
-.c0: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;
-}
-
-.c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+.c0 select {
+  cursor: pointer;
 }
 
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0: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);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
 }
 
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c0 > textarea {
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -16081,34 +14070,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c7 {
@@ -16250,18 +14221,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 12px;
   }
 }
 
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="small"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="small"
   >
     <span
       className="TextInput-icon"
@@ -16917,26 +14902,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -16951,144 +14939,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -17096,34 +14989,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c7 {
@@ -17267,18 +15142,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -17934,26 +15819,29 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -17968,144 +15856,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -18113,34 +15906,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .c7 {
@@ -18282,18 +16057,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 <span
     className="c0 c1"
-    data-leading-visual={true}
-    data-size="medium"
-    data-trailing-visual={true}
     onClick={[Function]}
+    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -18915,26 +16700,29 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -18949,144 +16737,49 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -19094,34 +16787,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -19265,16 +16940,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -19736,26 +17411,29 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -19770,144 +17448,49 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -19915,34 +17498,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -20098,16 +17663,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
@@ -20529,26 +18094,29 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  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);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  --inner-action-size: var(--base-size-24);
+  min-height: 32px;
+  overflow: hidden;
+  --inner-action-size: 24px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -20563,144 +18131,49 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:where([data-trailing-action][data-focused]),
-.c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: var(--base-size-12);
-}
-
-.c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
-}
-
-.c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
-  box-shadow: none;
-}
-
-.c0:where([data-disabled]) input,
-.c0:where([data-disabled]) textarea,
-.c0:where([data-disabled]) select {
-  cursor: not-allowed;
-}
-
-.c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
-}
-
-.c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
-.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
-  outline-offset: -1px;
-}
-
-.c0:where([data-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
-}
-
-.c0:where([data-block]) {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c0:where([data-size='small']) {
-  --inner-action-size: var(--base-size-20);
-  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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0: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);
-}
-
-.c0 {
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding: 12px;
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-right: 0;
   padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -20708,34 +18181,16 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1:where([data-leading-visual]) {
-  padding-left: var(--base-size-12);
-}
-
-.c1:where([data-trailing-visual]:not([data-trailing-action])) {
-  padding-right: var(--base-size-12);
-}
-
-.c1:where(:not([data-leading-visual])) > input,
-.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);
-}
-
-.c1 {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-right: 12px;
 }
 
 .c4 {
@@ -20753,16 +18208,16 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
-    font-size: var(--text-body-size-medium);
+    font-size: 14px;
   }
 }
 
 <span
   className="c0 c1"
-  data-size="medium"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="c2"
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 56557456493..072d17605cf 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,13 +1,53 @@
-import React from 'react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
-import {maxWidth, minWidth, width} from 'styled-system'
+import {maxWidth, minWidth, variant, width} from 'styled-system'
+import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
+const sizeDeprecatedVariants = variant({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: [0, 0, 0],
+      lineHeight: '20px',
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3,
+    },
+  },
+})
+
+const sizeVariants = variant({
+  prop: 'size',
+  variants: {
+    small: {
+      '--inner-action-size': '20px',
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: [0, 0, 0],
+      lineHeight: '20px',
+    },
+    medium: {
+      '--inner-action-size': '24px',
+    },
+    large: {
+      '--inner-action-size': '28px',
+      px: 2,
+      py: '10px',
+      height: '40px',
+    },
+  },
+})
+
 export type StyledBaseWrapperProps = {
   block?: boolean
   contrast?: boolean
@@ -16,34 +56,56 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
-  /** @deprecated Use `size` prop instead */
-  variant?: TextInputSizes
-  size?: TextInputSizes
 } & WidthProps &
   MinWidthProps &
   MaxWidthProps &
-  SxProp &
-  React.ComponentPropsWithoutRef<'span'>
+  SxProp
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
+  /** @deprecated Use `size` prop instead */
+  variant?: TextInputSizes
+  size?: TextInputSizes
 } & StyledBaseWrapperProps
 
-export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
-  display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
-  line-height: var(--base-size-20);
-  color: var(--fgColor-default);
+const textInputBasePadding = '12px'
+export const textInputHorizPadding = textInputBasePadding
+
+const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) => {
+  if (hasTrailingAction) {
+    return (
+      isInputFocused &&
+      css`
+        border-color: ${get('colors.accent.fg')};
+        outline: 2px solid ${get('colors.accent.fg')};
+        outline-offset: -1px;
+      `
+    )
+  }
+  return css`
+    &:focus-within {
+      border-color: ${get('colors.accent.fg')};
+      outline: 2px solid ${get('colors.accent.fg')};
+      outline-offset: -1px;
+    }
+  `
+}
+
+export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
+  font-size: ${get('fontSizes.1')};
+  line-height: 20px;
+  color: ${get('colors.fg.default')};
   vertical-align: middle;
-  background-color: var(--bgColor-default);
-  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
-  border-radius: var(--borderRadius-medium);
+  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: var(--shadow-inset);
+  box-shadow: ${get('shadows.primer.shadow.inset')};
+  display: inline-flex;
   align-items: stretch;
+  min-height: 32px;
+  overflow: hidden;
 
   input,
   textarea {
@@ -58,208 +120,105 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   textarea,
   select {
     &::placeholder {
-      color: var(---control-fgColor-placeholder, var(--fgColor-muted));
+      color: var(---control-fgColor-placeholder, ${get('colors.fg.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;
-  }
+  ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
 
   > 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 {
-      border-color: var(--fgColor-accent);
-      outline: 2px solid var(--fgColor-accent);
-      outline-offset: -1px;
-    }
-  }
-
-  &:where([data-validation='success']) {
-    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 (min-width: var(--breakpoint-medium)) {
-    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);
-    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-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);
-  }
-
-  & {
-    ${width}
-    ${minWidth}
-    ${maxWidth}
-    ${sx}
-  }
+    padding: ${textInputBasePadding};
+  }
+
+  ${props =>
+    props.contrast &&
+    css`
+      background-color: ${get('colors.canvas.inset')};
+    `}
+
+  ${props =>
+    props.disabled &&
+    css`
+      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;
+      }
+    `}
+
+    ${props =>
+    props.monospace &&
+    css`
+      font-family: ${get('fonts.mono')};
+    `}
+
+  ${props =>
+    props.validationStatus === 'error' &&
+    css`
+      border-color: ${get('colors.danger.emphasis')};
+      ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
+    `}
+
+
+  ${props =>
+    props.validationStatus === 'success' &&
+    css`
+      border-color: ${get('colors.success.emphasis')};
+    `}
+
+  ${props =>
+    props.block &&
+    css`
+      width: 100%;
+      display: flex;
+      align-self: stretch;
+    `}
+
+  // Ensures inputs don' t zoom on mobile but are body-font size on desktop
+  @media (min-width: ${get('breakpoints.1')}) {
+    font-size: ${get('fontSizes.1')};
+  }
+
+  ${width}
+  ${minWidth}
+  ${maxWidth}
+  ${sizeDeprecatedVariants}
+  ${sizeVariants}
+  ${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>`
-  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;
+const TextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
+  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
+  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
 
   & > :not(:last-child) {
-    margin-right: var(--base-size-8);
+    margin-right: ${get('space.2')};
   }
 
   .TextInput-icon,
   .TextInput-action {
     align-self: center;
-    color: var(--fgColor-muted);
+    color: ${get('colors.fg.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);
-  }
+  ${props => css`
+    padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0};
+    padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
 
-  &: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);
-  }
+    > input,
+    > select {
+      padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0};
+      padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
+    }
+  `}
 
-  & {
-    ${sx}
-  }
+  ${sx};
 `
 
-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 default TextInputWrapper
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index a01cb435dec..5699aa85ca1 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -87,21 +87,15 @@ export function percent(value: number | string): string {
 
 export function renderStyles(node: React.ReactElement) {
   const {
-    props: {className, ...restProps},
+    props: {className},
   } = render(node)
-  return getComputedStyles(className, restProps)
+  return getComputedStyles(className)
 }
 
-export function getComputedStyles(className: string, restProps?: Record<string, string | undefined>) {
+export function getComputedStyles(className: string) {
   const div = document.createElement('div')
   div.className = className
 
-  if (restProps) {
-    for (const [key, value] of Object.entries(restProps)) {
-      if (key.startsWith('data-') && value !== undefined) div.setAttribute(key, value)
-    }
-  }
-
   const computed: ComputedStyles = {}
   for (const sheet of document.styleSheets) {
     // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule