@rovula/ui 0.0.31 → 0.0.33

package/dist/src/theme/global.css

@@ -218,6 +218,7 @@
   --function-active-hover-bg: rgba(221 205 0 / 0.08);
   --function-active-stroke: rgba(177 164 0 / 0.48);
   --function-active-icon: #ffffff;
+  --text-black: #000000;
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;
@@ -225,7 +226,7 @@
   --text-grey-medium: #7e7e7e;
   --text-grey-light: #9e9e9e;
   --text-white: #ffffff;
-  --base-color-bg: #ffffff;
+  --base-color-bg: #f5f5f5;
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
@@ -315,13 +316,13 @@
   --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
   --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
   --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
-  --other-transparency-white-08: rgba(255 255 255 / 0.08);
+  --other-transparency-white-8: rgba(255 255 255 / 0.08);
   --other-transparency-white-12: rgba(255 255 255 / 0.12);
   --other-transparency-white-16: rgba(255 255 255 / 0.16);
   --other-transparency-white-24: rgba(255 255 255 / 0.24);
   --other-transparency-white-32: rgba(255 255 255 / 0.32);
   --other-transparency-white-48: rgba(255 255 255 / 0.48);
-  --other-transparency-black-08: rgba(0 0 0 / 0.08);
+  --other-transparency-black-8: rgba(0 0 0 / 0.08);
   --other-transparency-black-12: rgba(0 0 0 / 0.12);
   --other-transparency-black-16: rgba(0 0 0 / 0.16);
   --other-transparency-black-24: rgba(0 0 0 / 0.24);
@@ -2330,6 +2331,10 @@ body {
   margin-top: 0.5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -2466,14 +2471,6 @@ body {
   height: 15rem;
 }
 
-.h-\[120px\] {
-  height: 120px;
-}
-
-.h-\[160px\] {
-  height: 160px;
-}
-
 .h-\[1px\] {
   height: 1px;
 }
@@ -2603,6 +2600,11 @@ body {
   width: auto;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -2615,6 +2617,11 @@ body {
   min-width: 154px;
 }
 
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2698,10 +2705,42 @@ body {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -2758,12 +2797,12 @@ body {
   gap: 0.375rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
+.gap-10 {
+  gap: 2.5rem;
 }
 
-.gap-20 {
-  gap: 5rem;
+.gap-2 {
+  gap: 0.5rem;
 }
 
 .gap-3 {
@@ -3248,11 +3287,26 @@ body {
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-bg {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-bg2 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-bg3 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-base-guideline-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3263,16 +3317,61 @@ body {
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-popup-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup-highlight {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-base-workspace-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
 .bg-button-error-flat-default {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3383,287 +3482,1427 @@ body {
   background-color: color-mix(in srgb, var(--common-black) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-error-transparent-8 {
+.bg-common-white {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-function-active-hover {
+.bg-error {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-gray-200 {
+.bg-error-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: color-mix(in srgb, var(--error-error-100) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey-50 {
+.bg-error-200 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-200) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey2-700 {
+.bg-error-300 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-300) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey2-transparent-16 {
+.bg-error-400 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-16) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-400) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-info-transparent-8 {
+.bg-error-50 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-8) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-50) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-input-disable-bg {
+.bg-error-500 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-500) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-input-label-bg {
+.bg-error-600 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-600) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-primary {
+.bg-error-700 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-700) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-primary-transparent-8 {
+.bg-error-800 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-800) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-secondary-80 {
+.bg-error-900 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-80) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-error-900) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-secondary-active {
+.bg-error-foreground {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--error-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-secondary-default {
+.bg-error-transparent-12 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-error-12) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-state-disable-solid {
+.bg-error-transparent-16 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-error-16) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-success-transparent-8 {
+.bg-error-transparent-24 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-error-24) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-surface {
+.bg-error-transparent-32 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-error-32) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-transparent {
-  background-color: 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)), transparent);
 }
 
-.bg-warning-transparent-8 {
+.bg-error-transparent-8 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-8) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-white {
+.bg-foreground {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-icon-active {
-  fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
+.bg-function-active-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-icon-default {
-  fill: color-mix(in srgb, var(--action-button-icon-default-text) calc(100% * 1), transparent);
+.bg-function-active-hover-bg {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-icon-disabled {
-  fill: color-mix(in srgb, var(--action-button-icon-disabled-text) calc(100% * 1), transparent);
+.bg-function-active-icon {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-outline-active {
-  fill: color-mix(in srgb, var(--action-button-outline-active-text) calc(100% * 1), transparent);
+.bg-function-active-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-outline-default {
-  fill: color-mix(in srgb, var(--action-button-outline-default-text) calc(100% * 1), transparent);
+.bg-function-active-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-outline-disabled {
-  fill: color-mix(in srgb, var(--action-button-outline-disabled-text) calc(100% * 1), transparent);
+.bg-function-default-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-solid-active {
-  fill: color-mix(in srgb, var(--action-button-solid-active-text) calc(100% * 1), transparent);
+.bg-function-default-hover-bg {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-solid-default {
-  fill: color-mix(in srgb, var(--action-button-solid-default-text) calc(100% * 1), transparent);
+.bg-function-default-icon {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-icon) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-action-button-solid-disabled {
-  fill: color-mix(in srgb, var(--action-button-solid-disabled-text) calc(100% * 1), transparent);
+.bg-function-default-outline {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-outline-icon) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-button-error-flat-default {
-  fill: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * 1), transparent);
+.bg-function-default-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-button-error-outline-default {
-  fill: color-mix(in srgb, var(--button-error-outline-default-text) calc(100% * 1), transparent);
+.bg-function-default-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-button-error-solid-default {
-  fill: color-mix(in srgb, var(--button-error-solid-default-text) calc(100% * 1), transparent);
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.fill-button-info-flat-default {
-  fill: color-mix(in srgb, var(--button-info-flat-default-text) calc(100% * 1), transparent);
+.bg-grey-10 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.fill-button-info-outline-default {
-  fill: color-mix(in srgb, var(--button-info-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-info-solid-default {
-  fill: color-mix(in srgb, var(--button-info-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-primary-flat-default {
-  fill: color-mix(in srgb, var(--button-primary-flat-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-primary-outline-default {
-  fill: color-mix(in srgb, var(--button-primary-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-primary-solid-default {
-  fill: color-mix(in srgb, var(--button-primary-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-secondary-flat-default {
-  fill: color-mix(in srgb, var(--button-secondary-flat-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-secondary-outline-default {
-  fill: color-mix(in srgb, var(--button-secondary-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-secondary-solid-default {
-  fill: color-mix(in srgb, var(--button-secondary-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-success-flat-default {
-  fill: color-mix(in srgb, var(--button-success-flat-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-success-outline-default {
-  fill: color-mix(in srgb, var(--button-success-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-success-solid-default {
-  fill: color-mix(in srgb, var(--button-success-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-tertiary-flat-default {
-  fill: color-mix(in srgb, var(--button-tertiary-flat-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-tertiary-outline-default {
-  fill: color-mix(in srgb, var(--button-tertiary-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-tertiary-solid-default {
-  fill: color-mix(in srgb, var(--button-tertiary-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-warning-flat-default {
-  fill: color-mix(in srgb, var(--button-warning-flat-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-warning-outline-default {
-  fill: color-mix(in srgb, var(--button-warning-outline-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-button-warning-solid-default {
-  fill: color-mix(in srgb, var(--button-warning-solid-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-current {
-  fill: currentColor;
+.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)), transparent);
 }
 
-.fill-error {
-  fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 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)), transparent);
 }
 
-.fill-inherit {
-  fill: inherit;
+.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)), transparent);
 }
 
-.fill-input-active-stroke {
-  fill: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 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)), transparent);
 }
 
-.fill-input-default-text {
-  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 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)), transparent);
 }
 
-.fill-input-disable-stroke {
-  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 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)), transparent);
 }
 
-.fill-primary {
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 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)), transparent);
 }
 
-.fill-primary-default {
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 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)), transparent);
 }
 
-.stroke-input-default-stroke {
-  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 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)), transparent);
 }
 
-.stroke-input-disable-stroke {
-  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 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)), transparent);
 }
 
-.stroke-primary-default {
-  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 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)), transparent);
 }
 
-.p-0 {
-  padding: 0px;
+.bg-grey2-700 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.p-1 {
-  padding: 0.25rem;
+.bg-grey2-800 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-800) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.p-2 {
-  padding: 0.5rem;
+.bg-grey2-900 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.p-20 {
-  padding: 5rem;
+.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)), transparent);
 }
 
-.p-3 {
-  padding: 0.75rem;
+.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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-info {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-100 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-200 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-300 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-400 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-50 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-500 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-600 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-700 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-800 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-900 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-info-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-info-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--info-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-input-error {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-bg-opacity)), 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)), 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)), transparent);
+}
+
+.bg-primary {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-primary-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-primary-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-secondary {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-secondary-active {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), 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)), transparent);
+}
+
+.bg-secondary-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-secondary-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-success {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-100 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-200 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-300 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-400 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-50 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-500 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-600 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-700 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-800 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-900 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-surface {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-tertiary {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-tertiary-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-tertiary-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.bg-text-black {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-dark {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-grey-dark {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-grey-light {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-grey-light) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-grey-medium {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-light {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-light) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-medium {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-medium) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-text-white {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-warning {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-100 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-200 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-300 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-400 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-50 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-500 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-600 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-700 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-800 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-900 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-warning-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-warning-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--warning-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), 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)), transparent);
+}
+
+.fill-action-button-icon-active {
+  fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-icon-default {
+  fill: color-mix(in srgb, var(--action-button-icon-default-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-icon-disabled {
+  fill: color-mix(in srgb, var(--action-button-icon-disabled-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-outline-active {
+  fill: color-mix(in srgb, var(--action-button-outline-active-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-outline-default {
+  fill: color-mix(in srgb, var(--action-button-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-outline-disabled {
+  fill: color-mix(in srgb, var(--action-button-outline-disabled-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-solid-active {
+  fill: color-mix(in srgb, var(--action-button-solid-active-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-solid-default {
+  fill: color-mix(in srgb, var(--action-button-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-action-button-solid-disabled {
+  fill: color-mix(in srgb, var(--action-button-solid-disabled-text) calc(100% * 1), transparent);
+}
+
+.fill-button-error-flat-default {
+  fill: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-error-outline-default {
+  fill: color-mix(in srgb, var(--button-error-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-error-solid-default {
+  fill: color-mix(in srgb, var(--button-error-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-info-flat-default {
+  fill: color-mix(in srgb, var(--button-info-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-info-outline-default {
+  fill: color-mix(in srgb, var(--button-info-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-info-solid-default {
+  fill: color-mix(in srgb, var(--button-info-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-primary-flat-default {
+  fill: color-mix(in srgb, var(--button-primary-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-primary-outline-default {
+  fill: color-mix(in srgb, var(--button-primary-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-primary-solid-default {
+  fill: color-mix(in srgb, var(--button-primary-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-secondary-flat-default {
+  fill: color-mix(in srgb, var(--button-secondary-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-secondary-outline-default {
+  fill: color-mix(in srgb, var(--button-secondary-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-secondary-solid-default {
+  fill: color-mix(in srgb, var(--button-secondary-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-success-flat-default {
+  fill: color-mix(in srgb, var(--button-success-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-success-outline-default {
+  fill: color-mix(in srgb, var(--button-success-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-success-solid-default {
+  fill: color-mix(in srgb, var(--button-success-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-tertiary-flat-default {
+  fill: color-mix(in srgb, var(--button-tertiary-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-tertiary-outline-default {
+  fill: color-mix(in srgb, var(--button-tertiary-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-tertiary-solid-default {
+  fill: color-mix(in srgb, var(--button-tertiary-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-warning-flat-default {
+  fill: color-mix(in srgb, var(--button-warning-flat-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-warning-outline-default {
+  fill: color-mix(in srgb, var(--button-warning-outline-default-text) calc(100% * 1), transparent);
+}
+
+.fill-button-warning-solid-default {
+  fill: color-mix(in srgb, var(--button-warning-solid-default-text) calc(100% * 1), transparent);
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
+.fill-error {
+  fill: color-mix(in srgb, var(--state-color-error-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-input-default-text {
+  fill: color-mix(in srgb, var(--input-color-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-primary {
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.fill-primary-default {
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.stroke-input-default-stroke {
+  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+}
+
+.stroke-input-disable-stroke {
+  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+}
+
+.stroke-primary-default {
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-20 {
+  padding: 5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
 }
 
 .p-4 {
@@ -4033,6 +5272,12 @@ body {
   font-weight: var(--small8-weight, 700);
 }
 
+.text-small9 {
+  font-size: var(--small9-size, 8px);
+  line-height: var(--small9-line-height, 10px);
+  font-weight: var(--small9-weight, 400);
+}
+
 .text-subtitile1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -4087,12 +5332,12 @@ body {
   font-weight: 500;
 }
 
-.capitalize {
-  text-transform: capitalize;
+.uppercase {
+  text-transform: uppercase;
 }
 
-.leading-3 {
-  line-height: .75rem;
+.capitalize {
+  text-transform: capitalize;
 }
 
 .leading-none {
@@ -4326,9 +5571,9 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
 .text-info {
@@ -4445,6 +5690,12 @@ body {
   opacity: 0.7;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --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_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\] {
   --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
   --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
@@ -4727,6 +5978,12 @@ body {
   font-weight: var(--small8-weight, 700);
 }
 
+.typography-small9 {
+  font-size: var(--small9-size, 8px);
+  line-height: var(--small9-line-height, 10px);
+  font-weight: var(--small9-weight, 400);
+}
+
 .typography-label1 {
   font-size: var(--label-label1-size, 12px);
   line-height: var(--label-label1-line-height, 12px);