From 7e74223bd2c3a2a0af1e84232858ff90813639a1 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 20:03:33 +0000
Subject: [PATCH 01/11] feat(TextInput): Remove width props from TextInput

---
 .changeset/clean-ligers-approve.md                 |  5 +++++
 .../src/internal/components/TextInputWrapper.tsx   | 14 +++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/clean-ligers-approve.md

diff --git a/.changeset/clean-ligers-approve.md b/.changeset/clean-ligers-approve.md
new file mode 100644
index 00000000000..ee42748b015
--- /dev/null
+++ b/.changeset/clean-ligers-approve.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove width props from TextInput
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 56557456493..cd78ccd6d0e 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
-import {maxWidth, minWidth, width} from 'styled-system'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
@@ -19,10 +17,8 @@ export type StyledBaseWrapperProps = {
   /** @deprecated Use `size` prop instead */
   variant?: TextInputSizes
   size?: TextInputSizes
-} & WidthProps &
-  MinWidthProps &
-  MaxWidthProps &
-  SxProp &
+  width?: string
+} & SxProp &
   React.ComponentPropsWithoutRef<'span'>
 
 export type StyledWrapperProps = {
@@ -165,9 +161,6 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   & {
-    ${width}
-    ${minWidth}
-    ${maxWidth}
     ${sx}
   }
 `
@@ -183,6 +176,8 @@ export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWr
     contrast,
     monospace,
     block,
+    style,
+    width,
     ...restProps
   } = props
   return (
@@ -196,6 +191,7 @@ export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWr
       data-contrast={contrast || undefined}
       data-monospace={monospace || undefined}
       data-block={block || undefined}
+      style={width ? {width, ...style} : style}
       {...restProps}
     />
   )

From 19581849e73b1209456f7af4d3a65c356f51581a Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 20:09:43 +0000
Subject: [PATCH 02/11] type fixes

---
 packages/react/src/TextInput/TextInput.tsx       | 16 +---------------
 .../TextInputWithTokens/TextInputWithTokens.tsx  |  4 ----
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index e272f04887f..acf5a581e4d 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -41,17 +41,7 @@ export type TextInputNonPassthroughProps = {
   trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Pick<
   StyledWrapperProps,
-  | 'block'
-  | 'contrast'
-  | 'disabled'
-  | 'monospace'
-  | 'sx'
-  | 'width'
-  | 'maxWidth'
-  | 'minWidth'
-  | 'variant'
-  | 'size'
-  | 'validationStatus'
+  'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'variant' | 'size' | 'validationStatus'
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -79,8 +69,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       // start deprecated props
       width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
       variant: variantProp,
       // end deprecated props
       type = 'text',
@@ -138,8 +126,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         sx={sxProp}
         size={sizeProp}
         width={widthProp}
-        minWidth={minWidthProp}
-        maxWidth={maxWidthProp}
         variant={variantProp}
         hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
         hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index fa03c61a48e..9567de7b341 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -88,8 +88,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     hideTokenRemoveButtons = false,
     maxHeight,
     width: widthProp,
-    minWidth: minWidthProp,
-    maxWidth: maxWidthProp,
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
@@ -259,8 +257,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
       hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
       width={widthProp}
-      minWidth={minWidthProp}
-      maxWidth={maxWidthProp}
       size={inputSizeMap[size]}
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead

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

This reverts commit c424c36d50145371af67d0ff7a575dc5e4e30b7f.
---
 .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

From a2fd73697bb8582053dd374ba13f838951cae900 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 22:40:53 +0000
Subject: [PATCH 04/11] lint fix

---
 .../react/src/internal/components/TextInputWrapper.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 99deaa43b4e..36da1e9360e 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -176,17 +176,17 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
       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')};
-  }
-
   ${props =>
     props.width &&
     css`
       width: ${props.width};
     `}
 
+  // 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')};
+  }
+
   ${sizeDeprecatedVariants}
   ${sizeVariants}
   ${sx};

From f64022b43fb5e4dba235b6ff00225cf46f29b176 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 22:49:02 +0000
Subject: [PATCH 05/11] remove unused imports

---
 packages/react/src/internal/components/TextInputWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 36da1e9360e..32b09a7b3e1 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {maxWidth, minWidth, variant, width} from 'styled-system'
+import {variant} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'

From 40ab2b3e05a8c94111c8ad6740fc0e01270d26e4 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Sat, 9 Nov 2024 00:28:16 +0000
Subject: [PATCH 06/11] fix type error and add test

---
 packages/react/src/Select/Select.tsx          |  4 ++-
 packages/react/src/__tests__/Select.test.tsx  | 28 +++++++++++++++++++
 .../internal/components/TextInputWrapper.tsx  |  6 ++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 36152a035b7..e3ce666c876 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -5,6 +5,8 @@ import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+
 import classes from './Select.module.css'
 
 export type SelectProps = Omit<
@@ -167,7 +169,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       </TextInputWrapper>
     )
   },
-)
+) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
   <option {...props} />
diff --git a/packages/react/src/__tests__/Select.test.tsx b/packages/react/src/__tests__/Select.test.tsx
index 2168c37c2d0..a9cdb9db192 100644
--- a/packages/react/src/__tests__/Select.test.tsx
+++ b/packages/react/src/__tests__/Select.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {Select} from '..'
 import {render} from '@testing-library/react'
 import {FeatureFlags} from '../FeatureFlags'
+import userEvent from '@testing-library/user-event'
 
 describe('Select', () => {
   it('should support `className` on the outermost element', () => {
@@ -155,4 +156,31 @@ describe('Select', () => {
     expect(select).toHaveAttribute('disabled')
     expect(select).toHaveAttribute('disabled')
   })
+
+  it('trigger changes event when option selected', async () => {
+    const {getByLabelText} = render(
+      <>
+        <label htmlFor="default">Choice</label>
+        <Select
+          id="default"
+          onChange={e => {
+            expect(e.currentTarget.value).toBe('one')
+          }}
+        >
+          <Select.Option value="one">Choice one</Select.Option>
+          <Select.Option value="two">Choice two</Select.Option>
+          <Select.Option value="three">Choice three</Select.Option>
+          <Select.Option value="four">Choice four</Select.Option>
+          <Select.Option value="five">Choice five</Select.Option>
+          <Select.Option value="six">Choice six</Select.Option>
+        </Select>
+      </>,
+    )
+
+    const select = getByLabelText('Choice')
+
+    expect(select).toBeDefined()
+
+    await userEvent.selectOptions(select, 'one')
+  })
 })
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index d10d7700d8d..080819b9df9 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -18,8 +18,10 @@ export type StyledBaseWrapperProps = {
   variant?: TextInputSizes
   size?: TextInputSizes
   width?: string
-} & SxProp &
-  React.ComponentPropsWithoutRef<'span'>
+  className?: string
+  style?: React.CSSProperties
+  onClick?: React.MouseEventHandler
+} & SxProp
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean

From 7a9493b285fde87595d48d15a619cfb46a27e13c Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 13 Nov 2024 17:42:13 +0000
Subject: [PATCH 07/11] Update to deprecate props

---
 .changeset/clean-ligers-approve.md             |  2 +-
 packages/react/src/TextInput/TextInput.tsx     | 16 +++++++++++++++-
 .../TextInputWithTokens.tsx                    |  4 ++++
 .../internal/components/TextInputWrapper.tsx   | 18 +++++++++---------
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/.changeset/clean-ligers-approve.md b/.changeset/clean-ligers-approve.md
index ee42748b015..dbabb00e1f1 100644
--- a/.changeset/clean-ligers-approve.md
+++ b/.changeset/clean-ligers-approve.md
@@ -2,4 +2,4 @@
 "@primer/react": minor
 ---
 
-Remove width props from TextInput
+Deprecate width, minWidth and maxWidth props from TextInput
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index acf5a581e4d..e272f04887f 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -41,7 +41,17 @@ export type TextInputNonPassthroughProps = {
   trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Pick<
   StyledWrapperProps,
-  'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'variant' | 'size' | 'validationStatus'
+  | 'block'
+  | 'contrast'
+  | 'disabled'
+  | 'monospace'
+  | 'sx'
+  | 'width'
+  | 'maxWidth'
+  | 'minWidth'
+  | 'variant'
+  | 'size'
+  | 'validationStatus'
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -69,6 +79,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       // start deprecated props
       width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
       variant: variantProp,
       // end deprecated props
       type = 'text',
@@ -126,6 +138,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         sx={sxProp}
         size={sizeProp}
         width={widthProp}
+        minWidth={minWidthProp}
+        maxWidth={maxWidthProp}
         variant={variantProp}
         hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
         hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 11a9736a538..c81fb0d9b99 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -91,6 +91,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     hideTokenRemoveButtons = false,
     maxHeight,
     width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
@@ -262,6 +264,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
       hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
       width={widthProp}
+      minWidth={minWidthProp}
+      maxWidth={maxWidthProp}
       size={inputSizeMap[size]}
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 32b09a7b3e1..8be7e438269 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,5 +1,6 @@
 import styled, {css} from 'styled-components'
-import {variant} from 'styled-system'
+import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
+import {maxWidth, minWidth, variant, width} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
@@ -55,8 +56,10 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
-  width?: string
-} & SxProp
+} & /** @deprecated Update `width` using CSS modules or style. */ WidthProps &
+  /** @deprecated Update `min-width` using CSS modules or style. */ MinWidthProps &
+  /** @deprecated Update `max-width` using CSS modules or style. */ MaxWidthProps &
+  SxProp
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
@@ -176,17 +179,14 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
       align-self: stretch;
     `}
 
-  ${props =>
-    props.width &&
-    css`
-      width: ${props.width};
-    `}
-
   // 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};

From a1c043306abac980426dac4619305dbc6b6f04c6 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 13 Nov 2024 19:41:54 +0000
Subject: [PATCH 08/11] Fix media styling

---
 .../__snapshots__/Autocomplete.test.tsx.snap  | 28 ++++----
 .../__snapshots__/TextInput.test.tsx.snap     | 64 +++++++++----------
 .../TextInputWithTokens.test.tsx.snap         | 50 +++++++--------
 .../internal/components/TextInputWrapper.tsx  |  3 +-
 4 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 878a316cad6..ba970638459 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -214,7 +214,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -262,7 +262,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -494,7 +494,7 @@ exports[`snapshots renders a loading state 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -565,7 +565,7 @@ exports[`snapshots renders a loading state 1`] = `
   border-width: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -855,7 +855,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1176,7 +1176,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -1799,7 +1799,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2067,7 +2067,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -2645,7 +2645,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -3084,7 +3084,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -3646,7 +3646,7 @@ exports[`snapshots renders a single select input 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -3870,7 +3870,7 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
@@ -4855,7 +4855,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -4911,7 +4911,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
 
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 45716fa41e9..b04ffc13ad8 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`TextInput renders 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -448,7 +448,7 @@ exports[`TextInput renders block 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -684,7 +684,7 @@ exports[`TextInput renders contrast 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -920,7 +920,7 @@ exports[`TextInput renders error 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1157,7 +1157,7 @@ exports[`TextInput renders large 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1393,7 +1393,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1658,7 +1658,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1923,7 +1923,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2170,7 +2170,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2417,7 +2417,7 @@ exports[`TextInput renders monospace 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2653,7 +2653,7 @@ exports[`TextInput renders placeholder 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2889,7 +2889,7 @@ exports[`TextInput renders small 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -3574,7 +3574,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -4207,7 +4207,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -4931,7 +4931,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   }
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5213,7 +5213,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5478,7 +5478,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5743,7 +5743,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5990,7 +5990,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -6265,7 +6265,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -6581,7 +6581,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -6935,7 +6935,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -7260,7 +7260,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -7659,7 +7659,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -8058,7 +8058,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -8452,7 +8452,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -8807,7 +8807,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -9201,7 +9201,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -9565,7 +9565,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -10005,7 +10005,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -10444,7 +10444,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -10837,7 +10837,7 @@ exports[`TextInput should render a password input 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 4a0ece89554..d5391f7cf1d 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -403,7 +403,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1343,7 +1343,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -1760,7 +1760,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -2199,7 +2199,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -3047,7 +3047,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -3895,7 +3895,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -4743,7 +4743,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5593,7 +5593,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -6445,7 +6445,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -7245,7 +7245,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -7862,7 +7862,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -8773,7 +8773,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -9721,7 +9721,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -10641,7 +10641,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -11634,7 +11634,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -12627,7 +12627,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -13615,7 +13615,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -14565,7 +14565,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -15553,7 +15553,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -16510,7 +16510,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -17543,7 +17543,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -18574,7 +18574,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -19573,7 +19573,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -20422,7 +20422,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   bottom: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -21093,7 +21093,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: 0;
 }
 
-@media (min-width:var(--breakpoint-medium)) {
+@media (min-width:768px) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index ae452534676..a113a972bfb 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
 import {maxWidth, minWidth, width} from 'styled-system'
+import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
@@ -119,7 +120,7 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
-  @media (min-width: var(--breakpoint-medium)) {
+  @media (min-width: ${get('breakpoints.1')}) {
     font-size: var(--text-body-size-medium);
   }
 

From 8915312ca76a0dc841578d07875ef495fee4a56a Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 13 Nov 2024 19:54:35 +0000
Subject: [PATCH 09/11] revert back to get

---
 .../__snapshots__/Autocomplete.test.tsx.snap  |  364 ++--
 .../__snapshots__/TextInput.test.tsx.snap     | 1664 ++++++++---------
 .../TextInputWithTokens.test.tsx.snap         | 1300 ++++++-------
 .../internal/components/TextInputWrapper.tsx  |   42 +-
 4 files changed, 1685 insertions(+), 1685 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index ba970638459..892c5a97d0f 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -3,25 +3,25 @@
 exports[`snapshots renders a custom empty state message 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -37,31 +37,31 @@ exports[`snapshots renders a custom empty state message 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -70,14 +70,14 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -87,22 +87,22 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -283,25 +283,25 @@ exports[`snapshots renders a custom empty state message 1`] = `
 exports[`snapshots renders a loading state 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -317,31 +317,31 @@ exports[`snapshots renders a loading state 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -350,14 +350,14 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -367,22 +367,22 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -620,25 +620,25 @@ exports[`snapshots renders a loading state 1`] = `
 exports[`snapshots renders a menu that contains an item to add to the menu 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -654,31 +654,31 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -687,14 +687,14 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -704,22 +704,22 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1576,25 +1576,25 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 exports[`snapshots renders a multiselect input 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1610,31 +1610,31 @@ exports[`snapshots renders a multiselect input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1643,14 +1643,14 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1660,22 +1660,22 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -2410,25 +2410,25 @@ exports[`snapshots renders a multiselect input 1`] = `
 exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -2444,31 +2444,31 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2477,14 +2477,14 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2494,22 +2494,22 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -3427,25 +3427,25 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 exports[`snapshots renders a single select input 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -3461,31 +3461,31 @@ exports[`snapshots renders a single select input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3494,14 +3494,14 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -3511,22 +3511,22 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -4636,25 +4636,25 @@ exports[`snapshots renders with a custom text input component 1`] = `
 exports[`snapshots renders with an input value 1`] = `
 [
   .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -4670,31 +4670,31 @@ exports[`snapshots renders with an input value 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4703,14 +4703,14 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -4720,22 +4720,22 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index b04ffc13ad8..3e278384ed8 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2,25 +2,25 @@
 
 exports[`TextInput renders 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -36,31 +36,31 @@ exports[`TextInput renders 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -69,14 +69,14 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -86,22 +86,22 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -237,25 +237,25 @@ exports[`TextInput renders 1`] = `
 
 exports[`TextInput renders block 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -271,31 +271,31 @@ exports[`TextInput renders block 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -304,14 +304,14 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -321,22 +321,22 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -473,25 +473,25 @@ exports[`TextInput renders block 1`] = `
 
 exports[`TextInput renders contrast 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -507,31 +507,31 @@ exports[`TextInput renders contrast 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -540,14 +540,14 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -557,22 +557,22 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -709,25 +709,25 @@ exports[`TextInput renders contrast 1`] = `
 
 exports[`TextInput renders error 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -743,31 +743,31 @@ exports[`TextInput renders error 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -776,14 +776,14 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -793,22 +793,22 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -946,25 +946,25 @@ exports[`TextInput renders error 1`] = `
 
 exports[`TextInput renders large 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -980,31 +980,31 @@ exports[`TextInput renders large 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1013,14 +1013,14 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1030,22 +1030,22 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1182,25 +1182,25 @@ exports[`TextInput renders large 1`] = `
 
 exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1216,31 +1216,31 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1249,14 +1249,14 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1266,22 +1266,22 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1447,25 +1447,25 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1481,31 +1481,31 @@ exports[`TextInput renders leadingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1514,14 +1514,14 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1531,22 +1531,22 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1712,25 +1712,25 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1746,31 +1746,31 @@ exports[`TextInput renders leadingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1779,14 +1779,14 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1796,22 +1796,22 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1959,25 +1959,25 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1993,31 +1993,31 @@ exports[`TextInput renders leadingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2026,14 +2026,14 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2043,22 +2043,22 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -2206,25 +2206,25 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 exports[`TextInput renders monospace 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -2240,31 +2240,31 @@ exports[`TextInput renders monospace 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2273,14 +2273,14 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2290,22 +2290,22 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -2442,25 +2442,25 @@ exports[`TextInput renders monospace 1`] = `
 
 exports[`TextInput renders placeholder 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -2476,31 +2476,31 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2509,14 +2509,14 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2526,22 +2526,22 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -2678,25 +2678,25 @@ exports[`TextInput renders placeholder 1`] = `
 
 exports[`TextInput renders small 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -2712,31 +2712,31 @@ exports[`TextInput renders small 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2745,14 +2745,14 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2762,22 +2762,22 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -3337,25 +3337,25 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -3371,31 +3371,31 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3404,14 +3404,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -3421,22 +3421,22 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -3976,25 +3976,25 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -4010,31 +4010,31 @@ exports[`TextInput renders trailingAction text button 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4043,14 +4043,14 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -4060,22 +4060,22 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -4694,25 +4694,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -4728,31 +4728,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4761,14 +4761,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -4778,22 +4778,22 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -5002,25 +5002,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -5036,31 +5036,31 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5069,14 +5069,14 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -5086,22 +5086,22 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -5267,25 +5267,25 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 exports[`TextInput renders trailingVisual 2`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -5301,31 +5301,31 @@ exports[`TextInput renders trailingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5334,14 +5334,14 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -5351,22 +5351,22 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -5532,25 +5532,25 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 exports[`TextInput renders trailingVisual 3`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -5566,31 +5566,31 @@ exports[`TextInput renders trailingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5599,14 +5599,14 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -5616,22 +5616,22 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -5779,25 +5779,25 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -5813,31 +5813,31 @@ exports[`TextInput renders trailingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5846,14 +5846,14 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -5863,22 +5863,22 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -6054,25 +6054,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -6088,31 +6088,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6121,14 +6121,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -6138,22 +6138,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -6370,25 +6370,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -6404,31 +6404,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6437,14 +6437,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -6454,22 +6454,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -6724,25 +6724,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -6758,31 +6758,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6791,14 +6791,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -6808,22 +6808,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -7049,25 +7049,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -7083,31 +7083,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7116,14 +7116,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -7133,22 +7133,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -7448,25 +7448,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -7482,31 +7482,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7515,14 +7515,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -7532,22 +7532,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -7847,25 +7847,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -7881,31 +7881,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7914,14 +7914,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -7931,22 +7931,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -8241,25 +8241,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -8275,31 +8275,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -8308,14 +8308,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -8325,22 +8325,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -8596,25 +8596,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -8630,31 +8630,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -8663,14 +8663,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -8680,22 +8680,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -8990,25 +8990,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -9024,31 +9024,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -9057,14 +9057,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -9074,22 +9074,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -9354,25 +9354,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -9388,31 +9388,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -9421,14 +9421,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -9438,22 +9438,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -9794,25 +9794,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -9828,31 +9828,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -9861,14 +9861,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -9878,22 +9878,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -10233,25 +10233,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -10267,31 +10267,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -10300,14 +10300,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -10317,22 +10317,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -10626,25 +10626,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 exports[`TextInput should render a password input 1`] = `
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -10660,31 +10660,31 @@ exports[`TextInput should render a password input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -10693,14 +10693,14 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -10710,22 +10710,22 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index d5391f7cf1d..a4e0d6aea46 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -53,25 +53,25 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -87,31 +87,31 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -120,14 +120,14 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -137,22 +137,22 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -993,25 +993,25 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1027,31 +1027,31 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1060,14 +1060,14 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1077,22 +1077,22 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1526,25 +1526,25 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1560,31 +1560,31 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1593,14 +1593,14 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1610,22 +1610,22 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -1845,25 +1845,25 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -1879,31 +1879,31 @@ 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));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1912,14 +1912,14 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -1929,22 +1929,22 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -2699,25 +2699,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -2733,31 +2733,31 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2766,14 +2766,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -2783,22 +2783,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -3547,25 +3547,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -3581,31 +3581,31 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3614,14 +3614,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -3631,22 +3631,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -4395,25 +4395,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -4429,31 +4429,31 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4462,14 +4462,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -4479,22 +4479,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -5243,25 +5243,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -5277,31 +5277,31 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5310,14 +5310,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -5327,22 +5327,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -6093,25 +6093,25 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -6127,31 +6127,31 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6160,14 +6160,14 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -6177,22 +6177,22 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -6945,25 +6945,25 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -6979,31 +6979,31 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7012,14 +7012,14 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -7029,22 +7029,22 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -7512,25 +7512,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -7546,31 +7546,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7579,14 +7579,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -7596,22 +7596,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -8423,25 +8423,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -8457,31 +8457,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -8490,14 +8490,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -8507,22 +8507,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -9371,25 +9371,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -9405,31 +9405,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -9438,14 +9438,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -9455,22 +9455,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -10291,25 +10291,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -10325,31 +10325,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -10358,14 +10358,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -10375,22 +10375,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -11284,25 +11284,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -11318,31 +11318,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -11351,14 +11351,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -11368,22 +11368,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -12277,25 +12277,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -12311,31 +12311,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -12344,14 +12344,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -12361,22 +12361,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -13265,25 +13265,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -13299,31 +13299,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -13332,14 +13332,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -13349,22 +13349,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -14215,25 +14215,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -14249,31 +14249,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -14282,14 +14282,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -14299,22 +14299,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -15203,25 +15203,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -15237,31 +15237,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -15270,14 +15270,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -15287,22 +15287,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -16162,25 +16162,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -16196,31 +16196,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -16229,14 +16229,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -16246,22 +16246,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -17193,25 +17193,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -17227,31 +17227,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -17260,14 +17260,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -17277,22 +17277,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -18226,25 +18226,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -18260,31 +18260,31 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -18293,14 +18293,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -18310,22 +18310,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -19223,25 +19223,25 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -19257,31 +19257,31 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -19290,14 +19290,14 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -19307,22 +19307,22 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -20060,25 +20060,25 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -20094,31 +20094,31 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -20127,14 +20127,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -20144,22 +20144,22 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
@@ -20869,25 +20869,25 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0 {
+  font-size: 14px;
+  line-height: var(--base-size-20);
+  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: var(--base-size-32);
+  overflow: hidden;
   --inner-action-size: var(--base-size-24);
 }
 
@@ -20903,31 +20903,31 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--borderColor-accent-emphasis);
-  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -20936,14 +20936,14 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0:where([data-contrast]) {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-  background-color: var(--control-bgColor-disabled);
-  border-color: var(--control-borderColor-disabled);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
   box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
 .c0:where([data-disabled]) input,
@@ -20953,22 +20953,22 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0:where([data-monospace]) {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--borderColor-danger-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .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);
+  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-validation='success']) {
-  border-color: var(--bgColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index a113a972bfb..aa3908dd8da 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -35,19 +35,19 @@ export type StyledWrapperProps = {
 } & StyledBaseWrapperProps
 
 export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
-  display: inline-flex;
-  min-height: var(--base-size-32);
-  overflow: hidden;
-  font-size: var(--text-body-size-medium);
+  font-size: ${get('fontSizes.1')};
   line-height: var(--base-size-20);
-  color: var(--fgColor-default);
+  color: ${get('colors.fg.default')};
   vertical-align: middle;
-  background-color: var(--bgColor-default);
-  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
-  border-radius: var(--borderRadius-medium);
+  background-color: ${get('colors.canvas.default')};
+  border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')});
+  border-radius: ${get('radii.2')};
   outline: none;
-  box-shadow: var(--shadow-inset);
+  box-shadow: ${get('shadows.primer.shadow.inset')};
+  display: inline-flex;
   align-items: stretch;
+  min-height: var(--base-size-32);
+  overflow: hidden;
 
   input,
   textarea {
@@ -62,14 +62,14 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   textarea,
   select {
     &::placeholder {
-      color: var(---control-fgColor-placeholder, var(--fgColor-muted));
+      color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')});
     }
   }
 
   &:where([data-trailing-action][data-focused]),
   &:where(:not([data-trailing-action]):focus-within) {
-    border-color: var(--borderColor-accent-emphasis);
-    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
+    border-color: ${get('colors.accent.fg')};
+    outline: 2px solid ${get('colors.accent.fg')};
     outline-offset: -1px;
   }
 
@@ -78,14 +78,14 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   &:where([data-contrast]) {
-    background-color: var(--bgColor-inset);
+    background-color: ${get('colors.canvas.inset')};
   }
 
   &:where([data-disabled]) {
-    color: var(--fgColor-disabled);
-    background-color: var(--control-bgColor-disabled);
-    border-color: var(--control-borderColor-disabled);
+    color: ${get('colors.primer.fg.disabled')};
+    background-color: ${get('colors.input.disabledBg')};
     box-shadow: none;
+    border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
 
     input,
     textarea,
@@ -95,22 +95,22 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   &:where([data-monospace]) {
-    font-family: var(--fontStack-monospace);
+    font-family: ${get('fonts.mono')};
   }
 
   &:where([data-validation='error']) {
-    border-color: var(--borderColor-danger-emphasis);
+    border-color: ${get('colors.success.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);
+      border-color: ${get('colors.accent.fg')};
+      outline: 2px solid ${get('colors.accent.fg')};
       outline-offset: -1px;
     }
   }
 
   &:where([data-validation='success']) {
-    border-color: var(--bgColor-success-emphasis);
+    border-color: ${get('colors.success.emphasis')};
   }
 
   &:where([data-block]) {

From 29464fdc6057ec8c705577f4f7a60d4f42af012a Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 13 Nov 2024 20:03:06 +0000
Subject: [PATCH 10/11] revert more gets

---
 .../__snapshots__/Autocomplete.test.tsx.snap  | 140 ++--
 .../__snapshots__/TextInput.test.tsx.snap     | 640 +++++++++---------
 .../TextInputWithTokens.test.tsx.snap         | 500 +++++++-------
 .../internal/components/TextInputWrapper.tsx  |  30 +-
 4 files changed, 653 insertions(+), 657 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 892c5a97d0f..1facb429f36 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -106,11 +106,11 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -155,20 +155,14 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -176,12 +170,18 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -371,7 +371,7 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -386,11 +386,11 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -435,20 +435,14 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -456,12 +450,18 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -708,7 +708,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -723,11 +723,11 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -772,20 +772,14 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -793,12 +787,18 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1664,7 +1664,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1679,11 +1679,11 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1728,20 +1728,14 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1749,12 +1743,18 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2498,7 +2498,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2513,11 +2513,11 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2562,20 +2562,14 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2583,12 +2577,18 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -3515,7 +3515,7 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -3530,11 +3530,11 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -3579,20 +3579,14 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3600,12 +3594,18 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -4724,7 +4724,7 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -4739,11 +4739,11 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -4788,20 +4788,14 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4809,12 +4803,18 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 3e278384ed8..9bf40421763 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -90,7 +90,7 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -105,11 +105,11 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -154,20 +154,14 @@ exports[`TextInput renders 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -175,12 +169,18 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -325,7 +325,7 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -340,11 +340,11 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -389,20 +389,14 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -410,12 +404,18 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -561,7 +561,7 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -576,11 +576,11 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -625,20 +625,14 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -646,12 +640,18 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -797,7 +797,7 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -812,11 +812,11 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -861,20 +861,14 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -882,12 +876,18 @@ exports[`TextInput renders error 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1034,7 +1034,7 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1049,11 +1049,11 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1098,20 +1098,14 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1119,12 +1113,18 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1270,7 +1270,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1285,11 +1285,11 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1334,20 +1334,14 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1355,12 +1349,18 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1535,7 +1535,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1550,11 +1550,11 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1599,20 +1599,14 @@ exports[`TextInput renders leadingVisual 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: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1620,12 +1614,18 @@ exports[`TextInput renders leadingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1800,7 +1800,7 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1815,11 +1815,11 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1864,20 +1864,14 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1885,12 +1879,18 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2047,7 +2047,7 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2062,11 +2062,11 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2111,20 +2111,14 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2132,12 +2126,18 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2294,7 +2294,7 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2309,11 +2309,11 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2358,20 +2358,14 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2379,12 +2373,18 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2530,7 +2530,7 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2545,11 +2545,11 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2594,20 +2594,14 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2615,12 +2609,18 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2766,7 +2766,7 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2781,11 +2781,11 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2830,20 +2830,14 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2851,12 +2845,18 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -3425,7 +3425,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -3440,11 +3440,11 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -3489,20 +3489,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3510,12 +3504,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -4064,7 +4064,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -4079,11 +4079,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -4128,20 +4128,14 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4149,12 +4143,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -4782,7 +4782,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -4797,11 +4797,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -4846,20 +4846,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4867,12 +4861,18 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -5090,7 +5090,7 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -5105,11 +5105,11 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -5154,20 +5154,14 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5175,12 +5169,18 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -5355,7 +5355,7 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -5370,11 +5370,11 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -5419,20 +5419,14 @@ exports[`TextInput renders trailingVisual 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: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5440,12 +5434,18 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -5620,7 +5620,7 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -5635,11 +5635,11 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -5684,20 +5684,14 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5705,12 +5699,18 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -5867,7 +5867,7 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -5882,11 +5882,11 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -5931,20 +5931,14 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5952,12 +5946,18 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -6142,7 +6142,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -6157,11 +6157,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -6206,20 +6206,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6227,12 +6221,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -6458,7 +6458,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -6473,11 +6473,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -6522,20 +6522,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6543,12 +6537,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -6812,7 +6812,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -6827,11 +6827,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -6876,20 +6876,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6897,12 +6891,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -7137,7 +7137,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -7152,11 +7152,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -7201,20 +7201,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7222,12 +7216,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -7536,7 +7536,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -7551,11 +7551,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -7600,20 +7600,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7621,12 +7615,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -7935,7 +7935,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -7950,11 +7950,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -7999,20 +7999,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8020,12 +8014,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -8329,7 +8329,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -8344,11 +8344,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -8393,20 +8393,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8414,12 +8408,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -8684,7 +8684,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -8699,11 +8699,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -8748,20 +8748,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8769,12 +8763,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -9078,7 +9078,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -9093,11 +9093,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -9142,20 +9142,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9163,12 +9157,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -9442,7 +9442,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -9457,11 +9457,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -9506,20 +9506,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9527,12 +9521,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -9882,7 +9882,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -9897,11 +9897,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -9946,20 +9946,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9967,12 +9961,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -10321,7 +10321,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -10336,11 +10336,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -10385,20 +10385,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10406,12 +10400,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -10714,7 +10714,7 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -10729,11 +10729,11 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -10778,20 +10778,14 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10799,12 +10793,18 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index a4e0d6aea46..782b2826cb6 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -156,11 +156,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -211,20 +211,14 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -232,12 +226,18 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1081,7 +1081,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1096,11 +1096,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1151,20 +1151,14 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1172,12 +1166,18 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1614,7 +1614,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1629,11 +1629,11 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -1689,20 +1689,14 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -1710,12 +1704,18 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -1933,7 +1933,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -1948,11 +1948,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2005,20 +2005,14 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2026,12 +2020,18 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -2787,7 +2787,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -2802,11 +2802,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -2857,20 +2857,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -2878,12 +2872,18 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -3635,7 +3635,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -3650,11 +3650,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -3705,20 +3705,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 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: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -3726,12 +3720,18 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -4483,7 +4483,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -4498,11 +4498,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -4553,20 +4553,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -4574,12 +4568,18 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -5331,7 +5331,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -5346,11 +5346,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -5401,20 +5401,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -5422,12 +5416,18 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -6181,7 +6181,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -6196,11 +6196,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -6252,20 +6252,14 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -6273,12 +6267,18 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -7033,7 +7033,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -7048,11 +7048,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -7103,20 +7103,14 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7124,12 +7118,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -7600,7 +7600,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -7615,11 +7615,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -7670,20 +7670,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -7691,12 +7685,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -8511,7 +8511,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -8526,11 +8526,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -8581,20 +8581,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -8602,12 +8596,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -9459,7 +9459,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -9474,11 +9474,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -9529,20 +9529,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -9550,12 +9544,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -10379,7 +10379,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -10394,11 +10394,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -10449,20 +10449,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -10470,12 +10464,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -11372,7 +11372,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -11387,11 +11387,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -11442,20 +11442,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -11463,12 +11457,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -12365,7 +12365,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -12380,11 +12380,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -12435,20 +12435,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -12456,12 +12450,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -13353,7 +13353,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -13368,11 +13368,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -13423,20 +13423,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -13444,12 +13438,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -14303,7 +14303,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -14318,11 +14318,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -14373,20 +14373,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -14394,12 +14388,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -15291,7 +15291,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -15306,11 +15306,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -15361,20 +15361,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -15382,12 +15376,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -16250,7 +16250,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -16265,11 +16265,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -16320,20 +16320,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -16341,12 +16335,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -17281,7 +17281,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -17296,11 +17296,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -17351,20 +17351,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -17372,12 +17366,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -18314,7 +18314,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -18329,11 +18329,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -18384,20 +18384,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -18405,12 +18399,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -19311,7 +19311,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -19326,11 +19326,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -19381,20 +19381,14 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -19402,12 +19396,18 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -20148,7 +20148,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -20163,11 +20163,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -20218,20 +20218,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -20239,12 +20233,18 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
@@ -20957,7 +20957,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0:where([data-validation='error']) {
-  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
@@ -20972,11 +20972,11 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0:where([data-block]) {
+  width: 100%;
   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;
@@ -21027,20 +21027,14 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c1 {
-  padding-right: 0;
-  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-}
-
-.c1 > input,
-.c1 > select {
   padding-right: 0;
   padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: var(--base-size-8);
+  margin-right: 8px;
 }
 
 .c1 .TextInput-icon,
@@ -21048,12 +21042,18 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1:where([data-leading-visual]) {
   padding-left: var(--base-size-12);
 }
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index aa3908dd8da..9e29241961d 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -20,7 +20,6 @@ export type StyledBaseWrapperProps = {
   /** @deprecated Use `size` prop instead */
   variant?: TextInputSizes
   size?: TextInputSizes
-  width?: string
   className?: string
   style?: React.CSSProperties
   onClick?: React.MouseEventHandler
@@ -99,7 +98,7 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   &:where([data-validation='error']) {
-    border-color: ${get('colors.success.emphasis')};
+    border-color: ${get('colors.danger.emphasis')};
 
     &:where([data-trailing-action][data-focused]),
     &:where(:not([data-trailing-action])):focus-within {
@@ -114,8 +113,8 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   &:where([data-block]) {
-    display: flex;
     width: 100%;
+    display: flex;
     align-self: stretch;
   }
 
@@ -187,8 +186,6 @@ export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWr
     contrast,
     monospace,
     block,
-    width,
-    style,
     ...restProps
   } = props
   return (
@@ -202,22 +199,12 @@ export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWr
       data-contrast={contrast || undefined}
       data-monospace={monospace || undefined}
       data-block={block || undefined}
-      style={width ? {width, ...style} : style}
       {...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;
 
@@ -225,16 +212,25 @@ const StyledTextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
   background-position: right 8px center;
 
   & > :not(:last-child) {
-    margin-right: var(--base-size-8);
+    margin-right: ${get('space.2')};
   }
 
   .TextInput-icon,
   .TextInput-action {
     align-self: center;
-    color: var(--fgColor-muted);
+    color: ${get('colors.fg.muted')};
     flex-shrink: 0;
   }
 
+  padding-right: 0;
+  padding-left: 0;
+
+  > input,
+  > select {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
   &:where([data-leading-visual]) {
     padding-left: var(--base-size-12);
   }

From d7deba02365295bb9eb8279427a3869759a1e0a6 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 13 Nov 2024 20:18:49 +0000
Subject: [PATCH 11/11] Properly mark props as deprecated

---
 .../src/internal/components/TextInputWrapper.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 8be7e438269..146c1c637b3 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
+import type {ResponsiveValue} from 'styled-system'
 import {maxWidth, minWidth, variant, width} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
@@ -56,10 +56,13 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
-} & /** @deprecated Update `width` using CSS modules or style. */ WidthProps &
-  /** @deprecated Update `min-width` using CSS modules or style. */ MinWidthProps &
-  /** @deprecated Update `max-width` using CSS modules or style. */ MaxWidthProps &
-  SxProp
+  /** @deprecated Update `width` using CSS modules or style. */
+  width?: string | number | ResponsiveValue<string | number>
+  /** @deprecated Update `min-width` using CSS modules or style. */
+  minWidth?: string | number | ResponsiveValue<string | number>
+  /** @deprecated Update `max-width` using CSS modules or style. */
+  maxWidth?: string | number | ResponsiveValue<string | number>
+} & SxProp
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean