@rovula/ui 0.0.30 → 0.0.32

package/dist/cjs/bundle.css

@@ -685,6 +685,9 @@ body {
 .mt-2{
   margin-top: 0.5rem;
 }
+.mt-3{
+  margin-top: 0.75rem;
+}
 .mt-4{
   margin-top: 1rem;
 }
@@ -709,6 +712,9 @@ body {
 .grid{
   display: grid;
 }
+.contents{
+  display: contents;
+}
 .hidden{
   display: none;
 }
@@ -719,14 +725,6 @@ body {
   width: 3.5rem;
   height: 3.5rem;
 }
-.size-2{
-  width: 0.5rem;
-  height: 0.5rem;
-}
-.size-2\.5{
-  width: 0.625rem;
-  height: 0.625rem;
-}
 .size-3{
   width: 0.75rem;
   height: 0.75rem;
@@ -795,12 +793,6 @@ body {
 .h-60{
   height: 15rem;
 }
-.h-\[120px\]{
-  height: 120px;
-}
-.h-\[160px\]{
-  height: 160px;
-}
 .h-\[1px\]{
   height: 1px;
 }
@@ -810,6 +802,9 @@ body {
 .h-\[32px\]{
   height: 32px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-\[40px\]{
   height: 40px;
 }
@@ -895,6 +890,10 @@ body {
 .w-auto{
   width: auto;
 }
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .w-full{
   width: 100%;
 }
@@ -904,6 +903,10 @@ body {
 .min-w-\[154px\]{
   min-width: 154px;
 }
+.min-w-fit{
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
 .max-w-lg{
   max-width: 32rem;
 }
@@ -969,9 +972,33 @@ body {
 .grid-cols-1{
   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;
 }
@@ -1014,12 +1041,12 @@ body {
 .gap-1\.5{
   gap: 0.375rem;
 }
+.gap-10{
+  gap: 2.5rem;
+}
 .gap-2{
   gap: 0.5rem;
 }
-.gap-20{
-  gap: 5rem;
-}
 .gap-3{
   gap: 0.75rem;
 }
@@ -1282,297 +1309,1169 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-warning-solid-default-border) calc(100% * var(--tw-border-opacity)), 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)), 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)), transparent);
+}
+.border-function-default-solid{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), 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)), 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)), transparent);
+}
+.border-primary{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), 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)), transparent);
+}
+.border-secondary{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), 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)), transparent);
+}
+.border-surface{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-border-opacity)), transparent);
+}
+.border-transparent{
+  border-color: transparent;
+}
+.border-warning-stroke{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity)), 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)), 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)), 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)), transparent);
+}
+.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)), transparent);
+}
+.bg-\[rgb\(var\(--base-bg-2\)\)\]{
+  background-color: rgb(var(--base-bg-2));
+}
+.bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
+  background-color: rgb(var(--navbar-bg-color));
+}
+.bg-\[var\(--dropdown-menu-default-bg\)\]{
+  background-color: var(--dropdown-menu-default-bg);
+}
+.bg-\[var\(--dropdown-menu-selected-bg\)\]{
+  background-color: var(--dropdown-menu-selected-bg);
+}
+.bg-\[var\(--dropdown-menu-seperator-bg\)\]{
+  background-color: var(--dropdown-menu-seperator-bg);
+}
+.bg-action-button-icon-active{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-icon-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-icon-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-icon-disabled{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-icon-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-outline-active{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-outline-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-outline-disabled{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-outline-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-solid-active{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-action-button-solid-disabled{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--action-button-solid-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-background{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--background) 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-popup{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-base-popup-curtain{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup-curtain) 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-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);
+}
+.bg-button-error-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-error-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-error-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-error-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-info-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-info-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-info-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-info-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-info-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-info-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-primary-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-primary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-primary-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-primary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-primary-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-primary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-secondary-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-secondary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-secondary-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-secondary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-secondary-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-secondary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-success-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-success-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-success-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-success-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-success-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-success-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-tertiary-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-tertiary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-tertiary-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-tertiary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-tertiary-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-tertiary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-warning-flat-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-warning-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-warning-outline-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-warning-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-button-warning-solid-default{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--button-warning-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-common-black{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--common-black) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-common-white{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-100{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-200{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-300{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-400{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-50{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-500{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-600{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-700{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-800{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-900{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-error-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-error-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--error-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.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)), 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)), 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)), 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)), 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-error-transparent-8{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.bg-gray-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+.bg-grey{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-100{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-100) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-120{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-120) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-140{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-140) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-20{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-40{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-40) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-50{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-70{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-70) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey-90{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-grey-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.bg-grey2{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey2-200{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-200) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey2-400{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-400) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey2-500{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-bg-opacity)), 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);
+}
+.bg-grey2-700{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-grey2-800{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-grey2-900{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-grey2-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), 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)), 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)), 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-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);
 }
-.border-info-stroke{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-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);
 }
-.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)), transparent);
+.bg-secondary-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.border-primary{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-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);
 }
-.border-primary-10{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-border-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);
 }
-.border-secondary{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-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);
 }
-.border-success-stroke{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-success-stroke) calc(100% * var(--tw-border-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);
 }
-.border-surface{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-border-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);
 }
-.border-transparent{
-  border-color: 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);
 }
-.border-warning-stroke{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-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);
 }
-.border-b-\[rgb\(var\(--navbar-border-color\)\)\]{
-  border-bottom-color: rgb(var(--navbar-border-color));
+.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);
 }
-.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)), 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);
 }
-.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)), 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);
 }
-.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)), 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-\[rgb\(var\(--base-bg-2\)\)\]{
-  background-color: rgb(var(--base-bg-2));
+.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-\[rgb\(var\(--navbar-bg-color\)\)\]{
-  background-color: rgb(var(--navbar-bg-color));
+.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-\[var\(--dropdown-menu-default-bg\)\]{
-  background-color: var(--dropdown-menu-default-bg);
+.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-\[var\(--dropdown-menu-selected-bg\)\]{
-  background-color: var(--dropdown-menu-selected-bg);
+.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-\[var\(--dropdown-menu-seperator-bg\)\]{
-  background-color: var(--dropdown-menu-seperator-bg);
+.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-action-button-icon-active{
+.bg-success-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-success-48) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-icon-default{
+.bg-success-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-icon-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-icon-disabled{
+.bg-surface{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-icon-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-outline-active{
+.bg-tertiary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-outline-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-outline-default{
+.bg-tertiary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-100) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-outline-disabled{
+.bg-tertiary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-outline-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-110) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-solid-active{
+.bg-tertiary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-120) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-solid-default{
+.bg-tertiary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-130) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-action-button-solid-disabled{
+.bg-tertiary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--action-button-solid-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-140) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-background{
+.bg-tertiary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-150) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-base-bg2{
+.bg-tertiary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-20) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-base-popup{
+.bg-tertiary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-30) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-base-popup-curtain{
+.bg-tertiary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-40) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-black{
+.bg-tertiary-5{
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-5) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-error-flat-default{
+.bg-tertiary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-error-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-50) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-error-outline-default{
+.bg-tertiary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-error-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-60) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-error-solid-default{
+.bg-tertiary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-error-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-70) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-info-flat-default{
+.bg-tertiary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-info-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-80) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-info-outline-default{
+.bg-tertiary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-info-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-info-solid-default{
+.bg-tertiary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-info-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-primary-flat-default{
+.bg-tertiary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-primary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-primary-outline-default{
+.bg-tertiary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-primary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-primary-solid-default{
+.bg-tertiary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-primary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-secondary-flat-default{
+.bg-tertiary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-secondary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-secondary-outline-default{
+.bg-tertiary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-secondary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-secondary-solid-default{
+.bg-tertiary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-secondary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-16) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-success-flat-default{
+.bg-tertiary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-success-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-24) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-success-outline-default{
+.bg-tertiary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-success-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-32) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-success-solid-default{
+.bg-tertiary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-success-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-48) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-tertiary-flat-default{
+.bg-tertiary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-tertiary-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-tertiary-outline-default{
+.bg-text-dark{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-tertiary-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-tertiary-solid-default{
+.bg-text-grey-dark{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-tertiary-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-warning-flat-default{
+.bg-text-grey-light{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-warning-flat-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-grey-light) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-warning-outline-default{
+.bg-text-grey-medium{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-warning-outline-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-button-warning-solid-default{
+.bg-text-light{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--button-warning-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-light) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-common-black{
+.bg-text-medium{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--common-black) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--text-medium) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-error-transparent-8{
+.bg-text-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(--text-white) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-gray-200{
+.bg-transparent{
+  background-color: transparent;
+}
+.bg-warning{
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey-50{
+.bg-warning-100{
   --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(--warning-warning-100) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey2-700{
+.bg-warning-200{
   --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(--warning-warning-200) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey2-transparent-16{
+.bg-warning-300{
   --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(--warning-warning-300) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-info-transparent-8{
+.bg-warning-400{
   --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(--warning-warning-400) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-input-disable-bg{
+.bg-warning-50{
   --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(--warning-warning-50) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-input-label-bg{
+.bg-warning-500{
   --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(--warning-warning-500) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-primary{
+.bg-warning-600{
   --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(--warning-warning-600) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-primary-transparent-8{
+.bg-warning-700{
   --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(--warning-warning-700) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-80{
+.bg-warning-800{
   --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(--warning-warning-800) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-active{
+.bg-warning-900{
   --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(--warning-warning-900) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-default{
+.bg-warning-foreground{
   --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(--warning-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-hover{
+.bg-warning-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--other-transparency-warning-12) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-state-disable-solid{
+.bg-warning-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-warning-16) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-success-transparent-8{
+.bg-warning-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-warning-24) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-surface{
+.bg-warning-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-warning-32) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-transparent{
-  background-color: 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{
+.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: rgb(255 255 255 / var(--tw-bg-opacity));
+  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);
@@ -1679,6 +2578,9 @@ body {
 .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);
 }
@@ -1688,6 +2590,9 @@ body {
 .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);
 }
@@ -1822,23 +2727,41 @@ body {
   padding-top: var(--spacing-spacing-xxs);
   padding-bottom: var(--spacing-spacing-xxs);
 }
+.\!pe-\[38px\]{
+  padding-inline-end: 38px !important;
+}
+.\!pe-\[46px\]{
+  padding-inline-end: 46px !important;
+}
+.\!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-\[38px\]{
+  padding-inline-start: 38px !important;
+}
+.\!ps-\[46px\]{
+  padding-inline-start: 46px !important;
+}
+.\!ps-\[72px\]{
+  padding-inline-start: 72px !important;
+}
 .pe-\[30px\]{
   padding-inline-end: 30px;
 }
-.pe-\[38px\]{
-  padding-inline-end: 38px;
-}
 .pe-\[40px\]{
   padding-inline-end: 40px;
 }
-.pe-\[46px\]{
-  padding-inline-end: 46px;
-}
-.pe-\[48px\]{
-  padding-inline-end: 48px;
-}
-.pe-\[72px\]{
-  padding-inline-end: 72px;
+.pe-\[68px\]{
+  padding-inline-end: 68px;
 }
 .pl-8{
   padding-left: 2rem;
@@ -1852,24 +2775,6 @@ body {
 .pr-xxl{
   padding-right: var(--spacing-spacing-xxl);
 }
-.ps-11{
-  padding-inline-start: 2.75rem;
-}
-.ps-6{
-  padding-inline-start: 1.5rem;
-}
-.ps-9{
-  padding-inline-start: 2.25rem;
-}
-.ps-\[38px\]{
-  padding-inline-start: 38px;
-}
-.ps-\[46px\]{
-  padding-inline-start: 46px;
-}
-.ps-\[72px\]{
-  padding-inline-start: 72px;
-}
 .text-left{
   text-align: left;
 }
@@ -1999,6 +2904,11 @@ body {
   line-height: var(--small8-line-height, 10px);
   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);
@@ -2043,12 +2953,12 @@ body {
 .font-medium{
   font-weight: 500;
 }
+.uppercase{
+  text-transform: uppercase;
+}
 .capitalize{
   text-transform: capitalize;
 }
-.leading-3{
-  line-height: .75rem;
-}
 .leading-none{
   line-height: 1;
 }
@@ -2117,10 +3027,6 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.text-black{
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
 .text-button-error-flat-default{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -2220,13 +3126,21 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.text-function-active-icon{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
+}
+.text-function-default-solid{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-text-opacity)), transparent);
+}
 .text-gray-400{
   --tw-text-opacity: 1;
   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{
   --tw-text-opacity: 1;
@@ -2318,6 +3232,11 @@ body {
 .opacity-70{
   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);
@@ -2549,6 +3468,11 @@ body {
   line-height: var(--small8-line-height, 10px);
   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);
@@ -2699,13 +3623,13 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-warning-solid-hover-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.hover\:border-input-active-stroke:hover{
+.hover\:border-function-default-hover:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.hover\:border-primary-hover:hover{
+.hover\:border-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 .hover\:bg-action-button-icon-active-hover:hover{
   --tw-bg-opacity: 1;
@@ -4043,6 +4967,9 @@ body {
 .peer:disabled ~ .peer-disabled\:opacity-70{
   opacity: 0.7;
 }
+.data-\[disabled\]\:\!pointer-events-none[data-disabled]{
+  pointer-events: none !important;
+}
 .data-\[disabled\]\:pointer-events-none[data-disabled]{
   pointer-events: none;
 }
@@ -4066,12 +4993,15 @@ body {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[disabled\]\:\!cursor-not-allowed[data-disabled]{
+  cursor: not-allowed !important;
+}
 .data-\[disabled\]\:cursor-not-allowed[data-disabled]{
   cursor: not-allowed;
 }
-.data-\[disabled\]\:border-state-disable-solid[data-disabled]{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+.data-\[disabled\]\:\!border-state-disable-solid[data-disabled]{
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent) !important;
 }
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading=true]{
   --tw-border-opacity: 1;
@@ -4157,9 +5087,9 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-warning-solid-active-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.data-\[state\=checked\]\:border-secondary[data-state=checked]{
+.data-\[state\=checked\]\:border-function-active-solid[data-state=checked]{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
   background-color: var(--dropdown-menu-disabled-bg) !important;
@@ -4254,9 +5184,9 @@ body {
 .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
   background-color: var(--dropdown-menu-selected-bg);
 }
-.data-\[state\=checked\]\:bg-secondary[data-state=checked]{
+.data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
   --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(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
   background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
@@ -4276,8 +5206,8 @@ body {
 .data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
 }
-.data-\[disabled\]\:fill-state-disable-solid[data-disabled]{
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
+.data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
+  fill: color-mix(in srgb, var(--state-color-disable-solid) 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);
@@ -4345,9 +5275,9 @@ body {
 .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]{
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
+.data-\[disabled\]\:\!text-state-disable-solid[data-disabled]{
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent) !important;
 }
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true]{
   --tw-text-opacity: 1;
@@ -4436,13 +5366,13 @@ body {
 .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
   color: var(--dropdown-menu-selected-text);
 }
-.data-\[state\=checked\]\:text-secondary[data-state=checked]{
+.data-\[state\=checked\]\:text-function-active-icon[data-state=checked]{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.data-\[state\=checked\]\:text-secondary-foreground[data-state=checked]{
+.data-\[state\=checked\]\:text-function-active-solid[data-state=checked]{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity)), transparent);
 }
 .data-\[state\=open\]\:text-primary-foreground[data-state=open]{
   --tw-text-opacity: 1;
@@ -4456,23 +5386,23 @@ body {
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
-.hover\:data-\[state\=checked\]\:border-secondary-hover[data-state=checked]:hover{
+.hover\:data-\[state\=checked\]\:border-function-active-hover[data-state=checked]:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
+}
+.hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 .hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
   background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
 }
-.hover\:data-\[state\=checked\]\:bg-secondary-hover[data-state=checked]:hover{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
 }
-.hover\:data-\[state\=checked\]\:text-secondary-hover[data-state=checked]:hover{
+.hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
 }
 .group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
   --tw-ring-opacity: 1;