@moduix/react 2.2.0 → 2.2.5

package/dist/components/color-picker/{ColorPicker.css → ColorPicker_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  @keyframes kgcaIq_color-picker-content-open {
+  @keyframes color-picker-content-open-q3_ID4 {
     from {
       opacity: var(--moduix-color-picker-content-closed-opacity, var(--moduix-popup-motion-starting-opacity, 0));
       translate: var(--moduix-popup-motion-starting-translate-x, 0)
@@ -13,7 +13,7 @@
     }
   }
 
-  @keyframes kgcaIq_color-picker-content-closed {
+  @keyframes color-picker-content-closed-KFhLyd {
     from {
       opacity: 1;
       transform: scale(1);
@@ -27,7 +27,7 @@
     }
   }
 
-  .kgcaIq_root {
+  .root-TExENm {
     box-sizing: border-box;
     width: var(--moduix-color-picker-width, 16rem);
     max-width: var(--moduix-color-picker-max-width, 100%);
@@ -36,38 +36,39 @@
     color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-TExENm[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_label {
+  .label-_ln_Tp {
     color: var(--moduix-color-picker-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-color-picker-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-color-picker-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-color-picker-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
     align-items: center;
     display: inline-flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .label-_ln_Tp[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_control {
+  .control-s8Gz_s {
     align-items: center;
     gap: var(--moduix-color-picker-control-gap, var(--moduix-spacing-2));
     min-width: 0;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .control-s8Gz_s[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_trigger {
+  .trigger-o5tyg7 {
     box-sizing: border-box;
     width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
     height: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
@@ -90,44 +91,45 @@
     margin: 0;
     display: grid;
     overflow: hidden;
+  }
 
-    &:is(:focus-visible, [data-focus]) {
-      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-    }
+  .trigger-o5tyg7:is(:focus-visible, [data-state="open"]) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
 
-    &[data-invalid] {
-      border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
-      outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
-    }
+  .trigger-o5tyg7[data-invalid] {
+    border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+  }
 
-    &:is([disabled], [data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  .trigger-o5tyg7:is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
+  }
 
-    &[data-fit-content] {
-      width: auto;
-      min-width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
-      padding-inline: var(--moduix-color-picker-trigger-fit-content-padding-x, var(--moduix-spacing-3));
-      gap: var(--moduix-color-picker-trigger-fit-content-gap, var(--moduix-spacing-2));
-      display: inline-flex;
-    }
+  .trigger-o5tyg7[data-fit-content] {
+    width: auto;
+    min-width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    padding-inline: var(--moduix-color-picker-trigger-fit-content-padding-x, var(--moduix-spacing-3));
+    gap: var(--moduix-color-picker-trigger-fit-content-gap, var(--moduix-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(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
-      height: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
-      flex-shrink: 0;
-      grid-area: auto;
-    }
+  .trigger-o5tyg7[data-fit-content] [data-slot="color-picker-transparency-grid"], .trigger-o5tyg7[data-fit-content] [data-slot="color-picker-value-swatch"] {
+    width: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+    grid-area: auto;
   }
 
-  .kgcaIq_positioner {
-    z-index: var(--moduix-z-popup);
+  .positioner-XKLqp5 {
+    z-index: var(--z-index);
     outline: 0;
   }
 
-  .kgcaIq_content {
+  .content-z7zabu {
     box-sizing: border-box;
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     width: var(--moduix-color-picker-content-width, 16rem);
     max-width: var(--available-width);
     max-height: min(var(--moduix-color-picker-content-max-height, 32rem), var(--available-height));
@@ -145,21 +147,28 @@
     flex-direction: column;
     display: flex;
     overflow: auto;
+  }
 
-    &[data-state="open"] {
-      animation: kgcaIq_color-picker-content-open
+  .content-z7zabu[data-state="open"] {
+    animation: color-picker-content-open-q3_ID4
         var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
-    }
+  }
 
-    &[data-state="closed"] {
-      animation: kgcaIq_color-picker-content-closed
+  .content-z7zabu[data-state="closed"] {
+    animation: color-picker-content-closed-KFhLyd
         var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .content-z7zabu[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
     }
   }
 
-  .kgcaIq_area {
+  .area-t8_R52 {
     box-sizing: border-box;
     width: 100%;
     height: var(--moduix-color-picker-area-height, 10rem);
@@ -168,22 +177,23 @@
       var(--moduix-color-picker-area-border-width, var(--moduix-border-width-sm))
       var(--moduix-color-picker-area-border-color, color-mix(in oklab, var(--moduix-color-border) 70%, transparent));
     touch-action: none;
+    -webkit-user-select: none;
     user-select: none;
     position: relative;
     overflow: hidden;
+  }
 
-    &:is([data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  .area-t8_R52:is([data-disabled], [data-readonly]) {
+    cursor: default;
   }
 
-  .kgcaIq_areaBackground {
+  .areaBackground-PkoUAT {
     border-radius: inherit;
     width: 100%;
     height: 100%;
   }
 
-  .kgcaIq_thumb {
+  .thumb-H6MPip {
     box-sizing: border-box;
     width: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
     height: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
@@ -192,43 +202,54 @@
     box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
         var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
       0 0 0 var(--moduix-color-picker-thumb-outer-ring-width, var(--moduix-border-width-lg))
-        var(--moduix-color-picker-thumb-outer-ring-color, oklab(0% none none / .18)),
+        var(--moduix-color-picker-thumb-outer-ring-color, #0000002e),
       var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
     outline: 0;
     transform: translate(-50%, -50%);
+  }
 
-    &:focus-visible {
+  @supports (color: lab(0% 0 0)) {
+    .thumb-H6MPip {
       box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+        var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+      0 0 0 var(--moduix-color-picker-thumb-outer-ring-width, var(--moduix-border-width-lg))
+        var(--moduix-color-picker-thumb-outer-ring-color, lab(0% 0 0 / .18)),
+      var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
+    }
+  }
+
+  .thumb-H6MPip:focus-visible {
+    box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
           var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
         0 0 0 var(--moduix-color-picker-thumb-focus-ring-width, var(--moduix-border-width-lg))
           var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring)),
         var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
-    }
+  }
 
-    &[data-disabled] {
-      pointer-events: none;
-    }
+  .thumb-H6MPip[data-disabled] {
+    pointer-events: none;
   }
 
-  .kgcaIq_channelSlider {
+  .channelSlider-AurwFW {
     box-sizing: border-box;
     height: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
     border-radius: var(--moduix-color-picker-channel-slider-radius, var(--moduix-radius-full));
     touch-action: none;
+    -webkit-user-select: none;
     user-select: none;
     align-items: center;
     display: flex;
     position: relative;
+  }
 
-    &[data-orientation="vertical"] {
-      width: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
-      height: var(--moduix-color-picker-channel-slider-vertical-height, 10rem);
-      justify-content: center;
-      align-items: stretch;
-    }
+  .channelSlider-AurwFW[data-orientation="vertical"] {
+    width: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
+    height: var(--moduix-color-picker-channel-slider-vertical-height, 10rem);
+    justify-content: center;
+    align-items: stretch;
   }
 
-  .kgcaIq_sliders {
+  .sliders-sPeKpK {
     gap: var(--moduix-color-picker-sliders-gap, var(--moduix-spacing-2));
     flex-direction: column;
     flex: 1;
@@ -236,34 +257,42 @@
     display: flex;
   }
 
-  .kgcaIq_channelSliderTrack {
+  .channelSliderTrack-hKvFlr {
     width: 100%;
     height: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
     border-radius: inherit;
     box-shadow: inset 0 0 0
       var(--moduix-color-picker-channel-slider-border-width, var(--moduix-border-width-sm))
-      var(--moduix-color-picker-channel-slider-border-color, oklab(0% none none / .14));
+      var(--moduix-color-picker-channel-slider-border-color, #00000024);
+  }
 
-    &[data-orientation="vertical"] {
-      width: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
-      height: 100%;
+  @supports (color: lab(0% 0 0)) {
+    .channelSliderTrack-hKvFlr {
+      box-shadow: inset 0 0 0
+      var(--moduix-color-picker-channel-slider-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-channel-slider-border-color, lab(0% 0 0 / .14));
     }
   }
 
-  .kgcaIq_channelSliderLabel {
+  .channelSliderTrack-hKvFlr[data-orientation="vertical"] {
+    width: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
+    height: 100%;
+  }
+
+  .channelSliderLabel-hwLzBw {
     color: var(--moduix-color-picker-channel-slider-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-color-picker-channel-slider-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-color-picker-channel-slider-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-color-picker-channel-slider-label-line-height, var(--moduix-line-height-text-sm));
   }
 
-  .kgcaIq_channelSliderValueText {
+  .channelSliderValueText-ZFMCO7 {
     color: var(--moduix-color-picker-channel-slider-value-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-color-picker-channel-slider-value-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-color-picker-channel-slider-value-line-height, var(--moduix-line-height-text-sm));
   }
 
-  .kgcaIq_channelInput, .kgcaIq_formatSelect {
+  .channelInput-KxngYC, .formatSelect-jD2i0e {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -283,44 +312,117 @@
         -1);
     transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
       outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    margin: 0;
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e):is(:focus, :focus-visible) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)[data-invalid] {
+    border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .channelInput-KxngYC {
     appearance: textfield;
+    flex: 1;
+  }
+
+  .channelInput-KxngYC::-webkit-outer-spin-button {
+    appearance: none;
     margin: 0;
+  }
 
-    &:is(:focus, :focus-visible) {
-      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-    }
+  .channelInput-KxngYC::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
 
-    &[data-invalid] {
-      border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
-      outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
-    }
+  .channelInput-KxngYC[data-channel="alpha"] {
+    width: var(--moduix-color-picker-alpha-input-width, 4rem);
+    flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .formatSelectControl-S40Hse {
+    flex-shrink: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
+  .formatSelect-jD2i0e {
+    width: auto;
+    appearance: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    padding-inline-end: calc(var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-color-picker-icon-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) {
+    cursor: default;
+  }
 
-    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
+  @media (forced-colors: active) {
+    .formatSelect-jD2i0e {
+      appearance: auto;
+      padding-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
     }
   }
 
-  .kgcaIq_channelInput {
-    flex: 1;
+  .formatSelectIndicator-VJN6PV {
+    top: 50%;
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-radius-sm);
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    transition: background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
 
-    &[data-channel="alpha"] {
-      width: var(--moduix-color-picker-alpha-input-width, 4rem);
-      flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
+  .formatSelectIndicator-VJN6PV > svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelectIndicator-VJN6PV {
+      display: none;
     }
   }
 
-  .kgcaIq_formatSelect {
-    cursor: pointer;
-    width: auto;
+  @media (hover: hover) {
+    .formatSelect-jD2i0e:not(:is([disabled], [data-disabled])):hover + .formatSelectIndicator-VJN6PV {
+      background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) + .formatSelectIndicator-VJN6PV {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
+  .eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb {
     box-sizing: border-box;
     height: var(--moduix-color-picker-action-size, var(--moduix-size-md));
     min-width: var(--moduix-color-picker-action-size, var(--moduix-size-md));
@@ -348,38 +450,36 @@
     flex-shrink: 0;
     margin: 0;
     display: inline-flex;
+  }
 
-    & > svg {
-      width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
-      height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
-    }
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb) > svg {
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+  }
 
-    &:is(:focus-visible, [data-focus]) {
-      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-    }
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):is(:focus-visible, [data-focus]) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
 
-    &:not(:is([disabled], [data-disabled], [data-readonly])) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
-          color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
-        }
-      }
+  @media (hover: hover) {
+    :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):not(:is([disabled], [data-disabled], [data-readonly])):hover {
+      background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
     }
+  }
 
-    &:is([disabled], [data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
   }
 
-  .kgcaIq_swatchGroup {
+  .swatchGroup-c99XUr {
     gap: var(--moduix-color-picker-swatch-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     display: flex;
   }
 
-  .kgcaIq_swatchTrigger {
+  .swatchTrigger-evVzC6 {
     border-radius: var(--moduix-color-picker-swatch-radius, var(--moduix-radius-sm));
     cursor: pointer;
     background: none;
@@ -390,27 +490,27 @@
     margin: 0;
     padding: 0;
     display: inline-flex;
+  }
 
-    &:focus-visible {
-      box-shadow: 0 0 0
+  .swatchTrigger-evVzC6:focus-visible {
+    box-shadow: 0 0 0
         var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
-    }
+  }
 
-    &[data-disabled] {
-      cursor: default;
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .swatchTrigger-evVzC6[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_swatch {
+  .swatch-Wk05He {
     box-sizing: border-box;
     width: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
     height: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
     border-radius: inherit;
     box-shadow: inset 0 0 0
       var(--moduix-color-picker-swatch-border-width, var(--moduix-border-width-sm))
-      var(--moduix-color-picker-swatch-border-color, oklab(0% none none / .14));
+      var(--moduix-color-picker-swatch-border-color, #00000024);
     flex-shrink: 0;
     place-items: center;
     display: grid;
@@ -418,7 +518,15 @@
     overflow: hidden;
   }
 
-  .kgcaIq_swatchIndicator {
+  @supports (color: lab(0% 0 0)) {
+    .swatch-Wk05He {
+      box-shadow: inset 0 0 0
+      var(--moduix-color-picker-swatch-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-swatch-border-color, lab(0% 0 0 / .14));
+    }
+  }
+
+  .swatchIndicator-OSvsx1 {
     color: var(--moduix-color-picker-swatch-indicator-color, white);
     filter: var(--moduix-color-picker-swatch-indicator-shadow, drop-shadow(0 1px 1px #00000073));
     pointer-events: none;
@@ -427,25 +535,25 @@
     display: none;
     position: absolute;
     inset: 0;
+  }
 
-    & > svg {
-      width: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
-      height: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
-    }
+  .swatchIndicator-OSvsx1 > svg {
+    width: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
+  }
 
-    [data-state="checked"] > &, &[data-state="checked"] {
-      display: inline-flex;
-    }
+  [data-state="checked"] > .swatchIndicator-OSvsx1, .swatchIndicator-OSvsx1[data-state="checked"] {
+    display: inline-flex;
   }
 
-  .kgcaIq_transparencyGrid {
+  .transparencyGrid-kXaWYM {
     border-radius: inherit;
     grid-area: 1 / 1;
     width: 100%;
     height: 100%;
   }
 
-  .kgcaIq_valueSwatch {
+  .valueSwatch-voiJSA {
     border-radius: inherit;
     z-index: 1;
     grid-area: 1 / 1;
@@ -453,21 +561,22 @@
     height: 100%;
   }
 
-  .kgcaIq_valueText {
+  .valueText-DP0Ni5 {
     min-width: 0;
     color: var(--moduix-color-picker-value-text-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-color-picker-value-text-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-color-picker-value-text-line-height, var(--moduix-line-height-text-sm));
   }
 
-  .kgcaIq_view {
+  .view-l5Ln0d {
     gap: var(--moduix-color-picker-view-gap, var(--moduix-spacing-2));
     flex-direction: column;
     min-width: 0;
     display: flex;
+  }
 
-    &[hidden] {
-      display: none;
-    }
+  .view-l5Ln0d[hidden] {
+    display: none;
   }
 }
+

package/dist/components/color-picker/index.d.ts

@@ -1,2 +1 @@
-import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "./ColorPicker.js";
-export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };
+export * from './ColorPicker.js';

package/dist/components/color-picker/index.js

@@ -0,0 +1 @@
+export * from "./ColorPicker.js";