@rovula/ui 0.1.6 → 0.1.8

package/dist/esm/bundle.css

@@ -1,7 +1,11 @@
-@import "./tokens/baseline.css";
 @import "./themes/variable.css";
-@import "./themes/xspector/baseline.css";
-@import "./themes/skyller/baseline.css";
+@import "./themes/variable-mapping.css";
+@import "./tokens/color.css"; 
+@import "./tokens/baseline.css";
+
+/* TODO: remove this */
+/* @import "./themes/xspector/baseline.css";
+@import "./themes/skyller/baseline.css"; */
 
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
@@ -111,9 +115,7 @@
   --tw-contain-style:  ;
 }
 
-/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -606,38 +608,38 @@ input[type=number] {
 .left-0{
   left: 0px;
 }
-.left-11{
-  left: 2.75rem;
-}
 .left-3{
   left: 0.75rem;
 }
 .left-4{
   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;
 }
 .left-\[50\%\]{
   left: 50%;
 }
+.left-\[52px\]{
+  left: 52px;
+}
 .left-\[72px\]{
   left: 72px;
 }
 .right-0{
   right: 0px;
 }
-.right-4{
-  right: 1rem;
+.right-8{
+  right: 2rem;
 }
 .top-0{
   top: 0px;
@@ -648,8 +650,8 @@ input[type=number] {
 .top-1{
   top: 0.25rem;
 }
-.top-4{
-  top: 1rem;
+.top-8{
+  top: 2rem;
 }
 .top-\[40px\]{
   top: 40px;
@@ -705,6 +707,10 @@ input[type=number] {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.mx-5{
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -725,6 +731,9 @@ input[type=number] {
 .mb-2{
   margin-bottom: 0.5rem;
 }
+.ml-1{
+  margin-left: 0.25rem;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -734,9 +743,6 @@ input[type=number] {
 .ml-4{
   margin-left: 1rem;
 }
-.ml-\[var\(--spacing-spacing-xl\)\]{
-  margin-left: var(--spacing-spacing-xl);
-}
 .ml-auto{
   margin-left: auto;
 }
@@ -764,6 +770,9 @@ input[type=number] {
 .mt-4{
   margin-top: 1rem;
 }
+.mt-8{
+  margin-top: 2rem;
+}
 .mt-\[6px\]{
   margin-top: 6px;
 }
@@ -788,6 +797,9 @@ input[type=number] {
 .grid{
   display: grid;
 }
+.contents{
+  display: contents;
+}
 .hidden{
   display: none;
 }
@@ -866,6 +878,9 @@ input[type=number] {
 .h-12{
   height: 3rem;
 }
+.h-14{
+  height: 3.5rem;
+}
 .h-2{
   height: 0.5rem;
 }
@@ -942,12 +957,21 @@ input[type=number] {
 .max-h-screen{
   max-height: 100vh;
 }
+.min-h-0{
+  min-height: 0px;
+}
 .min-h-10{
   min-height: 2.5rem;
 }
 .min-h-\[14px\]{
   min-height: 14px;
 }
+.min-h-\[18px\]{
+  min-height: 18px;
+}
+.min-h-\[686px\]{
+  min-height: 686px;
+}
 .min-h-screen{
   min-height: 100vh;
 }
@@ -990,6 +1014,12 @@ input[type=number] {
 .w-\[100px\]{
   width: 100px;
 }
+.w-\[140px\]{
+  width: 140px;
+}
+.w-\[180px\]{
+  width: 180px;
+}
 .w-\[200px\]{
   width: 200px;
 }
@@ -1008,15 +1038,27 @@ input[type=number] {
 .w-\[40px\]{
   width: 40px;
 }
+.w-\[420px\]{
+  width: 420px;
+}
+.w-\[46px\]{
+  width: 46px;
+}
 .w-\[48px\]{
   width: 48px;
 }
 .w-\[500px\]{
   width: 500px;
 }
+.w-\[520px\]{
+  width: 520px;
+}
 .w-\[64px\]{
   width: 64px;
 }
+.w-\[calc\(100\%-32px\)\]{
+  width: calc(100% - 32px);
+}
 .w-auto{
   width: auto;
 }
@@ -1040,18 +1082,27 @@ input[type=number] {
 .max-w-2xl{
   max-width: 42rem;
 }
+.max-w-3xl{
+  max-width: 48rem;
+}
+.max-w-4xl{
+  max-width: 56rem;
+}
 .max-w-\[300px\]{
   max-width: 300px;
 }
 .max-w-\[360px\]{
   max-width: 360px;
 }
+.max-w-\[460px\]{
+  max-width: 460px;
+}
+.max-w-\[650px\]{
+  max-width: 650px;
+}
 .max-w-full{
   max-width: 100%;
 }
-.max-w-lg{
-  max-width: 32rem;
-}
 .max-w-md{
   max-width: 28rem;
 }
@@ -1236,9 +1287,6 @@ input[type=number] {
 .gap-8{
   gap: 2rem;
 }
-.gap-\[2px\]{
-  gap: 2px;
-}
 .gap-x-\[var\(--footer-gap\)\]{
   -moz-column-gap: var(--footer-gap);
        column-gap: var(--footer-gap);
@@ -1324,6 +1372,12 @@ input[type=number] {
 .rounded{
   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);
 }
@@ -1409,10 +1463,18 @@ input[type=number] {
   border-top-right-radius: 9999px;
   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);
@@ -1492,14 +1554,22 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--action-button-solid-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
-.border-base-popup{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
 .border-base-stroke{
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.border-bg-bg1{
+  --tw-border-opacity: 1;
+  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{
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -1588,9 +1658,13 @@ input[type=number] {
   --tw-border-opacity: 1;
   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-color-error-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-error-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-function-default-solid{
   --tw-border-opacity: 1;
@@ -1598,23 +1672,31 @@ input[type=number] {
 }
 .border-info{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-info-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-info-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-input-default-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  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-color-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-primary-10{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--ramps-primary-10) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-red-500{
   --tw-border-opacity: 1;
@@ -1622,68 +1704,64 @@ input[type=number] {
 }
 .border-secondary{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-state-disable-outline{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-outline) 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);
 }
 .border-success-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-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-color: color-mix(in srgb, var(--state-success-stroke) 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-color-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\)\)\]{
   border-bottom-color: rgb(var(--navbar-border-color));
 }
 .border-l-input-default-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-l-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-l-input-error{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-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-left-color: color-mix(in srgb, var(--state-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);
+  border-right-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-r-input-error{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-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-right-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-t-\[var\(--footer-border-color\)\]{
   border-top-color: var(--footer-border-color);
 }
 .border-t-secondary{
   --tw-border-opacity: 1;
-  border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-top-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .\!bg-action-button-icon-active-hover{
   --tw-bg-opacity: 1 !important;
@@ -1715,9 +1793,6 @@ input[type=number] {
 .bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
   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);
 }
@@ -1810,33 +1885,41 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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: color-mix(in srgb, var(--bg-bg2) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+.bg-bg-bg3{
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--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{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-button-error-flat-default{
   --tw-bg-opacity: 1;
@@ -1932,47 +2015,47 @@ input[type=number] {
 }
 .bg-error{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-foreground{
   --tw-bg-opacity: 1;
@@ -1980,27 +2063,27 @@ input[type=number] {
 }
 .bg-error-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-foreground{
   --tw-bg-opacity: 1;
@@ -2064,199 +2147,199 @@ input[type=number] {
 }
 .bg-grey-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-foreground{
   --tw-bg-opacity: 1;
@@ -2264,63 +2347,78 @@ input[type=number] {
 }
 .bg-info-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  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-color-active-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-default-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-default-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-error{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-filled-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-label-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  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;
@@ -2328,75 +2426,75 @@ input[type=number] {
 }
 .bg-primary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-foreground{
   --tw-bg-opacity: 1;
@@ -2404,55 +2502,55 @@ input[type=number] {
 }
 .bg-primary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-red-100{
   --tw-bg-opacity: 1;
@@ -2460,75 +2558,75 @@ input[type=number] {
 }
 .bg-secondary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-foreground{
   --tw-bg-opacity: 1;
@@ -2536,107 +2634,107 @@ input[type=number] {
 }
 .bg-secondary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-state-disable-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-state-disable-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-foreground{
   --tw-bg-opacity: 1;
@@ -2644,27 +2742,27 @@ input[type=number] {
 }
 .bg-success-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-surface{
   --tw-bg-opacity: 1;
@@ -2672,75 +2770,75 @@ input[type=number] {
 }
 .bg-tertiary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-foreground{
   --tw-bg-opacity: 1;
@@ -2748,55 +2846,55 @@ input[type=number] {
 }
 .bg-tertiary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-text-black{
   --tw-bg-opacity: 1;
@@ -2833,49 +2931,57 @@ input[type=number] {
 .bg-transparent{
   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-color-warning-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-foreground{
   --tw-bg-opacity: 1;
@@ -2883,55 +2989,51 @@ input[type=number] {
 }
 .bg-warning-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-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));
+  background-color: color-mix(in srgb, var(--transparent-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -2941,16 +3043,16 @@ input[type=number] {
   --tw-gradient-to: rgb(132 132 132 / 0) var(--tw-gradient-to-position);
   --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);
 }
 .to-\[\#A00202\]{
   --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{
   fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent) !important;
@@ -3064,52 +3166,52 @@ input[type=number] {
   fill: currentColor;
 }
 .fill-error{
-  fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-error-default) calc(100% * 1), transparent);
 }
 .fill-info{
-  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-info-default) calc(100% * 1), transparent);
 }
 .fill-inherit{
   fill: inherit;
 }
 .fill-input-active-stroke{
-  fill: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-active-stroke) calc(100% * 1), transparent);
 }
 .fill-input-default-text{
-  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .fill-input-disable-stroke{
-  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 .fill-none{
   fill: none;
 }
 .fill-primary{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .fill-primary-default{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .fill-secondary{
-  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-secondary-default) calc(100% * 1), transparent);
 }
 .fill-warning{
-  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-warning-default) calc(100% * 1), transparent);
 }
 .stroke-current{
   stroke: currentColor;
 }
 .stroke-input-default-stroke{
-  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-default-stroke) calc(100% * 1), transparent);
 }
 .stroke-input-default-text{
-  stroke: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .stroke-input-disable-stroke{
-  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 .stroke-primary-default{
-  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .p-0{
   padding: 0px;
@@ -3222,6 +3324,10 @@ input[type=number] {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.py-8{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
 .py-\[12px\]{
   padding-top: 12px;
   padding-bottom: 12px;
@@ -3255,21 +3361,21 @@ input[type=number] {
 .\!pe-\[72px\]{
   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;
 }
@@ -3321,6 +3427,10 @@ input[type=number] {
 .font-poppins{
   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);
@@ -3494,6 +3604,9 @@ input[type=number] {
 .uppercase{
   text-transform: uppercase;
 }
+.lowercase{
+  text-transform: lowercase;
+}
 .capitalize{
   text-transform: capitalize;
 }
@@ -3536,9 +3649,9 @@ input[type=number] {
   --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{
+.\!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\)\)\]{
   color: rgb(var(--navbar-text-color));
@@ -3594,10 +3707,6 @@ input[type=number] {
   --tw-text-opacity: 1;
   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));
@@ -3690,6 +3799,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -3699,11 +3812,7 @@ input[type=number] {
 }
 .text-error{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-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);
+  color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-function-active-icon{
   --tw-text-opacity: 1;
@@ -3731,30 +3840,30 @@ input[type=number] {
 }
 .text-grey2-500{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--ramps-grey2-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-info{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-inherit{
   color: inherit;
 }
 .text-input-default-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-disable-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-error{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-filled-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-pink-200{
   --tw-text-opacity: 1;
@@ -3762,7 +3871,7 @@ input[type=number] {
 }
 .text-primary{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-red-500{
   --tw-text-opacity: 1;
@@ -3770,51 +3879,55 @@ input[type=number] {
 }
 .text-secondary{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-secondary-120{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-ramps-secondary-120) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  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-color-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-color-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{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+.text-tertiary{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
-.text-surface-foreground{
+.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-color-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{
   --tw-text-opacity: 1;
@@ -3822,7 +3935,7 @@ input[type=number] {
 }
 .text-warning{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-white{
   --tw-text-opacity: 1;
@@ -3835,11 +3948,17 @@ input[type=number] {
   text-underline-offset: 4px;
 }
 .caret-primary{
-  caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  caret-color: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .opacity-0{
   opacity: 0;
 }
+.opacity-100{
+  opacity: 1;
+}
+.opacity-40{
+  opacity: 0.4;
+}
 .opacity-50{
   opacity: 0.5;
 }
@@ -3854,8 +3973,13 @@ input[type=number] {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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\.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);
 }
@@ -3910,26 +4034,26 @@ input[type=number] {
 }
 .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);
+  --tw-ring-color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-default-stroke{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-disable-stroke{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-error{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-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);
+  --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{
   --tw-blur: blur(8px);
@@ -3977,6 +4101,9 @@ input[type=number] {
 .delay-150{
   transition-delay: 150ms;
 }
+.duration-150{
+  transition-duration: 150ms;
+}
 .duration-200{
   transition-duration: 200ms;
 }
@@ -4187,19 +4314,19 @@ input[type=number] {
 }
 .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);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-default-text::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-disable-text::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-disable-text::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-transparent::-moz-placeholder{
   color: transparent;
@@ -4376,15 +4503,15 @@ input[type=number] {
 }
 .hover\:border-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:border-l-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:border-r-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover{
   background-color: var(--dropdown-menu-hover-bg);
@@ -4506,19 +4633,23 @@ input[type=number] {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-input-active-stroke\/10:hover{
-  background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
+  background-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * 0.1), transparent);
 }
 .hover\:bg-input-disable-bg:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .hover\:bg-primary-hover-bg:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .hover\:bg-secondary-hover:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  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);
@@ -4602,13 +4733,13 @@ input[type=number] {
   fill: color-mix(in srgb, var(--button-warning-solid-hover-text) calc(100% * 1), transparent);
 }
 .hover\:fill-input-default-text:hover{
-  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .hover\:fill-input-filled-text:hover{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .hover\:stroke-input-filled-text:hover{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover{
   color: var(--dropdown-menu-hover-text);
@@ -4723,15 +4854,11 @@ input[type=number] {
 }
 .hover\:text-input-disable-text:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:text-input-filled-text:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-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);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:opacity-100:hover{
   opacity: 1;
@@ -4744,38 +4871,46 @@ input[type=number] {
 }
 .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);
+  --tw-ring-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:ring-input-disable-stroke:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:ring-input-error:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-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);
+  --tw-ring-color: color-mix(in srgb, var(--state-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);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:placeholder\:text-input-disable-text:hover::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  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-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  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;
 }
 .focus\:bg-primary:focus{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .focus\:pe-10:focus{
   padding-inline-end: 2.5rem;
@@ -4791,7 +4926,7 @@ input[type=number] {
 }
 .focus\:text-input-filled-text:focus{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
@@ -4812,15 +4947,15 @@ input[type=number] {
 }
 .focus\:ring-input-active-stroke:focus{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .focus\:ring-input-error:focus{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-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);
+  --tw-ring-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .focus\:ring-offset-2:focus{
   --tw-ring-offset-width: 2px;
@@ -4843,6 +4978,10 @@ input[type=number] {
   --tw-ring-opacity: 1;
   --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;
 }
@@ -5059,7 +5198,7 @@ input[type=number] {
 }
 .active\:bg-input-disable-bg:active{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .active\:fill-action-button-icon-active-pressed:active{
   fill: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * 1), transparent);
@@ -5143,7 +5282,7 @@ input[type=number] {
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
 .active\:stroke-input-filled-text:active{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .active\:text-action-button-icon-active-pressed:active{
   --tw-text-opacity: 1;
@@ -5255,15 +5394,11 @@ input[type=number] {
 }
 .active\:text-input-disable-text:active{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:text-input-filled-text:active{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-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);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:opacity-75:active{
   opacity: 0.75;
@@ -5276,15 +5411,15 @@ input[type=number] {
 }
 .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);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .active\:placeholder\:text-input-disable-text:active::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:placeholder\:text-input-disable-text:active::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .disabled\:pointer-events-none:disabled{
   pointer-events: none;
@@ -5376,9 +5511,9 @@ input[type=number] {
   --tw-border-opacity: 1;
   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-color-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{
   --tw-bg-opacity: 1;
@@ -5613,7 +5748,7 @@ input[type=number] {
 }
 .disabled\:text-state-disable-outline:disabled{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-outline) 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);
 }
 .disabled\:opacity-30:disabled{
   opacity: 0.3;
@@ -5621,6 +5756,9 @@ input[type=number] {
 .disabled\:opacity-50:disabled{
   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;
 }
@@ -5680,23 +5818,23 @@ input[type=number] {
 }
 .peer:hover ~ .peer-hover\:border-l-input-active-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:border-r-input-active-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:fill-primary-default{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:stroke-input-active-stroke{
-  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-active-stroke) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:stroke-primary-default{
-  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:-top-1\.5{
   top: -0.375rem;
@@ -5706,15 +5844,15 @@ input[type=number] {
 }
 .peer:focus ~ .peer-focus\:border-l-input-active-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:border-r-input-active-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:bg-input-label-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:bg-red-500{
   --tw-bg-opacity: 1;
@@ -5724,24 +5862,24 @@ input[type=number] {
   background-color: transparent;
 }
 .peer:focus ~ .peer-focus\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:fill-primary-hover{
-  fill: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-hover) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:stroke-input-filled-text{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:stroke-primary-hover{
-  stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-hover) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:text-input-default-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:text-input-filled-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:typography-label1{
   font-size: var(--label-label1-size, 12px);
@@ -5754,24 +5892,25 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 .peer:active ~ .peer-active\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed{
   cursor: not-allowed;
 }
 .peer:disabled ~ .peer-disabled\:border-l-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:border-r-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:fill-input-disable-stroke{
-  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  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]{
   pointer-events: none !important;
@@ -5805,9 +5944,9 @@ input[type=number] {
 .data-\[disabled\]\:cursor-not-allowed[data-disabled]{
   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-color-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"]{
   --tw-border-opacity: 1;
@@ -6007,11 +6146,11 @@ input[type=number] {
 }
 .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);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .data-\[state\=selected\]\:bg-grey-20[data-state="selected"]{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"]{
   background-color: var(--switch-thumb-default-color);
@@ -6019,8 +6158,8 @@ input[type=number] {
 .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;
+.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"]{
   fill: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * 1), transparent);
@@ -6088,9 +6227,9 @@ input[type=number] {
 .data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled]{
   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-color-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"]{
   --tw-text-opacity: 1;
@@ -6179,8 +6318,8 @@ input[type=number] {
 .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
   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-\[var\(--state-primary-hover-bg\)\][data-state="checked"]{
+  color: var(--state-primary-hover-bg);
 }
 .data-\[state\=checked\]\:text-function-active-icon[data-state="checked"]{
   --tw-text-opacity: 1;
@@ -6194,12 +6333,12 @@ input[type=number] {
   --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"]{
+.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-color-tertiary-hover-bg\)\][data-state="unchecked"]{
-  color: var(--state-color-tertiary-hover-bg);
+.data-\[state\=unchecked\]\:text-\[var\(--state-tertiary-hover-bg\)\][data-state="unchecked"]{
+  color: var(--state-tertiary-hover-bg);
 }
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
   transition-property: none;
@@ -6257,13 +6396,21 @@ input[type=number] {
   content: var(--tw-content);
   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-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .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);
+  background-color: color-mix(in srgb, var(--state-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);
@@ -6285,6 +6432,10 @@ input[type=number] {
     flex-direction: row;
   }
 
+  .sm\:items-center{
+    align-items: center;
+  }
+
   .sm\:justify-end{
     justify-content: flex-end;
   }
@@ -6293,18 +6444,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;
   }
 }
 @media (min-width: 768px){
@@ -6330,6 +6475,14 @@ input[type=number] {
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr{
   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;
 }
@@ -6356,11 +6509,15 @@ input[type=number] {
 }
 .\[\&_button\]\:\!border-primary button{
   --tw-border-opacity: 1 !important;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
+  border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 .\[\&_button\]\:\!text-input-disable-text button{
   --tw-text-opacity: 1 !important;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+  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;
@@ -6370,9 +6527,9 @@ input[type=number] {
   width: 1.5rem;
   height: 1.5rem;
 }
-.\[\&_svg\]\:size-\[12px\] svg{
-  width: 12px;
-  height: 12px;
+.\[\&_svg\]\:size-\[10px\] svg{
+  width: 10px;
+  height: 10px;
 }
 .\[\&_svg\]\:size-\[14px\] svg{
   width: 14px;
@@ -6390,29 +6547,35 @@ input[type=number] {
   width: 32px;
   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-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:\[\&_svg\]\:text-input-filled-text svg:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:active ~ .peer-active\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:\[\&_svg\]\:text-input-disable-stroke svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .\[\&_tr\:last-child\]\:border-0 tr:last-child{
   border-width: 0px;