@rovula/ui 0.1.7 → 0.1.8

package/dist/src/theme/global.css

@@ -2155,14 +2155,14 @@
 }
 
 :root {
-  /* Text aliases mapped to new contrast tokens */
+  /* Deprecated aliases: use --text-contrast-* / --text-g-contrast-* directly */
   --text-dark: var(--text-contrast-low);
   --text-medium: var(--text-contrast-medium);
   --text-light: var(--text-contrast-high);
   --text-grey-dark: var(--text-g-contrast-low);
   --text-grey-medium: var(--text-g-contrast-medium);
   --text-grey-light: var(--text-g-contrast-high);
-  /* Base color aliases mapped to new background tokens */
+  /* Deprecated aliases: use --bg-* / --modal-* directly */
   --base-color-bg: var(--bg-bg1);
   --base-color-bg2: var(--bg-bg2);
   --base-color-bg3: var(--bg-bg3);
@@ -2171,7 +2171,7 @@
   --base-color-popup: var(--modal-surface);
   --base-color-popup-highlight: var(--modal-highlight);
   --base-color-popup-curtain: var(--modal-overlay);
-  /* ------- Addon base ---------- */
+  /* Deprecated semantic aliases */
   --background: var(--base-color-bg);
   --foreground: var(--common-black);
   --primary: var(--state-primary-default);
@@ -2890,7 +2890,7 @@
   --action-button-outline-active-pressed-text: var(--function-active-solid);
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
-  --action-button-outline-disabled-border: var(--state-disable-outline);
+  --action-button-outline-disabled-border: var(--state-disable-solid);
   --action-button-outline-disabled-text: var(--state-disable-outline);
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
@@ -2929,8 +2929,8 @@
   /* Naming Convention: --[component]-[element]-[property]              */
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
-  --loading-process-color: var(--secondary);
-  --loading-track-color: #9E9E9E7A;
+  --loading-process-color: var(--brand-rvl-yellow);
+  --loading-track-color: var(--transparent-grey-32);
   /* Navbar */
   --navbar-height: 58px;
   --navbar-bg-color: var(--primary-default);
@@ -2955,13 +2955,13 @@
   --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
   /* Default State */
   --dropdown-menu-default-bg: transparent;
-  --dropdown-menu-default-text: inherit;
+  --dropdown-menu-default-text: var(--text-g-contrast-high);
   /* Hover State */
   --dropdown-menu-hover-bg: var(--state-primary-hover-bg);
-  --dropdown-menu-hover-text: inherit;
+  --dropdown-menu-hover-text: var(--text-g-contrast-high);
   /* Selected State */
   --dropdown-menu-selected-bg: transparent;
-  --dropdown-menu-selected-text: inherit;
+  --dropdown-menu-selected-text: var(--text-g-contrast-high);
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--state-disable-outline);
@@ -2974,7 +2974,7 @@
   /* Default State */
   --switch-default-color: rgb(from var(--ramps-grey-100, #9e9e9e) r g b / 0.32);
   --switch-thumb-default-color: var(--ramps-grey-100, #9e9e9e);
-  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
+  --switch-thumb-filter: drop-shadow(0 8px 16px #00000014);
   /* Hover State */
   --switch-hover-color: rgb(from var(--ramps-grey-80, #b1b1b1) r g b / 0.48);
   --switch-thumb-hover-color: var(--ramps-grey-80, #b1b1b1);
@@ -3660,10 +3660,6 @@ input[type=number] {
   left: 0px;
 }
 
-.left-11 {
-  left: 2.75rem;
-}
-
 .left-3 {
   left: 0.75rem;
 }
@@ -3672,18 +3668,18 @@ input[type=number] {
   left: 1rem;
 }
 
-.left-6 {
-  left: 1.5rem;
-}
-
-.left-9 {
-  left: 2.25rem;
+.left-\[26px\] {
+  left: 26px;
 }
 
 .left-\[38px\] {
   left: 38px;
 }
 
+.left-\[40px\] {
+  left: 40px;
+}
+
 .left-\[46px\] {
   left: 46px;
 }
@@ -3692,6 +3688,10 @@ input[type=number] {
   left: 50%;
 }
 
+.left-\[52px\] {
+  left: 52px;
+}
+
 .left-\[72px\] {
   left: 72px;
 }
@@ -3700,8 +3700,8 @@ input[type=number] {
   right: 0px;
 }
 
-.right-4 {
-  right: 1rem;
+.right-8 {
+  right: 2rem;
 }
 
 .top-0 {
@@ -3716,8 +3716,8 @@ input[type=number] {
   top: 0.25rem;
 }
 
-.top-4 {
-  top: 1rem;
+.top-8 {
+  top: 2rem;
 }
 
 .top-\[40px\] {
@@ -3791,6 +3791,11 @@ input[type=number] {
   margin-right: 1rem;
 }
 
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -3817,6 +3822,10 @@ input[type=number] {
   margin-bottom: 0.5rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -3829,10 +3838,6 @@ input[type=number] {
   margin-left: 1rem;
 }
 
-.ml-\[var\(--spacing-spacing-xl\)\] {
-  margin-left: var(--spacing-spacing-xl);
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -3869,6 +3874,10 @@ input[type=number] {
   margin-top: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .mt-\[6px\] {
   margin-top: 6px;
 }
@@ -3901,6 +3910,10 @@ input[type=number] {
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -4000,6 +4013,10 @@ input[type=number] {
   height: 3rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-2 {
   height: 0.5rem;
 }
@@ -4101,6 +4118,10 @@ input[type=number] {
   max-height: 100vh;
 }
 
+.min-h-0 {
+  min-height: 0px;
+}
+
 .min-h-10 {
   min-height: 2.5rem;
 }
@@ -4109,6 +4130,14 @@ input[type=number] {
   min-height: 14px;
 }
 
+.min-h-\[18px\] {
+  min-height: 18px;
+}
+
+.min-h-\[686px\] {
+  min-height: 686px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -4165,6 +4194,14 @@ input[type=number] {
   width: 100px;
 }
 
+.w-\[140px\] {
+  width: 140px;
+}
+
+.w-\[180px\] {
+  width: 180px;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -4189,6 +4226,14 @@ input[type=number] {
   width: 40px;
 }
 
+.w-\[420px\] {
+  width: 420px;
+}
+
+.w-\[46px\] {
+  width: 46px;
+}
+
 .w-\[48px\] {
   width: 48px;
 }
@@ -4197,10 +4242,18 @@ input[type=number] {
   width: 500px;
 }
 
+.w-\[520px\] {
+  width: 520px;
+}
+
 .w-\[64px\] {
   width: 64px;
 }
 
+.w-\[calc\(100\%-32px\)\] {
+  width: calc(100% - 32px);
+}
+
 .w-auto {
   width: auto;
 }
@@ -4231,6 +4284,14 @@ input[type=number] {
   max-width: 42rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -4239,12 +4300,16 @@ input[type=number] {
   max-width: 360px;
 }
 
-.max-w-full {
-  max-width: 100%;
+.max-w-\[460px\] {
+  max-width: 460px;
 }
 
-.max-w-lg {
-  max-width: 32rem;
+.max-w-\[650px\] {
+  max-width: 650px;
+}
+
+.max-w-full {
+  max-width: 100%;
 }
 
 .max-w-md {
@@ -4488,10 +4553,6 @@ input[type=number] {
   gap: 2rem;
 }
 
-.gap-\[2px\] {
-  gap: 2px;
-}
-
 .gap-x-\[var\(--footer-gap\)\] {
   -moz-column-gap: var(--footer-gap);
        column-gap: var(--footer-gap);
@@ -4600,6 +4661,14 @@ input[type=number] {
   border-radius: 0.25rem;
 }
 
+.rounded-\[1px\] {
+  border-radius: 1px;
+}
+
+.rounded-\[8px\] {
+  border-radius: 8px;
+}
+
 .rounded-\[var\(--button-l-capsule\)\] {
   border-radius: var(--button-l-capsule);
 }
@@ -4712,11 +4781,21 @@ input[type=number] {
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-r-md {
+  border-top-right-radius: var(--radius-radius-m);
+  border-bottom-right-radius: var(--radius-radius-m);
+}
+
 .rounded-r-none {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 
+.rounded-r-sm {
+  border-top-right-radius: var(--radius-radius-s);
+  border-bottom-right-radius: var(--radius-radius-s);
+}
+
 .rounded-r-xl {
   border-top-right-radius: var(--radius-radius-xl);
   border-bottom-right-radius: var(--radius-radius-xl);
@@ -4819,14 +4898,24 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--action-button-solid-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-base-popup {
+.border-base-stroke {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-base-stroke {
+.border-bg-bg1 {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--bg-bg1) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-bg-stroke1 {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--bg-stroke1) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-bg-stroke2 {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--bg-stroke2) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .border-blue-500 {
@@ -4939,6 +5028,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--button-warning-solid-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-common-white {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-error-stroke {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-error-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -4964,6 +5058,16 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-input-error {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-modal-surface {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--modal-surface) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-primary {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -4994,23 +5098,18 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-success-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-surface {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
-
 .border-transparent {
   border-color: transparent;
 }
 
-.border-warning-stroke {
+.border-warning {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-white {
+.border-warning-stroke {
   --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+  border-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
@@ -5056,11 +5155,6 @@ input[type=number] {
   border-top-color: var(--footer-border-color);
 }
 
-.border-t-grey-transparent-24 {
-  --tw-border-opacity: 1;
-  border-top-color: color-mix(in srgb, var(--transparent-grey-24) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
-
 .border-t-secondary {
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5104,10 +5198,6 @@ input[type=number] {
   background-color: rgb(var(--navbar-bg-color));
 }
 
-.bg-\[var\(--base-color-popup\)\] {
-  background-color: var(--base-color-popup);
-}
-
 .bg-\[var\(--dropdown-menu-default-bg\)\] {
   background-color: var(--dropdown-menu-default-bg);
 }
@@ -5224,9 +5314,19 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.bg-black {
+.bg-bg-bg1 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--bg-bg1) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-bg-bg2 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  background-color: color-mix(in srgb, var(--bg-bg2) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-bg-bg3 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--bg-bg3) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
 .bg-black-transparent-12 {
@@ -5819,6 +5919,10 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--transparent-info-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-inherit {
+  background-color: inherit;
+}
+
 .bg-input-active-stroke {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5864,6 +5968,21 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-modal-highlight {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--modal-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-modal-overlay {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--modal-overlay) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-modal-surface {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--modal-surface) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-pink-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
@@ -6503,6 +6622,16 @@ input[type=number] {
   background-color: transparent;
 }
 
+.bg-transparent-grey2-16 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--transparent-grey2-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-transparent-grey2-8 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--transparent-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-warning {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6593,11 +6722,6 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--transparent-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-
 .bg-white-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--transparent-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6638,9 +6762,9 @@ input[type=number] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-black {
-  --tw-gradient-from: #000 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+.from-common-black {
+  --tw-gradient-from: color-mix(in srgb, var(--common-black) calc(100% * 1), transparent) var(--tw-gradient-from-position);
+  --tw-gradient-to: color-mix(in srgb, var(--common-black) calc(100% * 0), transparent) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -6648,8 +6772,8 @@ input[type=number] {
   --tw-gradient-to: #A00202 var(--tw-gradient-to-position);
 }
 
-.to-white {
-  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+.to-common-white {
+  --tw-gradient-to: color-mix(in srgb, var(--common-white) calc(100% * 1), transparent) var(--tw-gradient-to-position);
 }
 
 .\!fill-action-button-icon-active-hover {
@@ -7005,6 +7129,11 @@ input[type=number] {
   padding-bottom: 1.5rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .py-\[12px\] {
   padding-top: 12px;
   padding-bottom: 12px;
@@ -7047,26 +7176,26 @@ input[type=number] {
   padding-inline-end: 72px !important;
 }
 
-.\!ps-11 {
-  padding-inline-start: 2.75rem !important;
-}
-
-.\!ps-6 {
-  padding-inline-start: 1.5rem !important;
-}
-
-.\!ps-9 {
-  padding-inline-start: 2.25rem !important;
+.\!ps-\[26px\] {
+  padding-inline-start: 26px !important;
 }
 
 .\!ps-\[38px\] {
   padding-inline-start: 38px !important;
 }
 
+.\!ps-\[40px\] {
+  padding-inline-start: 40px !important;
+}
+
 .\!ps-\[46px\] {
   padding-inline-start: 46px !important;
 }
 
+.\!ps-\[52px\] {
+  padding-inline-start: 52px !important;
+}
+
 .\!ps-\[72px\] {
   padding-inline-start: 72px !important;
 }
@@ -7135,6 +7264,11 @@ input[type=number] {
   font-family: Poppins, sans-serif;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-body1 {
   font-size: var(--body1-size, 16px);
   line-height: var(--body1-line-height, 20px);
@@ -7345,6 +7479,10 @@ input[type=number] {
   text-transform: uppercase;
 }
 
+.lowercase {
+  text-transform: lowercase;
+}
+
 .capitalize {
   text-transform: capitalize;
 }
@@ -7399,9 +7537,9 @@ input[type=number] {
   color: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
-.\!text-primary-foreground {
+.\!text-state-primary-text-solid {
   --tw-text-opacity: 1 !important;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+  color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
 .text-\[rgb\(var\(--navbar-text-color\)\)\] {
@@ -7473,11 +7611,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--action-button-solid-disabled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-base-popup-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@@ -7593,6 +7726,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--button-warning-solid-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-common-black {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--common-black) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-common-white {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -7607,11 +7745,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
-
 .text-function-active-icon {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -7701,19 +7834,19 @@ input[type=number] {
   color: color-mix(in srgb, var(--ramps-secondary-120) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-secondary-foreground {
+.text-state-disable-outline {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-state-disable-outline {
+.text-state-primary-text-solid {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-state-disable-solid {
+.text-state-secondary-text-solid {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-secondary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
 .text-success {
@@ -7721,34 +7854,39 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-surface-foreground {
+.text-tertiary {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.text-text-black {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--surface-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-tertiary {
+.text-text-contrast-low {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-contrast-low) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-text-dark {
+.text-text-contrast-max {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-contrast-max) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-text-grey-dark {
+.text-text-g-contrast-high {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-g-contrast-high) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-text-grey-light {
+.text-text-g-contrast-low {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-grey-light) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-g-contrast-low) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-text-grey-medium {
+.text-text-g-contrast-medium {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
 .text-text-white {
@@ -7782,6 +7920,14 @@ input[type=number] {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -7800,8 +7946,14 @@ 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);
+.shadow-\[0px_12px_24px_-4px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
+  --tw-shadow: 0px 12px 24px -4px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0px 12px 24px -4px 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-\[0px_8px_16px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
+  --tw-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08);
   --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);
 }
@@ -7893,8 +8045,8 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--state-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);
+.ring-offset-bg-bg1 {
+  --tw-ring-offset-color: color-mix(in srgb, var(--bg-bg1) calc(100% * 1), transparent);
 }
 
 .blur {
@@ -7953,6 +8105,10 @@ input[type=number] {
   transition-delay: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -8624,6 +8780,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--state-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.hover\:bg-transparent-grey2-8:hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--transparent-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .hover\:fill-action-button-icon-active-hover:hover {
   fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent);
 }
@@ -8893,11 +9054,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.hover\:text-text-grey-dark:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
-
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -8940,11 +9096,21 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.focus\:border-input-active-stroke:focus {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .focus\:border-input-default-stroke:focus {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.focus\:border-input-error:focus {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus {
   background-color: var(--dropdown-menu-hover-bg) !important;
 }
@@ -9037,6 +9203,11 @@ input[type=number] {
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
 }
 
+.focus-visible\:ring-input-active-stroke:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .focus-visible\:ring-opacity-75:focus-visible {
   --tw-ring-opacity: 0.75;
 }
@@ -9567,11 +9738,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.active\:text-text-dark:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
-
 .active\:opacity-75:active {
   opacity: 0.75;
 }
@@ -9712,9 +9878,9 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--button-warning-solid-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.disabled\:border-state-disable-solid:disabled {
+.disabled\:border-state-disable-outline:disabled {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .disabled\:bg-button-error-flat-disabled:disabled {
@@ -10024,6 +10190,10 @@ input[type=number] {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 .group:disabled .group-disabled\:\!bg-\[var\(--switch-thumb-disabled-color\)\] {
   background-color: var(--switch-thumb-disabled-color) !important;
 }
@@ -10214,8 +10384,9 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 
-.peer:disabled ~ .peer-disabled\:opacity-70 {
-  opacity: 0.7;
+.peer:disabled ~ .peer-disabled\:text-state-disable-outline {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
 .data-\[disabled\]\:\!pointer-events-none[data-disabled] {
@@ -10259,9 +10430,9 @@ input[type=number] {
   cursor: not-allowed;
 }
 
-.data-\[disabled\]\:\!border-state-disable-solid[data-disabled] {
+.data-\[disabled\]\:\!border-state-disable-outline[data-disabled] {
   --tw-border-opacity: 1 !important;
-  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
+  border-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading="true"] {
@@ -10528,8 +10699,8 @@ input[type=number] {
   background-color: var(--switch-thumb-hover-color);
 }
 
-.data-\[disabled\]\:\!fill-state-disable-solid[data-disabled] {
-  fill: color-mix(in srgb, var(--state-disable-solid) calc(100% * 1), transparent) !important;
+.data-\[disabled\]\:\!fill-state-disable-outline[data-disabled] {
+  fill: color-mix(in srgb, var(--state-disable-outline) calc(100% * 1), transparent) !important;
 }
 
 .data-\[loading\=true\]\:fill-button-error-flat-active[data-loading="true"] {
@@ -10620,9 +10791,9 @@ input[type=number] {
   color: var(--dropdown-menu-disabled-text) !important;
 }
 
-.data-\[disabled\]\:\!text-state-disable-solid[data-disabled] {
+.data-\[disabled\]\:\!text-state-disable-outline[data-disabled] {
   --tw-text-opacity: 1 !important;
-  color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading="true"] {
@@ -10753,9 +10924,9 @@ input[type=number] {
   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"] {
+.data-\[state\=open\]\:text-state-primary-text-solid[data-state="open"] {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
 .data-\[state\=unchecked\]\:text-\[var\(--state-tertiary-hover-bg\)\][data-state="unchecked"] {
@@ -10832,6 +11003,16 @@ input[type=number] {
   background-color: var(--switch-hover-color);
 }
 
+.disabled\:data-\[state\=checked\]\:border-state-disable-solid[data-state="checked"]:disabled {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.disabled\:data-\[state\=indeterminate\]\:border-state-disable-solid[data-state="indeterminate"]:disabled {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10863,6 +11044,10 @@ input[type=number] {
     flex-direction: row;
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -10871,18 +11056,12 @@ input[type=number] {
     justify-content: stretch;
   }
 
-  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .sm\:rounded-md {
-    border-radius: var(--radius-radius-m);
+  .sm\:gap-4 {
+    gap: 1rem;
   }
 
-  .sm\:text-left {
-    text-align: left;
+  .sm\:gap-6 {
+    gap: 1.5rem;
   }
 }
 
@@ -10912,6 +11091,16 @@ input[type=number] {
   border-bottom-width: 0px;
 }
 
+.\[\&\[data-disabled\]\[data-state\=checked\]\]\:\!border-state-disable-solid[data-disabled][data-state=checked] {
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
+}
+
+.\[\&\[data-disabled\]\[data-state\=checked\]\]\:\!text-state-disable-solid[data-disabled][data-state=checked] {
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+}
+
 .\[\&\[data-state\=checked\]_\.checkbox-check-icon\]\:block[data-state=checked] .checkbox-check-icon {
   display: block;
 }
@@ -10954,6 +11143,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
+.\[\&_svg\]\:size-3 svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .\[\&_svg\]\:size-5 svg {
   width: 1.25rem;
   height: 1.25rem;
@@ -10964,9 +11158,9 @@ input[type=number] {
   height: 1.5rem;
 }
 
-.\[\&_svg\]\:size-\[12px\] svg {
-  width: 12px;
-  height: 12px;
+.\[\&_svg\]\:size-\[10px\] svg {
+  width: 10px;
+  height: 10px;
 }
 
 .\[\&_svg\]\:size-\[14px\] svg {
@@ -10989,6 +11183,14 @@ input[type=number] {
   height: 32px;
 }
 
+.\[\&_svg\]\:stroke-current svg {
+  stroke: currentColor;
+}
+
+.\[\&_svg\]\:text-current svg {
+  color: currentColor;
+}
+
 .\[\&_svg\]\:text-input-default-text svg {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);