@moduix/react 2.1.0 → 2.2.4

package/dist/components/input/Input.css

@@ -1,83 +0,0 @@
-@layer ui.components {
-  .wmyYha_root {
-    box-sizing: border-box;
-    width: var(--input-width, 100%);
-    max-width: var(--input-max-width, none);
-    min-height: var(--input-height, var(--input-height-md, var(--size-md)));
-    border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
-      var(--input-border-color, var(--color-border));
-    border-radius: var(--input-radius, var(--radius-md));
-    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1)))
-      var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3)));
-    background-color: var(--input-bg, var(--color-background));
-    color: var(--input-color, var(--color-foreground));
-    font: inherit;
-    font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
-    line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
-      solid transparent;
-    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
-    transition: border-color var(--input-transition, var(--transition-default)),
-      outline-color var(--input-transition, var(--transition-default)),
-      opacity var(--input-transition, var(--transition-default));
-    margin: 0;
-
-    &::placeholder {
-      color: var(--input-placeholder-color, var(--color-muted-foreground));
-    }
-
-    &:focus-visible {
-      outline-color: var(--input-focus-ring-color, var(--color-ring));
-    }
-
-    &:is([data-invalid], [aria-invalid="true"]) {
-      border-color: var(--input-border-color-invalid, var(--color-destructive));
-
-      &:focus-visible {
-        outline-color: var(--input-border-color-invalid, var(--color-destructive));
-      }
-    }
-
-    &:is([data-disabled], :disabled) {
-      pointer-events: none;
-      opacity: var(--input-disabled-opacity, var(--opacity-disabled));
-    }
-
-    &:is(:read-only, [data-readonly]) {
-      background-color: var(--input-readonly-bg, var(--input-bg, var(--color-background)));
-      color: var(--input-readonly-color, var(--input-color, var(--color-foreground)));
-    }
-
-    &[data-size="xs"] {
-      --input-height: var(--input-height-xs, var(--size-xs));
-      --input-padding-x: var(--input-padding-x-xs, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-xs, var(--spacing-0-5));
-      --input-font-size: var(--input-font-size-xs, var(--text-xs));
-      --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      --input-height: var(--input-height-sm, var(--size-sm));
-      --input-padding-x: var(--input-padding-x-sm, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-sm, var(--spacing-1));
-      --input-font-size: var(--input-font-size-sm, var(--text-sm));
-      --input-line-height: var(--input-line-height-sm, var(--line-height-text-sm));
-    }
-
-    &[data-size="lg"] {
-      --input-height: var(--input-height-lg, var(--size-lg));
-      --input-padding-x: var(--input-padding-x-lg, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-lg, var(--spacing-1));
-      --input-font-size: var(--input-font-size-lg, var(--text-lg));
-      --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
-    }
-
-    &[data-size="xl"] {
-      --input-height: var(--input-height-xl, var(--size-xl));
-      --input-padding-x: var(--input-padding-x-xl, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-xl, var(--spacing-2));
-      --input-font-size: var(--input-font-size-xl, var(--text-lg));
-      --input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
-    }
-  }
-}

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

@@ -1,158 +0,0 @@
-@layer ui.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))))
-      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));
-    align-items: stretch;
-    display: flex;
-    overflow: hidden;
-
-    &:focus-within {
-      outline-color: var(--input-group-focus-ring-color, var(--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));
-
-      &:focus-within {
-        outline-color: var(--input-group-border-color-invalid, var(--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));
-    }
-
-    &: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)));
-    }
-
-    &[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));
-    }
-
-    &[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);
-    }
-
-    &[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));
-    }
-
-    &[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));
-    }
-
-    &[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));
-    }
-  }
-
-  .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));
-    background-color: #0000;
-    border: 0;
-    border-radius: 0;
-    outline: 0;
-    flex: auto;
-  }
-
-  .n0dHIa_addon, .n0dHIa_text {
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    gap: var(--input-group-addon-gap, var(--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));
-    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));
-      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));
-
-    &:first-child {
-      border-inline-start: 0;
-    }
-
-    &:last-child {
-      border-inline-end: 0;
-    }
-  }
-
-  .n0dHIa_text {
-    background-color: #0000;
-  }
-
-  .n0dHIa_button {
-    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));
-    border: 0;
-    border-radius: 0;
-    align-self: stretch;
-
-    &:focus-visible {
-      outline-offset: var(--input-group-button-focus-ring-offset, var(--focus-ring-inset-offset));
-    }
-  }
-}

package/dist/components/kbd/Kbd.css

@@ -1,45 +0,0 @@
-@layer ui.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)));
-    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));
-    font-variant-numeric: tabular-nums;
-    text-align: center;
-    vertical-align: middle;
-    white-space: nowrap;
-    user-select: none;
-    flex: none;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .VpuRJG_group[data-scope="kbd"][data-part="group"] {
-    box-sizing: border-box;
-    align-items: center;
-    gap: var(--kbd-group-gap, var(--spacing-1));
-    max-width: 100%;
-    box-shadow: none;
-    color: var(--kbd-group-separator-color, var(--color-muted-foreground));
-    font: inherit;
-    vertical-align: middle;
-    white-space: nowrap;
-    background: none;
-    border: 0;
-    padding: 0;
-    display: inline-flex;
-  }
-}

package/dist/components/lightbox/Lightbox.css

@@ -1,244 +0,0 @@
-@layer ui.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));
-    }
-  }
-
-  .BCq4HG_backdrop {
-    z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
-    background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
-    min-height: 100dvh;
-    backdrop-filter: var(--backdrop-filter, blur(var(--lightbox-backdrop-blur, 4px)));
-    position: fixed;
-    inset: 0;
-
-    &[data-state="open"] {
-      animation: BCq4HG_lightbox-backdrop-in var(--lightbox-backdrop-transition, var(--transition-default));
-    }
-
-    &[data-state="closed"] {
-      animation: BCq4HG_lightbox-backdrop-out
-        var(--lightbox-backdrop-transition, var(--transition-default));
-    }
-  }
-
-  .BCq4HG_positioner {
-    box-sizing: border-box;
-    z-index: calc(var(--z-modal) + var(--layer-index, 0));
-    overscroll-behavior: contain;
-    padding: var(--lightbox-positioner-padding, var(--spacing-4));
-    place-items: center;
-    display: grid;
-    position: fixed;
-    inset: 0;
-    overflow: hidden;
-  }
-
-  .BCq4HG_content {
-    box-sizing: border-box;
-    gap: var(--lightbox-content-gap, var(--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)));
-    background: none;
-    border: 0;
-    outline: 0;
-    display: grid;
-    position: relative;
-
-    &[data-state="open"] {
-      animation: BCq4HG_lightbox-content-in
-        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--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));
-    }
-  }
-
-  .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));
-    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));
-    margin: 0;
-  }
-
-  .BCq4HG_header {
-    gap: var(--lightbox-header-gap, var(--spacing-1));
-    display: grid;
-  }
-
-  .BCq4HG_body {
-    gap: var(--lightbox-body-gap, var(--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));
-    display: flex;
-  }
-
-  .BCq4HG_image {
-    max-width: min(var(--lightbox-media-max-width, 80vw), 100%);
-    max-height: min(var(--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));
-    user-select: none;
-    display: block;
-
-    &[data-close-on-click] {
-      cursor: zoom-out;
-    }
-  }
-
-  .BCq4HG_gallery {
-    --carousel-gap: var(--lightbox-gallery-gap, var(--spacing-4));
-    width: auto;
-    max-width: min(var(--lightbox-gallery-max-width, 72rem),
-      calc(100vw - var(--lightbox-positioner-padding, var(--spacing-4)) * 2));
-    justify-self: center;
-
-    & [data-slot="carousel-control"] {
-      align-items: center;
-    }
-
-    & [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%));
-    }
-
-    & [data-slot="carousel-item"] {
-      place-items: center;
-      height: 100%;
-      display: grid;
-
-      & img, & video {
-        object-fit: contain;
-        border-radius: var(--lightbox-media-radius, var(--radius-md));
-        user-select: none;
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
-
-    & [data-slot="carousel-indicator-group"] {
-      flex-wrap: wrap;
-      width: fit-content;
-      max-width: 100%;
-      margin-inline: auto;
-    }
-
-    & [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);
-      background: none;
-      overflow: hidden;
-
-      &:hover {
-        opacity: var(--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));
-        opacity: 1;
-        transform: translateY(var(--lightbox-gallery-thumbnail-active-translate-y, calc(var(--border-width-sm) * -1)));
-        background: none;
-      }
-
-      & img {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
-  }
-
-  .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);
-    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));
-
-    &[data-state="open"] {
-      opacity: 1;
-      pointer-events: auto;
-      visibility: visible;
-    }
-  }
-
-  @keyframes BCq4HG_lightbox-backdrop-in {
-    from {
-      opacity: var(--lightbox-backdrop-starting-opacity, 0);
-      backdrop-filter: var(--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);
-    }
-  }
-
-  @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));
-    }
-  }
-
-  @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));
-    }
-  }
-}

package/dist/components/list/List.css

@@ -1,118 +0,0 @@
-@layer ui.components {
-  .dG8Cea_root[data-scope="list"][data-part="root"] {
-    --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
-    --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
-    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
-    --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
-    box-sizing: border-box;
-    color: var(--_list-color);
-    font-family: var(--list-font-family, inherit);
-    font-size: var(--_list-font-size);
-    font-weight: var(--list-font-weight, var(--weight-regular));
-    line-height: var(--_list-line-height);
-    letter-spacing: var(--list-letter-spacing, 0);
-    overflow-wrap: break-word;
-    margin: 0;
-    padding: 0;
-    list-style-position: outside;
-
-    &[data-gap="xs"] {
-      --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
-    }
-
-    &[data-gap="sm"] {
-      --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
-    }
-
-    &[data-gap="md"] {
-      --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
-    }
-
-    &[data-gap="lg"] {
-      --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
-    }
-
-    &[data-gap="xl"] {
-      --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
-    }
-
-    &[data-gap="2xl"] {
-      --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
-    }
-
-    & > li + li {
-      margin-block-start: var(--_list-gap);
-    }
-
-    & > li::marker {
-      color: var(--list-marker-color, currentColor);
-      font-weight: var(--list-marker-font-weight, inherit);
-    }
-
-    &[data-marker="none"] {
-      padding-inline-start: 0;
-      list-style: none;
-    }
-
-    &:is(ul, ol)[data-marker="auto"], &[data-marker="disc"], &[data-marker="decimal"] {
-      padding-inline-start: var(--list-padding-x, var(--spacing-5));
-    }
-
-    &:is(ul)[data-marker="auto"], &[data-marker="disc"] {
-      list-style-type: disc;
-    }
-
-    &:is(ol)[data-marker="auto"] {
-      list-style-type: revert;
-    }
-
-    &:is(ul)[data-marker="decimal"], &:is(ol)[data-marker="decimal"] {
-      list-style-type: decimal;
-    }
-
-    &[data-size="xs"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-xs, var(--text-xs)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-xs, var(--line-height-text-xs)));
-    }
-
-    &[data-size="sm"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-sm, var(--text-sm)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-sm, var(--line-height-text-sm)));
-    }
-
-    &[data-size="md"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
-    }
-
-    &[data-size="lg"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-lg, var(--text-lg)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-lg, var(--line-height-text-lg)));
-    }
-
-    &[data-size="xl"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-xl, var(--text-xl)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-xl, var(--line-height-text-xl)));
-    }
-
-    &[data-tone="default"] {
-      --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
-    }
-
-    &[data-tone="muted"] {
-      --_list-color: var(--list-color, var(--list-muted-color, var(--color-muted-foreground)));
-    }
-
-    &[data-tone="subtle"] {
-      --_list-color: var(--list-color, var(--list-subtle-color, var(--color-secondary-foreground)));
-    }
-
-    &[data-tone="primary"] {
-      --_list-color: var(--list-color, var(--list-primary-color, var(--color-primary)));
-    }
-
-    &[data-tone="destructive"] {
-      --_list-color: var(--list-color, var(--list-destructive-color, var(--color-destructive)));
-    }
-  }
-}