@rovula/ui 0.0.21 → 0.0.23

package/dist/src/theme/global.css

@@ -217,6 +217,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -488,6 +489,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;
@@ -2087,6 +2109,10 @@ body {
   bottom: 0px;
 }
 
+.-bottom-\[1px\] {
+  bottom: -1px;
+}
+
 .-top-1 {
   top: -0.25rem;
 }
@@ -2280,6 +2306,11 @@ body {
   height: 1.75rem;
 }
 
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+
 .size-9 {
   width: 2.25rem;
   height: 2.25rem;
@@ -2313,6 +2344,14 @@ body {
   height: 3rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -2333,26 +2372,18 @@ body {
   height: 160px;
 }
 
-.h-\[18px\] {
-  height: 18px;
+.h-\[1px\] {
+  height: 1px;
 }
 
 .h-\[24px\] {
   height: 24px;
 }
 
-.h-\[30px\] {
-  height: 30px;
-}
-
 .h-\[32px\] {
   height: 32px;
 }
 
-.h-\[38px\] {
-  height: 38px;
-}
-
 .h-\[40px\] {
   height: 40px;
 }
@@ -2365,10 +2396,6 @@ body {
   height: 54px;
 }
 
-.h-\[56px\] {
-  height: 56px;
-}
-
 .h-\[64px\] {
   height: 64px;
 }
@@ -2422,10 +2449,6 @@ body {
   width: 100px;
 }
 
-.w-\[18px\] {
-  width: 18px;
-}
-
 .w-\[200px\] {
   width: 200px;
 }
@@ -2438,18 +2461,10 @@ body {
   width: 24px;
 }
 
-.w-\[30px\] {
-  width: 30px;
-}
-
 .w-\[32px\] {
   width: 32px;
 }
 
-.w-\[38px\] {
-  width: 38px;
-}
-
 .w-\[400px\] {
   width: 400px;
 }
@@ -2458,18 +2473,10 @@ body {
   width: 40px;
 }
 
-.w-\[46px\] {
-  width: 46px;
-}
-
 .w-\[48px\] {
   width: 48px;
 }
 
-.w-\[56px\] {
-  width: 56px;
-}
-
 .w-\[64px\] {
   width: 64px;
 }
@@ -2502,6 +2509,10 @@ body {
   flex-shrink: 0;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .caption-bottom {
   caption-side: bottom;
 }
@@ -2525,6 +2536,10 @@ body {
   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));
 }
 
+.transform {
+  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));
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2539,16 +2554,22 @@ body {
   cursor: pointer;
 }
 
+.touch-none {
+  touch-action: none;
+}
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
-.appearance-none {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+.resize {
+  resize: both;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 .grid-cols-4 {
@@ -2583,6 +2604,10 @@ body {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -2595,6 +2620,10 @@ body {
   justify-content: space-between;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -2690,10 +2719,6 @@ body {
   border-radius: 9999px;
 }
 
-.rounded-lg {
-  border-radius: var(--radius-radius-l);
-}
-
 .rounded-md {
   border-radius: var(--radius-radius-m);
 }
@@ -2710,6 +2735,10 @@ body {
   border-radius: var(--radius-radius-xl);
 }
 
+.rounded-xs {
+  border-radius: var(--radius-radius-xs);
+}
+
 .rounded-r-full {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -2733,6 +2762,14 @@ body {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-\[3px\] {
+  border-width: 3px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2741,8 +2778,8 @@ body {
   border-bottom-width: 2px;
 }
 
-.border-b-\[3px\] {
-  border-bottom-width: 3px;
+.border-b-\[1px\] {
+  border-bottom-width: 1px;
 }
 
 .border-l {
@@ -2811,6 +2848,11 @@ body {
   border-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.border-base-stroke {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .border-button-error-flat-default {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-error-flat-default-border) calc(100% * var(--tw-border-opacity)), transparent);
@@ -2916,26 +2958,6 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-default-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.border-error-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-error-default) 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-info-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-default) 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);
@@ -2956,75 +2978,25 @@ body {
   border-color: color-mix(in srgb, var(--primary-ramps-primary-30) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.border-primary-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.border-primary-stroke {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-stroke) 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-secondary-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.border-secondary-stroke {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .border-state-disable-solid {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.border-success-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-success-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-tertiary-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.border-tertiary-stroke {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .border-transparent {
   border-color: transparent;
 }
 
-.border-warning-default {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-border-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);
-}
-
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
   border-bottom-color: rgb(var(--navbar-border-color));
 }
@@ -3097,6 +3069,11 @@ body {
   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-popup {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3222,14 +3199,14 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-error-default {
+.bg-gray-200 {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
+.bg-grey-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
 .bg-grey2-300 {
@@ -3247,11 +3224,6 @@ body {
   background-color: color-mix(in srgb, var(--other-transparency-grey2-16) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-info-default {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-default) 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);
@@ -3267,11 +3239,6 @@ body {
   background-color: color-mix(in srgb, var(--state-color-primary-default) 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-transparent-8 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3282,14 +3249,14 @@ body {
   background-color: color-mix(in srgb, var(--secondary-ramps-secondary-80) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-secondary-default {
+.bg-secondary-active {
   --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(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-success-default {
+.bg-secondary-default {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
 .bg-surface {
@@ -3297,20 +3264,10 @@ body {
   background-color: color-mix(in srgb, var(--surface) 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-transparent {
   background-color: transparent;
 }
 
-.bg-warning-default {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3444,22 +3401,6 @@ body {
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
 
-.fill-error-default {
-  fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
-}
-
-.fill-error-foreground {
-  fill: color-mix(in srgb, var(--error-foreground) calc(100% * 1), transparent);
-}
-
-.fill-info-default {
-  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
-}
-
-.fill-info-foreground {
-  fill: color-mix(in srgb, var(--info-foreground) calc(100% * 1), transparent);
-}
-
 .fill-inherit {
   fill: inherit;
 }
@@ -3476,50 +3417,10 @@ body {
   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);
-}
-
-.fill-primary-foreground {
-  fill: color-mix(in srgb, var(--primary-foreground) calc(100% * 1), transparent);
-}
-
-.fill-secondary-default {
-  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
-}
-
-.fill-secondary-foreground {
-  fill: color-mix(in srgb, var(--secondary-foreground) calc(100% * 1), transparent);
-}
-
 .fill-state-disable-solid {
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
 }
 
-.fill-success-default {
-  fill: color-mix(in srgb, var(--state-color-success-default) calc(100% * 1), transparent);
-}
-
-.fill-success-foreground {
-  fill: color-mix(in srgb, var(--success-foreground) calc(100% * 1), transparent);
-}
-
-.fill-tertiary-default {
-  fill: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * 1), transparent);
-}
-
-.fill-tertiary-foreground {
-  fill: color-mix(in srgb, var(--tertiary-foreground) calc(100% * 1), transparent);
-}
-
-.fill-warning-default {
-  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
-}
-
-.fill-warning-foreground {
-  fill: color-mix(in srgb, var(--warning-foreground) calc(100% * 1), transparent);
-}
-
 .p-0 {
   padding: 0px;
 }
@@ -3556,20 +3457,11 @@ body {
   padding: 2rem;
 }
 
-.p-\[2px\] {
-  padding: 2px;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -3610,11 +3502,26 @@ body {
   padding-right: var(--spacing-spacing-m);
 }
 
+.px-sm {
+  padding-left: var(--spacing-spacing-s);
+  padding-right: var(--spacing-spacing-s);
+}
+
 .px-xl {
   padding-left: var(--spacing-spacing-xl);
   padding-right: var(--spacing-spacing-xl);
 }
 
+.px-xs {
+  padding-left: var(--spacing-spacing-xs);
+  padding-right: var(--spacing-spacing-xs);
+}
+
+.px-xxs {
+  padding-left: var(--spacing-spacing-xxs);
+  padding-right: var(--spacing-spacing-xxs);
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3645,6 +3552,31 @@ body {
   padding-bottom: 1.5rem;
 }
 
+.py-lg {
+  padding-top: var(--spacing-spacing-l);
+  padding-bottom: var(--spacing-spacing-l);
+}
+
+.py-md {
+  padding-top: var(--spacing-spacing-m);
+  padding-bottom: var(--spacing-spacing-m);
+}
+
+.py-sm {
+  padding-top: var(--spacing-spacing-s);
+  padding-bottom: var(--spacing-spacing-s);
+}
+
+.py-xs {
+  padding-top: var(--spacing-spacing-xs);
+  padding-bottom: var(--spacing-spacing-xs);
+}
+
+.py-xxs {
+  padding-top: var(--spacing-spacing-xxs);
+  padding-bottom: var(--spacing-spacing-xxs);
+}
+
 .pe-\[30px\] {
   padding-inline-end: 30px;
 }
@@ -3709,15 +3641,6 @@ body {
   vertical-align: middle;
 }
 
-.font-sans {
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-body1 {
   font-size: var(--body1-size, 16px);
   line-height: var(--body1-line-height, 20px);
@@ -3837,6 +3760,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.text-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.text-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.text-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .text-subtitile1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -3898,10 +3839,6 @@ body {
   line-height: 1;
 }
 
-.tracking-\[\.02857em\] {
-  letter-spacing: .02857em;
-}
-
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -4092,16 +4029,6 @@ body {
   color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-error-default {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.text-error-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--error-foreground) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-foreground {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4122,14 +4049,8 @@ body {
   color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-info-default {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.text-info-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--info-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+.text-inherit {
+  color: inherit;
 }
 
 .text-input-default-text {
@@ -4157,11 +4078,6 @@ body {
   color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-primary-default {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-primary-foreground {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4177,11 +4093,6 @@ body {
   color: color-mix(in srgb, var(--secondary-ramps-secondary-120) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-secondary-default {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-secondary-foreground {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4197,16 +4108,6 @@ body {
   color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-success-default {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.text-success-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-surface-foreground {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--surface-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4217,29 +4118,29 @@ body {
   color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-tertiary-default {
+.text-text-dark {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-tertiary-foreground {
+.text-text-grey-dark {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-warning {
+.text-text-grey-light {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-grey-light) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-warning-default {
+.text-text-grey-medium {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-warning-foreground {
+.text-warning {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--warning-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .text-white {
@@ -4251,10 +4152,6 @@ body {
   text-decoration-line: underline;
 }
 
-.no-underline {
-  text-decoration-line: none;
-}
-
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -4288,9 +4185,9 @@ body {
   outline-style: solid;
 }
 
-.ring {
+.ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
@@ -4324,6 +4221,11 @@ body {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity)), transparent);
 }
 
+.ring-primary {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-ring-opacity)), transparent);
+}
+
 .ring-offset-background {
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
@@ -4363,6 +4265,12 @@ body {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .delay-150 {
   transition-delay: 150ms;
 }
@@ -4509,6 +4417,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.typography-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.typography-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.typography-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .typography-label1 {
   font-size: var(--label-label1-size, 12px);
   line-height: var(--label-label1-line-height, 12px);
@@ -4696,46 +4622,11 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-hover-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.hover\:border-error-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-error-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.hover\:border-info-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .hover\:border-input-active-stroke:hover {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.hover\:border-primary-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.hover\:border-secondary-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.hover\:border-success-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-success-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.hover\:border-tertiary-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.hover\:border-warning-hover:hover {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-warning-hover) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .hover\:bg-action-button-icon-active-hover:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4871,41 +4762,16 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.hover\:bg-error-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-error-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-info-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-info-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .hover\:bg-input-disable-bg:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.hover\:bg-primary-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .hover\:bg-primary-hover-bg:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4916,45 +4782,6 @@ body {
   background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.hover\:bg-secondary-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-success-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-success-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-tertiary-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-tertiary-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-warning-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-warning-hover-bg:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.hover\:bg-opacity-90:hover {
-  --tw-bg-opacity: 0.9;
-}
-
 .hover\:fill-action-button-icon-active-hover:hover {
   fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent);
 }
@@ -5063,38 +4890,10 @@ body {
   fill: color-mix(in srgb, var(--button-warning-solid-hover-text) calc(100% * 1), transparent);
 }
 
-.hover\:fill-error-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-error-hover) calc(100% * 1), transparent);
-}
-
-.hover\:fill-info-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-info-hover) calc(100% * 1), transparent);
-}
-
 .hover\:fill-input-default-text:hover {
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
 
-.hover\:fill-primary-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
-}
-
-.hover\:fill-secondary-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * 1), transparent);
-}
-
-.hover\:fill-success-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-success-hover) calc(100% * 1), transparent);
-}
-
-.hover\:fill-tertiary-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * 1), transparent);
-}
-
-.hover\:fill-warning-hover:hover {
-  fill: color-mix(in srgb, var(--state-color-warning-hover) calc(100% * 1), transparent);
-}
-
 .hover\:text-action-button-icon-active-hover:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -5230,16 +5029,6 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-hover-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.hover\:text-error-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-error-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.hover\:text-info-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-info-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .hover\:text-input-disable-text:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -5250,29 +5039,9 @@ body {
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.hover\:text-primary-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.hover\:text-secondary-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.hover\:text-success-hover:hover {
+.hover\:text-text-grey-dark:hover {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-success-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.hover\:text-tertiary-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.hover\:text-warning-hover:hover {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-hover) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-grey-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .hover\:opacity-100:hover {
@@ -5386,10 +5155,8 @@ body {
   --tw-ring-offset-width: 2px;
 }
 
-.active\:scale-\[98\%\]:active {
-  --tw-scale-x: 98%;
-  --tw-scale-y: 98%;
-  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));
+.focus-visible\:ring-offset-background:focus-visible {
+  --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
 
 .active\:border-action-button-icon-active-pressed:active {
@@ -5527,41 +5294,6 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-active-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.active\:border-error-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-error-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-info-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-primary-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-secondary-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-success-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-success-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-tertiary-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
-.active\:border-warning-pressed:active {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-warning-pressed) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .active\:bg-action-button-icon-active-pressed:active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-pressed-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5697,85 +5429,11 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.active\:bg-error-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-error-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-info-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-info-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .active\:bg-input-disable-bg:active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.active\:bg-primary-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-primary-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-secondary-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-secondary-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-success-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-success-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-tertiary-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-tertiary-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-transparent:active {
-  background-color: transparent;
-}
-
-.active\:bg-warning-hover-bg:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
-.active\:bg-warning-pressed:active {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .active\:fill-action-button-icon-active-pressed:active {
   fill: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * 1), transparent);
 }
@@ -5884,34 +5542,6 @@ body {
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
 
-.active\:fill-error-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-error-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-info-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-info-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-primary-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-secondary-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-success-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-success-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-tertiary-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * 1), transparent);
-}
-
-.active\:fill-warning-pressed:active {
-  fill: color-mix(in srgb, var(--state-color-warning-pressed) calc(100% * 1), transparent);
-}
-
 .active\:text-action-button-icon-active-pressed:active {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6047,16 +5677,6 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.active\:text-error-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-error-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.active\:text-info-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-info-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .active\:text-input-disable-text:active {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6067,29 +5687,9 @@ body {
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.active\:text-primary-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.active\:text-secondary-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.active\:text-success-pressed:active {
+.active\:text-text-dark:active {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-success-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.active\:text-tertiary-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
-.active\:text-warning-pressed:active {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-pressed) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .active\:ring-input-disable-stroke:active {
@@ -6330,10 +5930,6 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-disabled-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.disabled\:bg-transparent:disabled {
-  background-color: transparent;
-}
-
 .disabled\:fill-button-error-flat-disabled:disabled {
   fill: color-mix(in srgb, var(--button-error-flat-disabled-text) calc(100% * 1), transparent);
 }
@@ -6527,6 +6123,10 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-disabled-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
   top: 0.5rem;
 }
@@ -6661,16 +6261,14 @@ body {
   opacity: 0.7;
 }
 
-.aria-disabled\:pointer-events-none[aria-disabled="true"] {
-  pointer-events: none;
-}
-
-.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
-  cursor: not-allowed;
+.data-\[state\=checked\]\:translate-x-4[data-state=checked] {
+  --tw-translate-x: 1rem;
+  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));
 }
 
-.aria-disabled\:opacity-50[aria-disabled="true"] {
-  opacity: 0.5;
+.data-\[state\=unchecked\]\:-translate-x-\[2px\][data-state=unchecked] {
+  --tw-translate-x: -2px;
+  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-\[loading\=true\]\:border-button-error-flat-active[data-loading=true] {
@@ -6893,6 +6491,10 @@ body {
   background-color: color-mix(in srgb, var(--state-color-primary-default) 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);
+}
+
 .data-\[state\=open\]\:bg-primary[data-state=open] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -6900,7 +6502,16 @@ body {
 
 .data-\[state\=selected\]\:bg-grey-20[data-state=selected] {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked] {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.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-\[loading\=true\]\:fill-button-error-flat-active[data-loading=true] {
@@ -7173,11 +6784,26 @@ body {
   height: 1.5rem;
 }
 
+.\[\&_svg\]\:size-\[14px\] svg {
+  width: 14px;
+  height: 14px;
+}
+
 .\[\&_svg\]\:size-\[18px\] svg {
   width: 18px;
   height: 18px;
 }
 
+.\[\&_svg\]\:size-\[22px\] svg {
+  width: 22px;
+  height: 22px;
+}
+
+.\[\&_svg\]\:size-\[32px\] svg {
+  width: 32px;
+  height: 32px;
+}
+
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }