@moduix/react 2.0.0 → 2.1.0

package/dist/components/card/Card.css

@@ -156,7 +156,7 @@
     }
 
     &:focus-visible:after {
-      outline: var(--card-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--card-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
         var(--card-focus-ring-color, var(--color-ring));
       outline-offset: var(--card-focus-ring-offset, var(--border-width-sm));
     }

package/dist/components/carousel/Carousel.css

@@ -59,8 +59,8 @@
   }
 
   .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
-    width: var(--carousel-control-size, 2.5rem);
-    height: var(--carousel-control-size, 2.5rem);
+    width: var(--carousel-control-size, var(--size-md));
+    height: var(--carousel-control-size, var(--size-md));
     border: var(--border-width-sm) solid
       var(--carousel-control-border-color, color-mix(in oklab, var(--color-border) 88%, black 12%));
     border-radius: var(--radius-full);
@@ -79,8 +79,8 @@
     display: inline-flex;
 
     & svg {
-      width: 1rem;
-      height: 1rem;
+      width: var(--carousel-control-icon-size, var(--spacing-4));
+      height: var(--carousel-control-icon-size, var(--spacing-4));
     }
 
     &:not(:disabled, [data-disabled]):hover {
@@ -91,9 +91,9 @@
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--border-width-md)) solid
-        var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, 2px);
+      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--carousel-focus-ring-color, var(--color-ring));
+      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {
@@ -134,8 +134,8 @@
   }
 
   .NQiVeG_indicator {
-    width: var(--carousel-indicator-size, .5rem);
-    height: var(--carousel-indicator-size, .5rem);
+    width: var(--carousel-indicator-size, var(--spacing-2));
+    height: var(--carousel-indicator-size, var(--spacing-2));
     border-radius: var(--radius-full);
     background-color: var(--carousel-indicator-bg, color-mix(in oklab, var(--color-muted) 84%, var(--color-background) 16%));
     cursor: pointer;
@@ -152,13 +152,13 @@
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--border-width-md)) solid
-        var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, 2px);
+      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--carousel-focus-ring-color, var(--color-ring));
+      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-current] {
-      width: calc(var(--carousel-indicator-size, .5rem) * 3);
+      width: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
       background-color: var(--carousel-indicator-bg-current, var(--color-primary));
       opacity: 1;
     }
@@ -171,17 +171,17 @@
 
   .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator {
     &[data-current] {
-      width: var(--carousel-indicator-size, .5rem);
-      height: calc(var(--carousel-indicator-size, .5rem) * 3);
+      width: var(--carousel-indicator-size, var(--spacing-2));
+      height: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
     }
   }
 
   .NQiVeG_autoplayTrigger {
-    min-width: 3rem;
+    min-width: var(--carousel-autoplay-trigger-min-width, calc(var(--size-md) + var(--spacing-3)));
   }
 
   .NQiVeG_autoplayIndicator {
-    min-width: 1rem;
+    min-width: var(--carousel-autoplay-indicator-min-width, var(--spacing-4));
     font-size: var(--text-xs);
     font-weight: var(--weight-medium);
     line-height: var(--line-height-text-xs);

package/dist/components/checkbox/Checkbox.css

@@ -44,14 +44,14 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--checkbox-focus-ring-width, var(--border-width-sm)) solid
-        var(--checkbox-focus-ring-color, var(--color-ring));
+      outline: var(--checkbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--checkbox-focus-ring-color, var(--color-ring));
       outline-offset: var(--checkbox-focus-ring-offset, var(--border-width-sm));
     }
 
     &[data-invalid] {
       border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
-      color: var(--checkbox-color-invalid, var(--color-primary-foreground));
+      color: var(--checkbox-color-invalid, var(--color-destructive-foreground));
 
       &[data-state="checked"], &[data-state="indeterminate"] {
         border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
@@ -71,28 +71,28 @@
   }
 
   .NxmH7W_root[data-size="xs"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xs, .875rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-xs, .5rem);
+    --_checkbox-size: var(--checkbox-size-xs, var(--spacing-3-5));
+    --_checkbox-icon-size: var(--checkbox-icon-size-xs, var(--spacing-2));
   }
 
   .NxmH7W_root[data-size="sm"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-sm, 1rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-sm, .625rem);
+    --_checkbox-size: var(--checkbox-size-sm, var(--spacing-4));
+    --_checkbox-icon-size: var(--checkbox-icon-size-sm, var(--spacing-2-5));
   }
 
   .NxmH7W_root[data-size="md"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-md, 1.25rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-md, .75rem);
+    --_checkbox-size: var(--checkbox-size-md, var(--spacing-5));
+    --_checkbox-icon-size: var(--checkbox-icon-size-md, var(--spacing-3));
   }
 
   .NxmH7W_root[data-size="lg"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-lg, 1.5rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-lg, .875rem);
+    --_checkbox-size: var(--checkbox-size-lg, var(--size-xs));
+    --_checkbox-icon-size: var(--checkbox-icon-size-lg, var(--spacing-3-5));
   }
 
   .NxmH7W_root[data-size="xl"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xl, 1.75rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-xl, 1rem);
+    --_checkbox-size: var(--checkbox-size-xl, var(--spacing-7));
+    --_checkbox-icon-size: var(--checkbox-icon-size-xl, var(--spacing-4));
   }
 
   .NxmH7W_indicator {

package/dist/components/clipboard/Clipboard.css

@@ -1,6 +1,6 @@
 @layer ui.components {
   .eM1-oW_root {
-    gap: var(--clipboard-gap, .375rem);
+    gap: var(--clipboard-gap, var(--spacing-1-5));
     width: var(--clipboard-width, 100%);
     max-width: var(--clipboard-max-width, none);
     color: var(--clipboard-color, var(--color-foreground));
@@ -26,18 +26,18 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-lg)));
+    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-md)));
     border: var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))
       solid var(--clipboard-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--clipboard-input-radius, var(--input-radius, var(--radius-md)));
-    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, .5rem));
-    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, .875rem));
+    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, var(--spacing-1)));
+    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, var(--spacing-3-5)));
     background-color: var(--clipboard-input-bg, var(--input-bg, var(--color-background)));
     color: var(--clipboard-input-color, var(--input-color, var(--color-foreground)));
     font: inherit;
     font-size: var(--clipboard-input-font-size, var(--input-font-size-md, var(--text-md)));
     line-height: var(--clipboard-input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--border-width-sm)))
+    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--clipboard-input-border-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))))
       solid transparent;
     outline-offset: calc(var(--clipboard-input-focus-ring-offset, var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))) *
         -1);
@@ -73,8 +73,8 @@
     justify-content: center;
     align-items: center;
     gap: var(--clipboard-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-lg)));
-    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-md)));
+    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     border: var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--clipboard-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
@@ -99,8 +99,8 @@
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
-      height: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
+      width: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
+      height: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
       flex-shrink: 0;
     }
 
@@ -111,7 +111,7 @@
     }
 
     &:focus-visible {
-      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
         solid
         var(--clipboard-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
       outline-offset: calc(var(--clipboard-trigger-focus-ring-offset, var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *

package/dist/components/close-button/CloseButton.css

@@ -1,8 +1,8 @@
 @layer ui.components {
   ._8WDg2W_root {
     box-sizing: border-box;
-    width: var(--close-button-size, 28px);
-    height: var(--close-button-size, 28px);
+    width: var(--close-button-size, var(--spacing-7));
+    height: var(--close-button-size, var(--spacing-7));
     background-color: var(--close-button-bg, transparent);
     border-radius: var(--close-button-radius, var(--radius-sm));
     color: var(--close-button-color, var(--color-muted-foreground));
@@ -22,8 +22,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--close-button-icon-size, 12px);
-      height: var(--close-button-icon-size, 12px);
+      width: var(--close-button-icon-size, var(--spacing-3));
+      height: var(--close-button-icon-size, var(--spacing-3));
       flex-shrink: 0;
     }
 
@@ -35,9 +35,9 @@
     }
 
     &:focus-visible {
-      outline: var(--close-button-focus-ring-width, var(--border-width-md)) solid
-        var(--close-button-focus-ring-color, var(--color-ring));
-      outline-offset: var(--close-button-focus-ring-offset, 2px);
+      outline: var(--close-button-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--close-button-focus-ring-color, var(--color-ring));
+      outline-offset: var(--close-button-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-disabled] {

package/dist/components/collapsible/Collapsible.css

@@ -62,8 +62,8 @@
     display: flex;
 
     &:focus-visible {
-      outline: var(--collapsible-focus-ring-width, var(--border-width-sm)) solid
-        var(--collapsible-focus-ring-color, var(--color-ring));
+      outline: var(--collapsible-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--collapsible-focus-ring-color, var(--color-ring));
       outline-offset: var(--collapsible-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -87,8 +87,8 @@
 
   .CaaIva_indicator {
     box-sizing: border-box;
-    width: var(--collapsible-indicator-size, .75rem);
-    height: var(--collapsible-indicator-size, .75rem);
+    width: var(--collapsible-indicator-size, var(--spacing-3));
+    height: var(--collapsible-indicator-size, var(--spacing-3));
     transition: transform var(--collapsible-indicator-transition, var(--transition-default));
     flex-shrink: 0;
     justify-content: center;

package/dist/components/color-picker/ColorPicker.css

@@ -68,16 +68,18 @@
 
   .kgcaIq_trigger {
     box-sizing: border-box;
-    width: var(--color-picker-trigger-size, var(--size-lg));
-    height: var(--color-picker-trigger-size, var(--size-lg));
+    width: var(--color-picker-trigger-size, var(--size-md));
+    height: var(--color-picker-trigger-size, var(--size-md));
     border: var(--color-picker-border-width, var(--border-width-sm)) solid
       var(--color-picker-border-color, var(--color-border));
     border-radius: var(--color-picker-radius, var(--radius-md));
     padding: var(--color-picker-trigger-padding, var(--spacing-1));
     background: var(--color-picker-control-bg, var(--color-background));
     color: var(--color-picker-color, var(--color-foreground));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default)),
@@ -104,15 +106,15 @@
 
     &[data-fit-content] {
       width: auto;
-      min-width: var(--color-picker-trigger-size, var(--size-lg));
+      min-width: var(--color-picker-trigger-size, var(--size-md));
       padding-inline: var(--color-picker-trigger-fit-content-padding-x, var(--spacing-3));
       gap: var(--color-picker-trigger-fit-content-gap, var(--spacing-2));
       display: inline-flex;
     }
 
     &[data-fit-content] [data-slot="color-picker-transparency-grid"], &[data-fit-content] [data-slot="color-picker-value-swatch"] {
-      width: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
-      height: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
+      width: var(--color-picker-trigger-fit-content-swatch-size, var(--spacing-4));
+      height: var(--color-picker-trigger-fit-content-swatch-size, var(--spacing-4));
       flex-shrink: 0;
       grid-area: auto;
     }
@@ -181,8 +183,8 @@
 
   .kgcaIq_thumb {
     box-sizing: border-box;
-    width: var(--color-picker-thumb-size, 1rem);
-    height: var(--color-picker-thumb-size, 1rem);
+    width: var(--color-picker-thumb-size, var(--spacing-4));
+    height: var(--color-picker-thumb-size, var(--spacing-4));
     border-radius: var(--color-picker-thumb-radius, var(--radius-full));
     background: var(--color-picker-thumb-bg, var(--color-background));
     box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
@@ -262,7 +264,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--color-picker-input-height, var(--size-lg));
+    height: var(--color-picker-input-height, var(--size-md));
     border: var(--color-picker-border-width, var(--border-width-sm)) solid
       var(--color-picker-border-color, var(--color-border));
     border-radius: var(--color-picker-radius, var(--radius-md));
@@ -272,8 +274,10 @@
     font: inherit;
     font-size: var(--color-picker-input-font-size, var(--text-sm));
     line-height: var(--color-picker-input-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default));
     appearance: textfield;
@@ -315,8 +319,8 @@
 
   .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
     box-sizing: border-box;
-    height: var(--color-picker-action-size, var(--size-lg));
-    min-width: var(--color-picker-action-size, var(--size-lg));
+    height: var(--color-picker-action-size, var(--size-md));
+    min-width: var(--color-picker-action-size, var(--size-md));
     justify-content: center;
     align-items: center;
     gap: var(--color-picker-action-gap, var(--spacing-2));
@@ -329,8 +333,10 @@
     font: inherit;
     font-size: var(--color-picker-action-font-size, var(--text-sm));
     line-height: var(--color-picker-action-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default)),
@@ -341,8 +347,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--color-picker-icon-size, 1rem);
-      height: var(--color-picker-icon-size, 1rem);
+      width: var(--color-picker-icon-size, var(--spacing-4));
+      height: var(--color-picker-icon-size, var(--spacing-4));
     }
 
     &:is(:focus-visible, [data-focus]) {
@@ -383,7 +389,8 @@
     display: inline-flex;
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--color-picker-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--color-picker-focus-ring-color, var(--color-ring));
     }
 
@@ -395,8 +402,8 @@
 
   .kgcaIq_swatch {
     box-sizing: border-box;
-    width: var(--color-picker-swatch-size, 2rem);
-    height: var(--color-picker-swatch-size, 2rem);
+    width: var(--color-picker-swatch-size, var(--size-sm));
+    height: var(--color-picker-swatch-size, var(--size-sm));
     border-radius: inherit;
     box-shadow: inset 0 0 0 var(--color-picker-swatch-border-width, var(--border-width-sm))
       var(--color-picker-swatch-border-color, oklab(0% none none / .14));
@@ -409,7 +416,7 @@
 
   .kgcaIq_swatchIndicator {
     color: var(--color-picker-swatch-indicator-color, white);
-    filter: drop-shadow(0 1px 1px #00000073);
+    filter: var(--color-picker-swatch-indicator-shadow, drop-shadow(0 1px 1px #00000073));
     pointer-events: none;
     justify-content: center;
     align-items: center;
@@ -418,8 +425,8 @@
     inset: 0;
 
     & > svg {
-      width: var(--color-picker-swatch-indicator-size, 1rem);
-      height: var(--color-picker-swatch-indicator-size, 1rem);
+      width: var(--color-picker-swatch-indicator-size, var(--spacing-4));
+      height: var(--color-picker-swatch-indicator-size, var(--spacing-4));
     }
 
     [data-state="checked"] > &, &[data-state="checked"] {

package/dist/components/combobox/Combobox.css

@@ -30,7 +30,7 @@
     box-sizing: border-box;
     width: var(--combobox-width, 16rem);
     max-width: var(--combobox-max-width, 100%);
-    gap: var(--combobox-root-gap, .375rem);
+    gap: var(--combobox-root-gap, var(--spacing-1-5));
     min-width: 0;
     color: var(--combobox-color, var(--color-foreground));
     flex-direction: column;
@@ -59,8 +59,9 @@
     width: 100%;
     min-width: 0;
     color: var(--combobox-color, var(--color-foreground));
-    outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--combobox-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     transition: background-color var(--combobox-transition, var(--transition-default)),
       border-color var(--combobox-transition, var(--transition-default)),
       outline-color var(--combobox-transition, var(--transition-default));
@@ -68,13 +69,7 @@
     display: flex;
     position: relative;
 
-    &[data-state="open"] {
-      background-color: var(--combobox-bg-active, var(--color-muted));
-      border-color: var(--combobox-focus-ring-color, var(--color-ring));
-      outline-color: var(--combobox-focus-ring-color, var(--color-ring));
-    }
-
-    &[data-focus] {
+    &[data-state="open"], &[data-focus] {
       border-color: var(--combobox-focus-ring-color, var(--color-ring));
       outline-color: var(--combobox-focus-ring-color, var(--color-ring));
     }
@@ -87,24 +82,16 @@
     &[data-disabled] {
       opacity: var(--combobox-disabled-opacity, var(--opacity-disabled));
     }
-
-    &:not([data-disabled]) {
-      @media (hover: hover) {
-        &:hover:not(:has(.mcW7mG_clearTrigger:hover)) {
-          background-color: var(--combobox-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .mcW7mG_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--combobox-control-height, var(--size-lg));
+    height: var(--combobox-control-height, var(--size-md));
     border-radius: inherit;
-    padding-inline: var(--combobox-input-padding-x-start, .875rem)
-      var(--combobox-input-padding-x-end, .875rem);
+    padding-inline: var(--combobox-input-padding-x-start, var(--spacing-3-5))
+      var(--combobox-input-padding-x-end, var(--spacing-3-5));
     color: inherit;
     font: inherit;
     background: none;
@@ -127,8 +114,8 @@
 
   .mcW7mG_trigger {
     box-sizing: border-box;
-    width: var(--combobox-action-size, 1.5rem);
-    height: var(--combobox-action-size, 1.5rem);
+    width: var(--combobox-action-size, var(--size-xs));
+    height: var(--combobox-action-size, var(--size-xs));
     border-radius: var(--combobox-action-radius, var(--radius-sm));
     background: var(--combobox-action-bg, transparent);
     color: var(--combobox-icon-color, var(--color-muted-foreground));
@@ -149,14 +136,14 @@
     transform: translateY(-50%);
 
     & > svg {
-      width: var(--combobox-icon-size, 1rem);
-      height: var(--combobox-icon-size, 1rem);
+      width: var(--combobox-icon-size, var(--spacing-4));
+      height: var(--combobox-icon-size, var(--spacing-4));
       display: block;
     }
 
     &:focus-visible {
-      outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid
-        var(--combobox-focus-ring-color, var(--color-ring));
+      outline: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--combobox-focus-ring-color, var(--color-ring));
       outline-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -175,25 +162,25 @@
   }
 
   .mcW7mG_trigger {
-    right: var(--combobox-action-offset-right, .5rem);
+    inset-inline-end: var(--combobox-action-offset-right, var(--spacing-2));
   }
 
   .mcW7mG_clearTrigger {
-    --close-button-size: var(--combobox-action-size, 1.5rem);
-    --close-button-icon-size: var(--combobox-icon-size, 1rem);
+    --close-button-size: var(--combobox-action-size, var(--size-xs));
+    --close-button-icon-size: var(--combobox-icon-size, var(--spacing-4));
     --close-button-radius: var(--combobox-action-radius, var(--radius-sm));
     --close-button-bg: var(--combobox-action-bg, transparent);
     --close-button-bg-hover: var(--combobox-action-bg-hover, var(--color-muted));
     --close-button-color: var(--combobox-icon-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--combobox-action-color-hover, var(--color-foreground));
-    --close-button-focus-ring-width: var(--combobox-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-width: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)));
     --close-button-focus-ring-color: var(--combobox-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
     --close-button-transition: var(--combobox-transition, var(--transition-default));
     top: 50%;
-    right: calc(var(--combobox-action-offset-right, .5rem) + var(--combobox-action-size, 1.5rem) +
-        var(--combobox-action-gap, .125rem));
     position: absolute;
+    inset-inline-end: calc(var(--combobox-action-offset-right, var(--spacing-2)) +
+        var(--combobox-action-size, var(--size-xs)) + var(--combobox-action-gap, var(--spacing-0-5)));
     transform: translateY(-50%);
   }
 
@@ -211,7 +198,7 @@
     border: var(--combobox-content-border-width, var(--border-width-sm)) solid
       var(--combobox-content-border-color, var(--color-border));
     border-radius: var(--combobox-radius, var(--radius-md));
-    padding-block: var(--combobox-content-padding-y, var(--spacing-1));
+    padding-block: var(--combobox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--combobox-content-bg, var(--color-popover));
     box-shadow: var(--combobox-content-shadow, var(--shadow-lg));
     color: var(--combobox-content-color, var(--color-popover-foreground));
@@ -251,8 +238,8 @@
   }
 
   .mcW7mG_empty {
-    padding-block: var(--combobox-empty-padding-y, .75rem);
-    padding-inline: var(--combobox-empty-padding-x, 1rem);
+    padding-block: var(--combobox-empty-padding-y, var(--spacing-3));
+    padding-inline: var(--combobox-empty-padding-x, var(--spacing-4));
     color: var(--combobox-empty-color, var(--color-muted-foreground));
     font-size: var(--combobox-empty-font-size, var(--text-sm));
     line-height: var(--combobox-empty-line-height, var(--line-height-text-sm));
@@ -269,13 +256,13 @@
 
   .mcW7mG_itemGroupLabel {
     z-index: 1;
-    padding-block: var(--combobox-item-group-label-padding-y, .35rem);
-    padding-inline: var(--combobox-item-group-label-padding-x, .625rem);
+    padding-block: var(--combobox-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--combobox-item-group-label-padding-x, var(--spacing-2-5));
     background-color: var(--combobox-content-bg, var(--color-popover));
-    color: var(--combobox-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--combobox-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--combobox-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--combobox-item-group-label-line-height, var(--line-height-text-xs));
+    color: var(--combobox-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--combobox-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--combobox-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--combobox-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     position: sticky;
     top: 0;
   }
@@ -283,7 +270,7 @@
   .mcW7mG_item {
     box-sizing: border-box;
     width: calc(100% - var(--combobox-item-inset-x, var(--spacing-2)));
-    min-height: var(--combobox-item-min-height, 2rem);
+    min-height: var(--combobox-item-min-height, var(--popup-item-min-height, var(--size-sm)));
     justify-content: space-between;
     align-items: center;
     gap: var(--combobox-item-gap, var(--spacing-2));
@@ -291,13 +278,13 @@
     border: var(--combobox-item-border-width, 0) solid
       var(--combobox-item-border-color, transparent);
     border-radius: var(--combobox-item-radius, var(--radius-sm));
-    padding-block: var(--combobox-item-padding-y, var(--spacing-2));
-    padding-inline: var(--combobox-item-padding-x, .625rem);
+    padding-block: var(--combobox-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--combobox-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--combobox-item-bg, transparent);
     color: var(--combobox-item-color, var(--combobox-content-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--combobox-item-font-size, var(--text-sm));
-    line-height: var(--combobox-item-line-height, var(--line-height-text-sm));
+    font-size: var(--combobox-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--combobox-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     cursor: default;
     user-select: none;
     outline: 0;
@@ -329,8 +316,8 @@
   }
 
   .mcW7mG_itemIndicator {
-    width: var(--combobox-item-indicator-size, .75rem);
-    height: var(--combobox-item-indicator-size, .75rem);
+    width: var(--combobox-item-indicator-size, var(--spacing-3));
+    height: var(--combobox-item-indicator-size, var(--spacing-3));
     flex-shrink: 0;
     justify-content: center;
     align-items: center;