@rovula/ui 0.0.21 → 0.0.23

package/dist/cjs/bundle.css

@@ -568,6 +568,9 @@ body {
   top: 0px;
   bottom: 0px;
 }
+.-bottom-\[1px\]{
+  bottom: -1px;
+}
 .-top-1{
   top: -0.25rem;
 }
@@ -715,6 +718,10 @@ body {
   width: 1.75rem;
   height: 1.75rem;
 }
+.size-8{
+  width: 2rem;
+  height: 2rem;
+}
 .size-9{
   width: 2.25rem;
   height: 2.25rem;
@@ -741,6 +748,12 @@ body {
 .h-12{
   height: 3rem;
 }
+.h-2{
+  height: 0.5rem;
+}
+.h-3{
+  height: 0.75rem;
+}
 .h-4{
   height: 1rem;
 }
@@ -756,21 +769,15 @@ body {
 .h-\[160px\]{
   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;
 }
@@ -780,9 +787,6 @@ body {
 .h-\[54px\]{
   height: 54px;
 }
-.h-\[56px\]{
-  height: 56px;
-}
 .h-\[64px\]{
   height: 64px;
 }
@@ -823,9 +827,6 @@ body {
 .w-\[100px\]{
   width: 100px;
 }
-.w-\[18px\]{
-  width: 18px;
-}
 .w-\[200px\]{
   width: 200px;
 }
@@ -835,30 +836,18 @@ body {
 .w-\[24px\]{
   width: 24px;
 }
-.w-\[30px\]{
-  width: 30px;
-}
 .w-\[32px\]{
   width: 32px;
 }
-.w-\[38px\]{
-  width: 38px;
-}
 .w-\[400px\]{
   width: 400px;
 }
 .w-\[40px\]{
   width: 40px;
 }
-.w-\[46px\]{
-  width: 46px;
-}
 .w-\[48px\]{
   width: 48px;
 }
-.w-\[56px\]{
-  width: 56px;
-}
 .w-\[64px\]{
   width: 64px;
 }
@@ -883,6 +872,9 @@ body {
 .shrink-0{
   flex-shrink: 0;
 }
+.grow{
+  flex-grow: 1;
+}
 .caption-bottom{
   caption-side: bottom;
 }
@@ -901,6 +893,9 @@ body {
   --tw-rotate: 180deg;
   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{
@@ -913,15 +908,19 @@ body {
 .cursor-pointer{
   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{
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -947,6 +946,9 @@ body {
 .items-center{
   align-items: center;
 }
+.justify-start{
+  justify-content: flex-start;
+}
 .justify-end{
   justify-content: flex-end;
 }
@@ -956,6 +958,9 @@ body {
 .justify-between{
   justify-content: space-between;
 }
+.gap-0{
+  gap: 0px;
+}
 .gap-1{
   gap: 0.25rem;
 }
@@ -1030,9 +1035,6 @@ body {
 .rounded-full{
   border-radius: 9999px;
 }
-.rounded-lg{
-  border-radius: var(--radius-radius-l);
-}
 .rounded-md{
   border-radius: var(--radius-radius-m);
 }
@@ -1045,6 +1047,9 @@ body {
 .rounded-xl{
   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;
@@ -1063,14 +1068,20 @@ body {
 .border-0{
   border-width: 0px;
 }
+.border-2{
+  border-width: 2px;
+}
+.border-\[3px\]{
+  border-width: 3px;
+}
 .border-b{
   border-bottom-width: 1px;
 }
 .border-b-2{
   border-bottom-width: 2px;
 }
-.border-b-\[3px\]{
-  border-bottom-width: 3px;
+.border-b-\[1px\]{
+  border-bottom-width: 1px;
 }
 .border-l{
   border-left-width: 1px;
@@ -1124,6 +1135,10 @@ body {
   --tw-border-opacity: 1;
   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);
@@ -1208,22 +1223,6 @@ 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-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);
@@ -1240,61 +1239,21 @@ body {
   --tw-border-opacity: 1;
   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));
 }
@@ -1352,6 +1311,10 @@ body {
   --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-popup{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1452,14 +1415,14 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-warning-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-error-default{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-default) 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-50{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--grey-grey-50) 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);
@@ -1472,10 +1435,6 @@ body {
   --tw-bg-opacity: 1;
   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);
@@ -1488,10 +1447,6 @@ body {
   --tw-bg-opacity: 1;
   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);
@@ -1500,29 +1455,21 @@ body {
   --tw-bg-opacity: 1;
   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{
   --tw-bg-opacity: 1;
   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));
@@ -1623,18 +1570,6 @@ body {
 .fill-error{
   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;
 }
@@ -1647,39 +1582,9 @@ body {
 .fill-primary{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
-.fill-primary-default{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
-}
-.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;
 }
@@ -1707,17 +1612,10 @@ body {
 .p-8{
   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;
@@ -1750,10 +1648,22 @@ body {
   padding-left: var(--spacing-spacing-m);
   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;
@@ -1778,6 +1688,26 @@ body {
   padding-top: 1.5rem;
   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;
 }
@@ -1826,13 +1756,6 @@ body {
 .align-middle{
   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);
@@ -1932,6 +1855,21 @@ body {
   line-height: var(--small5-line-height, 12px);
   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);
@@ -1981,9 +1919,6 @@ body {
 .leading-none{
   line-height: 1;
 }
-.tracking-\[\.02857em\]{
-  letter-spacing: .02857em;
-}
 .tracking-tight{
   letter-spacing: -0.025em;
 }
@@ -2135,14 +2070,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -2159,13 +2086,8 @@ body {
   --tw-text-opacity: 1;
   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{
   --tw-text-opacity: 1;
@@ -2187,10 +2109,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -2203,10 +2121,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -2219,14 +2133,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -2235,25 +2141,25 @@ body {
   --tw-text-opacity: 1;
   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{
   --tw-text-opacity: 1;
@@ -2262,9 +2168,6 @@ body {
 .underline{
   text-decoration-line: underline;
 }
-.no-underline{
-  text-decoration-line: none;
-}
 .underline-offset-4{
   text-underline-offset: 4px;
 }
@@ -2291,9 +2194,9 @@ body {
 .outline{
   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);
 }
 .ring-1{
@@ -2320,6 +2223,10 @@ body {
   --tw-ring-opacity: 1;
   --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);
 }
@@ -2352,6 +2259,11 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   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;
 }
@@ -2472,6 +2384,21 @@ body {
   line-height: var(--small5-line-height, 12px);
   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);
@@ -2622,38 +2549,10 @@ 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-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);
@@ -2762,34 +2661,14 @@ body {
   --tw-bg-opacity: 1;
   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);
@@ -2798,37 +2677,6 @@ body {
   --tw-bg-opacity: 1;
   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);
 }
@@ -2910,30 +2758,9 @@ body {
 .hover\:fill-button-warning-solid-hover:hover{
   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);
@@ -3042,14 +2869,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -3058,25 +2877,9 @@ body {
   --tw-text-opacity: 1;
   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{
-  --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{
+.hover\:text-text-grey-dark: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{
   opacity: 1;
@@ -3166,10 +2969,8 @@ body {
 .focus-visible\:ring-offset-2:focus-visible{
   --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{
   --tw-border-opacity: 1;
@@ -3279,34 +3080,6 @@ body {
   --tw-border-opacity: 1;
   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);
@@ -3415,69 +3188,10 @@ body {
   --tw-bg-opacity: 1;
   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);
 }
@@ -3559,27 +3273,6 @@ body {
 .active\:fill-button-warning-solid-active:active{
   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);
@@ -3688,14 +3381,6 @@ body {
   --tw-text-opacity: 1;
   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);
@@ -3704,25 +3389,9 @@ body {
   --tw-text-opacity: 1;
   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{
+.active\:text-text-dark: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{
-  --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{
   --tw-ring-opacity: 1;
@@ -3914,9 +3583,6 @@ body {
   --tw-bg-opacity: 1;
   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);
 }
@@ -4067,6 +3733,9 @@ body {
   --tw-text-opacity: 1;
   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;
 }
@@ -4173,14 +3842,13 @@ body {
 .peer:disabled ~ .peer-disabled\:opacity-70{
   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]{
   --tw-border-opacity: 1;
@@ -4358,13 +4026,23 @@ body {
   --tw-bg-opacity: 1;
   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);
 }
 .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]{
   fill: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * 1), transparent);
@@ -4583,10 +4261,22 @@ body {
   width: 1.5rem;
   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;
 }