@rovula/ui 0.1.2 → 0.1.4

package/dist/src/theme/global.css

@@ -1105,23 +1105,21 @@
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --switch-default-color: rgb(from var(--state-color-tertiary-active) r g b / 0.32);
-  --switch-thumb-default-color: var(--state-color-tertiary-active);
+  --switch-default-color: rgb(from var(--grey-grey-100, #9e9e9e) r g b / 0.32);
+  --switch-thumb-default-color: var(--grey-grey-100, #9e9e9e);
+  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
   /* Hover State */
-  --switch-hover-color: rgb(from var(--state-color-tertiary-active) r g b / 0.48);
-  --switch-thumb-hover-color: var(--switch-thumb-default-color);
-  --switch-thumb-hover-ring: var(--state-color-tertiary-hover-bg);
+  --switch-hover-color: rgb(from var(--grey-grey-80, #b1b1b1) r g b / 0.48);
+  --switch-thumb-hover-color: var(--grey-grey-80, #b1b1b1);
   /* Active State */
-  --switch-active-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-secondary-active);
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active, #ddcd00);
   /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
-  --switch-thumb-active-hover-ring: var(--state-color-secondary-hover-bg);
+  --switch-active-hover-color: rgb(from var(--state-color-primary-text-hover) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--state-color-primary-text-hover);
   /* Disabled State */
   --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid)
-;
+  --switch-thumb-disabled-color: var(--state-color-disable-solid, #454f5b);
   /* COLOR PROJECT */
   --main-primary-xspector: #ddcd00;
   --main-primary-report-xspector-light-mode: #1e3249;
@@ -2142,7 +2140,7 @@
   --others-35-skyller: #56d364;
   --brand-new-blue-bg-xspector: #091d33;
   --brand-new-blue-bg-report-xspector-light-mode: #091d33;
-  --brand-new-blue-bg-skyller: #dbeafe;
+  --brand-new-blue-bg-skyller: #ffffff;
   /* BUTTON RADIUS */
   --button-l-round: 8px;
   --button-l-rem-round: 0.5rem;
@@ -2674,30 +2672,6 @@
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--grey-grey-140);
-  /* ------------------------------------------------------------------ */
-  /* Switch Component Tokens                                           */
-  /* ------------------------------------------------------------------ */
-  /* Naming Convention: --[component]-[element]-[state]-[property]              */
-  /* Element: [progress, track]                                         */
-  /* ------------------------------------------------------------------ */
-  /* Default State */
-  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
-  --switch-thumb-default-color: var(--state-color-secondary-active);
-  /* Hover State */
-  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
-  --switch-thumb-hover-color: var(--switch-thumb-default-color);
-  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
-  /* Active State */
-  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-primary-active);
-  /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
-  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
-  /* Disabled State */
-  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid)
-;
 }
 
 :root[data-theme="skyller"] {
@@ -3892,6 +3866,10 @@ input[type=number] {
   top: 100%;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -4057,10 +4035,6 @@ input[type=number] {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -4124,6 +4098,11 @@ input[type=number] {
   height: 18px;
 }
 
+.size-\[22px\] {
+  width: 22px;
+  height: 22px;
+}
+
 .size-\[30px\] {
   width: 30px;
   height: 30px;
@@ -4280,6 +4259,10 @@ input[type=number] {
   width: 0.5rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-28 {
   width: 7rem;
 }
@@ -4320,10 +4303,6 @@ input[type=number] {
   width: 200px;
 }
 
-.w-\[20px\] {
-  width: 20px;
-}
-
 .w-\[24px\] {
   width: 24px;
 }
@@ -4390,6 +4369,10 @@ input[type=number] {
   max-width: 300px;
 }
 
+.max-w-\[360px\] {
+  max-width: 360px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -4426,6 +4409,16 @@ input[type=number] {
   border-collapse: collapse;
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4525,6 +4518,22 @@ input[type=number] {
   grid-template-columns: repeat(9, minmax(0, 1fr));
 }
 
+.grid-cols-\[120px_repeat\(3\2c minmax\(0\2c 1fr\)\)\] {
+  grid-template-columns: 120px repeat(3,minmax(0,1fr));
+}
+
+.grid-cols-\[160px_16px\] {
+  grid-template-columns: 160px 16px;
+}
+
+.grid-cols-\[1fr_40px\] {
+  grid-template-columns: 1fr 40px;
+}
+
+.grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)\] {
+  grid-template-columns: repeat(3,minmax(0,1fr));
+}
+
 .grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\] {
   grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
 }
@@ -4557,6 +4566,10 @@ input[type=number] {
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -4683,6 +4696,10 @@ input[type=number] {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -4717,6 +4734,70 @@ input[type=number] {
   border-radius: 0.25rem;
 }
 
+.rounded-\[var\(--button-l-capsule\)\] {
+  border-radius: var(--button-l-capsule);
+}
+
+.rounded-\[var\(--button-l-round\)\] {
+  border-radius: var(--button-l-round);
+}
+
+.rounded-\[var\(--button-m-capsule\)\] {
+  border-radius: var(--button-m-capsule);
+}
+
+.rounded-\[var\(--button-m-round\)\] {
+  border-radius: var(--button-m-round);
+}
+
+.rounded-\[var\(--button-s-capsule\)\] {
+  border-radius: var(--button-s-capsule);
+}
+
+.rounded-\[var\(--button-s-round\)\] {
+  border-radius: var(--button-s-round);
+}
+
+.rounded-\[var\(--function-button-l-capsule\)\] {
+  border-radius: var(--function-button-l-capsule);
+}
+
+.rounded-\[var\(--function-button-l-round\)\] {
+  border-radius: var(--function-button-l-round);
+}
+
+.rounded-\[var\(--function-button-m-capsule\)\] {
+  border-radius: var(--function-button-m-capsule);
+}
+
+.rounded-\[var\(--function-button-m-round\)\] {
+  border-radius: var(--function-button-m-round);
+}
+
+.rounded-\[var\(--function-button-s-capsule\)\] {
+  border-radius: var(--function-button-s-capsule);
+}
+
+.rounded-\[var\(--function-button-s-round\)\] {
+  border-radius: var(--function-button-s-round);
+}
+
+.rounded-\[var\(--function-button-xs-capsule\)\] {
+  border-radius: var(--function-button-xs-capsule);
+}
+
+.rounded-\[var\(--function-button-xs-round\)\] {
+  border-radius: var(--function-button-xs-round);
+}
+
+.rounded-\[var\(--function-button-xxs-capsule\)\] {
+  border-radius: var(--function-button-xxs-capsule);
+}
+
+.rounded-\[var\(--function-button-xxs-round\)\] {
+  border-radius: var(--function-button-xxs-round);
+}
+
 .rounded-\[var\(--spacing-spacing-xxs\2c 2px\)\] {
   border-radius: var(--spacing-spacing-xxs,2px);
 }
@@ -4725,6 +4806,10 @@ input[type=number] {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: var(--radius-radius-l);
+}
+
 .rounded-md {
   border-radius: var(--radius-radius-m);
 }
@@ -4741,10 +4826,6 @@ input[type=number] {
   border-radius: var(--radius-radius-xl);
 }
 
-.rounded-xs {
-  border-radius: var(--radius-radius-xs);
-}
-
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -4827,34 +4908,34 @@ input[type=number] {
   border-style: none;
 }
 
-.border-action-button-icon-active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+.\!border-action-button-solid-active-hover {
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--action-button-solid-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 
-.border-action-button-icon-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-icon-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+.\!border-action-button-solid-hover {
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--action-button-solid-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 
-.border-action-button-icon-disabled {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-icon-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+.\!border-function-default-hover {
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 
-.border-action-button-outline-active {
+.border-action-button-icon-active {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-action-button-outline-default {
+.border-action-button-icon-default {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--action-button-icon-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-action-button-outline-disabled {
+.border-action-button-icon-disabled {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--action-button-icon-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .border-action-button-solid-active {
@@ -5085,6 +5166,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-l-warning-stroke {
+  --tw-border-opacity: 1;
+  border-left-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-r-input-default-stroke {
   --tw-border-opacity: 1;
   border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5095,6 +5181,11 @@ input[type=number] {
   border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-r-warning-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-t-\[var\(--footer-border-color\)\] {
   border-top-color: var(--footer-border-color);
 }
@@ -5104,6 +5195,36 @@ input[type=number] {
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.\!bg-action-button-icon-active-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\!bg-action-button-icon-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-icon-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\!bg-action-button-outline-active-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-outline-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\!bg-action-button-outline-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-outline-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\!bg-action-button-solid-active-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-solid-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\!bg-action-button-solid-hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--action-button-solid-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
 .bg-\[rgb\(var\(--base-bg-2\)\)\] {
   background-color: rgb(var(--base-bg-2));
 }
@@ -6660,6 +6781,30 @@ input[type=number] {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
 
+.\!fill-action-button-icon-active-hover {
+  fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent) !important;
+}
+
+.\!fill-action-button-icon-hover {
+  fill: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * 1), transparent) !important;
+}
+
+.\!fill-action-button-outline-active-hover {
+  fill: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * 1), transparent) !important;
+}
+
+.\!fill-action-button-outline-hover {
+  fill: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * 1), transparent) !important;
+}
+
+.\!fill-action-button-solid-active-hover {
+  fill: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * 1), transparent) !important;
+}
+
+.\!fill-action-button-solid-hover {
+  fill: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * 1), transparent) !important;
+}
+
 .fill-action-button-icon-active {
   fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
 }
@@ -6844,14 +6989,6 @@ input[type=number] {
   stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
 
-.stroke-input-error {
-  stroke: color-mix(in srgb, var(--input-color-error) calc(100% * 1), transparent);
-}
-
-.stroke-input-filled-text {
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
-}
-
 .stroke-primary-default {
   stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -6892,6 +7029,11 @@ input[type=number] {
   padding: 2rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -6922,39 +7064,39 @@ input[type=number] {
   padding-right: 2rem;
 }
 
-.px-\[2px\] {
-  padding-left: 2px;
-  padding-right: 2px;
+.px-\[12px\] {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.px-lg {
-  padding-left: var(--spacing-spacing-l);
-  padding-right: var(--spacing-spacing-l);
+.px-\[16px\] {
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
-.px-md {
-  padding-left: var(--spacing-spacing-m);
-  padding-right: var(--spacing-spacing-m);
+.px-\[1px\] {
+  padding-left: 1px;
+  padding-right: 1px;
 }
 
-.px-sm {
-  padding-left: var(--spacing-spacing-s);
-  padding-right: var(--spacing-spacing-s);
+.px-\[24px\] {
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
-.px-xl {
-  padding-left: var(--spacing-spacing-xl);
-  padding-right: var(--spacing-spacing-xl);
+.px-\[2px\] {
+  padding-left: 2px;
+  padding-right: 2px;
 }
 
-.px-xs {
-  padding-left: var(--spacing-spacing-xs);
-  padding-right: var(--spacing-spacing-xs);
+.px-\[4px\] {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-.px-xxs {
-  padding-left: var(--spacing-spacing-xxs);
-  padding-right: var(--spacing-spacing-xxs);
+.px-\[8px\] {
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .py-1 {
@@ -6992,29 +7134,34 @@ input[type=number] {
   padding-bottom: 1.5rem;
 }
 
-.py-lg {
-  padding-top: var(--spacing-spacing-l);
-  padding-bottom: var(--spacing-spacing-l);
+.py-\[12px\] {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.py-\[16px\] {
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
-.py-md {
-  padding-top: var(--spacing-spacing-m);
-  padding-bottom: var(--spacing-spacing-m);
+.py-\[1px\] {
+  padding-top: 1px;
+  padding-bottom: 1px;
 }
 
-.py-sm {
-  padding-top: var(--spacing-spacing-s);
-  padding-bottom: var(--spacing-spacing-s);
+.py-\[2px\] {
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
-.py-xs {
-  padding-top: var(--spacing-spacing-xs);
-  padding-bottom: var(--spacing-spacing-xs);
+.py-\[4px\] {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
-.py-xxs {
-  padding-top: var(--spacing-spacing-xxs);
-  padding-bottom: var(--spacing-spacing-xxs);
+.py-\[8px\] {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .\!pe-\[38px\] {
@@ -7085,6 +7232,10 @@ input[type=number] {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -7339,10 +7490,44 @@ input[type=number] {
   letter-spacing: -0.025em;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .tracking-widest {
   letter-spacing: 0.1em;
 }
 
+.\!text-action-button-icon-active-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
+.\!text-action-button-icon-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
+.\!text-action-button-outline-active-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
+.\!text-action-button-outline-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
+.\!text-action-button-solid-active-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
+.\!text-action-button-solid-hover {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
 .\!text-primary-foreground {
   --tw-text-opacity: 1 !important;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
@@ -7695,6 +7880,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-text-white {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-warning {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -7717,6 +7907,10 @@ input[type=number] {
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -7735,6 +7929,12 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0px_8px_16px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
+  --tw-shadow: 0px 8px 16px 0px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0px 8px 16px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -7777,6 +7977,26 @@ input[type=number] {
   --tw-ring-inset: inset;
 }
 
+.\!ring-\[var\(--action-button-outline-active-hover-border\)\] {
+  --tw-ring-color: var(--action-button-outline-active-hover-border) !important;
+}
+
+.\!ring-\[var\(--action-button-outline-hover-border\)\] {
+  --tw-ring-color: var(--action-button-outline-hover-border) !important;
+}
+
+.ring-\[var\(--action-button-outline-active-border\)\] {
+  --tw-ring-color: var(--action-button-outline-active-border);
+}
+
+.ring-\[var\(--action-button-outline-default-border\)\] {
+  --tw-ring-color: var(--action-button-outline-default-border);
+}
+
+.ring-\[var\(--action-button-outline-disabled-border\)\] {
+  --tw-ring-color: var(--action-button-outline-disabled-border);
+}
+
 .ring-error {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -7797,6 +8017,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.ring-warning-stroke {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .ring-offset-background {
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
@@ -7823,6 +8048,12 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
+.transition-\[transform\2c background-color\2c color\2c filter\] {
+  transition-property: transform,background-color,color,filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -7847,12 +8078,6 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .delay-150 {
   transition-delay: 150ms;
 }
@@ -8069,6 +8294,10 @@ input[type=number] {
   /* background: transparent; */
 }
 
+.\[filter\:var\(--switch-thumb-filter\)\] {
+  filter: var(--switch-thumb-filter);
+}
+
 .placeholder\:text-input-default-text::-moz-placeholder {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8097,24 +8326,92 @@ input[type=number] {
   color: transparent;
 }
 
-.hover\:border-action-button-icon-active-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-icon-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+.before\:pointer-events-none::before {
+  content: var(--tw-content);
+  pointer-events: none;
 }
 
-.hover\:border-action-button-icon-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-icon-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:inset-0::before {
+  content: var(--tw-content);
+  inset: 0px;
+}
+
+.before\:left-1::before {
+  content: var(--tw-content);
+  left: 0.25rem;
+}
+
+.before\:top-1\/2::before {
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.before\:h-3::before {
+  content: var(--tw-content);
+  height: 0.75rem;
+}
+
+.before\:w-8::before {
+  content: var(--tw-content);
+  width: 2rem;
+}
+
+.before\:-translate-y-1\/2::before {
+  content: var(--tw-content);
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.before\:rounded-\[inherit\]::before {
+  content: var(--tw-content);
+  border-radius: inherit;
 }
 
-.hover\:border-action-button-outline-active-hover:hover {
+.before\:rounded-full::before {
+  content: var(--tw-content);
+  border-radius: 9999px;
+}
+
+.before\:border::before {
+  content: var(--tw-content);
+  border-width: 1px;
+}
+
+.before\:border-0::before {
+  content: var(--tw-content);
+  border-width: 0px;
+}
+
+.before\:border-inherit::before {
+  content: var(--tw-content);
+  border-color: inherit;
+}
+
+.before\:transition-colors::before {
+  content: var(--tw-content);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.hover\:border-action-button-icon-active-hover:hover {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--action-button-icon-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.hover\:border-action-button-outline-hover:hover {
+.hover\:border-action-button-icon-hover:hover {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--action-button-icon-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .hover\:border-action-button-solid-active-hover:hover {
@@ -8688,6 +8985,14 @@ input[type=number] {
   opacity: 1;
 }
 
+.hover\:ring-\[var\(--action-button-outline-active-hover-border\)\]:hover {
+  --tw-ring-color: var(--action-button-outline-active-hover-border);
+}
+
+.hover\:ring-\[var\(--action-button-outline-hover-border\)\]:hover {
+  --tw-ring-color: var(--action-button-outline-hover-border);
+}
+
 .hover\:ring-input-active-stroke:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -8703,6 +9008,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.hover\:ring-warning-stroke:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8779,6 +9089,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.focus\:ring-warning-stroke:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -8823,16 +9138,6 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--action-button-icon-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.active\:border-action-button-outline-active-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
-
-.active\:border-action-button-outline-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--action-button-outline-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
-
 .active\:border-action-button-solid-active-pressed:active {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--action-button-solid-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -9354,6 +9659,14 @@ input[type=number] {
   opacity: 0.75;
 }
 
+.active\:ring-\[var\(--action-button-outline-active-pressed-border\)\]:active {
+  --tw-ring-color: var(--action-button-outline-active-pressed-border);
+}
+
+.active\:ring-\[var\(--action-button-outline-pressed-border\)\]:active {
+  --tw-ring-color: var(--action-button-outline-pressed-border);
+}
+
 .active\:ring-input-disable-stroke:active {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -9794,13 +10107,7 @@ input[type=number] {
   opacity: 0.5;
 }
 
-.group:hover .group-hover\:ring {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\] {
+.group:disabled .group-disabled\:\!bg-\[var\(--switch-thumb-disabled-color\)\] {
   background-color: var(--switch-thumb-disabled-color) !important;
 }
 
@@ -10007,8 +10314,8 @@ input[type=number] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.data-\[state\=unchecked\]\:-translate-x-\[2px\][data-state="unchecked"] {
-  --tw-translate-x: -2px;
+.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
+  --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -10150,12 +10457,13 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
-  background-color: var(--dropdown-menu-disabled-bg) !important;
+.data-\[state\=indeterminate\]\:border-function-active-solid[data-state="indeterminate"] {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled] {
-  background-color: var(--switch-disabled-color) !important;
+.data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
+  background-color: var(--dropdown-menu-disabled-bg) !important;
 }
 
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading="true"] {
@@ -10267,19 +10575,24 @@ input[type=number] {
   background-color: var(--dropdown-menu-selected-bg);
 }
 
-.data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state="checked"] {
-  background-color: var(--switch-active-color);
-}
-
 .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state="checked"] {
   background-color: var(--switch-thumb-active-color);
 }
 
+.data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"] {
+  background-color: var(--switch-thumb-active-hover-color);
+}
+
 .data-\[state\=checked\]\:bg-function-active-solid[data-state="checked"] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.data-\[state\=indeterminate\]\:bg-function-active-solid[data-state="indeterminate"] {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .data-\[state\=open\]\:bg-primary[data-state="open"] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10290,14 +10603,14 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"] {
-  background-color: var(--switch-default-color);
-}
-
 .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"] {
   background-color: var(--switch-thumb-default-color);
 }
 
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"] {
+  background-color: var(--switch-thumb-hover-color);
+}
+
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled] {
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
 }
@@ -10504,6 +10817,10 @@ input[type=number] {
   color: var(--dropdown-menu-selected-text);
 }
 
+.data-\[state\=checked\]\:text-\[var\(--state-color-primary-hover-bg\)\][data-state="checked"] {
+  color: var(--state-color-primary-hover-bg);
+}
+
 .data-\[state\=checked\]\:text-function-active-icon[data-state="checked"] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -10514,11 +10831,20 @@ input[type=number] {
   color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.data-\[state\=indeterminate\]\:text-function-active-icon[data-state="indeterminate"] {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .data-\[state\=open\]\:text-primary-foreground[data-state="open"] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.data-\[state\=unchecked\]\:text-\[var\(--state-color-tertiary-hover-bg\)\][data-state="unchecked"] {
+  color: var(--state-color-tertiary-hover-bg);
+}
+
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
   transition-property: none;
 }
@@ -10529,13 +10855,39 @@ input[type=number] {
   font-weight: var(--subtitle5-weight, 500);
 }
 
+.data-\[disabled\]\:before\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-disabled-color) !important;
+}
+
+.data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-color\)\][data-state="checked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-color);
+}
+
+.data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-hover-color);
+}
+
+.data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-default-color);
+}
+
+.data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-hover-color);
+}
+
 .hover\:data-\[state\=checked\]\:border-function-active-hover[data-state="checked"]:hover {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover {
-  background-color: var(--switch-active-hover-color);
+.hover\:data-\[state\=indeterminate\]\:border-function-active-hover[data-state="indeterminate"]:hover {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state="checked"]:hover {
@@ -10543,8 +10895,9 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover {
-  background-color: var(--switch-hover-color);
+.hover\:data-\[state\=indeterminate\]\:bg-function-active-hover[data-state="indeterminate"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
 .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state="checked"]:hover {
@@ -10552,20 +10905,32 @@ input[type=number] {
   color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"] {
-  background-color: var(--switch-thumb-active-hover-color);
+.hover\:data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-hover-color);
 }
 
-.group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"] {
-  background-color: var(--switch-thumb-hover-color);
+.hover\:data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover::before {
+  content: var(--tw-content);
+  background-color: var(--switch-hover-color);
 }
 
-.group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state="checked"] {
-  --tw-ring-color: var(--switch-thumb-active-hover-ring);
+.disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state="unchecked"] {
-  --tw-ring-color: var(--switch-thumb-hover-ring);
+.disabled\:data-\[state\=indeterminate\]\:bg-state-disable-solid[data-state="indeterminate"]:disabled {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"] {
+  background-color: var(--switch-thumb-active-hover-color);
+}
+
+.group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"] {
+  background-color: var(--switch-thumb-hover-color);
 }
 
 @media (min-width: 640px) {
@@ -10630,6 +10995,26 @@ input[type=number] {
   border-bottom-width: 0px;
 }
 
+.\[\&\[data-state\=checked\]_\.checkbox-check-icon\]\:block[data-state=checked] .checkbox-check-icon {
+  display: block;
+}
+
+.\[\&\[data-state\=indeterminate\]_\.checkbox-minus-icon\]\:block[data-state=indeterminate] .checkbox-minus-icon {
+  display: block;
+}
+
+.\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo {
+  opacity: 1;
+}
+
+.group:hover .group-hover\:\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo {
+  opacity: 1;
+}
+
+.group:disabled .group-disabled\:\[\&_\.switch-thumb-halo\]\:opacity-0 .switch-thumb-halo {
+  opacity: 0;
+}
+
 .\[\&_button\]\:rounded-full button {
   border-radius: 9999px;
 }
@@ -10662,6 +11047,11 @@ input[type=number] {
   height: 1.5rem;
 }
 
+.\[\&_svg\]\:size-\[12px\] svg {
+  width: 12px;
+  height: 12px;
+}
+
 .\[\&_svg\]\:size-\[14px\] svg {
   width: 14px;
   height: 14px;