From 706d272e1e3e97809e2e3f5a91959b5e3aae5b93 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 12:40:24 -0500
Subject: [PATCH] feat(TextInput): Update TextInput to use data attributes for
 styling (#5242)

* chore(TextInput): Update TextInput to use data attributes for styling

* remove variant functions

* add data attrs

* update jest snapshots

* changeset

* add width to block

* add higher specificity to passing in sx

* update snapshots

* revert success border color
---
 .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     | 5547 +++++++++++++----
 .../TextInputWithTokens.test.tsx.snap         | 4871 +++++++++++----
 .../internal/components/TextInputWrapper.tsx  |  363 +-
 packages/react/src/utils/testing.tsx          |   12 +-
 8 files changed, 9221 insertions(+), 2732 deletions(-)
 create mode 100644 .changeset/real-fans-tap.md

diff --git a/.changeset/real-fans-tap.md b/.changeset/real-fans-tap.md
new file mode 100644
index 00000000000..f419b1ad11d
--- /dev/null
+++ b/.changeset/real-fans-tap.md
@@ -0,0 +1,5 @@
+---
+"@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 e2c97ac77f1..fa03c61a48e 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, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
+import TextInputWrapper 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: textInputHorizPadding,
-        py: `calc(${textInputHorizPadding} / 2)`,
+        paddingLeft: '12px',
+        py: `calc(12px / 2)`,
         ...(block
           ? {
               display: 'flex',
diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index 2bc0c7f6e20..b460655558c 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 block />)
-    const blockStyles = renderStyles(<Textarea />)
+    const defaultStyles = renderStyles(<Textarea />)
+    const blockStyles = renderStyles(<Textarea block />)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).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 c3dd83b8058..878a316cad6 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -3,25 +3,26 @@
 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -36,46 +37,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -83,16 +176,28 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -109,9 +214,9 @@ exports[`snapshots renders a custom empty state message 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -157,7 +262,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -178,25 +283,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -211,46 +317,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -258,16 +456,28 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -284,9 +494,9 @@ exports[`snapshots renders a loading state 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -355,7 +565,7 @@ exports[`snapshots renders a loading state 1`] = `
   border-width: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -410,25 +620,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -443,46 +654,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -490,16 +793,28 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -540,9 +855,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -861,7 +1176,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -1261,25 +1576,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1294,46 +1610,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1341,16 +1749,28 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -1379,9 +1799,9 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1647,7 +2067,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -1990,25 +2410,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2023,46 +2444,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2070,16 +2583,28 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -2120,9 +2645,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -2559,7 +3084,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -2902,25 +3427,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2935,46 +3461,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2982,16 +3600,28 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -3016,9 +3646,9 @@ exports[`snapshots renders a single select input 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -3240,7 +3870,7 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -4006,25 +4636,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4039,46 +4670,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4086,16 +4809,28 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -4120,9 +4855,9 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -4176,7 +4911,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 36f7ae4f8bc..45716fa41e9 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2,25 +2,26 @@
 
 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -35,46 +36,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -82,16 +175,28 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -108,9 +213,9 @@ exports[`TextInput renders 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -132,33 +237,26 @@ 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;
-  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: var(--base-size-24);
 }
 
 .c0 input,
@@ -173,46 +271,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -220,16 +410,28 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -246,15 +448,16 @@ exports[`TextInput renders block 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-block={true}
   onClick={[Function]}
 >
   <input
@@ -270,26 +473,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;
-  min-height: 32px;
-  overflow: hidden;
-  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -304,46 +507,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -351,16 +646,28 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -377,15 +684,16 @@ exports[`TextInput renders contrast 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-contrast={true}
   onClick={[Function]}
 >
   <input
@@ -401,26 +709,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;
-  min-height: 32px;
-  overflow: hidden;
-  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -435,69 +743,167 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.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-contrast]) {
+  background-color: var(--bgColor-inset);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  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: 12px;
-  padding-right: 12px;
+.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);
 }
 
 .c2 {
@@ -514,15 +920,16 @@ exports[`TextInput renders error 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-validation="error"
   onClick={[Function]}
 >
   <input
@@ -539,31 +946,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -578,46 +980,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -625,16 +1119,28 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -651,17 +1157,17 @@ exports[`TextInput renders large 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="large"
   onClick={[Function]}
-  size="large"
 >
   <input
     className="c2"
@@ -676,25 +1182,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -709,46 +1216,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -756,16 +1355,28 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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 {
@@ -782,15 +1393,16 @@ exports[`TextInput renders leadingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -835,25 +1447,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -868,46 +1481,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -915,16 +1620,28 @@ exports[`TextInput renders leadingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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 {
@@ -941,15 +1658,16 @@ exports[`TextInput renders leadingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -994,25 +1712,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1027,46 +1746,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1074,16 +1885,28 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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 {
@@ -1100,15 +1923,16 @@ exports[`TextInput renders leadingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1135,25 +1959,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1168,46 +1993,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1215,16 +2132,28 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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 {
@@ -1241,15 +2170,16 @@ exports[`TextInput renders leadingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1276,26 +2206,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;
-  min-height: 32px;
-  overflow: hidden;
-  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1310,46 +2240,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1357,16 +2379,28 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -1383,15 +2417,16 @@ exports[`TextInput renders monospace 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-monospace={true}
   onClick={[Function]}
 >
   <input
@@ -1407,25 +2442,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1440,46 +2476,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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:-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='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::placeholder,
-.c0 textarea::placeholder,
-.c0 select::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: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='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 > textarea {
-  padding: 12px;
+.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;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1487,16 +2615,28 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -1513,9 +2653,9 @@ exports[`TextInput renders placeholder 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1538,33 +2678,26 @@ 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;
-  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;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1579,46 +2712,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1626,16 +2851,28 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -1652,29 +2889,17 @@ exports[`TextInput renders small 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <input
     className="c2"
@@ -2112,25 +3337,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2145,40 +3371,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2186,16 +3510,28 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -2238,15 +3574,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -2639,73 +3976,172 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --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);
 }
 
-.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 > textarea {
-  padding: 12px;
+.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;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2713,16 +4149,28 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -2759,15 +4207,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3245,25 +4694,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3278,40 +4728,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3319,16 +4867,28 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -3371,15 +4931,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3441,25 +5002,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3474,46 +5036,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3521,16 +5175,28 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -3547,15 +5213,16 @@ exports[`TextInput renders trailingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3600,25 +5267,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3633,46 +5301,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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 > textarea {
-  padding: 12px;
+.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;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3680,16 +5440,28 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -3706,15 +5478,16 @@ exports[`TextInput renders trailingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3759,25 +5532,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3792,46 +5566,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3839,16 +5705,28 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -3865,15 +5743,16 @@ exports[`TextInput renders trailingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3900,25 +5779,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3933,46 +5813,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3980,16 +5952,28 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -4006,15 +5990,16 @@ exports[`TextInput renders trailingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -4069,25 +6054,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4102,46 +6088,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4149,16 +6227,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -4175,31 +6265,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -4293,27 +6368,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   white-space: nowrap;
   border-width: 0;
 }
-
-.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)));
+
+.c0 {
   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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4328,46 +6404,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4375,16 +6543,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c4 {
@@ -4401,31 +6581,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -4559,25 +6724,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4592,46 +6758,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4639,16 +6897,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -4665,31 +6935,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -4794,25 +7049,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4827,46 +7083,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4874,16 +7222,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c5 {
@@ -4900,31 +7260,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -5101,27 +7446,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   white-space: nowrap;
   border-width: 0;
 }
-
-.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)));
+
+.c0 {
   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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5136,46 +7482,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5183,16 +7621,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c5 {
@@ -5209,31 +7659,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -5412,25 +7847,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5445,46 +7881,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5492,16 +8020,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c5 {
@@ -5518,31 +8058,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -5715,25 +8241,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5748,46 +8275,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5795,16 +8414,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -5821,31 +8452,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -5980,25 +8596,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6013,46 +8630,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6060,16 +8769,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c4 {
@@ -6086,31 +8807,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -6283,25 +8990,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6316,46 +9024,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6363,16 +9163,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 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 {
@@ -6389,31 +9201,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -6557,33 +9354,26 @@ 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;
-  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;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6598,46 +9388,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6645,63 +9527,57 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
 }
 
-.c5 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
 }
 
-.c5:focus {
-  outline: 0;
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
 }
 
-@media (min-width:768px) {
-
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
 }
 
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
+.c5:focus {
+  outline: 0;
 }
 
-@media screen and (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -6918,25 +9794,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6951,46 +9828,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6998,16 +9967,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c5 {
@@ -7024,31 +10005,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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
@@ -7266,31 +10233,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7305,46 +10267,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7352,16 +10406,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c5 {
@@ -7378,33 +10444,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <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"
@@ -7574,25 +10626,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7607,46 +10660,138 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7654,16 +10799,28 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.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 {
@@ -7680,9 +10837,9 @@ exports[`TextInput should render a password input 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 8c73ced8815..bd6c3c5cf5f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -53,29 +53,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -90,49 +87,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -140,16 +232,34 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c4 {
@@ -293,16 +403,18 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-leading-visual={true}
+  data-size="medium"
+  data-trailing-visual={true}
   onClick={[Function]}
-  size="medium"
 >
   <span
     aria-hidden="true"
@@ -865,29 +977,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -902,49 +1011,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -952,16 +1156,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -1105,16 +1327,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1284,42 +1506,26 @@ 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;
-  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%;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1334,42 +1540,124 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.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);
@@ -1380,8 +1668,21 @@ 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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1389,16 +1690,39 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
 }
 
 .c4 {
@@ -1416,16 +1740,17 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-block={true}
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1496,35 +1821,30 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   white-space: nowrap;
-  border-width: 0;
-}
-
-.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)));
+  border-width: 0;
+}
+
+.c0 {
   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;
-  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;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1539,42 +1859,124 @@ exports[`TextInputWithTokens renders at a maximum height 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.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);
@@ -1582,8 +1984,21 @@ 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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1591,16 +2006,36 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  max-height: 20px;
+  overflow: auto;
 }
 
 .c4 {
@@ -1744,16 +2179,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -2228,36 +2663,26 @@ 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;
-  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);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2272,49 +2697,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2322,16 +2842,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -2473,28 +3011,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -2969,36 +3495,26 @@ 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;
-  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);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3013,49 +3529,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3063,16 +3674,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -3214,28 +3843,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -3710,29 +4327,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3747,49 +4361,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3797,16 +4506,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -3948,28 +4675,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -4444,29 +5159,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4481,49 +5193,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4531,16 +5338,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -4684,28 +5509,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -5180,30 +5993,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5218,50 +6027,145 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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);
 }
 
-.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 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5269,16 +6173,35 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
 }
 
 .c4 {
@@ -5422,16 +6345,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -5906,29 +6829,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5943,49 +6863,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5993,16 +7008,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -6096,16 +7129,16 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -6363,29 +7396,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6400,49 +7430,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6450,16 +7575,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 0;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -6603,28 +7746,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -7159,29 +8291,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7196,49 +8325,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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 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-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:-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='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::placeholder,
-.c0 textarea::placeholder,
-.c0 select::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: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='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 > textarea {
-  padding: 12px;
+.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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7246,16 +8470,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c6 {
@@ -7399,28 +8641,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -7992,29 +9223,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8029,49 +9257,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -8079,16 +9402,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 0;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -8232,28 +9573,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -8797,29 +10127,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8834,49 +10161,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -8884,16 +10306,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c7 {
@@ -9037,28 +10477,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -9675,29 +11104,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9712,49 +11138,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -9762,16 +11283,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.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);
 }
 
 .c7 {
@@ -9915,28 +11454,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -10553,29 +12081,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -10590,49 +12115,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -10640,16 +12260,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c7 {
@@ -10793,28 +12431,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -11425,29 +13053,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -11462,49 +13087,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -11512,16 +13232,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 0;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -11665,28 +13403,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -12260,29 +13987,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -12297,49 +14021,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -12347,16 +14166,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c6 {
@@ -12500,28 +14337,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -13132,29 +14959,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -13169,49 +14993,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -13219,16 +15138,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 0;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -13372,28 +15309,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -13976,93 +15902,178 @@ 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;
-  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);
+  --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 input,
-.c0 textarea {
-  cursor: text;
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
 }
 
-.c0 select {
-  cursor: pointer;
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-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-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::-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-validation='success']) {
+  border-color: var(--bgColor-success-emphasis);
 }
 
-.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-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::placeholder,
-.c0 textarea::placeholder,
-.c0 select::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: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-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 > textarea {
-  padding: 12px;
+.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);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -14070,16 +16081,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c7 {
@@ -14221,32 +16250,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@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) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="small"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="small"
   >
     <span
       className="TextInput-icon"
@@ -14902,29 +16917,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -14939,49 +16951,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -14989,16 +17096,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c7 {
@@ -15142,28 +17267,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -15819,29 +17934,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -15856,49 +17968,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.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);
 }
 
+.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: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -15906,16 +18113,34 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 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);
 }
 
 .c7 {
@@ -16057,28 +18282,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@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"
@@ -16700,29 +18915,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -16737,49 +18949,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -16787,16 +19094,34 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -16940,16 +19265,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -17411,29 +19736,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -17448,49 +19770,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -17498,16 +19915,34 @@ 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,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -17663,16 +20098,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -18094,29 +20529,26 @@ 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;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -18131,49 +20563,144 @@ 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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  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,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.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: 12px;
+  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);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -18181,16 +20708,34 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.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-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -18208,16 +20753,16 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <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 072d17605cf..56557456493 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,53 +1,13 @@
-import styled, {css} from 'styled-components'
+import React from 'react'
+import styled from 'styled-components'
 import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
-import {maxWidth, minWidth, variant, width} from 'styled-system'
-import {get} from '../../constants'
+import {maxWidth, minWidth, width} from 'styled-system'
 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
@@ -56,56 +16,34 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
+  /** @deprecated Use `size` prop instead */
+  variant?: TextInputSizes
+  size?: TextInputSizes
 } & WidthProps &
   MinWidthProps &
   MaxWidthProps &
-  SxProp
+  SxProp &
+  React.ComponentPropsWithoutRef<'span'>
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
-  /** @deprecated Use `size` prop instead */
-  variant?: TextInputSizes
-  size?: TextInputSizes
 } & StyledBaseWrapperProps
 
-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')};
+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);
   vertical-align: middle;
-  background-color: ${get('colors.canvas.default')};
-  border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')});
-  border-radius: ${get('radii.2')};
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
   outline: none;
-  box-shadow: ${get('shadows.primer.shadow.inset')};
-  display: inline-flex;
+  box-shadow: var(--shadow-inset);
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 
   input,
   textarea {
@@ -120,105 +58,208 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   textarea,
   select {
     &::placeholder {
-      color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')});
+      color: var(---control-fgColor-placeholder, var(--fgColor-muted));
     }
   }
 
-  ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
+  &:where([data-trailing-action][data-focused]),
+  &:where(:not([data-trailing-action]):focus-within) {
+    border-color: var(--borderColor-accent-emphasis);
+    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+    outline-offset: -1px;
+  }
 
   > textarea {
-    padding: ${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};
+    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}
+  }
 `
 
-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.
+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;
 
   & > :not(:last-child) {
-    margin-right: ${get('space.2')};
+    margin-right: var(--base-size-8);
   }
 
   .TextInput-icon,
   .TextInput-action {
     align-self: center;
-    color: ${get('colors.fg.muted')};
+    color: var(--fgColor-muted);
     flex-shrink: 0;
   }
 
-  ${props => css`
-    padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0};
-    padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
+  &:where([data-leading-visual]) {
+    padding-left: var(--base-size-12);
+  }
 
-    > input,
-    > select {
-      padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0};
-      padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
-    }
-  `}
+  &:where([data-trailing-visual]:not([data-trailing-action])) {
+    padding-right: var(--base-size-12);
+  }
+
+  &:where(:not([data-leading-visual])) > input,
+  &:where(:not([data-leading-visual])) > select {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+    padding-right: var(--base-size-12);
+  }
 
-  ${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 5699aa85ca1..a01cb435dec 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -87,15 +87,21 @@ export function percent(value: number | string): string {
 
 export function renderStyles(node: React.ReactElement) {
   const {
-    props: {className},
+    props: {className, ...restProps},
   } = render(node)
-  return getComputedStyles(className)
+  return getComputedStyles(className, restProps)
 }
 
-export function getComputedStyles(className: string) {
+export function getComputedStyles(className: string, restProps?: Record<string, string | undefined>) {
   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