@moduix/react 2.1.0 → 2.2.4

package/dist/components/empty/Empty.css

@@ -1,78 +0,0 @@
-@layer ui.components {
-  .QhU81q_root {
-    box-sizing: border-box;
-    justify-items: center;
-    gap: var(--empty-gap, var(--spacing-4));
-    width: 100%;
-    min-width: 0;
-    padding: var(--empty-padding, var(--spacing-8));
-    border: var(--empty-border-width, var(--border-width-sm)) solid
-      var(--empty-border-color, var(--color-border));
-    border-radius: var(--empty-radius, var(--radius-xl));
-    background-color: var(--empty-bg, color-mix(in oklab, var(--color-card) 92%, var(--color-muted)));
-    color: var(--empty-color, var(--color-card-foreground));
-    box-shadow: var(--empty-shadow, none);
-    text-align: center;
-    display: grid;
-  }
-
-  .QhU81q_icon {
-    min-width: 0;
-    padding: var(--empty-icon-padding, var(--spacing-3));
-    border-radius: var(--radius-full);
-    background-color: var(--empty-icon-bg, var(--color-muted));
-    color: var(--empty-icon-color, var(--color-muted-foreground));
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    &:where(svg), & :where(svg) {
-      width: var(--empty-icon-size, var(--spacing-6));
-      height: var(--empty-icon-size, var(--spacing-6));
-      pointer-events: none;
-      flex-shrink: 0;
-    }
-  }
-
-  .QhU81q_content {
-    justify-items: center;
-    gap: var(--empty-content-gap, var(--spacing-1));
-    min-width: 0;
-    max-width: var(--empty-content-max-width, 28rem);
-    display: grid;
-  }
-
-  .QhU81q_title {
-    min-width: 0;
-    color: var(--empty-title-color, currentColor);
-    font-size: var(--empty-title-font-size, var(--text-xl));
-    font-weight: var(--empty-title-font-weight, var(--weight-semibold));
-    line-height: var(--empty-title-line-height, var(--line-height-text-xl));
-    overflow-wrap: anywhere;
-    margin: 0;
-  }
-
-  .QhU81q_description {
-    min-width: 0;
-    color: var(--empty-description-color, var(--color-muted-foreground));
-    font-size: var(--empty-description-font-size, var(--text-sm));
-    line-height: var(--empty-description-line-height, var(--line-height-text-sm));
-    overflow-wrap: anywhere;
-
-    & > :first-child {
-      margin-top: 0;
-    }
-
-    & > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .QhU81q_actions {
-    justify-content: center;
-    align-items: center;
-    gap: var(--empty-actions-gap, var(--spacing-2));
-    flex-wrap: wrap;
-    display: flex;
-  }
-}

package/dist/components/field/Field.css

@@ -1,111 +0,0 @@
-@layer ui.components {
-  .SVzJ0G_root {
-    box-sizing: border-box;
-    align-items: flex-start;
-    gap: var(--field-gap, var(--spacing-1));
-    width: var(--field-width, 100%);
-    max-width: var(--field-max-width, none);
-    color: var(--field-color, var(--color-foreground));
-    flex-direction: column;
-    display: flex;
-
-    &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .SVzJ0G_item {
-    gap: var(--field-item-gap, var(--spacing-1));
-    display: grid;
-  }
-
-  .SVzJ0G_label {
-    align-items: center;
-    gap: var(--field-label-gap, var(--spacing-2));
-    color: var(--field-label-color, var(--color-foreground));
-    font-size: var(--field-label-font-size, var(--text-sm));
-    font-weight: var(--field-label-font-weight, var(--weight-medium));
-    line-height: var(--field-label-line-height, var(--line-height-text-sm));
-    display: inline-flex;
-
-    &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .SVzJ0G_helperText {
-    color: var(--field-description-color, var(--color-muted-foreground));
-    font-size: var(--field-description-font-size, var(--text-sm));
-    line-height: var(--field-description-line-height, var(--line-height-text-sm));
-    margin: 0;
-
-    &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .SVzJ0G_control {
-    box-sizing: border-box;
-    width: var(--field-control-width, 100%);
-    min-height: var(--field-control-height, var(--size-md));
-    border: var(--field-control-border-width, var(--border-width-sm))
-      var(--field-control-border-style, solid)
-      var(--field-control-border-color, var(--color-border));
-    border-radius: var(--field-control-radius, var(--radius-md));
-    padding: var(--field-control-padding-y, var(--spacing-1))
-      var(--field-control-padding-x, var(--spacing-3-5));
-    background-color: var(--field-control-bg, var(--color-background));
-    color: var(--field-control-color, var(--color-foreground));
-    font: inherit;
-    font-size: var(--field-control-font-size, var(--text-md));
-    line-height: var(--field-control-line-height, var(--line-height-text-md));
-    outline: var(--field-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-      solid transparent;
-    outline-offset: var(--field-focus-ring-offset, var(--focus-ring-inset-offset));
-    transition: border-color var(--field-control-transition, var(--transition-default)),
-      outline-color var(--field-control-transition, var(--transition-default)),
-      opacity var(--field-control-transition, var(--transition-default));
-    margin: 0;
-
-    &::placeholder {
-      color: var(--field-control-placeholder-color, var(--color-muted-foreground));
-    }
-
-    &:focus-visible {
-      outline-color: var(--field-focus-ring-color, var(--color-ring));
-    }
-
-    &[data-invalid] {
-      border-color: var(--field-control-border-color-invalid, var(--color-destructive));
-
-      &:focus-visible {
-        outline-color: var(--field-control-border-color-invalid, var(--color-destructive));
-      }
-    }
-
-    &[data-disabled], &:disabled {
-      pointer-events: none;
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .SVzJ0G_textarea {
-    min-height: var(--field-textarea-min-height, 5rem);
-    resize: vertical;
-  }
-
-  .SVzJ0G_errorText {
-    color: var(--field-error-color, var(--color-destructive));
-    font-size: var(--field-error-font-size, var(--text-sm));
-    line-height: var(--field-error-line-height, var(--line-height-text-sm));
-    margin: 0;
-
-    &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .SVzJ0G_requiredIndicator {
-    color: var(--field-required-indicator-color, var(--color-destructive));
-  }
-}

package/dist/components/fieldset/Fieldset.css

@@ -1,52 +0,0 @@
-@layer ui.components {
-  .zyuCNW_root, .zyuCNW_legend, .zyuCNW_helperText, .zyuCNW_errorText {
-    box-sizing: border-box;
-  }
-
-  .zyuCNW_root {
-    gap: var(--fieldset-gap, var(--spacing-4));
-    width: var(--fieldset-width, 100%);
-    max-width: var(--fieldset-max-width, none);
-    margin: var(--fieldset-margin, 0);
-    padding: var(--fieldset-padding, 0);
-    border-width: var(--fieldset-border-width, 0);
-    border-style: var(--fieldset-border-style, solid);
-    border-color: var(--fieldset-border-color, transparent);
-    border-radius: var(--fieldset-radius, var(--radius-none));
-    flex-direction: column;
-    min-inline-size: 0;
-    display: flex;
-
-    &[data-disabled] {
-      opacity: var(--fieldset-disabled-opacity, var(--opacity-disabled));
-    }
-
-    &[data-invalid] {
-      border-color: var(--fieldset-border-color-invalid, var(--color-destructive));
-    }
-  }
-
-  .zyuCNW_legend {
-    max-inline-size: 100%;
-    margin: var(--fieldset-legend-margin, 0);
-    padding: var(--fieldset-legend-padding, 0 0 var(--spacing-3));
-    color: var(--fieldset-legend-color, var(--color-foreground));
-    font-size: var(--fieldset-legend-font-size, var(--text-lg));
-    font-weight: var(--fieldset-legend-font-weight, var(--weight-semibold));
-    line-height: var(--fieldset-legend-line-height, var(--line-height-text-lg));
-    display: inline-block;
-  }
-
-  .zyuCNW_helperText, .zyuCNW_errorText {
-    font-size: var(--fieldset-message-font-size, var(--text-sm));
-    line-height: var(--fieldset-message-line-height, var(--line-height-text-sm));
-  }
-
-  .zyuCNW_helperText {
-    color: var(--fieldset-helper-text-color, var(--color-muted-foreground));
-  }
-
-  .zyuCNW_errorText {
-    color: var(--fieldset-error-text-color, var(--color-destructive));
-  }
-}

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

@@ -1,363 +0,0 @@
-@layer ui.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));
-    flex-direction: column;
-    display: flex;
-
-    &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--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));
-
-    &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .dgDG7a_dropzone {
-    box-sizing: border-box;
-    place-items: center;
-    gap: var(--file-upload-dropzone-gap, var(--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));
-    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));
-    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));
-    }
-
-    &[data-invalid] {
-      border-color: var(--file-upload-invalid-color, var(--color-destructive));
-    }
-
-    &[data-disabled], &[data-readonly] {
-      cursor: default;
-    }
-  }
-
-  .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));
-    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));
-    }
-  }
-
-  .dgDG7a_trigger {
-    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)))
-      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)));
-    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)));
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: border-color
-        var(--file-upload-transition, var(--button-transition, var(--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)));
-    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)));
-      }
-    }
-
-    &: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))) *
-          -1);
-    }
-
-    &[data-invalid] {
-      border-color: var(--file-upload-invalid-color, var(--color-destructive));
-    }
-
-    &:is(:disabled, [data-disabled], [data-readonly]) {
-      pointer-events: none;
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
-      cursor: default;
-    }
-  }
-
-  .dgDG7a_itemGroup {
-    align-items: flex-start;
-    gap: var(--file-upload-item-group-gap, var(--spacing-2));
-    flex-wrap: wrap;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  .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));
-    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));
-    }
-
-    &[data-disabled] {
-      opacity: var(--file-upload-disabled-opacity, var(--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));
-      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));
-    grid-area: 1 / 1 / span 2;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .dgDG7a_itemPreviewImage {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-
-  .dgDG7a_itemPreviewIcon {
-    width: var(--file-upload-item-preview-icon-size, var(--spacing-4));
-    height: var(--file-upload-item-preview-icon-size, var(--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));
-    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));
-    }
-  }
-
-  .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));
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
-    grid-column: 1;
-    display: -webkit-box;
-    overflow: hidden;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemName {
-    grid-column: 2;
-  }
-
-  .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));
-    grid-column: 1;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemSizeText, .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemMetadata {
-    grid-column: 2;
-  }
-
-  .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));
-    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));
-    border: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--file-upload-action-icon-size, var(--spacing-4));
-      height: var(--file-upload-action-icon-size, var(--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));
-      }
-    }
-
-    &: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));
-    }
-
-    &:is(:disabled, [data-disabled], [data-readonly]) {
-      pointer-events: none;
-      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
-      cursor: default;
-    }
-  }
-
-  .dgDG7a_itemDeleteTrigger {
-    grid-area: 1 / 2;
-    justify-self: end;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-size-text"]) .dgDG7a_itemDeleteTrigger, .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemDeleteTrigger {
-    grid-row: 1 / span 2;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemDeleteTrigger {
-    grid-column: 3;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) {
-    flex: 0 1 min(100%, var(--file-upload-image-item-max-width, 10rem));
-    grid-template-rows: auto auto auto;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: start;
-    min-height: 0;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemPreview {
-    aspect-ratio: 1;
-    grid-area: 1 / 1 / auto / -1;
-    width: 100%;
-    height: auto;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemName {
-    grid-area: 2 / 1;
-    align-self: end;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemMetadata {
-    grid-area: 3 / 1;
-  }
-
-  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemDeleteTrigger {
-    grid-area: 2 / 2 / span 2;
-    align-self: center;
-  }
-
-  .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));
-    align-self: flex-start;
-  }
-
-  .dgDG7a_clearTriggerWithContent {
-    gap: var(--file-upload-clear-trigger-gap, var(--spacing-2));
-    width: auto;
-    padding-inline: var(--file-upload-clear-trigger-padding-x, var(--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));
-  }
-
-  .dgDG7a_clearTrigger[data-readonly] {
-    pointer-events: none;
-    opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
-  }
-}