@seed-design/css 2.3.1 → 2.4.1

package/all.layered.css

@@ -382,16 +382,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;
   }
 
@@ -1042,7 +1059,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);
@@ -1079,7 +1096,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);
@@ -1116,7 +1133,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);
@@ -1153,7 +1170,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);
@@ -1419,7 +1436,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);
     }
@@ -1430,7 +1447,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;
@@ -1442,7 +1459,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);
@@ -1454,7 +1471,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);
@@ -1466,7 +1483,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);
@@ -1485,7 +1502,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);
     }
@@ -2551,6 +2568,7 @@
   }
 
   .seed-article {
+    -webkit-user-select: text;
     user-select: text;
     word-break: normal;
     overflow-wrap: break-word;
@@ -2584,13 +2602,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;
   }
 
@@ -2603,13 +2626,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;
   }
 
@@ -2632,8 +2660,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;
@@ -2642,7 +2673,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;
   }
 
@@ -4343,6 +4376,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;
@@ -4351,7 +4385,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));
@@ -4433,6 +4467,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));
   }
@@ -4770,6 +4805,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;
@@ -5366,12 +5861,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;
   }
 
@@ -5395,10 +5894,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;
   }
 
@@ -5446,7 +5949,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;
@@ -5455,7 +5960,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;
   }
 
@@ -6507,7 +7014,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);
@@ -6519,7 +7026,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);
     }
@@ -6530,7 +7037,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);
@@ -6542,7 +7049,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);
@@ -6554,7 +7061,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);
@@ -6566,7 +7073,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);
@@ -6578,7 +7085,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);
@@ -6590,7 +7097,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);
@@ -6601,7 +7108,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);
     }
@@ -6618,13 +7125,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;
     }
@@ -7129,7 +7636,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);
     }
@@ -7143,7 +7650,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);
@@ -7157,6 +7664,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;
@@ -7288,7 +7796,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);
@@ -7303,7 +7811,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);
@@ -7315,7 +7823,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);
@@ -8183,6 +8691,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;
@@ -8261,6 +8770,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);
@@ -8701,6 +9214,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;
@@ -8710,6 +9224,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;
   }
 
@@ -8754,6 +9269,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;
@@ -8923,7 +9439,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);
@@ -9102,7 +9618,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);
@@ -9116,7 +9632,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);
@@ -9128,7 +9644,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);
@@ -9140,7 +9656,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);
@@ -9152,7 +9668,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);
@@ -9163,6 +9679,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;
@@ -9294,7 +9811,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);
@@ -9306,7 +9823,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);
@@ -9318,7 +9835,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);
@@ -9330,7 +9847,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);
@@ -9342,7 +9859,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);
@@ -9903,7 +10420,7 @@
     inset-block: 0;
   }
 
-  @media (width >= 768px) {
+  @media (min-width: 768px) {
     .seed-side-panel__content {
       --side-panel-default-width: var(--side-panel-size-width);
     }
@@ -10063,6 +10580,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;
@@ -10199,6 +10717,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;
@@ -11013,6 +11532,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;
   }
 
@@ -11783,13 +12303,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;
     }
@@ -11901,7 +12433,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);
@@ -12024,7 +12556,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);
@@ -12037,7 +12569,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);
@@ -12049,7 +12581,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);
@@ -12060,7 +12592,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);
     }
@@ -12070,7 +12602,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);
     }
@@ -12081,7 +12613,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);
@@ -12092,7 +12624,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);
     }
@@ -12103,7 +12635,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);
@@ -12114,7 +12646,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);
     }
@@ -12125,7 +12657,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);
@@ -12136,7 +12668,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);
     }
@@ -12147,7 +12679,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);
@@ -12158,7 +12690,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);
     }
@@ -12222,7 +12754,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;
@@ -12235,7 +12767,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);
@@ -12247,7 +12779,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);
@@ -12259,7 +12791,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);
@@ -12271,7 +12803,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);
@@ -12283,7 +12815,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);
@@ -12295,13 +12827,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;
@@ -12480,7 +13064,106 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
   }
 
-  @media (width >= 480px) {
+  .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%);
+  }
+
+  @media (min-width: 480px) {
     .seed-action-button {
       --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
       --seed-box-bleed-top: var(--seed-box-bleed-top-sm, initial);
@@ -12541,7 +13224,7 @@
     }
   }
 
-  @media (width >= 768px) {
+  @media (min-width: 768px) {
     .seed-action-button {
       --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md, initial);
       --seed-box-bleed-top: var(--seed-box-bleed-top-md, initial);
@@ -12602,7 +13285,7 @@
     }
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-action-button {
       --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg, initial);
       --seed-box-bleed-top: var(--seed-box-bleed-top-lg, initial);
@@ -12663,7 +13346,7 @@
     }
   }
 
-  @media (width >= 1440px) {
+  @media (min-width: 1440px) {
     .seed-action-button {
       --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl, initial);
       --seed-box-bleed-top: var(--seed-box-bleed-top-xl, initial);