@rovula/ui 0.0.26 → 0.0.28

package/dist/cjs/bundle.css

@@ -546,6 +546,9 @@ body {
 .pointer-events-none{
   pointer-events: none;
 }
+.pointer-events-auto{
+  pointer-events: auto;
+}
 .static{
   position: static;
 }
@@ -577,6 +580,9 @@ body {
 .-top-1\.5{
   top: -0.375rem;
 }
+.bottom-\[40px\]{
+  bottom: 40px;
+}
 .left-0{
   left: 0px;
 }
@@ -610,6 +616,9 @@ body {
 .top-4{
   top: 1rem;
 }
+.top-\[40px\]{
+  top: 40px;
+}
 .top-\[50\%\]{
   top: 50%;
 }
@@ -622,6 +631,9 @@ body {
 .z-50{
   z-index: 50;
 }
+.z-\[100\]{
+  z-index: 100;
+}
 .col-span-3{
   grid-column: span 3 / span 3;
 }
@@ -640,6 +652,9 @@ body {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.-mr-2{
+  margin-right: -0.5rem;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -649,6 +664,9 @@ body {
 .ml-4{
   margin-left: 1rem;
 }
+.ml-\[var\(--spacing-spacing-xl\)\]{
+  margin-left: var(--spacing-spacing-xl);
+}
 .ml-auto{
   margin-left: auto;
 }
@@ -774,6 +792,9 @@ body {
 .h-6{
   height: 1.5rem;
 }
+.h-60{
+  height: 15rem;
+}
 .h-\[120px\]{
   height: 120px;
 }
@@ -820,6 +841,9 @@ body {
 .max-h-60{
   max-height: 15rem;
 }
+.max-h-screen{
+  max-height: 100vh;
+}
 .w-1\/2{
   width: 50%;
 }
@@ -1005,6 +1029,9 @@ body {
 .gap-6{
   gap: 1.5rem;
 }
+.gap-\[2px\]{
+  gap: 2px;
+}
 .gap-x-\[var\(--navbar-gap\)\]{
   -moz-column-gap: var(--navbar-gap);
        column-gap: var(--navbar-gap);
@@ -1032,9 +1059,15 @@ body {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.self-center{
+  align-self: center;
+}
 .self-stretch{
   align-self: stretch;
 }
+.justify-self-center{
+  justify-self: center;
+}
 .overflow-auto{
   overflow: auto;
 }
@@ -1055,6 +1088,9 @@ body {
 .rounded{
   border-radius: 0.25rem;
 }
+.rounded-\[var\(--spacing-spacing-xxs\2c 2px\)\]{
+  border-radius: var(--spacing-spacing-xxs,2px);
+}
 .rounded-full{
   border-radius: 9999px;
 }
@@ -1246,6 +1282,14 @@ 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-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);
@@ -1258,17 +1302,13 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.border-primary-30{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--primary-ramps-primary-30) 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-state-disable-solid{
+.border-success-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--state-color-success-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 .border-surface{
   --tw-border-opacity: 1;
@@ -1277,6 +1317,10 @@ body {
 .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));
 }
@@ -1355,10 +1399,6 @@ body {
   --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));
@@ -1447,6 +1487,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-common-black{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--common-black) 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-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1455,10 +1503,6 @@ body {
   --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);
-}
 .bg-grey2-700{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1467,6 +1511,10 @@ 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-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-disable-bg{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1495,6 +1543,18 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-secondary-hover{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-state-disable-solid{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-transparent-8{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-surface{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1502,6 +1562,10 @@ body {
 .bg-transparent{
   background-color: 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{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1614,9 +1678,6 @@ body {
 .fill-primary{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
-.fill-state-disable-solid{
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
-}
 .p-0{
   padding: 0px;
 }
@@ -2131,6 +2192,10 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-warning-solid-default-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.text-common-white{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-text-opacity)), transparent);
+}
 .text-current{
   color: currentColor;
 }
@@ -2177,10 +2242,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-foreground{
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
-}
 .text-secondary{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -2193,10 +2254,6 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.text-state-disable-solid{
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
-}
 .text-success{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -2633,6 +2690,10 @@ body {
   --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\: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);
@@ -3059,9 +3120,6 @@ body {
 .focus-visible\:ring-offset-2:focus-visible{
   --tw-ring-offset-width: 2px;
 }
-.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;
   border-color: color-mix(in srgb, var(--action-button-icon-active-pressed-border) calc(100% * var(--tw-border-opacity)), transparent);
@@ -3739,9 +3797,6 @@ body {
 .disabled\:fill-button-warning-solid-disabled:disabled{
   fill: color-mix(in srgb, var(--button-warning-solid-disabled-text) calc(100% * 1), transparent);
 }
-.disabled\:fill-state-disable-solid:disabled{
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
-}
 .disabled\:text-button-error-flat-disabled:disabled{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-disabled-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -3826,9 +3881,22 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-warning-solid-disabled-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.disabled\:text-state-disable-outline:disabled{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity)), transparent);
+}
 .disabled\:opacity-50:disabled{
   opacity: 0.5;
 }
+.group:hover .group-hover\:ring{
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.group:disabled .group-disabled\: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);
+}
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
   top: 0.5rem;
 }
@@ -3946,6 +4014,25 @@ body {
   --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-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{
+  --tw-translate-x: 0px;
+  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-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end]{
+  --tw-translate-x: var(--radix-toast-swipe-end-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-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move]{
+  --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;
+}
+.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-\[loading\=true\]\:border-button-error-flat-active[data-loading=true]{
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-error-flat-active-border) calc(100% * var(--tw-border-opacity)), transparent);
@@ -4030,13 +4117,16 @@ 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-primary[data-state=checked]{
+.data-\[state\=checked\]\:border-secondary[data-state=checked]{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--state-color-secondary-default) 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;
 }
+.data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
+}
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4124,9 +4214,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-primary[data-state=checked]{
+.data-\[state\=checked\]\:bg-secondary[data-state=checked]{
   --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(--state-color-secondary-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);
@@ -4146,6 +4236,9 @@ 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-\[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);
 }
@@ -4212,6 +4305,10 @@ 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-\[loading\=true\]\:text-button-error-flat-active[data-loading=true]{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4299,19 +4396,52 @@ body {
 .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
   color: var(--dropdown-menu-selected-text);
 }
-.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{
+.data-\[state\=checked\]\:text-secondary[data-state=checked]{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
+}
+.data-\[state\=checked\]\:text-secondary-foreground[data-state=checked]{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 .data-\[state\=open\]\:text-primary-foreground[data-state=open]{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.data-\[swipe\=move\]\:transition-none[data-swipe=move]{
+  transition-property: none;
+}
 .data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked']{
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
+.hover\:data-\[state\=checked\]\:border-secondary-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);
+}
+.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{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-secondary-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;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+}
+.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+}
 @media (min-width: 640px){
 
   .sm\:mt-0{
@@ -4330,6 +4460,10 @@ body {
     justify-content: flex-end;
   }
 
+  .sm\:justify-stretch{
+    justify-content: stretch;
+  }
+
   .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -4344,6 +4478,20 @@ body {
     text-align: left;
   }
 }
+@media (min-width: 768px){
+
+  .md\:left-\[40px\]{
+    left: 40px;
+  }
+
+  .md\:right-\[40px\]{
+    right: 40px;
+  }
+
+  .md\:w-auto{
+    width: auto;
+  }
+}
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]){
   width: 1rem;
 }