@seed-design/css 1.0.7 → 1.1.3

package/all.css

@@ -745,12 +745,12 @@
 
 .seed-action-button {
   transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
-  font-weight: var(--seed-font-weight-bold);
 }
 
 .seed-action-button--variant_brandSolid {
   background: var(--seed-color-bg-brand-solid);
   color: var(--seed-color-palette-static-white);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-palette-static-white);
   --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   --seed-icon-color: var(--seed-color-palette-static-white);
@@ -777,6 +777,7 @@
 .seed-action-button--variant_neutralSolid {
   background: var(--seed-color-bg-neutral-inverted);
   color: var(--seed-color-fg-neutral-inverted);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
   --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
   --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -803,6 +804,7 @@
 .seed-action-button--variant_neutralWeak {
   background: var(--seed-color-bg-neutral-weak);
   color: var(--seed-color-fg-neutral);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-fg-neutral);
   --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   --seed-icon-color: var(--seed-color-fg-neutral);
@@ -829,6 +831,7 @@
 .seed-action-button--variant_criticalSolid {
   background: var(--seed-color-bg-critical-solid);
   color: var(--seed-color-palette-static-white);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-palette-static-white);
   --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   --seed-icon-color: var(--seed-color-palette-static-white);
@@ -858,6 +861,7 @@
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-brand);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-fg-brand);
   --seed-suffix-icon-color: var(--seed-color-fg-brand);
   --seed-icon-color: var(--seed-color-fg-brand);
@@ -888,6 +892,7 @@
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
+  font-weight: var(--seed-font-weight-bold);
   --seed-prefix-icon-color: var(--seed-color-fg-neutral);
   --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   --seed-icon-color: var(--seed-color-fg-neutral);
@@ -918,6 +923,8 @@
   --seed-prefix-icon-color: var(--seed-box-color);
   --seed-suffix-icon-color: var(--seed-box-color);
   --seed-icon-color: var(--seed-box-color);
+  --seed-font-weight: var(--seed-font-weight-bold);
+  font-weight: var(--seed-font-weight);
   --track-color: var(--seed-color-palette-gray-500);
   --range-color: var(--seed-color-fg-neutral);
   background: #fff0;
@@ -1336,8 +1343,12 @@
 }
 
 .seed-app-bar__iconButton {
+  background: none;
+  border: none;
   justify-content: center;
   align-items: center;
+  padding: 0;
+  font-family: inherit;
   display: flex;
 }
 
@@ -2010,6 +2021,24 @@
   padding-bottom: var(--seed-safe-area-bottom);
 }
 
+.seed-app-screen__layer--tone_transparent {
+  --transparent-gradient-dim-height: 120px;
+  --transparent-gradient-dim-offset: -54px;
+  --transparent-gradient-dim-background: linear-gradient(180deg, #00000059 0%, #0000 100%);
+}
+
+.seed-app-screen__layer--tone_transparent:after {
+  content: "";
+  height: var(--transparent-gradient-dim-height);
+  transform: translateY(var(--transparent-gradient-dim-offset));
+  background: var(--transparent-gradient-dim-background);
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
 .seed-article {
   user-select: text;
   word-break: normal;
@@ -2485,25 +2514,30 @@
   inset: 0;
 }
 
-.seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
+.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="false"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter);
+}
+
+.seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: fade-out;
+  animation-duration: var(--seed-duration-d4);
   animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
 }
 
-.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
+.seed-bottom-sheet__backdrop[data-snap-points="true"], .seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="true"]:not([data-snap-points-overlay="true"]) {
+  opacity: 0;
+}
+
+.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points-overlay="true"] {
+  opacity: 1;
+}
+
+.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
   animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d2);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1;
 }
 
 .seed-bottom-sheet__content {
@@ -2513,31 +2547,52 @@
   background: var(--seed-color-bg-layer-floating);
   border-top-left-radius: var(--seed-radius-r6);
   border-top-right-radius: var(--seed-radius-r6);
+  touch-action: none;
+  will-change: transform;
+  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
 }
 
-.seed-bottom-sheet__content:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
+.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-snap-points="false"] {
+  animation-name: drawer-slide-from-bottom;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
+.seed-bottom-sheet__content:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: drawer-slide-to-bottom;
   animation-duration: var(--seed-duration-d4);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 100%;
-  --seed-exit-opacity: 1;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
+  animation-timing-function: var(--seed-timing-function-exit);
 }
 
-.seed-bottom-sheet__content:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
+.seed-bottom-sheet__content[data-snap-points="true"] {
+  transform: translate3d(0, var(--initial-transform, 100%), 0);
+}
+
+.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-delayed-snap-points="true"] {
+  animation-name: drawer-slide-from-bottom;
   animation-duration: var(--seed-duration-d6);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 100%;
-  --seed-enter-opacity: 1;
-  --seed-enter-scale: 1;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
+.seed-bottom-sheet__content[data-delayed-snap-points="true"] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+.seed-bottom-sheet__content:after {
+  content: "";
+  background: inherit;
+  z-index: -1;
+  height: 200vh;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
 }
 
 .seed-bottom-sheet__header {
@@ -2595,6 +2650,7 @@
   right: var(--seed-dimension-x5);
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-bg-neutral-weak);
+  cursor: pointer;
   --seed-icon-size: 14px;
   --seed-icon-color: var(--seed-color-fg-neutral);
   border: none;
@@ -2624,6 +2680,33 @@
   padding-right: 50px;
 }
 
+.seed-bottom-sheet-handle__root {
+  background-color: var(--seed-color-palette-gray-400);
+  width: 36px;
+  height: 4px;
+  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  touch-action: pan-y;
+  border-radius: 9999px;
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-bottom-sheet-handle__root:is(:active, [data-active]) {
+  background-color: var(--seed-color-palette-gray-500);
+}
+
+.seed-bottom-sheet-handle__touchArea {
+  touch-action: inherit;
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .seed-callout__root {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
@@ -2641,6 +2724,7 @@
   --seed-prefix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   border: none;
+  text-decoration: none;
   display: flex;
 }
 
@@ -3979,6 +4063,113 @@
   background: var(--seed-color-bg-layer-floating-pressed);
 }
 
+.seed-field__root {
+  gap: var(--seed-dimension-x2);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.seed-field__header {
+  padding-inline: var(--seed-dimension-x0_5);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  display: flex;
+}
+
+.seed-field__footer {
+  padding-inline: var(--seed-dimension-x0_5);
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--seed-dimension-x2);
+  display: flex;
+}
+
+.seed-field__description {
+  color: var(--seed-color-fg-neutral-subtle);
+  font-weight: var(--seed-font-weight-regular);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  --seed-prefix-icon-size: var(--seed-dimension-x4);
+  --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
+  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
+  --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+  display: flex;
+}
+
+.seed-field__errorMessage {
+  color: var(--seed-color-fg-critical);
+  font-weight: var(--seed-font-weight-regular);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  --seed-prefix-icon-size: var(--seed-dimension-x4);
+  --seed-prefix-icon-color: var(--seed-color-fg-critical);
+  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
+  --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+  display: flex;
+}
+
+.seed-field__characterCount {
+  color: var(--seed-color-fg-neutral);
+  font-weight: var(--seed-font-weight-regular);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-field__characterCount[data-empty]:not(:is(:invalid, [data-invalid])) {
+  color: var(--seed-color-fg-neutral-subtle);
+}
+
+.seed-field__characterCount:is(:invalid, [data-invalid]) {
+  color: var(--seed-color-fg-critical);
+}
+
+.seed-field__maxCharacterCount {
+  color: var(--seed-color-fg-neutral-subtle);
+  font-weight: var(--seed-font-weight-regular);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-field__maxCharacterCount:is(:invalid, [data-invalid]) {
+  color: var(--seed-color-fg-critical);
+}
+
+.seed-field-label__root {
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-field-label__indicatorText {
+  vertical-align: bottom;
+  color: var(--seed-color-fg-neutral-subtle);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-regular);
+  padding-inline-start: .25rem;
+  display: inline;
+}
+
+.seed-field-label__indicatorIcon {
+  vertical-align: top;
+  width: .375rem;
+  height: .375rem;
+  color: var(--seed-color-fg-critical);
+  margin-block-start: .25rem;
+  margin-inline-start: .125rem;
+  display: inline;
+}
+
+.seed-field-label__root--weight_medium {
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-field-label__root--weight_bold {
+  font-weight: var(--seed-font-weight-bold);
+}
+
 .seed-floating-action-button__root {
   box-sizing: border-box;
   cursor: pointer;
@@ -4331,60 +4522,176 @@
   color: var(--seed-color-palette-static-white);
 }
 
-.seed-link-content {
-  cursor: pointer;
+.seed-input-button__root {
   box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: var(--seed-box-color);
-  --seed-suffix-icon-color: var(--seed-box-color);
+  isolation: isolate;
+  width: 100%;
+  height: var(--seed-dimension-x13);
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x4);
+  display: flex;
+  position: relative;
+}
+
+.seed-input-button__button {
+  z-index: -1;
+  cursor: pointer;
+  border-radius: var(--seed-radius-r3);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+  transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   background-color: #0000;
   border: none;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.seed-input-button__button:is(:disabled, [disabled], [data-disabled]) {
+  cursor: not-allowed;
+  background-color: var(--seed-color-bg-disabled);
+}
+
+.seed-input-button__button:is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-layer-default-pressed);
+}
+
+.seed-input-button__button:is(:focus, [data-focus]) {
   outline: none;
-  align-items: center;
-  padding-block: 0;
-  padding-inline: 0;
-  font-family: inherit;
-  display: inline-flex;
 }
 
-.seed-link-content--weight_bold {
-  font-weight: var(--seed-font-weight-bold);
+.seed-input-button__button:is(:invalid, [data-invalid]) {
+  box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
 }
 
-.seed-link-content--weight_regular {
+.seed-input-button__value {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  color: var(--seed-color-fg-neutral);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  flex-grow: 1;
+  overflow: hidden;
 }
 
-.seed-link-content--size_t6 {
-  font-size: var(--seed-font-size-t6);
-  line-height: var(--seed-line-height-t6);
-  gap: var(--seed-dimension-x0_5);
-  --seed-suffix-icon-size: var(--seed-dimension-x4);
+.seed-input-button__value:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
 }
 
-.seed-link-content--size_t5 {
+.seed-input-button__placeholder {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
-  gap: var(--seed-dimension-x0_5);
-  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  font-weight: var(--seed-font-weight-regular);
+  color: var(--seed-color-fg-placeholder);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  flex-grow: 1;
+  overflow: hidden;
 }
 
-.seed-link-content--size_t4 {
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-  gap: var(--seed-dimension-x0_5);
-  --seed-suffix-icon-size: var(--seed-dimension-x3);
+.seed-input-button__placeholder:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
 }
 
-.seed-list-header {
-  align-items: center;
-  gap: var(--seed-dimension-x2_5);
-  width: 100%;
-  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
-  padding-block: var(--seed-dimension-x2);
-  font-size: var(--seed-font-size-t4);
+.seed-input-button__prefixText {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-regular);
+  color: var(--seed-color-fg-neutral-muted);
+  pointer-events: none;
+}
+
+.seed-input-button__prefixIcon {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  color: var(--seed-color-fg-neutral-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.seed-input-button__suffixText {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-regular);
+  color: var(--seed-color-fg-neutral-muted);
+  pointer-events: none;
+}
+
+.seed-input-button__suffixIcon {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  color: var(--seed-color-fg-neutral-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.seed-input-button__clearButton {
+  cursor: pointer;
+  --seed-icon-size: 22px;
+  --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+  background-color: #0000;
+  border: none;
+  padding: 0;
+}
+
+.seed-link-content {
+  cursor: pointer;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: var(--seed-box-color);
+  --seed-suffix-icon-color: var(--seed-box-color);
+  background-color: #0000;
+  border: none;
+  outline: none;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: 0;
+  font-family: inherit;
+  display: inline-flex;
+}
+
+.seed-link-content--weight_bold {
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-link-content--weight_regular {
+  font-weight: var(--seed-font-weight-regular);
+}
+
+.seed-link-content--size_t6 {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
+  gap: var(--seed-dimension-x0_5);
+  --seed-suffix-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-link-content--size_t5 {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  gap: var(--seed-dimension-x0_5);
+  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-link-content--size_t4 {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  gap: var(--seed-dimension-x0_5);
+  --seed-suffix-icon-size: var(--seed-dimension-x3);
+}
+
+.seed-list-header {
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  box-sizing: border-box;
+  width: 100%;
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+  padding-block: var(--seed-dimension-x2);
+  font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   justify-content: space-between;
   display: flex;
@@ -4460,9 +4767,13 @@
   align-items: flex-start;
   gap: var(--seed-box-gap);
   --seed-box-padding-right: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-box-padding-right);
+  padding: 0 var(--seed-box-padding-right) 0 0;
+  background: none;
+  border: none;
   flex-direction: column;
   flex-grow: 1;
+  font-family: inherit;
+  text-decoration: none;
   display: inline-flex;
 }
 
@@ -4726,6 +5037,7 @@
   font-size: var(--seed-font-size-t6);
   line-height: var(--seed-line-height-t6);
   font-weight: var(--seed-font-weight-bold);
+  margin: 0;
 }
 
 .seed-menu-sheet__list {
@@ -4757,9 +5069,12 @@
   padding-block: var(--seed-dimension-x3_5);
   border-radius: var(--seed-radius-r3);
   color: var(--seed-color-fg-neutral);
+  font-family: inherit;
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-medium);
+  border: none;
+  outline: none;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -4780,6 +5095,9 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  border: none;
+  outline: none;
+  font-family: inherit;
   display: flex;
 }
 
@@ -4903,11 +5221,7 @@
   cursor: pointer;
 }
 
-.seed-page-banner__root .seed-box {
-  line-height: var(--seed-line-height-t4);
-}
-
-.seed-page-banner__textContent {
+.seed-page-banner__content {
   justify-content: space-between;
   align-items: center;
   gap: var(--seed-dimension-x1_5);
@@ -4916,6 +5230,11 @@
   display: flex;
 }
 
+.seed-page-banner__body {
+  line-height: var(--seed-line-height-t4);
+  flex-grow: 1;
+}
+
 .seed-page-banner__title {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
@@ -5426,6 +5745,32 @@
   --seed-prefix-icon-size: 18px;
 }
 
+.seed-scroll-fog {
+  --scroll-fog-from-color: #0000;
+  --scroll-fog-to-color: #000;
+  width: 100%;
+  height: 100%;
+  mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-composite: source-in;
+  position: relative;
+  overflow: auto;
+  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+}
+
+.seed-scroll-fog--hideScrollBar_true {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar {
+  display: none;
+}
+
 .seed-segmented-control__root {
   box-sizing: border-box;
   max-width: 100%;
@@ -5606,139 +5951,416 @@
   background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
 }
 
-.seed-snackbar__root {
-  box-sizing: border-box;
-  background: var(--seed-color-bg-neutral-inverted);
-  border-radius: var(--seed-radius-r2);
+.seed-slider__root {
+  align-items: stretch;
+  gap: var(--seed-dimension-x0_5);
+  user-select: none;
+  touch-action: none;
+  flex-direction: column;
   width: 100%;
-  max-width: 560px;
-  padding-inline: var(--seed-dimension-x2_5);
-  padding-block: var(--seed-dimension-x2_5);
-  min-height: 44px;
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d3);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: .8;
-  align-items: center;
   display: flex;
 }
 
-.seed-snackbar__root:not([data-open]) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: .8;
-  animation-fill-mode: forwards;
+.seed-slider__control {
+  align-items: center;
+  height: 26px;
+  display: flex;
+  position: relative;
 }
 
-.seed-snackbar__content {
-  padding-inline: var(--seed-dimension-x1_5);
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--seed-dimension-x2_5);
+.seed-slider__track {
+  background-color: var(--seed-color-palette-gray-400);
+  height: var(--seed-dimension-x1);
+  border-radius: var(--seed-radius-full);
   flex-grow: 1;
-  display: flex;
+  position: relative;
+  overflow: hidden;
 }
 
-.seed-snackbar__message {
-  color: var(--seed-color-fg-neutral-inverted);
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-  font-weight: var(--seed-font-weight-regular);
-  margin: 0;
+.seed-slider__range {
+  background-color: var(--seed-color-fg-neutral);
+  height: 100%;
+  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
+  will-change: left, right;
+  position: absolute;
 }
 
-.seed-snackbar__prefixIcon {
-  width: 24px;
-  height: 24px;
-  padding-right: var(--seed-dimension-x0_5);
-  flex-shrink: 0;
+.seed-slider__range[data-dir="ltr"] {
+  left: var(--range-start);
+  right: var(--range-end);
 }
 
-.seed-snackbar__actionButton {
-  box-sizing: border-box;
-  cursor: pointer;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: unset;
-  color: var(--seed-color-fg-brand);
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-  font-weight: var(--seed-font-weight-bold);
-  border: none;
-  outline: none;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  display: inline-flex;
-  position: relative;
+.seed-slider__range[data-dir="rtl"] {
+  right: var(--range-start);
+  left: var(--range-end);
 }
 
-.seed-snackbar__actionButton:after {
-  content: "";
-  top: 50%;
-  left: calc(-1 * var(--seed-dimension-x2));
-  right: calc(-1 * var(--seed-dimension-x2));
-  background: none;
-  min-height: 44px;
-  position: absolute;
-  transform: translateY(-50%);
+.seed-slider__range:is(:disabled, [disabled], [data-disabled]) {
+  background-color: var(--seed-color-fg-disabled);
 }
 
-.seed-snackbar__prefixIcon--variant_default {
-  display: none;
+.seed-slider__range[data-dragging] {
+  transition: none;
 }
 
-.seed-snackbar__prefixIcon--variant_positive {
-  color: var(--seed-color-fg-positive);
+.seed-slider__thumb {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing), opacity var(--seed-duration-d2) var(--seed-timing-function-easing);
+  will-change: left, right, opacity;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.seed-snackbar__prefixIcon--variant_critical {
-  color: var(--seed-color-fg-critical);
+.seed-slider__thumb[data-ssr] {
+  opacity: 0;
 }
 
-.seed-snackbar-region {
-  z-index: 2147483647;
-  left: calc(env(safe-area-inset-left, 0px));
-  right: calc(env(safe-area-inset-right, 0px));
-  bottom: calc(env(safe-area-inset-bottom, 0px)  + var(--snackbar-region-offset, 0px));
-  padding-inline: var(--seed-dimension-x2);
-  padding-block: var(--seed-dimension-x2);
-  transition-property: bottom;
-  transition-duration: var(--seed-duration-d4);
-  transition-timing-function: var(--seed-timing-function-easing);
-  flex-direction: column;
-  align-items: center;
-  display: flex;
+.seed-slider__thumb[data-dir="ltr"] {
+  left: calc(var(--thumb-position) * 1% + var(--thumb-offset));
 }
 
-.seed-switch__root {
-  box-sizing: border-box;
-  vertical-align: top;
-  isolation: isolate;
-  cursor: pointer;
-  justify-content: space-between;
-  align-items: flex-start;
-  display: inline-flex;
-  position: relative;
+.seed-slider__thumb[data-dir="rtl"] {
+  right: calc(var(--thumb-position) * 1% + var(--thumb-offset));
 }
 
-.seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
-  cursor: not-allowed;
+.seed-slider__thumb:after {
+  content: "";
+  background-color: var(--seed-color-bg-neutral-inverted);
+  border-radius: var(--seed-radius-full);
+  transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing);
+  will-change: transform;
+  position: absolute;
+  inset: 0;
 }
 
-.seed-switch__label {
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-fg-neutral);
-  transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
+.seed-slider__thumb:is(:disabled, [disabled], [data-disabled]):after {
+  background-color: var(--seed-color-fg-disabled);
+}
+
+.seed-slider__thumb[data-dragging] {
+  transition: none;
+}
+
+.seed-slider__thumb[data-thumb-dragging]:after {
+  transform: scale(1.2);
+}
+
+.seed-slider__thumb:is(:focus, [data-focus]) {
+  outline: none;
+}
+
+.seed-slider__markers {
+  height: var(--seed-line-height-t3);
+  position: relative;
+}
+
+.seed-slider__valueIndicatorRoot {
+  background: var(--seed-color-bg-neutral-inverted);
+  padding-inline: var(--seed-dimension-x1_5);
+  padding-block: var(--seed-dimension-x0_5);
+  border-radius: var(--seed-radius-r1);
+  color: var(--seed-color-fg-neutral-inverted);
+  font-size: var(--seed-font-size-t1);
+  line-height: var(--seed-line-height-t1);
+  font-weight: var(--seed-font-weight-medium);
+  white-space: pre-wrap;
+  text-align: center;
+  width: max-content;
+  bottom: calc(100% + var(--seed-dimension-x3));
+  opacity: 0;
+  flex-direction: column;
+  display: flex;
+  position: absolute;
+}
+
+.seed-slider__valueIndicatorRoot[data-dir="ltr"] {
+  left: calc(var(--indicator-position) * 1% + var(--indicator-offset));
+  transform: translateX(-50%);
+}
+
+.seed-slider__valueIndicatorRoot[data-dir="rtl"] {
+  right: calc(var(--indicator-position) * 1% + var(--indicator-offset));
+  transform: translateX(50%);
+}
+
+.seed-slider__valueIndicatorRoot[data-thumb-dragging] {
+  opacity: 1;
+}
+
+.seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir="ltr"] {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d4);
+  --seed-enter-translate-x: -50%;
+  --seed-enter-translate-y: var(--seed-dimension-x3);
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: .9;
+}
+
+.seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir="rtl"] {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d4);
+  --seed-enter-translate-x: 50%;
+  --seed-enter-translate-y: var(--seed-dimension-x3);
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: .9;
+}
+
+.seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir="ltr"] {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-easing);
+  animation-duration: var(--seed-duration-d4);
+  --seed-exit-translate-x: -50%;
+  --seed-exit-translate-y: var(--seed-dimension-x3);
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir="rtl"] {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-easing);
+  animation-duration: var(--seed-duration-d4);
+  --seed-exit-translate-x: 50%;
+  --seed-exit-translate-y: var(--seed-dimension-x3);
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-slider__valueIndicatorRoot:is(:hidden, [hidden], [data-hidden]) {
+  display: none !important;
+}
+
+.seed-slider__valueIndicatorArrow {
+  width: var(--seed-dimension-x2_5);
+  height: var(--seed-dimension-x2_5);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-slider__valueIndicatorArrowTip {
+  fill: var(--seed-color-bg-neutral-inverted);
+  width: var(--seed-dimension-x2_5);
+  height: 7px;
+  display: block;
+}
+
+.seed-slider-marker {
+  width: max-content;
+  color: var(--seed-color-fg-neutral-muted);
+  font-weight: var(--seed-font-weight-regular);
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.seed-slider-marker[data-dir="ltr"] {
+  left: calc(var(--marker-position) * 1% + var(--marker-offset));
+}
+
+.seed-slider-marker[data-dir="rtl"] {
+  right: calc(var(--marker-position) * 1% + var(--marker-offset));
+}
+
+.seed-slider-marker:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
+}
+
+.seed-slider-marker--align_start[data-dir="ltr"] {
+  text-align: left;
+}
+
+.seed-slider-marker--align_start[data-dir="rtl"] {
+  text-align: right;
+}
+
+.seed-slider-marker--align_center {
+  text-align: center;
+}
+
+.seed-slider-marker--align_center[data-dir="ltr"] {
+  transform: translateX(-50%);
+}
+
+.seed-slider-marker--align_center[data-dir="rtl"] {
+  transform: translateX(50%);
+}
+
+.seed-slider-marker--align_end[data-dir="ltr"] {
+  text-align: right;
+  transform: translateX(-100%);
+}
+
+.seed-slider-marker--align_end[data-dir="rtl"] {
+  text-align: left;
+  transform: translateX(100%);
+}
+
+.seed-slider-tick {
+  background-color: var(--seed-color-fg-neutral-inverted);
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.seed-slider-tick[data-dir="ltr"] {
+  left: calc(var(--tick-position) * 1% + var(--tick-offset));
+}
+
+.seed-slider-tick[data-dir="rtl"] {
+  right: calc(var(--tick-position) * 1% + var(--tick-offset));
+}
+
+.seed-slider-tick--weight_thin {
+  width: 1px;
+}
+
+.seed-slider-tick--weight_thick {
+  width: var(--seed-dimension-x1);
+}
+
+.seed-snackbar__root {
+  box-sizing: border-box;
+  background: var(--seed-color-bg-neutral-inverted);
+  border-radius: var(--seed-radius-r2);
+  width: 100%;
+  max-width: 560px;
+  padding-inline: var(--seed-dimension-x2_5);
+  padding-block: var(--seed-dimension-x2_5);
+  min-height: 44px;
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d3);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: .8;
+  align-items: center;
+  display: flex;
+}
+
+.seed-snackbar__root:not([data-open]) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: .8;
+  animation-fill-mode: forwards;
+}
+
+.seed-snackbar__content {
+  padding-inline: var(--seed-dimension-x1_5);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  flex-grow: 1;
+  display: flex;
+}
+
+.seed-snackbar__message {
+  color: var(--seed-color-fg-neutral-inverted);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-regular);
+  margin: 0;
+}
+
+.seed-snackbar__prefixIcon {
+  width: 24px;
+  height: 24px;
+  padding-right: var(--seed-dimension-x0_5);
+  flex-shrink: 0;
+}
+
+.seed-snackbar__actionButton {
+  box-sizing: border-box;
+  cursor: pointer;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: unset;
+  color: var(--seed-color-fg-brand);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-bold);
+  border: none;
+  outline: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+  position: relative;
+}
+
+.seed-snackbar__actionButton:after {
+  content: "";
+  top: 50%;
+  left: calc(-1 * var(--seed-dimension-x2));
+  right: calc(-1 * var(--seed-dimension-x2));
+  background: none;
+  min-height: 44px;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.seed-snackbar__prefixIcon--variant_default {
+  display: none;
+}
+
+.seed-snackbar__prefixIcon--variant_positive {
+  color: var(--seed-color-fg-positive);
+}
+
+.seed-snackbar__prefixIcon--variant_critical {
+  color: var(--seed-color-fg-critical);
+}
+
+.seed-snackbar-region {
+  z-index: 2147483647;
+  left: calc(env(safe-area-inset-left, 0px));
+  right: calc(env(safe-area-inset-right, 0px));
+  bottom: calc(env(safe-area-inset-bottom, 0px)  + var(--snackbar-region-offset, 0px));
+  padding-inline: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x2);
+  transition-property: bottom;
+  transition-duration: var(--seed-duration-d4);
+  transition-timing-function: var(--seed-timing-function-easing);
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.seed-switch__root {
+  box-sizing: border-box;
+  vertical-align: top;
+  isolation: isolate;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: flex-start;
+  display: inline-flex;
+  position: relative;
+}
+
+.seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
+  cursor: not-allowed;
+}
+
+.seed-switch__label {
+  font-weight: var(--seed-font-weight-medium);
+  color: var(--seed-color-fg-neutral);
+  transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
 }
 
 .seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
@@ -6363,418 +6985,197 @@
   text-decoration-line: underline;
 }
 
-.seed-text-field__root {
-  flex-direction: column;
+.seed-text-input__root {
   width: 100%;
-  display: flex;
-}
-
-.seed-text-field__label {
-  color: var(--seed-color-fg-neutral);
-  font-weight: var(--seed-font-weight-bold);
-}
-
-.seed-text-field__indicator {
-  color: var(--seed-color-fg-neutral);
-  font-weight: var(--seed-font-weight-regular);
-}
-
-.seed-text-field__field {
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--seed-color-stroke-neutral-weak);
+  transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing);
   align-items: center;
   display: flex;
   overflow: hidden;
 }
 
-.seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
-  border-color: var(--seed-color-stroke-neutral-contrast);
-}
-
-.seed-text-field__field:is(:invalid, [data-invalid]) {
-  background-color: var(--seed-color-bg-critical-weak);
-  border-color: var(--seed-color-stroke-critical-weak);
-}
-
-.seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
-  background-color: #0000;
-}
-
-.seed-text-field__field:is(:disabled, [disabled], [data-disabled]), .seed-text-field__field[data-readonly] {
-  background-color: var(--seed-color-bg-disabled);
-}
-
-.seed-text-field__prefixText {
-  color: var(--seed-color-fg-neutral);
-}
-
-.seed-text-field__prefixText:is(:disabled, [disabled], [data-disabled]) {
-  color: var(--seed-color-fg-disabled);
-}
-
-.seed-text-field__prefixIcon {
-  color: var(--seed-color-fg-neutral);
-  flex-shrink: 0;
-}
-
-.seed-text-field__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
-  color: var(--seed-color-fg-disabled);
-}
-
-.seed-text-field__suffixText {
-  color: var(--seed-color-fg-neutral);
-}
-
-.seed-text-field__suffixText:is(:disabled, [disabled], [data-disabled]) {
-  color: var(--seed-color-fg-disabled);
-}
-
-.seed-text-field__suffixIcon {
-  color: var(--seed-color-fg-neutral);
-  flex-shrink: 0;
-}
-
-.seed-text-field__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
-  color: var(--seed-color-fg-disabled);
-}
-
-.seed-text-field__value {
+.seed-text-input__value {
   box-sizing: border-box;
   font: inherit;
   resize: none;
-  height: 100%;
   color: var(--seed-color-fg-neutral);
+  font-weight: var(--seed-font-weight-regular);
   background: none;
   border: none;
   outline: none;
   flex-grow: 1;
-}
-
-.seed-text-field__value:is(input) {
-  width: 0;
+  align-self: stretch;
   padding-inline: 0;
 }
 
-.seed-text-field__value:is(textarea) {
-  width: 100%;
-  min-height: 90px;
-  padding-inline: 0;
+.seed-text-input__value:is(input) {
+  width: 0;
 }
 
-.seed-text-field__value::placeholder {
+.seed-text-input__value::placeholder {
   color: var(--seed-color-fg-placeholder);
+  font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-text-field__value:is(:disabled, [disabled], [data-disabled]), .seed-text-field__value:is(:disabled, [disabled], [data-disabled])::placeholder {
+.seed-text-input__value:is(:disabled, [disabled], [data-disabled]), .seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-text-field__footer {
-  justify-content: space-between;
-  align-items: flex-start;
-  display: flex;
-}
-
-.seed-text-field__description {
+.seed-text-input__prefixText {
+  color: var(--seed-color-fg-neutral-muted);
   font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral-subtle);
-}
-
-.seed-text-field__errorMessage {
-  color: var(--seed-color-fg-critical);
-  flex-direction: row;
-  align-items: center;
-  display: flex;
 }
 
-.seed-text-field__errorIcon {
-  flex: none;
-}
-
-.seed-text-field__characterCountArea {
-  flex: none;
-  margin-inline-start: auto;
-  display: flex;
+.seed-text-input__prefixIcon {
+  color: var(--seed-color-fg-neutral-muted);
+  flex-shrink: 0;
 }
 
-.seed-text-field__characterCount {
-  color: var(--seed-color-fg-neutral);
+.seed-text-input__suffixText {
+  color: var(--seed-color-fg-neutral-muted);
   font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-text-field__characterCount[data-empty] {
-  color: var(--seed-color-fg-neutral-subtle);
-}
-
-.seed-text-field__maxCharacterCount {
-  color: var(--seed-color-fg-neutral-subtle);
-  font-weight: var(--seed-font-weight-regular);
+.seed-text-input__suffixIcon {
+  color: var(--seed-color-fg-neutral-muted);
+  flex-shrink: 0;
 }
 
-.seed-text-field__header--size_xlarge {
-  padding-bottom: var(--seed-dimension-x3);
-  gap: var(--seed-dimension-x1_5);
-  line-height: var(--seed-line-height-t5);
+.seed-text-input__root--variant_outline {
+  border-radius: var(--seed-radius-r3);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
 
-.seed-text-field__label--size_xlarge, .seed-text-field__indicator--size_xlarge {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
+.seed-text-input__root--variant_outline:not([data-readonly]):is(:focus, [data-focus]) {
+  box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast);
 }
 
-.seed-text-field__field--size_xlarge {
-  border-radius: var(--seed-radius-r2_5);
-  gap: var(--seed-dimension-x2);
-  min-height: 56px;
+.seed-text-input__root--variant_outline:is(:invalid, [data-invalid]), .seed-text-input__root--variant_outline:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
+  box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-field__value--size_xlarge {
-  padding-block: var(--seed-dimension-x3);
+.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]), .seed-text-input__root--variant_outline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])) {
+  background-color: var(--seed-color-bg-disabled);
 }
 
-.seed-text-field__value--size_xlarge:first-child {
+.seed-text-input__value--variant_outline:first-child {
   padding-inline-start: var(--seed-dimension-x4);
 }
 
-.seed-text-field__value--size_xlarge:last-child {
+.seed-text-input__value--variant_outline:last-child {
   padding-inline-end: var(--seed-dimension-x4);
 }
 
-.seed-text-field__value--size_xlarge, .seed-text-field__prefixText--size_xlarge {
-  font-size: var(--seed-font-size-t6);
-  line-height: var(--seed-line-height-t6);
-}
-
-.seed-text-field__prefixText--size_xlarge:first-child {
+.seed-text-input__prefixText--variant_outline:first-child, .seed-text-input__prefixIcon--variant_outline:first-child {
   margin-inline-start: var(--seed-dimension-x4);
 }
 
-.seed-text-field__prefixIcon--size_xlarge {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-}
-
-.seed-text-field__prefixIcon--size_xlarge:first-child {
-  margin-inline-start: var(--seed-dimension-x4);
-}
-
-.seed-text-field__suffixText--size_xlarge {
-  font-size: var(--seed-font-size-t6);
-  line-height: var(--seed-line-height-t6);
-}
-
-.seed-text-field__suffixText--size_xlarge:last-child {
+.seed-text-input__suffixText--variant_outline:last-child, .seed-text-input__suffixIcon--variant_outline:last-child {
   margin-inline-end: var(--seed-dimension-x4);
 }
 
-.seed-text-field__suffixIcon--size_xlarge {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
+.seed-text-input__root--variant_underline {
+  gap: var(--seed-dimension-x2_5);
+  min-height: var(--seed-dimension-x10);
+  box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
 }
 
-.seed-text-field__suffixIcon--size_xlarge:last-child {
-  margin-inline-end: var(--seed-dimension-x4);
+.seed-text-input__root--variant_underline:not([data-readonly]):is(:focus, [data-focus]) {
+  box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-neutral-contrast);
 }
 
-.seed-text-field__footer--size_xlarge {
-  gap: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x2);
-  min-height: 20px;
-  line-height: var(--seed-line-height-t4);
+.seed-text-input__root--variant_underline:is(:invalid, [data-invalid]), .seed-text-input__root--variant_underline:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
+  box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-field__description--size_xlarge, .seed-text-field__errorMessage--size_xlarge {
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
+.seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
 }
 
-.seed-text-field__errorIcon--size_xlarge {
-  width: var(--seed-dimension-x4);
-  height: var(--seed-dimension-x4);
-  margin-right: var(--seed-dimension-x1);
+.seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])), .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
+  color: var(--seed-color-fg-neutral-muted);
 }
 
-.seed-text-field__characterCount--size_xlarge, .seed-text-field__maxCharacterCount--size_xlarge {
-  font-size: var(--seed-font-size-t2);
-  line-height: var(--seed-line-height-t2);
+.seed-text-input__prefixText--variant_underline {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
 }
 
-.seed-text-field__header--size_large {
-  padding-bottom: var(--seed-dimension-x3);
-  gap: var(--seed-dimension-x1_5);
-  line-height: var(--seed-line-height-t5);
+.seed-text-input__prefixIcon--variant_underline {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
 }
 
-.seed-text-field__label--size_large, .seed-text-field__indicator--size_large {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
+.seed-text-input__suffixText--variant_underline {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
 }
 
-.seed-text-field__field--size_large {
-  border-radius: var(--seed-radius-r2_5);
-  gap: var(--seed-dimension-x2);
-  min-height: 52px;
+.seed-text-input__suffixIcon--variant_underline {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
 }
 
-.seed-text-field__value--size_large {
-  padding-block: var(--seed-dimension-x3);
+.seed-text-input__value--size_large:is(textarea) {
+  min-height: 95px;
+  padding-block: var(--seed-dimension-x3_5);
 }
 
-.seed-text-field__value--size_large:first-child {
-  padding-inline-start: var(--seed-dimension-x4);
+.seed-text-input__value--size_medium:is(textarea) {
+  min-height: 90px;
+  padding-block: 11px;
 }
 
-.seed-text-field__value--size_large:last-child {
-  padding-inline-end: var(--seed-dimension-x4);
+.seed-text-input__root--variant_outline-size_large {
+  gap: var(--seed-dimension-x2_5);
+  min-height: var(--seed-dimension-x13);
 }
 
-.seed-text-field__value--size_large, .seed-text-field__prefixText--size_large {
+.seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder, .seed-text-input__prefixText--variant_outline-size_large {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
 }
 
-.seed-text-field__prefixText--size_large:first-child {
-  margin-inline-start: var(--seed-dimension-x4);
-}
-
-.seed-text-field__prefixIcon--size_large {
+.seed-text-input__prefixIcon--variant_outline-size_large {
   width: var(--seed-dimension-x5);
   height: var(--seed-dimension-x5);
 }
 
-.seed-text-field__prefixIcon--size_large:first-child {
-  margin-inline-start: var(--seed-dimension-x4);
-}
-
-.seed-text-field__suffixText--size_large {
+.seed-text-input__suffixText--variant_outline-size_large {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
 }
 
-.seed-text-field__suffixText--size_large:last-child {
-  margin-inline-end: var(--seed-dimension-x4);
-}
-
-.seed-text-field__suffixIcon--size_large {
+.seed-text-input__suffixIcon--variant_outline-size_large {
   width: var(--seed-dimension-x5);
   height: var(--seed-dimension-x5);
 }
 
-.seed-text-field__suffixIcon--size_large:last-child {
-  margin-inline-end: var(--seed-dimension-x4);
-}
-
-.seed-text-field__footer--size_large {
-  gap: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x2);
-  min-height: 20px;
-  line-height: var(--seed-line-height-t4);
-}
-
-.seed-text-field__description--size_large, .seed-text-field__errorMessage--size_large {
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-}
-
-.seed-text-field__errorIcon--size_large {
-  width: var(--seed-dimension-x4);
-  height: var(--seed-dimension-x4);
-  margin-right: var(--seed-dimension-x1);
-}
-
-.seed-text-field__characterCount--size_large, .seed-text-field__maxCharacterCount--size_large {
-  font-size: var(--seed-font-size-t2);
-  line-height: var(--seed-line-height-t2);
-}
-
-.seed-text-field__header--size_medium {
-  padding-bottom: var(--seed-dimension-x3);
-  line-height: var(--seed-line-height-t4);
-}
-
-.seed-text-field__label--size_medium, .seed-text-field__indicator--size_medium {
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-}
-
-.seed-text-field__field--size_medium {
-  border-radius: var(--seed-radius-r2);
+.seed-text-input__root--variant_outline-size_medium {
   gap: var(--seed-dimension-x1_5);
-  min-height: 40px;
-}
-
-.seed-text-field__value--size_medium {
-  padding-block: var(--seed-dimension-x2_5);
-}
-
-.seed-text-field__value--size_medium:first-child {
-  padding-inline-start: var(--seed-dimension-x3_5);
-}
-
-.seed-text-field__value--size_medium:last-child {
-  padding-inline-end: var(--seed-dimension-x3_5);
+  min-height: var(--seed-dimension-x10);
 }
 
-.seed-text-field__value--size_medium, .seed-text-field__prefixText--size_medium {
+.seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder, .seed-text-input__prefixText--variant_outline-size_medium {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
 }
 
-.seed-text-field__prefixText--size_medium:first-child {
-  margin-inline-start: var(--seed-dimension-x3_5);
-}
-
-.seed-text-field__prefixIcon--size_medium {
+.seed-text-input__prefixIcon--variant_outline-size_medium {
   width: var(--seed-dimension-x4);
   height: var(--seed-dimension-x4);
 }
 
-.seed-text-field__prefixIcon--size_medium:first-child {
-  margin-inline-start: var(--seed-dimension-x3_5);
-}
-
-.seed-text-field__suffixText--size_medium {
+.seed-text-input__suffixText--variant_outline-size_medium {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
 }
 
-.seed-text-field__suffixText--size_medium:last-child {
-  margin-inline-end: var(--seed-dimension-x3_5);
-}
-
-.seed-text-field__suffixIcon--size_medium {
+.seed-text-input__suffixIcon--variant_outline-size_medium {
   width: var(--seed-dimension-x4);
   height: var(--seed-dimension-x4);
 }
 
-.seed-text-field__suffixIcon--size_medium:last-child {
-  margin-inline-end: var(--seed-dimension-x3_5);
-}
-
-.seed-text-field__footer--size_medium {
-  gap: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x2);
-  min-height: var(--seed-dimension-x4);
-  line-height: var(--seed-line-height-t2);
-}
-
-.seed-text-field__description--size_medium, .seed-text-field__errorMessage--size_medium {
-  font-size: var(--seed-font-size-t2);
-  line-height: var(--seed-line-height-t2);
-}
-
-.seed-text-field__errorIcon--size_medium {
-  width: var(--seed-dimension-x3_5);
-  height: var(--seed-dimension-x3_5);
-  margin-right: var(--seed-dimension-x1);
-}
-
-.seed-text-field__characterCount--size_medium, .seed-text-field__maxCharacterCount--size_medium {
-  font-size: var(--seed-font-size-t2);
-  line-height: var(--seed-line-height-t2);
-}
-
 .seed-toggle-button {
   box-sizing: border-box;
   cursor: pointer;
@@ -6979,3 +7380,35 @@
     stroke-dashoffset: calc(var(--circumference) * -1);
   }
 }
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes drawer-slide-from-bottom {
+  from {
+    transform: translate3d(0, var(--initial-transform, 100%), 0);
+  }
+
+  to {
+    transform: translate3d(0, var(--snap-point-height, 0), 0);
+  }
+}
+
+@keyframes drawer-slide-to-bottom {
+  to {
+    transform: translate3d(0, var(--initial-transform, 100%), 0);
+  }
+}