@seed-design/css 2.4.0 → 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));
 }
@@ -5577,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;
 }
 
@@ -5606,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;
 }
 
@@ -5657,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;
@@ -5666,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;
 }
 
@@ -6718,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);
@@ -6730,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);
   }
@@ -6741,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);
@@ -6753,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);
@@ -6765,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);
@@ -6777,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);
@@ -6789,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);
@@ -6801,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);
@@ -6812,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);
   }
@@ -6829,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;
   }
@@ -7340,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);
   }
@@ -7354,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);
@@ -7368,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;
@@ -7499,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);
@@ -7514,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);
@@ -7526,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);
@@ -8917,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;
@@ -8926,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;
 }
 
@@ -8970,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;
@@ -9139,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);
@@ -9318,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);
@@ -9332,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);
@@ -9344,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);
@@ -9356,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);
@@ -9368,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);
@@ -9379,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;
@@ -9510,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);
@@ -9522,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);
@@ -9534,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);
@@ -9546,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);
@@ -9558,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);
@@ -10119,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);
   }
@@ -10279,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;
@@ -10415,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;
@@ -11229,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;
 }
 
@@ -11999,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;
   }
@@ -12117,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);
@@ -12240,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);
@@ -12253,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);
@@ -12265,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);
@@ -12276,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);
   }
@@ -12286,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);
   }
@@ -12297,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);
@@ -12308,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);
   }
@@ -12319,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);
@@ -12330,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);
   }
@@ -12341,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);
@@ -12352,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);
   }
@@ -12363,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);
@@ -12374,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);
   }
@@ -12438,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;
@@ -12451,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);
@@ -12463,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);
@@ -12475,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);
@@ -12487,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);
@@ -12499,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);
@@ -12511,7 +12578,7 @@
   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);
@@ -12824,6 +12891,7 @@
   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;
 }
@@ -12944,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);
@@ -13040,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);
@@ -13136,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);
@@ -13232,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);