@moduix/react 2.0.0 → 2.1.0

package/dist/components/popover/Popover.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   .Qww_tG_trigger, .Qww_tG_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--popover-control-height, var(--size-lg));
-    padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
+    min-height: var(--popover-control-height, var(--size-md));
+    padding: var(--popover-control-padding-y, var(--spacing-1))
+      var(--popover-control-padding-x, var(--spacing-3-5));
     border: var(--popover-control-border-width, var(--border-width-sm)) solid
       var(--popover-control-border-color, var(--color-border));
     border-radius: var(--popover-control-radius, var(--radius-md));
@@ -33,9 +34,9 @@
     }
 
     &:focus-visible {
-      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm)))
+      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
         solid var(--popover-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--focus-ring-inset-width, var(--border-width-sm)))) *
           -1);
     }
 
@@ -52,7 +53,7 @@
   }
 
   .Qww_tG_content {
-    --popover-close-icon-size-effective: var(--popover-close-icon-size, 1.75rem);
+    --popover-close-icon-size-effective: var(--popover-close-icon-size, var(--spacing-7));
     --popover-close-icon-offset-effective: var(--popover-close-icon-offset, var(--spacing-3));
     --popover-header-padding-inline-end-effective: var(--popover-header-padding-inline-end, calc(var(--popover-close-icon-size-effective) + var(--popover-close-icon-offset-effective)));
     z-index: calc(var(--z-popup) + var(--layer-index, 0));
@@ -62,7 +63,7 @@
     min-width: min(var(--popover-min-width, 16rem), var(--available-width));
     max-width: min(var(--popover-max-width, 28rem), var(--available-width));
     max-height: min(var(--popover-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--popover-padding-y, 1rem) var(--popover-padding-x, 1rem);
+    padding: var(--popover-padding-y, var(--spacing-4)) var(--popover-padding-x, var(--spacing-4));
     border-radius: var(--popover-radius, var(--radius-md));
     background-color: var(--popover-bg, var(--color-popover));
     color: var(--popover-color, var(--color-popover-foreground));
@@ -94,7 +95,7 @@
   }
 
   .Qww_tG_arrow {
-    --arrow-size: var(--popover-arrow-size, .625rem);
+    --arrow-size: var(--popover-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--popover-bg, var(--color-popover));
   }
 
@@ -123,7 +124,7 @@
   .Qww_tG_closeIcon {
     --close-button-size: var(--popover-close-icon-size-effective);
     --close-button-radius: var(--popover-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--popover-close-icon-glyph-size, .875rem);
+    --close-button-icon-size: var(--popover-close-icon-glyph-size, var(--spacing-3-5));
     --close-button-bg: var(--popover-close-icon-bg, transparent);
     --close-button-bg-hover: var(--popover-close-icon-bg-hover, var(--color-accent));
     --close-button-color: var(--popover-close-icon-color, var(--color-muted-foreground));

package/dist/components/progress-circular/ProgressCircular.css

@@ -2,7 +2,7 @@
   .ElFLgq_root {
     box-sizing: border-box;
     justify-items: center;
-    gap: var(--progress-circular-gap, .5rem);
+    gap: var(--progress-circular-gap, var(--spacing-2));
     width: var(--progress-circular-root-width, max-content);
     color: var(--progress-circular-color, var(--color-foreground));
     display: inline-grid;
@@ -24,7 +24,7 @@
   }
 
   .ElFLgq_circle {
-    --size: var(--progress-circular-size, 3rem);
+    --size: var(--progress-circular-size, var(--size-xl));
     --thickness: var(--progress-circular-thickness, .4rem);
     display: block;
     overflow: visible;

package/dist/components/progress-linear/ProgressLinear.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .Z1JBTG_root {
     box-sizing: border-box;
-    gap: var(--progress-linear-gap, .5rem);
+    gap: var(--progress-linear-gap, var(--spacing-2));
     width: var(--progress-linear-width, 12rem);
     color: var(--progress-linear-color, var(--color-foreground));
     grid-template-columns: minmax(0, 1fr) auto;

package/dist/components/qr-code/QrCode.css

@@ -27,8 +27,8 @@
 
   .ZbLWjq_overlay {
     box-sizing: border-box;
-    width: var(--qr-code-overlay-size, 2.5rem);
-    height: var(--qr-code-overlay-size, 2.5rem);
+    width: var(--qr-code-overlay-size, var(--size-lg));
+    height: var(--qr-code-overlay-size, var(--size-lg));
     padding: var(--qr-code-overlay-padding, var(--spacing-1));
     border-radius: var(--qr-code-overlay-radius, var(--radius-sm));
     background-color: var(--qr-code-overlay-bg, var(--color-background));
@@ -49,8 +49,8 @@
     justify-content: center;
     align-items: center;
     gap: var(--qr-code-download-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--qr-code-download-trigger-height, var(--button-size-md, var(--size-lg)));
-    padding-inline: var(--qr-code-download-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    min-height: var(--qr-code-download-trigger-height, var(--button-size-md, var(--size-md)));
+    padding-inline: var(--qr-code-download-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     border: var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--qr-code-download-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
@@ -75,8 +75,8 @@
   }
 
   .ZbLWjq_downloadTrigger :where(svg) {
-    width: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
-    height: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
+    width: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, var(--spacing-4)));
+    height: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, var(--spacing-4)));
     flex-shrink: 0;
   }
 
@@ -87,7 +87,7 @@
   }
 
   .ZbLWjq_downloadTrigger:focus-visible {
-    outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+    outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
       solid
       var(--qr-code-download-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
     outline-offset: calc(var(--qr-code-download-trigger-focus-ring-offset, var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *

package/dist/components/radio-group/RadioGroup.css

@@ -83,8 +83,8 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--radio-focus-ring-width, var(--border-width-sm)) solid
-        var(--radio-focus-ring-color, var(--color-ring));
+      outline: var(--radio-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--radio-focus-ring-color, var(--color-ring));
       outline-offset: var(--radio-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -99,28 +99,28 @@
     }
 
     &[data-size="xs"] {
-      --_radio-size: var(--radio-size-xs, .875rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xs, .25rem);
+      --_radio-size: var(--radio-size-xs, var(--spacing-3-5));
+      --_radio-indicator-size: var(--radio-indicator-size-xs, var(--spacing-1));
     }
 
     &[data-size="sm"] {
-      --_radio-size: var(--radio-size-sm, 1rem);
-      --_radio-indicator-size: var(--radio-indicator-size-sm, .375rem);
+      --_radio-size: var(--radio-size-sm, var(--spacing-4));
+      --_radio-indicator-size: var(--radio-indicator-size-sm, var(--spacing-1-5));
     }
 
     &[data-size="md"] {
-      --_radio-size: var(--radio-size-md, 1.25rem);
-      --_radio-indicator-size: var(--radio-indicator-size-md, .5rem);
+      --_radio-size: var(--radio-size-md, var(--spacing-5));
+      --_radio-indicator-size: var(--radio-indicator-size-md, var(--spacing-2));
     }
 
     &[data-size="lg"] {
-      --_radio-size: var(--radio-size-lg, 1.5rem);
-      --_radio-indicator-size: var(--radio-indicator-size-lg, .625rem);
+      --_radio-size: var(--radio-size-lg, var(--size-xs));
+      --_radio-indicator-size: var(--radio-indicator-size-lg, var(--spacing-2-5));
     }
 
     &[data-size="xl"] {
-      --_radio-size: var(--radio-size-xl, 1.75rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xl, .75rem);
+      --_radio-size: var(--radio-size-xl, var(--spacing-7));
+      --_radio-indicator-size: var(--radio-indicator-size-xl, var(--spacing-3));
     }
   }
 

package/dist/components/rating-group/RatingGroup.css

@@ -6,23 +6,23 @@
     display: inline-flex;
 
     &[data-size="xs"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xs, .875rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-xs, var(--spacing-3-5));
     }
 
     &[data-size="sm"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-sm, 1rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-sm, var(--spacing-4));
     }
 
     &[data-size="md"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-md, 1.25rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-md, var(--spacing-5));
     }
 
     &[data-size="lg"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-lg, 1.5rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-lg, var(--spacing-6));
     }
 
     &[data-size="xl"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xl, 1.75rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-xl, var(--spacing-7));
     }
   }
 
@@ -79,8 +79,8 @@
   }
 
   .Jh_n9a_itemIndicator {
-    width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
-    height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
+    width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, var(--spacing-5)));
+    height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, var(--spacing-5)));
     color: var(--rating-group-active-color, var(--color-primary));
     justify-content: center;
     align-items: center;

package/dist/components/scroll-area/ScrollArea.css

@@ -41,9 +41,9 @@
     }
 
     &:focus-visible {
-      outline: var(--scroll-area-focus-ring-width, var(--border-width-sm)) solid
-        var(--scroll-area-focus-ring-color, var(--color-ring));
-      outline-offset: var(--scroll-area-focus-ring-offset, -1px);
+      outline: var(--scroll-area-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--scroll-area-focus-ring-color, var(--color-ring));
+      outline-offset: var(--scroll-area-focus-ring-offset, var(--focus-ring-inset-offset));
     }
   }
 
@@ -151,12 +151,12 @@
 
     &[data-orientation="vertical"] {
       width: 100%;
-      min-height: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-height: var(--scroll-area-thumb-min-size, var(--size-xs));
     }
 
     &[data-orientation="horizontal"] {
       height: 100%;
-      min-width: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-width: var(--scroll-area-thumb-min-size, var(--size-xs));
     }
   }
 

package/dist/components/segment-group/SegmentGroup.css

@@ -44,9 +44,9 @@
     justify-content: center;
     align-items: center;
     gap: var(--segment-group-item-gap, var(--spacing-2));
-    min-height: var(--segment-group-item-height, 2rem);
+    min-height: var(--segment-group-item-height, var(--size-sm));
     border-radius: var(--segment-group-item-radius, var(--radius-md));
-    padding-inline: var(--segment-group-item-padding-x, .875rem);
+    padding-inline: var(--segment-group-item-padding-x, var(--spacing-3-5));
     color: var(--segment-group-item-color, var(--color-muted-foreground));
     font-size: var(--segment-group-item-font-size, var(--text-sm));
     font-weight: var(--segment-group-item-font-weight, var(--weight-medium));
@@ -71,8 +71,8 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--segment-group-focus-ring-width, var(--border-width-sm)) solid
-        var(--segment-group-focus-ring-color, var(--color-ring));
+      outline: var(--segment-group-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--segment-group-focus-ring-color, var(--color-ring));
       outline-offset: var(--segment-group-focus-ring-offset, var(--border-width-sm));
     }
 

package/dist/components/select/Select.css

@@ -30,7 +30,7 @@
     box-sizing: border-box;
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
-    gap: var(--select-root-gap, .375rem);
+    gap: var(--select-root-gap, var(--spacing-1-5));
     min-width: 0;
     color: var(--select-color, var(--color-foreground));
     flex-direction: column;
@@ -68,19 +68,21 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--select-control-height, var(--size-lg));
+    height: var(--select-control-height, var(--size-md));
     border: var(--select-border-width, var(--border-width-sm)) solid
       var(--select-border-color, var(--color-border));
     border-radius: var(--select-radius, var(--radius-md));
-    padding-inline: var(--select-trigger-padding-x-start, .875rem)
-      calc(var(--select-action-offset-right, .5rem) + var(--select-action-size, 1.5rem) +
-          var(--select-trigger-padding-x-start, .875rem));
+    padding-inline: var(--select-trigger-padding-x-start, var(--spacing-3-5))
+      calc(var(--select-action-offset-right, var(--spacing-2)) +
+          var(--select-action-size, var(--size-xs)) +
+          var(--select-trigger-padding-x-start, var(--spacing-3-5)));
     background-color: var(--select-bg, var(--color-background));
     color: inherit;
     font: inherit;
     text-align: start;
-    outline: var(--select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     cursor: pointer;
     user-select: none;
     transition: background-color var(--select-transition, var(--transition-default)),
@@ -90,13 +92,13 @@
     align-items: center;
     margin: 0;
     display: inline-flex;
+    position: relative;
 
     &[data-placeholder-shown] {
       color: var(--select-placeholder-color, var(--color-muted-foreground));
     }
 
     &[data-state="open"] {
-      background-color: var(--select-bg-active, var(--color-muted));
       border-color: var(--select-focus-ring-color, var(--color-ring));
       outline-color: var(--select-focus-ring-color, var(--color-ring));
     }
@@ -114,14 +116,6 @@
       border-color: var(--select-invalid-color, var(--color-destructive));
       outline-color: var(--select-invalid-color, var(--color-destructive));
     }
-
-    .FGbIOa_control:not([data-disabled]) & {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .FGbIOa_control:has(.FGbIOa_clearTrigger:not([hidden])) .FGbIOa_trigger {
@@ -138,20 +132,20 @@
 
   .FGbIOa_indicators {
     top: 50%;
-    right: var(--select-action-offset-right, .5rem);
     align-items: center;
-    gap: var(--select-action-gap, .125rem);
+    gap: var(--select-action-gap, var(--spacing-0-5));
     pointer-events: none;
     line-height: 0;
     display: inline-flex;
     position: absolute;
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-2));
     transform: translateY(-50%);
   }
 
   .FGbIOa_indicator {
     box-sizing: border-box;
-    width: var(--select-action-size, 1.5rem);
-    height: var(--select-action-size, 1.5rem);
+    width: var(--select-action-size, var(--size-xs));
+    height: var(--select-action-size, var(--size-xs));
     border-radius: var(--select-action-radius, var(--radius-sm));
     background: var(--select-action-bg, transparent);
     color: var(--select-icon-color, var(--color-muted-foreground));
@@ -168,8 +162,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--select-icon-size, 1rem);
-      height: var(--select-icon-size, 1rem);
+      width: var(--select-icon-size, var(--spacing-4));
+      height: var(--select-icon-size, var(--spacing-4));
       display: block;
     }
 
@@ -186,9 +180,24 @@
     pointer-events: none;
   }
 
+  .FGbIOa_trigger > .FGbIOa_indicator {
+    top: 50%;
+    pointer-events: auto;
+    position: absolute;
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-2));
+    transform: translateY(-50%);
+  }
+
+  .FGbIOa_trigger > .FGbIOa_indicator:not(:is([data-disabled], [disabled])):hover {
+    @media (hover: hover) {
+      background-color: var(--select-action-bg-hover, var(--color-muted));
+      color: var(--select-action-color-hover, var(--color-foreground));
+    }
+  }
+
   .FGbIOa_clearTrigger {
-    --close-button-size: var(--select-action-size, 1.5rem);
-    --close-button-icon-size: var(--select-icon-size, 1rem);
+    --close-button-size: var(--select-action-size, var(--size-xs));
+    --close-button-icon-size: var(--select-icon-size, var(--spacing-4));
     --close-button-radius: var(--select-action-radius, var(--radius-sm));
     --close-button-bg: var(--select-action-bg, transparent);
     --close-button-bg-hover: var(--select-action-bg-hover, var(--color-muted));
@@ -202,6 +211,14 @@
     }
   }
 
+  .FGbIOa_control > .FGbIOa_clearTrigger {
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--select-action-offset-right, var(--spacing-2)) +
+        var(--select-action-size, var(--size-xs)) + var(--select-action-gap, var(--spacing-0-5)));
+    transform: translateY(-50%);
+  }
+
   .FGbIOa_positioner {
     z-index: var(--z-index);
     outline: 0;
@@ -216,7 +233,7 @@
     border: var(--select-content-border-width, var(--border-width-sm)) solid
       var(--select-content-border-color, var(--color-border));
     border-radius: var(--select-radius, var(--radius-md));
-    padding-block: var(--select-content-padding-y, var(--spacing-1));
+    padding-block: var(--select-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--select-content-bg, var(--color-popover));
     box-shadow: var(--select-content-shadow, var(--shadow-lg));
     color: var(--select-content-color, var(--color-popover-foreground));
@@ -262,31 +279,31 @@
   }
 
   .FGbIOa_itemGroupLabel {
-    padding-block: var(--select-item-group-label-padding-y, .375rem);
-    padding-inline: var(--select-item-group-label-padding-x, .625rem);
-    color: var(--select-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--select-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--select-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--select-item-group-label-line-height, var(--line-height-text-xs));
+    padding-block: var(--select-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--select-item-group-label-padding-x, var(--spacing-2-5));
+    color: var(--select-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--select-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--select-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--select-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
   }
 
   .FGbIOa_item {
     box-sizing: border-box;
     width: calc(100% - var(--select-item-inset-x, var(--spacing-2)));
-    min-height: var(--select-item-min-height, 2rem);
+    min-height: var(--select-item-min-height, var(--popup-item-min-height, var(--size-sm)));
     justify-content: space-between;
     align-items: center;
     gap: var(--select-item-gap, var(--spacing-2));
     margin-inline: calc(var(--select-item-inset-x, var(--spacing-2)) / 2);
     border: var(--select-item-border-width, 0) solid var(--select-item-border-color, transparent);
     border-radius: var(--select-item-radius, var(--radius-sm));
-    padding-block: var(--select-item-padding-y, var(--spacing-2));
-    padding-inline: var(--select-item-padding-x, .625rem);
+    padding-block: var(--select-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--select-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--select-item-bg, transparent);
     color: var(--select-item-color, var(--select-content-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--select-item-font-size, var(--text-sm));
-    line-height: var(--select-item-line-height, var(--line-height-text-sm));
+    font-size: var(--select-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--select-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     user-select: none;
     cursor: default;
     outline: 0;
@@ -318,8 +335,8 @@
   }
 
   .FGbIOa_itemIndicator {
-    width: var(--select-item-indicator-size, .875rem);
-    height: var(--select-item-indicator-size, .875rem);
+    width: var(--select-item-indicator-size, var(--spacing-3-5));
+    height: var(--select-item-indicator-size, var(--spacing-3-5));
     color: var(--select-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -327,8 +344,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--select-item-indicator-icon-size, .75rem);
-      height: var(--select-item-indicator-icon-size, .75rem);
+      width: var(--select-item-indicator-icon-size, var(--spacing-3));
+      height: var(--select-item-indicator-icon-size, var(--spacing-3));
     }
   }
 
@@ -342,8 +359,8 @@
   }
 
   .FGbIOa_itemTextIcon {
-    width: var(--select-item-text-icon-size, 1rem);
-    height: var(--select-item-text-icon-size, 1rem);
+    width: var(--select-item-text-icon-size, var(--spacing-4));
+    height: var(--select-item-text-icon-size, var(--spacing-4));
     color: var(--select-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;

package/dist/components/select/Select.js

@@ -114,7 +114,7 @@ const SelectField = forwardRef(function SelectField({ clearLabel, indicator, pla
 	return /* @__PURE__ */ jsxs(SelectControl, {
 		ref,
 		...props,
-		children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValueText, { placeholder }) }), /* @__PURE__ */ jsxs(SelectIndicators, { children: [clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] })]
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, { children: [/* @__PURE__ */ jsx(SelectValueText, { placeholder }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] }), clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel })]
 	});
 });
 const SelectPositioner = forwardRef(function SelectPositioner({ className, ...props }, ref) {

package/dist/components/separator/Separator.css

@@ -7,19 +7,19 @@
     display: block;
 
     &[data-size="xs"] {
-      --separator-size-thickness: .5px;
+      --separator-size-thickness: var(--separator-thickness-xs, .5px);
     }
 
     &[data-size="sm"] {
-      --separator-size-thickness: 1px;
+      --separator-size-thickness: var(--separator-thickness-sm, var(--border-width-sm));
     }
 
     &[data-size="md"] {
-      --separator-size-thickness: 2px;
+      --separator-size-thickness: var(--separator-thickness-md, var(--border-width-md));
     }
 
     &[data-size="lg"] {
-      --separator-size-thickness: 3px;
+      --separator-size-thickness: var(--separator-thickness-lg, 3px);
     }
 
     &[data-variant="dashed"] {
@@ -32,14 +32,14 @@
 
     &[data-orientation="horizontal"] {
       width: var(--separator-length-horizontal, 100%);
-      border-block-start-width: var(--separator-thickness, var(--separator-size-thickness, 1px));
+      border-block-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
       height: 0;
     }
 
     &[data-orientation="vertical"] {
       width: 0;
       height: var(--separator-length-vertical, 1em);
-      border-inline-start-width: var(--separator-thickness, var(--separator-size-thickness, 1px));
+      border-inline-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
     }
   }
 }