@moduix/react 2.1.0 → 2.2.0

package/dist/components/file-upload/FileUpload.css

@@ -1,57 +1,57 @@
-@layer ui.components {
+@layer moduix.components {
   .dgDG7a_root {
     box-sizing: border-box;
     align-items: flex-start;
-    gap: var(--file-upload-gap, var(--spacing-3));
-    width: var(--file-upload-width, 100%);
-    max-width: var(--file-upload-max-width, 28rem);
-    color: var(--file-upload-color, var(--color-foreground));
+    gap: var(--moduix-file-upload-gap, var(--moduix-spacing-3));
+    width: var(--moduix-file-upload-width, 100%);
+    max-width: var(--moduix-file-upload-max-width, 28rem);
+    color: var(--moduix-file-upload-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .dgDG7a_label {
-    color: var(--file-upload-label-color, var(--file-upload-color, var(--color-foreground)));
-    font-size: var(--file-upload-label-font-size, var(--text-sm));
-    font-weight: var(--file-upload-label-font-weight, var(--weight-medium));
-    line-height: var(--file-upload-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-file-upload-label-color, var(--moduix-file-upload-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-file-upload-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-file-upload-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-file-upload-label-line-height, var(--moduix-line-height-text-sm));
 
     &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .dgDG7a_dropzone {
     box-sizing: border-box;
     place-items: center;
-    gap: var(--file-upload-dropzone-gap, var(--spacing-3));
+    gap: var(--moduix-file-upload-dropzone-gap, var(--moduix-spacing-3));
     width: 100%;
-    min-height: var(--file-upload-dropzone-min-height, 8rem);
-    border: var(--file-upload-dropzone-border-width, var(--border-width-sm)) dashed
-      var(--file-upload-dropzone-border-color, var(--color-border));
-    border-radius: var(--file-upload-radius, var(--radius-md));
-    padding: var(--file-upload-dropzone-padding, var(--spacing-5));
-    background-color: var(--file-upload-dropzone-bg, var(--color-background));
-    color: var(--file-upload-dropzone-color, var(--color-muted-foreground));
+    min-height: var(--moduix-file-upload-dropzone-min-height, 8rem);
+    border: var(--moduix-file-upload-dropzone-border-width, var(--moduix-border-width-sm)) dashed
+      var(--moduix-file-upload-dropzone-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-file-upload-radius, var(--moduix-radius-md));
+    padding: var(--moduix-file-upload-dropzone-padding, var(--moduix-spacing-5));
+    background-color: var(--moduix-file-upload-dropzone-bg, var(--moduix-color-background));
+    color: var(--moduix-file-upload-dropzone-color, var(--moduix-color-muted-foreground));
     text-align: center;
-    transition: border-color var(--file-upload-transition, var(--transition-default)),
-      background-color var(--file-upload-transition, var(--transition-default)),
-      color var(--file-upload-transition, var(--transition-default)),
-      opacity var(--file-upload-transition, var(--transition-default));
+    transition: border-color var(--moduix-file-upload-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-file-upload-transition, var(--moduix-transition-default)),
+      color var(--moduix-file-upload-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-file-upload-transition, var(--moduix-transition-default));
     display: grid;
 
     &[data-dragging] {
-      border-color: var(--file-upload-dropzone-border-color-dragging, var(--color-primary));
-      background-color: var(--file-upload-dropzone-bg-dragging, var(--color-accent));
-      color: var(--file-upload-dropzone-color-dragging, var(--color-foreground));
+      border-color: var(--moduix-file-upload-dropzone-border-color-dragging, var(--moduix-color-primary));
+      background-color: var(--moduix-file-upload-dropzone-bg-dragging, var(--moduix-color-accent));
+      color: var(--moduix-file-upload-dropzone-color-dragging, var(--moduix-color-foreground));
     }
 
     &[data-invalid] {
-      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-file-upload-invalid-color, var(--moduix-color-destructive));
     }
 
     &[data-disabled], &[data-readonly] {
@@ -61,20 +61,20 @@
 
   .dgDG7a_dropzoneIcon {
     box-sizing: border-box;
-    width: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
-    height: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
-    border: var(--file-upload-dropzone-icon-border-width, var(--border-width-sm)) solid
-      var(--file-upload-dropzone-icon-border-color, var(--color-border));
-    border-radius: var(--file-upload-dropzone-icon-radius, var(--radius-full));
-    background-color: var(--file-upload-dropzone-icon-bg, var(--color-muted));
-    color: var(--file-upload-dropzone-icon-color, var(--color-foreground));
+    width: var(--moduix-file-upload-dropzone-icon-box-size, var(--moduix-spacing-10));
+    height: var(--moduix-file-upload-dropzone-icon-box-size, var(--moduix-spacing-10));
+    border: var(--moduix-file-upload-dropzone-icon-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-file-upload-dropzone-icon-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-file-upload-dropzone-icon-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-file-upload-dropzone-icon-bg, var(--moduix-color-muted));
+    color: var(--moduix-file-upload-dropzone-icon-color, var(--moduix-color-foreground));
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-dropzone-icon-size, var(--spacing-4));
-      height: var(--file-upload-dropzone-icon-size, var(--spacing-4));
+      width: var(--moduix-file-upload-dropzone-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-file-upload-dropzone-icon-size, var(--moduix-spacing-4));
     }
   }
 
@@ -82,58 +82,61 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--file-upload-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-md)));
-    border: var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
+    gap: var(--moduix-file-upload-trigger-gap, var(--moduix-button-content-gap, var(--moduix-spacing-2)));
+    min-height: var(--moduix-file-upload-trigger-height, var(--moduix-button-size-md, var(--moduix-size-md)));
+    border: var(--moduix-file-upload-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))
       solid
-      var(--file-upload-trigger-border-color, var(--button-default-border-color, var(--color-primary)));
-    border-radius: var(--file-upload-trigger-radius, var(--button-radius, var(--radius-md)));
-    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
-    background-color: var(--file-upload-trigger-bg, var(--button-default-bg, var(--color-primary)));
-    color: var(--file-upload-trigger-color, var(--button-default-color, var(--color-primary-foreground)));
+      var(--moduix-file-upload-trigger-border-color, var(--moduix-button-default-border-color, var(--moduix-color-primary)));
+    border-radius: var(--moduix-file-upload-trigger-radius, var(--moduix-button-radius, var(--moduix-radius-md)));
+    padding-inline: var(--moduix-file-upload-trigger-padding-x, var(--moduix-button-padding-x-md, var(--moduix-spacing-4)));
+    background-color: var(--moduix-file-upload-trigger-bg, var(--moduix-button-default-bg, var(--moduix-color-primary)));
+    color: var(--moduix-file-upload-trigger-color, var(--moduix-button-default-color, var(--moduix-color-primary-foreground)));
     appearance: none;
     font: inherit;
-    font-size: var(--file-upload-trigger-font-size, var(--button-font-size, var(--text-sm)));
-    font-weight: var(--file-upload-trigger-font-weight, var(--button-font-weight, var(--weight-medium)));
-    line-height: var(--file-upload-trigger-line-height, var(--button-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-file-upload-trigger-font-size, var(--moduix-button-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-file-upload-trigger-font-weight, var(--moduix-button-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-file-upload-trigger-line-height, var(--moduix-button-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
     transition: border-color
-        var(--file-upload-transition, var(--button-transition, var(--transition-default))),
+        var(--moduix-file-upload-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
       background-color
-        var(--file-upload-transition, var(--button-transition, var(--transition-default))),
-      color var(--file-upload-transition, var(--button-transition, var(--transition-default))),
-      opacity var(--file-upload-transition, var(--button-transition, var(--transition-default)));
+        var(--moduix-file-upload-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-file-upload-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-file-upload-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover:not(:disabled, [data-disabled], [data-readonly]) {
-        background-color: var(--file-upload-trigger-bg-hover, var(--button-default-bg-hover, var(--color-foreground)));
+        background-color: var(--moduix-file-upload-trigger-bg-hover, var(--moduix-button-default-bg-hover, var(--moduix-color-foreground)));
       }
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
-        solid var(--file-upload-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
-      outline-offset: calc(var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm))) *
+      outline: var(--moduix-file-upload-focus-ring-width, var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md))))
+        solid
+        var(--moduix-file-upload-focus-ring-color, var(--moduix-button-focus-ring-color, var(--moduix-color-ring)));
+      outline-offset: calc(var(--moduix-file-upload-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *
           -1);
     }
 
     &[data-invalid] {
-      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-file-upload-invalid-color, var(--moduix-color-destructive));
     }
 
     &:is(:disabled, [data-disabled], [data-readonly]) {
       pointer-events: none;
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
 
   .dgDG7a_itemGroup {
     align-items: flex-start;
-    gap: var(--file-upload-item-group-gap, var(--spacing-2));
+    gap: var(--moduix-file-upload-item-group-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     width: 100%;
     margin: 0;
@@ -149,41 +152,41 @@
   .dgDG7a_item {
     box-sizing: border-box;
     align-items: center;
-    column-gap: var(--file-upload-item-gap, var(--spacing-3));
-    row-gap: var(--file-upload-item-row-gap, var(--spacing-1));
-    min-height: var(--file-upload-item-min-height, var(--size-md));
-    border: var(--file-upload-item-border-width, var(--border-width-sm)) solid
-      var(--file-upload-item-border-color, var(--color-border));
-    border-radius: var(--file-upload-item-radius, var(--radius-md));
-    padding: var(--file-upload-item-padding-y, var(--spacing-2))
-      var(--file-upload-item-padding-x, var(--spacing-3));
-    background-color: var(--file-upload-item-bg, var(--color-background));
-    color: var(--file-upload-item-color, var(--color-foreground));
+    column-gap: var(--moduix-file-upload-item-gap, var(--moduix-spacing-3));
+    row-gap: var(--moduix-file-upload-item-row-gap, var(--moduix-spacing-1));
+    min-height: var(--moduix-file-upload-item-min-height, var(--moduix-size-md));
+    border: var(--moduix-file-upload-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-file-upload-item-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-file-upload-item-radius, var(--moduix-radius-md));
+    padding: var(--moduix-file-upload-item-padding-y, var(--moduix-spacing-2))
+      var(--moduix-file-upload-item-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-file-upload-item-bg, var(--moduix-color-background));
+    color: var(--moduix-file-upload-item-color, var(--moduix-color-foreground));
     flex: 1 0 100%;
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
 
     &[data-type="rejected"] {
-      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-file-upload-invalid-color, var(--moduix-color-destructive));
     }
 
     &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &:has([data-slot="file-upload-item-preview"]) {
-      min-height: var(--file-upload-item-preview-min-height, var(--size-xl));
-      padding-block: var(--file-upload-item-preview-padding-y, var(--spacing-2));
+      min-height: var(--moduix-file-upload-item-preview-min-height, var(--moduix-size-xl));
+      padding-block: var(--moduix-file-upload-item-preview-padding-y, var(--moduix-spacing-2));
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
   }
 
   .dgDG7a_itemPreview {
-    width: var(--file-upload-item-preview-size, var(--spacing-10));
-    height: var(--file-upload-item-preview-size, var(--spacing-10));
-    border-radius: var(--file-upload-item-preview-radius, var(--radius-sm));
-    background-color: var(--file-upload-item-preview-bg, var(--color-muted));
-    color: var(--file-upload-item-preview-color, var(--color-muted-foreground));
+    width: var(--moduix-file-upload-item-preview-size, var(--moduix-spacing-10));
+    height: var(--moduix-file-upload-item-preview-size, var(--moduix-spacing-10));
+    border-radius: var(--moduix-file-upload-item-preview-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-file-upload-item-preview-bg, var(--moduix-color-muted));
+    color: var(--moduix-file-upload-item-preview-color, var(--moduix-color-muted-foreground));
     grid-area: 1 / 1 / span 2;
     justify-content: center;
     align-items: center;
@@ -198,31 +201,31 @@
   }
 
   .dgDG7a_itemPreviewIcon {
-    width: var(--file-upload-item-preview-icon-size, var(--spacing-4));
-    height: var(--file-upload-item-preview-icon-size, var(--spacing-4));
+    width: var(--moduix-file-upload-item-preview-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-file-upload-item-preview-icon-size, var(--moduix-spacing-4));
   }
 
   .dgDG7a_itemMetadata {
     align-items: center;
-    gap: var(--file-upload-item-row-gap, var(--spacing-1));
-    color: var(--file-upload-item-size-color, var(--color-muted-foreground));
-    font-size: var(--file-upload-item-size-font-size, var(--text-xs));
-    line-height: var(--file-upload-item-size-line-height, var(--line-height-text-xs));
+    gap: var(--moduix-file-upload-item-row-gap, var(--moduix-spacing-1));
+    color: var(--moduix-file-upload-item-size-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-file-upload-item-size-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-file-upload-item-size-line-height, var(--moduix-line-height-text-xs));
     grid-column: 1;
     display: flex;
 
     & > [data-slot="file-upload-item-size-text"]:before {
       content: "·";
-      margin-inline-end: var(--file-upload-item-row-gap, var(--spacing-1));
+      margin-inline-end: var(--moduix-file-upload-item-row-gap, var(--moduix-spacing-1));
     }
   }
 
   .dgDG7a_itemName {
     min-width: 0;
-    color: var(--file-upload-item-name-color, currentColor);
-    font-size: var(--file-upload-item-name-font-size, var(--text-sm));
-    font-weight: var(--file-upload-item-name-font-weight, var(--weight-medium));
-    line-height: var(--file-upload-item-name-line-height, var(--line-height-text-sm));
+    color: var(--moduix-file-upload-item-name-color, currentColor);
+    font-size: var(--moduix-file-upload-item-name-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-file-upload-item-name-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-file-upload-item-name-line-height, var(--moduix-line-height-text-sm));
     -webkit-line-clamp: 1;
     line-clamp: 1;
     -webkit-box-orient: vertical;
@@ -236,9 +239,9 @@
   }
 
   .dgDG7a_itemSizeText {
-    color: var(--file-upload-item-size-color, var(--color-muted-foreground));
-    font-size: var(--file-upload-item-size-font-size, var(--text-xs));
-    line-height: var(--file-upload-item-size-line-height, var(--line-height-text-xs));
+    color: var(--moduix-file-upload-item-size-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-file-upload-item-size-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-file-upload-item-size-line-height, var(--moduix-line-height-text-xs));
     grid-column: 1;
   }
 
@@ -248,16 +251,16 @@
 
   .dgDG7a_itemDeleteTrigger {
     box-sizing: border-box;
-    width: var(--file-upload-action-size, var(--size-sm));
-    height: var(--file-upload-action-size, var(--size-sm));
-    border-radius: var(--file-upload-action-radius, var(--radius-sm));
-    background-color: var(--file-upload-action-bg, transparent);
-    color: var(--file-upload-action-color, var(--color-muted-foreground));
+    width: var(--moduix-file-upload-action-size, var(--moduix-size-sm));
+    height: var(--moduix-file-upload-action-size, var(--moduix-size-sm));
+    border-radius: var(--moduix-file-upload-action-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-file-upload-action-bg, transparent);
+    color: var(--moduix-file-upload-action-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
-    transition: background-color var(--file-upload-transition, var(--transition-default)),
-      color var(--file-upload-transition, var(--transition-default)),
-      opacity var(--file-upload-transition, var(--transition-default));
+    transition: background-color var(--moduix-file-upload-transition, var(--moduix-transition-default)),
+      color var(--moduix-file-upload-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-file-upload-transition, var(--moduix-transition-default));
     border: 0;
     justify-content: center;
     align-items: center;
@@ -265,26 +268,26 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-action-icon-size, var(--spacing-4));
-      height: var(--file-upload-action-icon-size, var(--spacing-4));
+      width: var(--moduix-file-upload-action-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-file-upload-action-icon-size, var(--moduix-spacing-4));
     }
 
     @media (hover: hover) {
       &:hover:not(:disabled, [data-disabled], [data-readonly]) {
-        background-color: var(--file-upload-action-bg-hover, var(--color-muted));
-        color: var(--file-upload-action-color-hover, var(--color-foreground));
+        background-color: var(--moduix-file-upload-action-bg-hover, var(--moduix-color-muted));
+        color: var(--moduix-file-upload-action-color-hover, var(--moduix-color-foreground));
       }
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--file-upload-focus-ring-color, var(--color-ring));
-      outline-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-file-upload-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-file-upload-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-file-upload-focus-ring-offset, var(--moduix-border-width-sm));
     }
 
     &:is(:disabled, [data-disabled], [data-readonly]) {
       pointer-events: none;
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
@@ -303,7 +306,7 @@
   }
 
   .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) {
-    flex: 0 1 min(100%, var(--file-upload-image-item-max-width, 10rem));
+    flex: 0 1 min(100%, var(--moduix-file-upload-image-item-max-width, 10rem));
     grid-template-rows: auto auto auto;
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: start;
@@ -332,32 +335,32 @@
   }
 
   .dgDG7a_clearTrigger {
-    --close-button-size: var(--file-upload-action-size, var(--size-sm));
-    --close-button-radius: var(--file-upload-action-radius, var(--radius-sm));
-    --close-button-bg: var(--file-upload-action-bg, transparent);
-    --close-button-bg-hover: var(--file-upload-action-bg-hover, var(--color-muted));
-    --close-button-color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--file-upload-action-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--file-upload-action-icon-size, var(--spacing-4));
-    --close-button-transition: var(--file-upload-transition, var(--transition-default));
-    --close-button-focus-ring-width: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
-    --close-button-focus-ring-color: var(--file-upload-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
-    --close-button-disabled-opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+    --moduix-close-button-size: var(--moduix-file-upload-action-size, var(--moduix-size-sm));
+    --moduix-close-button-radius: var(--moduix-file-upload-action-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-file-upload-action-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-file-upload-action-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-file-upload-clear-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-file-upload-action-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-icon-size: var(--moduix-file-upload-action-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-transition: var(--moduix-file-upload-transition, var(--moduix-transition-default));
+    --moduix-close-button-focus-ring-width: var(--moduix-file-upload-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
+    --moduix-close-button-focus-ring-color: var(--moduix-file-upload-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-file-upload-focus-ring-offset, var(--moduix-border-width-sm));
+    --moduix-close-button-disabled-opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
     align-self: flex-start;
   }
 
   .dgDG7a_clearTriggerWithContent {
-    gap: var(--file-upload-clear-trigger-gap, var(--spacing-2));
+    gap: var(--moduix-file-upload-clear-trigger-gap, var(--moduix-spacing-2));
     width: auto;
-    padding-inline: var(--file-upload-clear-trigger-padding-x, var(--spacing-2));
+    padding-inline: var(--moduix-file-upload-clear-trigger-padding-x, var(--moduix-spacing-2));
     font: inherit;
-    font-size: var(--file-upload-clear-trigger-font-size, var(--text-sm));
-    line-height: var(--file-upload-clear-trigger-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-file-upload-clear-trigger-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-file-upload-clear-trigger-line-height, var(--moduix-line-height-text-sm));
   }
 
   .dgDG7a_clearTrigger[data-readonly] {
     pointer-events: none;
-    opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+    opacity: var(--moduix-file-upload-disabled-opacity, var(--moduix-opacity-disabled));
   }
 }