@seed-design/css 2.3.1 → 2.4.1

package/all.css

@@ -381,16 +381,33 @@
 }
 
 :root, [data-seed-color-mode="system"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light dark;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root, [data-seed-color-mode="system"] {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
+}
+
 [data-seed-color-mode="light-only"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light;
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light only;
 }
 
 [data-seed-color-mode="dark-only"] {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
   color-scheme: dark;
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
   color-scheme: dark only;
 }
 
@@ -1170,7 +1187,7 @@
   padding-block: var(--seed-dimension-x4);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__trigger--size_responsive {
     padding-block: var(--seed-dimension-x5);
   }
@@ -1181,7 +1198,7 @@
   --seed-icon-size: 22px;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__prefix--size_responsive {
     margin-right: var(--seed-dimension-x3);
     --seed-icon-size: 22px;
@@ -1193,7 +1210,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__title--size_responsive {
     font-size: var(--seed-font-size-t7);
     line-height: var(--seed-line-height-t7);
@@ -1205,7 +1222,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__description--size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -1217,7 +1234,7 @@
   --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__suffixIcon--size_responsive {
     --seed-suffix-icon-size: var(--seed-dimension-x6);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
@@ -1236,7 +1253,7 @@
   gap: var(--seed-dimension-x3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__root--variant_separated-size_responsive {
     gap: var(--seed-dimension-x4);
   }
@@ -2302,6 +2319,7 @@
 }
 
 .seed-article {
+  -webkit-user-select: text;
   user-select: text;
   word-break: normal;
   overflow-wrap: break-word;
@@ -2335,13 +2353,18 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -2354,13 +2377,18 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   display: block;
   overflow: hidden;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -2383,8 +2411,11 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   justify-content: center;
   align-items: center;
@@ -2393,7 +2424,9 @@
   inset: 0;
   overflow: hidden;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -4094,6 +4127,7 @@
   --seed-box-max-width: var(--seed-box-max-width-base, initial);
   width: var(--seed-box-width);
   max-width: var(--seed-box-max-width);
+  max-height: 80vh;
   outline: none;
   flex-direction: column;
   flex: none;
@@ -4102,7 +4136,7 @@
   position: relative;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-content-dialog__content {
     --content-dialog-default-width: var(--content-dialog-size-width);
     --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
@@ -4184,6 +4218,7 @@
 
 .seed-content-dialog__body[data-overflow] {
   padding-bottom: var(--seed-dimension-x12);
+  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
 }
@@ -4521,6 +4556,466 @@
   min-width: var(--seed-dimension-x8);
 }
 
+.seed-date-picker__root {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--seed-color-fg-neutral-muted);
+  background-color: var(--seed-color-bg-layer-floating);
+  position: relative;
+}
+
+.seed-date-picker__header {
+  height: var(--seed-dimension-x12);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__headerLabel {
+  align-items: center;
+  gap: var(--seed-dimension-x1);
+  border-radius: var(--seed-radius-r2);
+  min-width: 0;
+  height: 100%;
+  padding-inline: var(--seed-dimension-x1);
+  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-bold);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  background: none;
+  border: 0;
+  padding-block: 0;
+  display: inline-flex;
+}
+
+.seed-date-picker__headerLabel:is(:focus-visible, [data-focus-visible]) {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-date-picker__headerLabel:is(:disabled, [disabled], [data-disabled]) {
+  cursor: default;
+}
+
+.seed-date-picker__headerLabel > [data-date-picker-header-label] {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.seed-date-picker__headerChevron {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  --seed-icon-size: var(--seed-dimension-x5);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-date-picker__navigation {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__navigationButton {
+  flex-shrink: 0;
+}
+
+.seed-date-picker__twoMonthHeader {
+  height: var(--seed-dimension-x12);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__twoMonthLabel {
+  width: 100%;
+  height: 100%;
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__twoMonthNavigationButton {
+  flex-shrink: 0;
+  position: absolute;
+  top: 4px;
+}
+
+.seed-date-picker__twoMonthNavigationButton[data-placement="start"] {
+  inset-inline-start: 0;
+}
+
+.seed-date-picker__twoMonthNavigationButton[data-placement="end"] {
+  inset-inline-end: 0;
+}
+
+.seed-date-picker__weekdayRow {
+  z-index: 2;
+  background-color: var(--seed-color-bg-layer-floating);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  display: grid;
+  position: relative;
+}
+
+.seed-date-picker__weekday {
+  height: var(--seed-dimension-x12);
+  color: var(--seed-color-fg-neutral-subtle);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-medium);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__months {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  min-width: 0;
+  display: grid;
+}
+
+.seed-date-picker__months[data-wheel-open] {
+  visibility: hidden;
+}
+
+.seed-date-picker__month {
+  min-width: 0;
+}
+
+.seed-date-picker__monthLabel {
+  height: var(--seed-dimension-x12);
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__grid {
+  min-width: 0;
+  display: grid;
+}
+
+.seed-date-picker__weekRow {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  display: grid;
+}
+
+.seed-date-picker__dateCell {
+  min-width: 0;
+  min-height: var(--seed-dimension-x12);
+  isolation: isolate;
+  position: relative;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-in-range]:before {
+  content: "";
+  z-index: -1;
+  inset-inline: 0;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-range-start]:not([data-range-end]):before {
+  content: "";
+  z-index: -1;
+  inset-inline: 50% 0;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-range-end]:not([data-range-start]):before {
+  content: "";
+  z-index: -1;
+  inset-inline: 0 50%;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateButton {
+  width: 100%;
+  height: 100%;
+  min-height: var(--seed-dimension-x12);
+  min-width: 0;
+  color: var(--seed-color-fg-neutral-muted);
+  cursor: pointer;
+  font: inherit;
+  isolation: isolate;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__dateButton:before {
+  content: "";
+  z-index: -1;
+  border-radius: var(--seed-radius-full);
+  background-color: var(--seed-color-bg-transparent);
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-date-picker__dateButton:after {
+  content: "";
+  z-index: 2;
+  border-radius: var(--seed-radius-full);
+  pointer-events: none;
+  width: 42px;
+  height: 42px;
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-date-picker__dateButton[data-today]:before {
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]):before {
+  background-color: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]) {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
+    background-color: var(--seed-color-bg-transparent-pressed);
+  }
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+    background-color: var(--seed-color-bg-transparent-pressed);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
+    background-color: var(--seed-color-bg-neutral-inverted);
+  }
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
+    background-color: var(--seed-color-bg-neutral-inverted);
+  }
+}
+
+.seed-date-picker__dateButton[data-in-range] {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-date-picker__dateButton[data-in-range]:before {
+  background-color: #0000;
+}
+
+.seed-date-picker__dateButton[data-unavailable] {
+  color: var(--seed-color-fg-disabled);
+  cursor: not-allowed;
+}
+
+.seed-date-picker__dateButton[data-unavailable] [data-date-picker-day] {
+  text-decoration: line-through;
+}
+
+.seed-date-picker__dateButton[data-unavailable][data-range-start]:not([data-range-complete]) [data-date-picker-day] {
+  text-decoration: none;
+}
+
+.seed-date-picker__dateButton:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
+  cursor: default;
+}
+
+.seed-date-picker__dateButton {
+  outline: none;
+}
+
+.seed-date-picker__dateButton:is(:focus-visible, [data-focus-visible]):after {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-date-picker__dateContent {
+  z-index: 1;
+  width: 100%;
+  min-height: var(--seed-dimension-x12);
+  box-sizing: border-box;
+  min-width: 0;
+  color: inherit;
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding-top: 3px;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__dateContent > [data-date-picker-day] {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  min-height: 42px;
+  display: flex;
+}
+
+.seed-date-picker__emptyCell {
+  min-height: var(--seed-dimension-x12);
+}
+
+.seed-date-picker__continuousScroll {
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  overflow-y: auto;
+}
+
+.seed-date-picker__continuousScroll::-webkit-scrollbar {
+  display: none;
+}
+
+.seed-date-picker__continuousScroll:after {
+  content: "";
+  z-index: 3;
+  background: linear-gradient(to bottom, transparent, var(--seed-color-bg-layer-floating));
+  pointer-events: none;
+  width: 100%;
+  height: 96px;
+  margin-top: -96px;
+  display: block;
+  position: sticky;
+  bottom: 0;
+}
+
+.seed-date-picker__continuousContent {
+  min-width: 0;
+  position: relative;
+}
+
+.seed-date-picker__continuousSpacer {
+  height: var(--seed-date-picker-continuous-spacer-height);
+}
+
+.seed-date-picker__wheelContainer {
+  z-index: 1;
+  inset-inline: 0;
+  top: var(--seed-dimension-x12);
+  background-color: var(--seed-color-bg-layer-floating);
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.seed-date-picker__wheelView {
+  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+  width: 100%;
+}
+
+.seed-date-picker__wheelSelectionIndicator {
+  border-radius: var(--seed-radius-r2);
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-date-picker__yearColumn {
+  --seed-wheel-picker-item-justify-content: flex-end;
+  flex: 0 0 120px;
+}
+
+.seed-date-picker__monthColumn {
+  --seed-wheel-picker-item-justify-content: flex-start;
+  flex: 0 0 96px;
+}
+
+.seed-date-picker__wheelItem {
+  --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+  padding-inline: var(--seed-dimension-x4);
+  font-size: var(--seed-font-size-t10-static);
+  line-height: var(--seed-line-height-t10-static);
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-date-picker__liveRegion {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.seed-date-picker__months--visibleRange_twoMonths {
+  column-gap: var(--seed-dimension-x6);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.seed-date-picker__root--visibleRange_continuous {
+  height: 100%;
+  min-height: 0;
+}
+
+.seed-date-picker__weekdayRow--visibleRange_continuous {
+  position: sticky;
+  top: 0;
+}
+
+.seed-date-picker__month--visibleRange_continuous {
+  padding-bottom: 16px;
+}
+
+.seed-date-picker__weekday--visibleRange_week {
+  height: 24px;
+}
+
 .seed-dialog__positioner {
   overscroll-behavior-y: none;
   --dialog-z-index: 2;
@@ -5117,12 +5612,16 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -5146,10 +5645,14 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -5197,7 +5700,9 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   flex-direction: column;
   justify-content: center;
@@ -5206,7 +5711,9 @@
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -6258,7 +6765,7 @@
   padding-inline: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__root--size_responsive {
     height: var(--seed-dimension-x10);
     gap: var(--seed-dimension-x2);
@@ -6270,7 +6777,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__button--size_responsive {
     border-radius: var(--seed-radius-r2);
   }
@@ -6281,7 +6788,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__value--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6293,7 +6800,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__placeholder--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6305,7 +6812,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__prefixText--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6317,7 +6824,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -6329,7 +6836,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__suffixText--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6341,7 +6848,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__suffixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -6352,7 +6859,7 @@
   --seed-icon-size: 22px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__clearButton--size_responsive {
     --seed-icon-size: var(--seed-dimension-x4_5);
   }
@@ -6369,13 +6876,13 @@
   margin-inline: auto;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-layout__content--density_low, .seed-layout__content--density_medium {
     max-width: 720px;
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-layout__content--density_medium {
     max-width: 1040px;
   }
@@ -6880,7 +7387,7 @@
   width: var(--seed-menu-reference-width, 240px);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu__content--size_responsive {
     width: var(--seed-menu-reference-width, 200px);
   }
@@ -6894,7 +7401,7 @@
   font-weight: var(--seed-font-weight-medium);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu__groupLabel--size_responsive {
     padding-block: var(--seed-dimension-x2);
     padding-inline: var(--seed-dimension-x4);
@@ -6908,6 +7415,7 @@
   scroll-margin-top: var(--seed-dimension-x2);
   scroll-margin-bottom: var(--seed-dimension-x2);
   cursor: default;
+  -webkit-user-select: none;
   user-select: none;
   color: inherit;
   text-align: start;
@@ -7039,7 +7547,7 @@
   --seed-suffix-icon-size: 18px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__root--size_responsive {
     padding-block: var(--seed-dimension-x2_5);
     padding-inline: var(--seed-dimension-x4);
@@ -7054,7 +7562,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__label--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -7066,7 +7574,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__description--size_responsive {
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);
@@ -7934,6 +8442,7 @@
   box-sizing: border-box;
   font-weight: var(--seed-font-weight-medium);
   color: var(--seed-color-fg-neutral);
+  flex-grow: 1;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
@@ -8012,6 +8521,10 @@
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-quantity-picker__root--layout_fill {
+  flex-grow: 1;
+}
+
 .seed-quantity-picker__root--size_small {
   height: var(--seed-dimension-x9);
   border-radius: var(--seed-radius-r2);
@@ -8452,6 +8965,7 @@
   --scroll-fog-to-color: #000;
   width: 100%;
   height: 100%;
+  -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)));
   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;
@@ -8461,6 +8975,7 @@
   mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-in;
   mask-composite: intersect;
 }
 
@@ -8505,6 +9020,7 @@
 .seed-segmented-control__item {
   text-align: center;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
   box-sizing: border-box;
   overflow-wrap: break-word;
@@ -8674,7 +9190,7 @@
   font-weight: var(--seed-font-weight-medium);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select__groupLabel--size_responsive {
     padding-block: var(--seed-dimension-x2);
     padding-inline: var(--seed-dimension-x4);
@@ -8853,7 +9369,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__root--size_responsive {
     height: var(--seed-dimension-x10);
     gap: var(--seed-dimension-x2);
@@ -8867,7 +9383,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__value--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -8879,7 +9395,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__placeholder--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -8891,7 +9407,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -8903,7 +9419,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__suffixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -8914,6 +9430,7 @@
   scroll-margin-block: var(--seed-dimension-x2);
   padding-inline: var(--seed-dimension-x4);
   cursor: default;
+  -webkit-user-select: none;
   user-select: none;
   color: inherit;
   text-align: start;
@@ -9045,7 +9562,7 @@
   gap: var(--seed-dimension-x3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__root--size_responsive {
     padding-block: var(--seed-dimension-x2_5);
     gap: var(--seed-dimension-x2);
@@ -9057,7 +9574,7 @@
   height: 22px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4_5);
     height: var(--seed-dimension-x4_5);
@@ -9069,7 +9586,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__label--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -9081,7 +9598,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__description--size_responsive {
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);
@@ -9093,7 +9610,7 @@
   height: var(--seed-dimension-x3_5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__indicator--size_responsive {
     width: var(--seed-dimension-x3);
     height: var(--seed-dimension-x3);
@@ -9654,7 +10171,7 @@
   inset-block: 0;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-side-panel__content {
     --side-panel-default-width: var(--side-panel-size-width);
   }
@@ -9814,6 +10331,7 @@
 }
 
 .seed-side-panel__body {
+  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   outline: var(--seed-dimension-x0_5) solid transparent;
@@ -9950,6 +10468,7 @@
 .seed-slider__root {
   align-items: stretch;
   gap: var(--seed-dimension-x0_5);
+  -webkit-user-select: none;
   user-select: none;
   touch-action: none;
   flex-direction: column;
@@ -10764,6 +11283,7 @@
   color: var(--seed-color-palette-gray-600);
   font-weight: var(--seed-font-weight-regular);
   white-space: pre;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -11534,13 +12054,25 @@
   font-weight: var(--seed-font-weight-regular);
 }
 
+.seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+  -webkit-text-fill-color: var(--seed-color-fg-neutral);
+  transition: background-color 2147480000s 2147480000s;
+}
+
 .seed-text-input__value:is(:autofill, :autofill) {
   -webkit-text-fill-color: var(--seed-color-fg-neutral);
   transition: background-color 2147480000s 2147480000s;
 }
 
-@supports (background-clip: text) {
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+    -webkit-background-clip: text;
+    background-clip: text;
+    transition: none;
+  }
+
   .seed-text-input__value:is(:autofill, :autofill) {
+    -webkit-background-clip: text;
     background-clip: text;
     transition: none;
   }
@@ -11652,7 +12184,7 @@
   padding-block: var(--seed-dimension-x3_5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--size_responsive:is(textarea) {
     min-height: 82px;
     padding-block: var(--seed-dimension-x3);
@@ -11775,7 +12307,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__root--variant_outline-size_responsive {
     gap: var(--seed-dimension-x2);
     min-height: var(--seed-dimension-x10);
@@ -11788,7 +12320,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -11800,7 +12332,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive::placeholder {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -11811,7 +12343,7 @@
   padding-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive:first-child {
     padding-left: var(--seed-dimension-x3_5);
   }
@@ -11821,7 +12353,7 @@
   padding-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive:last-child {
     padding-right: var(--seed-dimension-x3_5);
   }
@@ -11832,7 +12364,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -11843,7 +12375,7 @@
   margin-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
     margin-left: var(--seed-dimension-x3_5);
   }
@@ -11854,7 +12386,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_outline-size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -11865,7 +12397,7 @@
   margin-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
     margin-left: var(--seed-dimension-x3_5);
   }
@@ -11876,7 +12408,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -11887,7 +12419,7 @@
   margin-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
     margin-right: var(--seed-dimension-x3_5);
   }
@@ -11898,7 +12430,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_outline-size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -11909,7 +12441,7 @@
   margin-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
     margin-right: var(--seed-dimension-x3_5);
   }
@@ -11973,7 +12505,7 @@
   padding-block: var(--seed-dimension-x2);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__root--variant_underline-size_responsive {
     gap: var(--seed-dimension-x2);
     min-height: 34px;
@@ -11986,7 +12518,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -11998,7 +12530,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_underline-size_responsive::placeholder {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12010,7 +12542,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12022,7 +12554,7 @@
   height: var(--seed-dimension-x6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_underline-size_responsive {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
@@ -12034,7 +12566,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12046,13 +12578,65 @@
   height: var(--seed-dimension-x6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_underline-size_responsive {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
   }
 }
 
+.seed-time-picker__root {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+  width: 100%;
+  height: 220px;
+}
+
+.seed-time-picker__selectionIndicator {
+  border-radius: var(--seed-radius-r2);
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-time-picker__periodColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__periodColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__hourColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__hourColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__hourColumn {
+  --seed-wheel-picker-item-justify-content: flex-end;
+}
+
+.seed-time-picker__minuteColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__minuteColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__item {
+  --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+  padding-inline: var(--seed-dimension-x4);
+  font-size: var(--seed-font-size-t10-static);
+  line-height: var(--seed-line-height-t10-static);
+  font-weight: var(--seed-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
 .seed-toggle-button {
   box-sizing: border-box;
   cursor: pointer;
@@ -12231,6 +12815,105 @@
   --seed-suffix-icon-size: var(--seed-dimension-x3_5);
 }
 
+.seed-wheel-picker__root {
+  height: var(--seed-wheel-picker-viewport-size);
+  position: relative;
+  overflow: hidden;
+}
+
+.seed-wheel-picker__scrollFog {
+  z-index: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.seed-wheel-picker__columns {
+  justify-content: center;
+  height: 100%;
+  display: flex;
+}
+
+.seed-wheel-picker__column {
+  box-sizing: border-box;
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  touch-action: pan-y;
+  cursor: grab;
+  width: max-content;
+  height: 100%;
+  padding-block: var(--seed-wheel-picker-center-offset);
+  outline: none;
+  overflow: hidden auto;
+}
+
+.seed-wheel-picker__column[data-disabled] {
+  cursor: default;
+  overflow-y: hidden;
+}
+
+.seed-wheel-picker__column[data-readonly] {
+  cursor: default;
+}
+
+.seed-wheel-picker__column[data-wheel-picker-dragging] {
+  cursor: grabbing;
+  scroll-snap-type: none;
+}
+
+.seed-wheel-picker__column[data-wheel-picker-scrolling] {
+  scroll-snap-type: none;
+}
+
+.seed-wheel-picker__column::-webkit-scrollbar {
+  display: none;
+}
+
+.seed-wheel-picker__column :is([aria-selected="true"], [data-selected]) {
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+
+.seed-wheel-picker__column.seed-wheel-picker__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-wheel-picker__item {
+  height: var(--seed-wheel-picker-item-size);
+  min-height: var(--seed-wheel-picker-item-size);
+  align-items: center;
+  justify-content: var(--seed-wheel-picker-item-justify-content, center);
+  color: var(--seed-wheel-picker-item-color);
+  scroll-snap-align: center;
+  -webkit-user-select: none;
+  user-select: none;
+  display: flex;
+}
+
+.seed-wheel-picker__item[data-wheel-picker-indicator-overlap] {
+  color: #0000;
+  background-image: linear-gradient(to bottom, var(--seed-wheel-picker-item-color) 0%, var(--seed-wheel-picker-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-item-color) 100%);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.seed-wheel-picker__selectionIndicator {
+  z-index: 0;
+  inset-inline: 0;
+  height: var(--seed-wheel-picker-item-size);
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 @keyframes seed-enter {
   from {
     opacity: var(--seed-enter-opacity, 1);
@@ -12329,7 +13012,7 @@
   }
 }
 
-@media (width >= 480px) {
+@media (min-width: 480px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-sm, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-sm, initial);
@@ -12425,7 +13108,7 @@
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-md, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-md, initial);
@@ -12521,7 +13204,7 @@
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-lg, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-lg, initial);
@@ -12617,7 +13300,7 @@
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-xl, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-xl, initial);