@moduix/react 2.2.0 → 2.2.4

package/dist/components/badge/Badge.css

@@ -1,110 +0,0 @@
-@layer moduix.components {
-  .NXa69G_root {
-    justify-content: center;
-    align-items: center;
-    gap: var(--moduix-badge-gap, var(--moduix-spacing-1-5));
-    border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-badge-border-color, transparent);
-    border-radius: var(--moduix-badge-radius, var(--moduix-radius-full));
-    width: fit-content;
-    min-width: 0;
-    max-width: 100%;
-    padding-block: var(--moduix-badge-padding-y, 0);
-    padding-inline: var(--moduix-badge-padding-x, var(--moduix-spacing-2-5));
-    background-color: var(--moduix-badge-bg, var(--moduix-color-primary));
-    color: var(--moduix-badge-color, var(--moduix-color-primary-foreground));
-    font-size: var(--moduix-badge-font-size, var(--moduix-text-xs));
-    font-weight: var(--moduix-badge-font-weight, var(--moduix-weight-medium));
-    font-variant-numeric: tabular-nums;
-    line-height: var(--moduix-badge-line-height, var(--moduix-line-height-text-xs));
-    min-height: var(--moduix-badge-height, 1.25rem);
-    user-select: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    transition: color var(--moduix-transition-default),
-      background-color var(--moduix-transition-default),
-      border-color var(--moduix-transition-default);
-    text-decoration: none;
-    display: inline-flex;
-    overflow: hidden;
-
-    &:is(a, button, [role="button"]) {
-      cursor: pointer;
-
-      &:focus-visible {
-        outline: var(--moduix-badge-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-          solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
-        outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
-      }
-
-      &[data-variant="default"], &[data-variant="secondary"], &[data-variant="destructive"] {
-        &:hover {
-          opacity: .9;
-        }
-      }
-
-      &[data-variant="outline"], &[data-variant="ghost"] {
-        &:hover {
-          border-color: var(--moduix-badge-border-color, var(--moduix-color-primary));
-          color: var(--moduix-badge-color, var(--moduix-color-primary));
-        }
-      }
-
-      &[data-variant="link"] {
-        &:hover {
-          text-decoration-color: currentColor;
-        }
-      }
-    }
-
-    & > svg {
-      width: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
-      height: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
-      pointer-events: none;
-      flex-shrink: 0;
-    }
-
-    &[data-variant="secondary"] {
-      background-color: var(--moduix-badge-bg, var(--moduix-color-secondary));
-      color: var(--moduix-badge-color, var(--moduix-color-secondary-foreground));
-    }
-
-    &[data-variant="destructive"] {
-      background-color: var(--moduix-badge-bg, var(--moduix-color-destructive));
-      color: var(--moduix-badge-color, var(--moduix-color-destructive-foreground));
-    }
-
-    &[data-variant="outline"], &[data-variant="ghost"], &[data-variant="link"] {
-      background-color: var(--moduix-badge-bg, transparent);
-    }
-
-    &[data-variant="outline"], &[data-variant="ghost"] {
-      color: var(--moduix-badge-color, var(--moduix-color-foreground));
-    }
-
-    &[data-variant="outline"] {
-      border-color: var(--moduix-badge-border-color, var(--moduix-color-border));
-    }
-
-    &[data-variant="link"] {
-      min-height: auto;
-      color: var(--moduix-badge-color, var(--moduix-color-primary));
-      text-decoration: underline;
-      text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
-      text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
-      border-color: #0000;
-      padding-inline: 0;
-      text-decoration-thickness: from-font;
-      overflow: visible;
-    }
-  }
-
-  .NXa69G_dot {
-    width: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
-    height: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
-    background-color: currentColor;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-}

package/dist/components/bleed/Bleed.css

@@ -1,51 +0,0 @@
-@layer moduix.components {
-  .m38JbW_root {
-    box-sizing: border-box;
-    margin: 0;
-
-    &[data-inline="xs"] {
-      margin-inline: calc(var(--moduix-bleed-inline-xs, var(--moduix-spacing-1)) * -1);
-    }
-
-    &[data-inline="sm"] {
-      margin-inline: calc(var(--moduix-bleed-inline-sm, var(--moduix-spacing-2)) * -1);
-    }
-
-    &[data-inline="md"] {
-      margin-inline: calc(var(--moduix-bleed-inline-md, var(--moduix-spacing-3)) * -1);
-    }
-
-    &[data-inline="lg"] {
-      margin-inline: calc(var(--moduix-bleed-inline-lg, var(--moduix-spacing-4)) * -1);
-    }
-
-    &[data-inline="xl"] {
-      margin-inline: calc(var(--moduix-bleed-inline-xl, var(--moduix-spacing-6)) * -1);
-    }
-
-    &[data-inline="full"] {
-      inline-size: var(--moduix-bleed-inline-full-size, 100vw);
-      margin-inline: var(--moduix-bleed-inline-full, calc(50% - 50vw));
-    }
-
-    &[data-block="xs"] {
-      margin-block: calc(var(--moduix-bleed-block-xs, var(--moduix-spacing-1)) * -1);
-    }
-
-    &[data-block="sm"] {
-      margin-block: calc(var(--moduix-bleed-block-sm, var(--moduix-spacing-2)) * -1);
-    }
-
-    &[data-block="md"] {
-      margin-block: calc(var(--moduix-bleed-block-md, var(--moduix-spacing-3)) * -1);
-    }
-
-    &[data-block="lg"] {
-      margin-block: calc(var(--moduix-bleed-block-lg, var(--moduix-spacing-4)) * -1);
-    }
-
-    &[data-block="xl"] {
-      margin-block: calc(var(--moduix-bleed-block-xl, var(--moduix-spacing-6)) * -1);
-    }
-  }
-}

package/dist/components/button/Button.css

@@ -1,216 +0,0 @@
-@layer moduix.components {
-  .NbN_ya_root {
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    gap: var(--moduix-button-content-gap, var(--moduix-spacing-2));
-    border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid transparent;
-    border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
-    color: var(--moduix-button-color, var(--moduix-color-foreground));
-    appearance: none;
-    font: inherit;
-    font-size: var(--moduix-button-font-size, var(--moduix-text-sm));
-    font-weight: var(--moduix-button-font-weight, var(--moduix-weight-medium));
-    line-height: var(--moduix-button-line-height, var(--moduix-line-height-text-sm));
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color var(--moduix-button-transition, var(--moduix-transition-default)),
-      border-color var(--moduix-button-transition, var(--moduix-transition-default)),
-      color var(--moduix-button-transition, var(--moduix-transition-default)),
-      opacity var(--moduix-button-transition, var(--moduix-transition-default)),
-      box-shadow var(--moduix-button-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    margin: 0;
-    text-decoration: none;
-    display: inline-flex;
-
-    &:focus-visible {
-      outline: var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-button-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: calc(var(--moduix-button-focus-ring-offset, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *
-          -1);
-    }
-
-    &:active:not([data-disabled]) {
-      opacity: .9;
-    }
-
-    &[data-disabled] {
-      opacity: var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &[data-loading] {
-      cursor: progress;
-    }
-
-    & :where(svg) {
-      width: var(--moduix-button-icon-size, var(--moduix-spacing-4));
-      height: var(--moduix-button-icon-size, var(--moduix-spacing-4));
-      flex-shrink: 0;
-    }
-
-    & [data-icon="inline-start"], & [data-icon="inline-end"] {
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      display: inline-flex;
-    }
-
-    &[data-variant="default"] {
-      border-color: var(--moduix-button-default-border-color, var(--moduix-color-primary));
-      background-color: var(--moduix-button-default-bg, var(--moduix-color-primary));
-      color: var(--moduix-button-default-color, var(--moduix-color-primary-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--moduix-button-default-bg-hover, color-mix(in srgb,
-              var(--moduix-button-default-bg, var(--moduix-color-primary)) 88%,
-              black));
-        }
-      }
-    }
-
-    &[data-variant="outline"] {
-      border-color: var(--moduix-button-outline-border-color, var(--moduix-color-border));
-      background-color: var(--moduix-button-outline-bg, var(--moduix-color-background));
-      color: var(--moduix-button-outline-color, var(--moduix-color-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--moduix-button-outline-bg-hover, var(--moduix-color-accent));
-        }
-      }
-    }
-
-    &[data-variant="secondary"] {
-      border-color: var(--moduix-button-secondary-border-color, var(--moduix-color-secondary));
-      background-color: var(--moduix-button-secondary-bg, var(--moduix-color-secondary));
-      color: var(--moduix-button-secondary-color, var(--moduix-color-secondary-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--moduix-button-secondary-bg-hover, var(--moduix-color-accent));
-        }
-      }
-    }
-
-    &[data-variant="destructive"] {
-      border-color: var(--moduix-button-destructive-border-color, var(--moduix-color-destructive));
-      background-color: var(--moduix-button-destructive-bg, var(--moduix-color-destructive));
-      color: var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          filter: brightness(var(--moduix-button-destructive-hover-brightness, .96));
-        }
-      }
-    }
-
-    &[data-variant="destructive-outline"] {
-      border-color: var(--moduix-button-destructive-outline-border-color, var(--moduix-color-destructive));
-      background-color: var(--moduix-button-destructive-outline-bg, var(--moduix-color-background));
-      color: var(--moduix-button-destructive-outline-color, var(--moduix-color-destructive));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--moduix-button-destructive-outline-bg-hover, var(--moduix-color-destructive));
-          color: var(--moduix-button-destructive-outline-color-hover, var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground)));
-        }
-      }
-    }
-
-    &[data-variant="ghost"] {
-      border-color: var(--moduix-button-ghost-border-color, transparent);
-      background-color: var(--moduix-button-ghost-bg, transparent);
-      color: var(--moduix-button-ghost-color, var(--moduix-color-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--moduix-button-ghost-bg-hover, var(--moduix-color-accent));
-        }
-      }
-    }
-
-    &[data-variant="link"] {
-      color: var(--moduix-button-link-color, var(--moduix-color-primary));
-      text-decoration: var(--moduix-button-link-text-decoration, underline);
-      text-underline-offset: var(--moduix-button-link-underline-offset, .25em);
-      background-color: #0000;
-      border-color: #0000;
-      padding-inline: 0;
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          color: var(--moduix-button-link-color-hover, var(--moduix-color-foreground));
-        }
-      }
-    }
-
-    &[data-size="xs"] {
-      min-height: var(--moduix-button-size-xs, var(--moduix-size-xs));
-      padding-block: var(--moduix-button-padding-y-xs, var(--moduix-spacing-0-5));
-      padding-inline: var(--moduix-button-padding-x-xs, var(--moduix-spacing-2-5));
-      font-size: var(--moduix-button-font-size-xs, var(--moduix-text-xs));
-      line-height: var(--moduix-button-line-height-xs, var(--moduix-line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      min-height: var(--moduix-button-size-sm, var(--moduix-size-sm));
-      padding-block: var(--moduix-button-padding-y-sm, var(--moduix-spacing-1));
-      padding-inline: var(--moduix-button-padding-x-sm, var(--moduix-spacing-3));
-    }
-
-    &[data-size="md"] {
-      min-height: var(--moduix-button-size-md, var(--moduix-size-md));
-      padding-block: var(--moduix-button-padding-y-md, var(--moduix-spacing-1));
-      padding-inline: var(--moduix-button-padding-x-md, var(--moduix-spacing-4));
-    }
-
-    &[data-size="lg"] {
-      min-height: var(--moduix-button-size-lg, var(--moduix-size-lg));
-      padding-block: var(--moduix-button-padding-y-lg, var(--moduix-spacing-1-5));
-      padding-inline: var(--moduix-button-padding-x-lg, var(--moduix-spacing-5));
-      font-size: var(--moduix-button-font-size-lg, var(--moduix-text-md));
-      line-height: var(--moduix-button-line-height-lg, var(--moduix-line-height-text-md));
-    }
-
-    &[data-size="xl"] {
-      min-height: var(--moduix-button-size-xl, var(--moduix-size-xl));
-      padding-block: var(--moduix-button-padding-y-xl, var(--moduix-spacing-2));
-      padding-inline: var(--moduix-button-padding-x-xl, var(--moduix-spacing-6));
-      font-size: var(--moduix-button-font-size-xl, var(--moduix-text-lg));
-      line-height: var(--moduix-button-line-height-xl, var(--moduix-line-height-text-lg));
-    }
-
-    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
-      gap: 0;
-      padding: 0;
-    }
-
-    &[data-size="icon-sm"] {
-      width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
-      min-width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
-      height: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
-    }
-
-    &[data-size="icon-md"] {
-      width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
-      min-width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
-      height: var(--moduix-button-size-icon-md, var(--moduix-size-md));
-    }
-
-    &[data-size="icon-lg"] {
-      width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
-      min-width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
-      height: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
-    }
-
-    &[data-variant="link"] {
-      min-height: 0;
-      padding-block: 0;
-    }
-  }
-}

package/dist/components/carousel/Carousel.css

@@ -1,200 +0,0 @@
-@layer moduix.components {
-  .NQiVeG_root {
-    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
-    flex-direction: column;
-    width: 100%;
-    min-width: 0;
-    display: flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] {
-    height: var(--moduix-carousel-height, 24rem);
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  .NQiVeG_control {
-    align-items: center;
-    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
-    min-width: 0;
-    display: flex;
-  }
-
-  .NQiVeG_control[data-orientation="vertical"] {
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .NQiVeG_itemGroup {
-    overscroll-behavior-x: contain;
-    overscroll-behavior-y: auto;
-    border-radius: var(--moduix-carousel-track-radius, var(--moduix-radius-xl));
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    flex: auto;
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &[data-dragging] {
-      cursor: grabbing;
-      user-select: none;
-    }
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_itemGroup {
-    overscroll-behavior-x: auto;
-    overscroll-behavior-y: contain;
-    height: 100%;
-  }
-
-  .NQiVeG_item {
-    box-sizing: border-box;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
-    width: var(--moduix-carousel-control-size, var(--moduix-size-md));
-    height: var(--moduix-carousel-control-size, var(--moduix-size-md));
-    border: var(--moduix-border-width-sm) solid
-      var(--moduix-carousel-control-border-color, color-mix(in oklab, var(--moduix-color-border) 88%, black 12%));
-    border-radius: var(--moduix-radius-full);
-    background-color: var(--moduix-carousel-control-bg, color-mix(in oklab, var(--moduix-color-background) 92%, var(--moduix-color-card) 8%));
-    box-shadow: var(--moduix-carousel-control-shadow, var(--moduix-shadow-sm));
-    color: var(--moduix-carousel-control-color, var(--moduix-color-foreground));
-    cursor: pointer;
-    transition: background-color var(--moduix-transition-fast),
-      border-color var(--moduix-transition-fast),
-      color var(--moduix-transition-fast),
-      box-shadow var(--moduix-transition-fast),
-      transform var(--moduix-transition-fast);
-    flex: none;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    & svg {
-      width: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
-      height: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
-    }
-
-    &:not(:disabled, [data-disabled]):hover {
-      border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
-      background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
-      box-shadow: var(--moduix-carousel-control-shadow-hover, var(--moduix-shadow-md));
-      color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
-    }
-
-    &:focus-visible {
-      outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
-    }
-
-    &:is(:disabled, [data-disabled]) {
-      cursor: not-allowed;
-      opacity: var(--moduix-opacity-disabled);
-    }
-
-    &[data-pressed] {
-      border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
-      background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
-      color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
-    }
-  }
-
-  .NQiVeG_defaultIcon {
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] {
-    & .NQiVeG_defaultIcon {
-      & svg {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  .NQiVeG_indicatorGroup {
-    justify-content: center;
-    align-items: center;
-    gap: var(--moduix-carousel-indicator-gap, var(--moduix-spacing-2));
-    display: flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup {
-    flex-direction: column;
-  }
-
-  .NQiVeG_indicator {
-    width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
-    height: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
-    border-radius: var(--moduix-radius-full);
-    background-color: var(--moduix-carousel-indicator-bg, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-background) 16%));
-    cursor: pointer;
-    opacity: .88;
-    transition: inline-size var(--moduix-transition-fast),
-      block-size var(--moduix-transition-fast),
-      background-color var(--moduix-transition-fast),
-      opacity var(--moduix-transition-fast);
-    border: 0;
-    padding: 0;
-
-    &:hover {
-      background-color: var(--moduix-carousel-indicator-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 56%, var(--moduix-color-foreground) 44%));
-    }
-
-    &:focus-visible {
-      outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
-    }
-
-    &[data-current] {
-      width: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
-      background-color: var(--moduix-carousel-indicator-bg-current, var(--moduix-color-primary));
-      opacity: 1;
-    }
-
-    &:is(:disabled, [data-disabled], [data-readonly]) {
-      cursor: not-allowed;
-      opacity: var(--moduix-opacity-disabled);
-    }
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator {
-    &[data-current] {
-      width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
-      height: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
-    }
-  }
-
-  .NQiVeG_autoplayTrigger {
-    min-width: var(--moduix-carousel-autoplay-trigger-min-width, calc(var(--moduix-size-md) + var(--moduix-spacing-3)));
-  }
-
-  .NQiVeG_autoplayIndicator {
-    min-width: var(--moduix-carousel-autoplay-indicator-min-width, var(--moduix-spacing-4));
-    font-size: var(--moduix-text-xs);
-    font-weight: var(--moduix-weight-medium);
-    line-height: var(--moduix-line-height-text-xs);
-    text-transform: uppercase;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .NQiVeG_progressText {
-    color: var(--moduix-carousel-progress-text-color, var(--moduix-color-muted-foreground));
-    font-size: var(--moduix-carousel-progress-text-font-size, var(--moduix-text-sm));
-    line-height: var(--moduix-line-height-text-sm);
-    font-variant-numeric: tabular-nums;
-  }
-}

package/dist/components/close-button/CloseButton.css

@@ -1,49 +0,0 @@
-@layer moduix.components {
-  ._8WDg2W_root {
-    box-sizing: border-box;
-    width: var(--moduix-close-button-size, var(--moduix-spacing-7));
-    height: var(--moduix-close-button-size, var(--moduix-spacing-7));
-    background-color: var(--moduix-close-button-bg, transparent);
-    border-radius: var(--moduix-close-button-radius, var(--moduix-radius-sm));
-    color: var(--moduix-close-button-color, var(--moduix-color-muted-foreground));
-    appearance: none;
-    font: inherit;
-    user-select: none;
-    cursor: pointer;
-    transition: background-color var(--moduix-close-button-transition, var(--moduix-transition-default)),
-      color var(--moduix-close-button-transition, var(--moduix-transition-default)),
-      opacity var(--moduix-close-button-transition, var(--moduix-transition-default));
-    border: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
-      height: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
-      flex-shrink: 0;
-    }
-
-    @media (hover: hover) {
-      &:hover:not([data-disabled]) {
-        background-color: var(--moduix-close-button-bg-hover, var(--moduix-color-muted));
-        color: var(--moduix-close-button-color-hover, var(--moduix-color-foreground));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--moduix-close-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-close-button-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-close-button-focus-ring-offset, var(--moduix-focus-ring-offset));
-    }
-
-    &[data-disabled] {
-      cursor: default;
-      pointer-events: none;
-      opacity: var(--moduix-close-button-disabled-opacity, var(--moduix-opacity-disabled));
-    }
-  }
-}

package/dist/components/container/Container.css

@@ -1,45 +0,0 @@
-@layer moduix.components {
-  .o47Mga_root {
-    --moduix-container-gutter: var(--moduix-container-gutter-md, clamp(1rem, 4vw, 2rem));
-    --moduix-container-max-width: var(--moduix-container-max-width-lg, 72rem);
-    box-sizing: border-box;
-    width: 100%;
-    max-width: calc(var(--moduix-container-max-width) + (var(--moduix-container-gutter) * 2));
-    min-width: 0;
-    padding-inline: var(--moduix-container-gutter);
-    margin-inline: auto;
-    display: block;
-
-    &[data-size="xs"] {
-      --moduix-container-max-width: var(--moduix-container-max-width-xs, 40rem);
-    }
-
-    &[data-size="sm"] {
-      --moduix-container-max-width: var(--moduix-container-max-width-sm, 48rem);
-    }
-
-    &[data-size="md"] {
-      --moduix-container-max-width: var(--moduix-container-max-width-md, 64rem);
-    }
-
-    &[data-size="xl"] {
-      --moduix-container-max-width: var(--moduix-container-max-width-xl, 90rem);
-    }
-
-    &[data-size="full"] {
-      max-width: none;
-    }
-
-    &[data-gutter="none"] {
-      --moduix-container-gutter: 0;
-    }
-
-    &[data-gutter="sm"] {
-      --moduix-container-gutter: var(--moduix-container-gutter-sm, clamp(.75rem, 3vw, 1.5rem));
-    }
-
-    &[data-gutter="lg"] {
-      --moduix-container-gutter: var(--moduix-container-gutter-lg, clamp(1.5rem, 5vw, 3rem));
-    }
-  }
-}