@moduix/react 2.1.0 → 2.2.0

package/dist/components/input-group/InputGroup.css

@@ -1,99 +1,100 @@
-@layer ui.components {
+@layer moduix.components {
   .n0dHIa_root {
     box-sizing: border-box;
-    width: var(--input-group-width, 100%);
-    max-width: var(--input-group-max-width, none);
-    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-md)));
-    border: var(--input-group-border-width, var(--border-width-sm))
-      var(--input-group-border-style, solid) var(--input-group-border-color, var(--color-border));
-    border-radius: var(--input-group-radius, var(--radius-md));
-    background-color: var(--input-group-bg, var(--color-background));
-    color: var(--input-group-color, var(--color-foreground));
-    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+    width: var(--moduix-input-group-width, 100%);
+    max-width: var(--moduix-input-group-max-width, none);
+    min-height: var(--moduix-input-group-height, var(--moduix-input-group-height-md, var(--moduix-size-md)));
+    border: var(--moduix-input-group-border-width, var(--moduix-border-width-sm))
+      var(--moduix-input-group-border-style, solid)
+      var(--moduix-input-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-input-group-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-input-group-bg, var(--moduix-color-background));
+    color: var(--moduix-input-group-color, var(--moduix-color-foreground));
+    outline: var(--moduix-input-group-focus-ring-width, var(--moduix-input-group-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
       solid transparent;
-    outline-offset: var(--input-group-focus-ring-offset, var(--focus-ring-inset-offset));
-    transition: border-color var(--input-group-transition, var(--transition-default)),
-      outline-color var(--input-group-transition, var(--transition-default)),
-      opacity var(--input-group-transition, var(--transition-default));
+    outline-offset: var(--moduix-input-group-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-input-group-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-group-transition, var(--moduix-transition-default));
     align-items: stretch;
     display: flex;
     overflow: hidden;
 
     &:focus-within {
-      outline-color: var(--input-group-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-input-group-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:has([data-slot="input-group-input"][data-invalid], [data-slot="input-group-input"][aria-invalid="true"]) {
-      border-color: var(--input-group-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-input-group-border-color-invalid, var(--moduix-color-destructive));
 
       &:focus-within {
-        outline-color: var(--input-group-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-input-group-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
     &:has([data-slot="input-group-input"][data-disabled], [data-slot="input-group-input"]:disabled) {
-      opacity: var(--input-group-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-input-group-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &:has([data-slot="input-group-input"][data-readonly], [data-slot="input-group-input"]:read-only) {
-      border-color: var(--input-group-readonly-border-color, var(--input-group-border-color, var(--color-border)));
-      background-color: var(--input-group-readonly-bg, var(--input-group-bg, var(--color-background)));
-      color: var(--input-group-readonly-color, var(--input-group-color, var(--color-foreground)));
+      border-color: var(--moduix-input-group-readonly-border-color, var(--moduix-input-group-border-color, var(--moduix-color-border)));
+      background-color: var(--moduix-input-group-readonly-bg, var(--moduix-input-group-bg, var(--moduix-color-background)));
+      color: var(--moduix-input-group-readonly-color, var(--moduix-input-group-color, var(--moduix-color-foreground)));
     }
 
     &[data-size="xs"] {
-      --input-group-height: var(--input-group-height-xs, var(--size-xs));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, var(--spacing-2-5));
-      --input-group-font-size: var(--input-group-font-size-xs, var(--text-xs));
-      --input-group-line-height: var(--input-group-line-height-xs, var(--line-height-text-xs));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, var(--spacing-2-5));
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, var(--spacing-0-5));
+      --moduix-input-group-height: var(--moduix-input-group-height-xs, var(--moduix-size-xs));
+      --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-xs, var(--moduix-spacing-2-5));
+      --moduix-input-group-font-size: var(--moduix-input-group-font-size-xs, var(--moduix-text-xs));
+      --moduix-input-group-line-height: var(--moduix-input-group-line-height-xs, var(--moduix-line-height-text-xs));
+      --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-xs, var(--moduix-spacing-2-5));
+      --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-xs, var(--moduix-spacing-0-5));
     }
 
     &[data-size="sm"] {
-      --input-group-height: var(--input-group-height-sm, var(--size-sm));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, var(--spacing-3));
-      --input-group-font-size: var(--input-group-font-size-sm, var(--text-sm));
-      --input-group-line-height: var(--input-group-line-height-sm, var(--line-height-text-sm));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, var(--spacing-3));
-      --input-group-input-padding-y: var(--input-group-input-padding-y-sm, .3125rem);
+      --moduix-input-group-height: var(--moduix-input-group-height-sm, var(--moduix-size-sm));
+      --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-sm, var(--moduix-spacing-3));
+      --moduix-input-group-font-size: var(--moduix-input-group-font-size-sm, var(--moduix-text-sm));
+      --moduix-input-group-line-height: var(--moduix-input-group-line-height-sm, var(--moduix-line-height-text-sm));
+      --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-sm, var(--moduix-spacing-3));
+      --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-sm, .3125rem);
     }
 
     &[data-size="md"] {
-      --input-group-height: var(--input-group-height-md, var(--size-md));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, var(--spacing-3-5));
-      --input-group-font-size: var(--input-group-font-size-md, var(--text-md));
-      --input-group-line-height: var(--input-group-line-height-md, var(--line-height-text-md));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-md, var(--spacing-3-5));
-      --input-group-input-padding-y: var(--input-group-input-padding-y-md, var(--spacing-1));
+      --moduix-input-group-height: var(--moduix-input-group-height-md, var(--moduix-size-md));
+      --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-md, var(--moduix-spacing-3-5));
+      --moduix-input-group-font-size: var(--moduix-input-group-font-size-md, var(--moduix-text-md));
+      --moduix-input-group-line-height: var(--moduix-input-group-line-height-md, var(--moduix-line-height-text-md));
+      --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-md, var(--moduix-spacing-3-5));
+      --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-md, var(--moduix-spacing-1));
     }
 
     &[data-size="lg"] {
-      --input-group-height: var(--input-group-height-lg, var(--size-lg));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, var(--spacing-4));
-      --input-group-font-size: var(--input-group-font-size-lg, var(--text-lg));
-      --input-group-line-height: var(--input-group-line-height-lg, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, var(--spacing-4));
-      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, var(--spacing-1));
+      --moduix-input-group-height: var(--moduix-input-group-height-lg, var(--moduix-size-lg));
+      --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-lg, var(--moduix-spacing-4));
+      --moduix-input-group-font-size: var(--moduix-input-group-font-size-lg, var(--moduix-text-lg));
+      --moduix-input-group-line-height: var(--moduix-input-group-line-height-lg, var(--moduix-line-height-text-lg));
+      --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-lg, var(--moduix-spacing-4));
+      --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-lg, var(--moduix-spacing-1));
     }
 
     &[data-size="xl"] {
-      --input-group-height: var(--input-group-height-xl, var(--size-xl));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, var(--spacing-4-5));
-      --input-group-font-size: var(--input-group-font-size-xl, var(--text-lg));
-      --input-group-line-height: var(--input-group-line-height-xl, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, var(--spacing-4-5));
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, var(--spacing-2));
+      --moduix-input-group-height: var(--moduix-input-group-height-xl, var(--moduix-size-xl));
+      --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-xl, var(--moduix-spacing-4-5));
+      --moduix-input-group-font-size: var(--moduix-input-group-font-size-xl, var(--moduix-text-lg));
+      --moduix-input-group-line-height: var(--moduix-input-group-line-height-xl, var(--moduix-line-height-text-lg));
+      --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-xl, var(--moduix-spacing-4-5));
+      --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-xl, var(--moduix-spacing-2));
     }
   }
 
   .n0dHIa_input {
     min-width: 0;
     min-height: 0;
-    font-size: var(--input-group-font-size, var(--text-md));
-    line-height: var(--input-group-line-height, var(--line-height-text-md));
-    padding-block: var(--input-group-input-padding-y, var(--spacing-2));
-    padding-inline: var(--input-group-input-padding-x, var(--spacing-3-5));
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-md));
+    padding-block: var(--moduix-input-group-input-padding-y, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-input-group-input-padding-x, var(--moduix-spacing-3-5));
     background-color: #0000;
     border: 0;
     border-radius: 0;
@@ -105,26 +106,26 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--input-group-addon-gap, var(--spacing-2));
+    gap: var(--moduix-input-group-addon-gap, var(--moduix-spacing-2));
     min-width: max-content;
-    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
-    background-color: var(--input-group-addon-bg, var(--color-muted));
-    color: var(--input-group-addon-color, var(--color-muted-foreground));
-    font-size: var(--input-group-font-size, var(--text-md));
-    line-height: var(--input-group-line-height, var(--line-height-text-md));
+    padding-inline: var(--moduix-input-group-addon-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-input-group-addon-bg, var(--moduix-color-muted));
+    color: var(--moduix-input-group-addon-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-md));
     white-space: nowrap;
     display: inline-flex;
 
     & > svg {
-      width: var(--input-group-icon-size, var(--spacing-4));
-      height: var(--input-group-icon-size, var(--spacing-4));
+      width: var(--moduix-input-group-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-input-group-icon-size, var(--moduix-spacing-4));
       flex-shrink: 0;
     }
   }
 
   .n0dHIa_addon {
-    border-inline: var(--input-group-separator-width, var(--border-width-sm)) solid
-      var(--input-group-separator-color, var(--color-border));
+    border-inline: var(--moduix-input-group-separator-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-input-group-separator-color, var(--moduix-color-border));
 
     &:first-child {
       border-inline-start: 0;
@@ -143,16 +144,16 @@
     height: auto;
     min-height: auto;
     padding-block: 0;
-    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
-    color: var(--input-group-button-color, var(--color-foreground));
-    font-size: var(--input-group-font-size, var(--text-sm));
-    line-height: var(--input-group-line-height, var(--line-height-text-sm));
+    padding-inline: var(--moduix-input-group-addon-padding-x, var(--moduix-spacing-3-5));
+    color: var(--moduix-input-group-button-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-sm));
     border: 0;
     border-radius: 0;
     align-self: stretch;
 
     &:focus-visible {
-      outline-offset: var(--input-group-button-focus-ring-offset, var(--focus-ring-inset-offset));
+      outline-offset: var(--moduix-input-group-button-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
   }
 }

package/dist/components/kbd/Kbd.css

@@ -1,20 +1,20 @@
-@layer ui.components {
+@layer moduix.components {
   .VpuRJG_root[data-scope="kbd"][data-part="root"] {
     box-sizing: border-box;
-    min-width: var(--kbd-min-width, var(--kbd-height, var(--size-xs)));
+    min-width: var(--moduix-kbd-min-width, var(--moduix-kbd-height, var(--moduix-size-xs)));
     max-width: 100%;
-    height: var(--kbd-height, var(--size-xs));
-    border: var(--kbd-border-width, var(--border-width-sm)) solid
-      var(--kbd-border-color, var(--color-border));
-    border-radius: var(--kbd-radius, var(--radius-sm));
-    padding: var(--kbd-padding-y, 0) var(--kbd-padding-x, var(--spacing-2));
-    background-color: var(--kbd-bg, var(--color-muted));
-    box-shadow: var(--kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--color-foreground) 12%, transparent));
-    color: var(--kbd-color, var(--color-foreground));
-    font-family: var(--kbd-font-family, var(--font-mono)), monospace;
-    font-size: var(--kbd-font-size, var(--text-xs));
-    font-weight: var(--kbd-font-weight, var(--weight-medium));
-    line-height: var(--kbd-line-height, var(--line-height-text-xs));
+    height: var(--moduix-kbd-height, var(--moduix-size-xs));
+    border: var(--moduix-kbd-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-kbd-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-kbd-radius, var(--moduix-radius-sm));
+    padding: var(--moduix-kbd-padding-y, 0) var(--moduix-kbd-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-kbd-bg, var(--moduix-color-muted));
+    box-shadow: var(--moduix-kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--moduix-color-foreground) 12%, transparent));
+    color: var(--moduix-kbd-color, var(--moduix-color-foreground));
+    font-family: var(--moduix-kbd-font-family, var(--moduix-font-mono)), monospace;
+    font-size: var(--moduix-kbd-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-kbd-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-kbd-line-height, var(--moduix-line-height-text-xs));
     font-variant-numeric: tabular-nums;
     text-align: center;
     vertical-align: middle;
@@ -30,10 +30,10 @@
   .VpuRJG_group[data-scope="kbd"][data-part="group"] {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--kbd-group-gap, var(--spacing-1));
+    gap: var(--moduix-kbd-group-gap, var(--moduix-spacing-1));
     max-width: 100%;
     box-shadow: none;
-    color: var(--kbd-group-separator-color, var(--color-muted-foreground));
+    color: var(--moduix-kbd-group-separator-color, var(--moduix-color-muted-foreground));
     font: inherit;
     vertical-align: middle;
     white-space: nowrap;

package/dist/components/lightbox/Lightbox.css

@@ -1,37 +1,38 @@
-@layer ui.components {
+@layer moduix.components {
   .BCq4HG_trigger {
     cursor: zoom-in;
 
     &:focus-visible {
-      outline: var(--lightbox-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--lightbox-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--lightbox-trigger-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-lightbox-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-lightbox-trigger-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-lightbox-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
   }
 
   .BCq4HG_backdrop {
-    z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
-    background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
+    background-color: var(--moduix-lightbox-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
     min-height: 100dvh;
-    backdrop-filter: var(--backdrop-filter, blur(var(--lightbox-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-lightbox-backdrop-blur, 4px)));
     position: fixed;
     inset: 0;
 
     &[data-state="open"] {
-      animation: BCq4HG_lightbox-backdrop-in var(--lightbox-backdrop-transition, var(--transition-default));
+      animation: BCq4HG_lightbox-backdrop-in
+        var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"] {
       animation: BCq4HG_lightbox-backdrop-out
-        var(--lightbox-backdrop-transition, var(--transition-default));
+        var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
     }
   }
 
   .BCq4HG_positioner {
     box-sizing: border-box;
-    z-index: calc(var(--z-modal) + var(--layer-index, 0));
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
     overscroll-behavior: contain;
-    padding: var(--lightbox-positioner-padding, var(--spacing-4));
+    padding: var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4));
     place-items: center;
     display: grid;
     position: fixed;
@@ -41,10 +42,12 @@
 
   .BCq4HG_content {
     box-sizing: border-box;
-    gap: var(--lightbox-content-gap, var(--spacing-3));
+    gap: var(--moduix-lightbox-content-gap, var(--moduix-spacing-3));
     width: fit-content;
-    max-width: min(var(--lightbox-content-max-width, 80vw), calc(100vw - var(--spacing-8)));
-    max-height: min(var(--lightbox-content-max-height, 80dvh), calc(100dvh - var(--spacing-8)));
+    max-width: min(var(--moduix-lightbox-content-max-width, 80vw),
+      calc(100vw - var(--moduix-spacing-8)));
+    max-height: min(var(--moduix-lightbox-content-max-height, 80dvh),
+      calc(100dvh - var(--moduix-spacing-8)));
     background: none;
     border: 0;
     outline: 0;
@@ -53,56 +56,56 @@
 
     &[data-state="open"] {
       animation: BCq4HG_lightbox-content-in
-        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
+        var(--moduix-lightbox-transition, var(--moduix-popup-motion-duration, .22s) var(--moduix-popup-motion-easing, ease));
     }
 
     &[data-state="closed"] {
       animation: BCq4HG_lightbox-content-out
-        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
+        var(--moduix-lightbox-transition, var(--moduix-popup-motion-duration, .22s) var(--moduix-popup-motion-easing, ease));
     }
   }
 
   .BCq4HG_title {
-    color: var(--lightbox-title-color, var(--color-foreground));
-    font-size: var(--lightbox-title-font-size, var(--text-md));
-    font-weight: var(--lightbox-title-font-weight, var(--weight-semibold));
-    line-height: var(--lightbox-title-line-height, var(--line-height-text-md));
+    color: var(--moduix-lightbox-title-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-lightbox-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-lightbox-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-lightbox-title-line-height, var(--moduix-line-height-text-md));
     margin: 0;
   }
 
   .BCq4HG_description {
-    color: var(--lightbox-description-color, var(--color-muted-foreground));
-    font-size: var(--lightbox-description-font-size, var(--text-sm));
-    line-height: var(--lightbox-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-lightbox-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-lightbox-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-lightbox-description-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
   }
 
   .BCq4HG_header {
-    gap: var(--lightbox-header-gap, var(--spacing-1));
+    gap: var(--moduix-lightbox-header-gap, var(--moduix-spacing-1));
     display: grid;
   }
 
   .BCq4HG_body {
-    gap: var(--lightbox-body-gap, var(--spacing-3));
+    gap: var(--moduix-lightbox-body-gap, var(--moduix-spacing-3));
     display: grid;
   }
 
   .BCq4HG_footer {
     align-items: center;
-    justify-content: var(--lightbox-footer-justify, flex-end);
-    gap: var(--lightbox-footer-gap, var(--spacing-2));
-    color: var(--lightbox-footer-color, var(--color-muted-foreground));
-    font-size: var(--lightbox-footer-font-size, var(--text-sm));
-    line-height: var(--lightbox-footer-line-height, var(--line-height-text-sm));
+    justify-content: var(--moduix-lightbox-footer-justify, flex-end);
+    gap: var(--moduix-lightbox-footer-gap, var(--moduix-spacing-2));
+    color: var(--moduix-lightbox-footer-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-lightbox-footer-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-lightbox-footer-line-height, var(--moduix-line-height-text-sm));
     display: flex;
   }
 
   .BCq4HG_image {
-    max-width: min(var(--lightbox-media-max-width, 80vw), 100%);
-    max-height: min(var(--lightbox-media-max-height, 80dvh), 100%);
+    max-width: min(var(--moduix-lightbox-media-max-width, 80vw), 100%);
+    max-height: min(var(--moduix-lightbox-media-max-height, 80dvh), 100%);
     object-fit: contain;
-    border-radius: var(--lightbox-media-radius, var(--radius-md));
-    box-shadow: var(--lightbox-media-shadow, var(--shadow-lg));
+    border-radius: var(--moduix-lightbox-media-radius, var(--moduix-radius-md));
+    box-shadow: var(--moduix-lightbox-media-shadow, var(--moduix-shadow-lg));
     user-select: none;
     display: block;
 
@@ -112,10 +115,10 @@
   }
 
   .BCq4HG_gallery {
-    --carousel-gap: var(--lightbox-gallery-gap, var(--spacing-4));
+    --moduix-carousel-gap: var(--moduix-lightbox-gallery-gap, var(--moduix-spacing-4));
     width: auto;
-    max-width: min(var(--lightbox-gallery-max-width, 72rem),
-      calc(100vw - var(--lightbox-positioner-padding, var(--spacing-4)) * 2));
+    max-width: min(var(--moduix-lightbox-gallery-max-width, 72rem),
+      calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
     justify-self: center;
 
     & [data-slot="carousel-control"] {
@@ -123,10 +126,10 @@
     }
 
     & [data-slot="carousel-item-group"] {
-      aspect-ratio: var(--lightbox-gallery-aspect-ratio, 16 / 10);
-      max-height: min(var(--lightbox-gallery-track-max-height, 68dvh),
-        var(--lightbox-media-max-height, 80dvh));
-      background: var(--lightbox-gallery-track-bg, color-mix(in oklab, black 88%, var(--color-background) 12%));
+      aspect-ratio: var(--moduix-lightbox-gallery-aspect-ratio, 16 / 10);
+      max-height: min(var(--moduix-lightbox-gallery-track-max-height, 68dvh),
+        var(--moduix-lightbox-media-max-height, 80dvh));
+      background: var(--moduix-lightbox-gallery-track-bg, color-mix(in oklab, black 88%, var(--moduix-color-background) 12%));
     }
 
     & [data-slot="carousel-item"] {
@@ -136,7 +139,7 @@
 
       & img, & video {
         object-fit: contain;
-        border-radius: var(--lightbox-media-radius, var(--radius-md));
+        border-radius: var(--moduix-lightbox-media-radius, var(--moduix-radius-md));
         user-select: none;
         width: 100%;
         height: 100%;
@@ -152,26 +155,26 @@
     }
 
     & [data-slot="carousel-indicator"]:has(img) {
-      width: var(--lightbox-gallery-thumbnail-width, 5rem);
-      height: var(--lightbox-gallery-thumbnail-height, var(--size-xl));
-      border: var(--border-width-sm) solid transparent;
-      border-radius: var(--lightbox-gallery-thumbnail-radius, var(--radius-md));
-      opacity: var(--lightbox-gallery-thumbnail-opacity, .65);
-      transition: border-color var(--transition-fast),
-        opacity var(--transition-fast),
-        transform var(--transition-fast);
+      width: var(--moduix-lightbox-gallery-thumbnail-width, 5rem);
+      height: var(--moduix-lightbox-gallery-thumbnail-height, var(--moduix-size-xl));
+      border: var(--moduix-border-width-sm) solid transparent;
+      border-radius: var(--moduix-lightbox-gallery-thumbnail-radius, var(--moduix-radius-md));
+      opacity: var(--moduix-lightbox-gallery-thumbnail-opacity, .65);
+      transition: border-color var(--moduix-transition-fast),
+        opacity var(--moduix-transition-fast),
+        transform var(--moduix-transition-fast);
       background: none;
       overflow: hidden;
 
       &:hover {
-        opacity: var(--lightbox-gallery-thumbnail-opacity-hover, .9);
+        opacity: var(--moduix-lightbox-gallery-thumbnail-opacity-hover, .9);
       }
 
       &[data-current] {
-        width: var(--lightbox-gallery-thumbnail-width, 5rem);
-        border-color: var(--lightbox-gallery-thumbnail-border-color, var(--color-primary));
+        width: var(--moduix-lightbox-gallery-thumbnail-width, 5rem);
+        border-color: var(--moduix-lightbox-gallery-thumbnail-border-color, var(--moduix-color-primary));
         opacity: 1;
-        transform: translateY(var(--lightbox-gallery-thumbnail-active-translate-y, calc(var(--border-width-sm) * -1)));
+        transform: translateY(var(--moduix-lightbox-gallery-thumbnail-active-translate-y, calc(var(--moduix-border-width-sm) * -1)));
         background: none;
       }
 
@@ -185,23 +188,23 @@
   }
 
   .BCq4HG_closeIcon {
-    --close-button-size: var(--lightbox-close-icon-size, var(--spacing-8));
-    --close-button-radius: var(--lightbox-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, var(--spacing-3-5));
-    --close-button-color: var(--lightbox-close-icon-color, var(--color-foreground));
-    --close-button-color-hover: var(--lightbox-close-icon-color-hover, var(--color-foreground));
-    --close-button-bg: var(--lightbox-close-icon-bg, var(--color-background));
-    --close-button-bg-hover: var(--lightbox-close-icon-bg-hover, var(--color-muted));
-    --close-button-focus-ring-color: var(--lightbox-close-icon-focus-ring-color, var(--color-ring));
-    z-index: calc(var(--z-modal) + var(--layer-index, 0) + 1);
+    --moduix-close-button-size: var(--moduix-lightbox-close-icon-size, var(--moduix-spacing-8));
+    --moduix-close-button-radius: var(--moduix-lightbox-close-icon-radius, var(--moduix-radius-sm));
+    --moduix-close-button-icon-size: var(--moduix-lightbox-close-icon-glyph-size, var(--moduix-spacing-3-5));
+    --moduix-close-button-color: var(--moduix-lightbox-close-icon-color, var(--moduix-color-foreground));
+    --moduix-close-button-color-hover: var(--moduix-lightbox-close-icon-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-bg: var(--moduix-lightbox-close-icon-bg, var(--moduix-color-background));
+    --moduix-close-button-bg-hover: var(--moduix-lightbox-close-icon-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-focus-ring-color: var(--moduix-lightbox-close-icon-focus-ring-color, var(--moduix-color-ring));
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0) + 1);
     opacity: 0;
     pointer-events: none;
     visibility: hidden;
     border: 0;
     padding: 0;
     position: fixed;
-    inset-block-start: var(--lightbox-close-icon-inset-block-start, var(--spacing-4));
-    inset-inline-end: var(--lightbox-close-icon-inset-inline-end, var(--spacing-4));
+    inset-block-start: var(--moduix-lightbox-close-icon-inset-block-start, var(--moduix-spacing-4));
+    inset-inline-end: var(--moduix-lightbox-close-icon-inset-inline-end, var(--moduix-spacing-4));
 
     &[data-state="open"] {
       opacity: 1;
@@ -212,33 +215,33 @@
 
   @keyframes BCq4HG_lightbox-backdrop-in {
     from {
-      opacity: var(--lightbox-backdrop-starting-opacity, 0);
-      backdrop-filter: var(--lightbox-backdrop-starting-blur, none);
+      opacity: var(--moduix-lightbox-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--moduix-lightbox-backdrop-starting-blur, none);
     }
   }
 
   @keyframes BCq4HG_lightbox-backdrop-out {
     to {
-      opacity: var(--lightbox-backdrop-ending-opacity, 0);
-      backdrop-filter: var(--lightbox-backdrop-ending-blur, none);
+      opacity: var(--moduix-lightbox-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--moduix-lightbox-backdrop-ending-blur, none);
     }
   }
 
   @keyframes BCq4HG_lightbox-content-in {
     from {
-      opacity: var(--lightbox-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--lightbox-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--lightbox-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--lightbox-content-starting-scale, var(--popup-motion-starting-scale, .82));
+      opacity: var(--moduix-lightbox-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-lightbox-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-lightbox-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-lightbox-content-starting-scale, var(--moduix-popup-motion-starting-scale, .82));
     }
   }
 
   @keyframes BCq4HG_lightbox-content-out {
     to {
-      opacity: var(--lightbox-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--lightbox-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--lightbox-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--lightbox-content-ending-scale, var(--popup-motion-ending-scale, .82));
+      opacity: var(--moduix-lightbox-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-lightbox-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-lightbox-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-lightbox-content-ending-scale, var(--moduix-popup-motion-ending-scale, .82));
     }
   }
 }