@vkzstudio/muza-ui 1.5.1 → 1.6.0

package/dist/components/Carousel/Carousel.js

@@ -1,28 +1,55 @@
-import { jsx as m, jsxs as j } from "react/jsx-runtime";
-import * as o from "react";
-import _ from "embla-carousel-react";
-import { useMuzaTranslations as L } from "../../translations/TranslationContext.js";
-import { ButtonArrow as P } from "../ButtonArrow/ButtonArrow.js";
-import { SliderIndicators as B } from "../SliderIndicators/SliderIndicators.js";
-import { cn as h } from "../../utils/cn.js";
-import { Flex as F } from "../Flex/Flex.js";
-const R = o.createContext(null), v = () => {
-  const t = o.useContext(R);
+import { jsx as p, jsxs as Z } from "react/jsx-runtime";
+import * as r from "react";
+import $ from "embla-carousel-autoplay";
+import ee from "embla-carousel-react";
+import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
+import { cn as C } from "../../utils/cn.js";
+import { ButtonArrow as K } from "../ButtonArrow/ButtonArrow.js";
+import { Flex as oe } from "../Flex/Flex.js";
+import { SliderIndicators as re } from "../SliderIndicators/SliderIndicators.js";
+import { useMediaQuery as te } from "../../hooks/use-media-query.js";
+const se = "(prefers-reduced-motion: reduce)", ae = 5e3, F = r.createContext(null), v = () => {
+  const t = r.useContext(F);
   if (!t)
     throw new Error("useCarousel must be used within a <Carousel />");
   return t;
-}, M = o.forwardRef(
+}, le = r.forwardRef(
   ({
     orientation: t = "horizontal",
-    options: s,
-    align: c,
-    setApi: l,
-    plugins: n,
-    className: f,
-    children: i,
-    ...C
-  }, w) => {
-    const [d, e] = _(
+    options: l,
+    align: u,
+    setApi: n,
+    plugins: s,
+    autoplay: f = !1,
+    autoplayDelay: c = ae,
+    className: w,
+    children: b,
+    onPointerEnter: m,
+    onPointerLeave: d,
+    ...x
+  }, a) => {
+    const i = te(se), y = (s ?? []).some(
+      (o) => o.name === "autoplay"
+    ), g = f && !i && !y, Y = r.useMemo(() => g ? [
+      ...s ?? [],
+      $({
+        delay: c,
+        // Pause/resume is driven from this component instead of the plugin's
+        // own wiring: on touch devices the browser fires a synthetic
+        // `mouseenter` after a tap and never a matching `mouseleave`, which
+        // leaves the plugin's internal "mouse is over" flag stuck and
+        // autoplay dead. `stopOnInteraction: true` keeps the plugin's
+        // pointerDown pause (the same thing we'd do ourselves) while leaving
+        // every resume decision to us, so hover state is always respected.
+        stopOnInteraction: !0,
+        stopOnMouseEnter: !1,
+        // The plugin's focus-in stop is a one-way trip in this configuration
+        // (its matching focusout resume is only registered when
+        // `stopOnInteraction` is false), which would kill autoplay for good
+        // the first time anything inside gets focused.
+        stopOnFocusIn: !1
+      })
+    ] : s, [g, c, s]), [j, e] = ee(
       {
         // `skipSnaps: true` lets a longer drag/flick cross several slides
         // before snapping, instead of Embla's default of clamping every drag
@@ -30,71 +57,100 @@ const R = o.createContext(null), v = () => {
         // (e.g. single-slide galleries that should advance one at a time).
         skipSnaps: !0,
         // `align` prop is a baseline; an explicit `options.align` overrides it.
-        ...c !== void 0 && { align: c },
-        ...s,
+        ...u !== void 0 && { align: u },
+        ...l,
         axis: t === "horizontal" ? "x" : "y"
       },
-      n
-    ), [b, a] = o.useState(!1), [u, x] = o.useState(!1), [D, E] = o.useState(0), [k, z] = o.useState(0), p = o.useCallback((r) => {
-      r && (E(r.selectedScrollSnap()), a(r.canScrollPrev()), x(r.canScrollNext()));
-    }, []), S = o.useCallback((r) => {
-      r && z(r.scrollSnapList().length);
-    }, []), N = o.useCallback(() => {
+      Y
+    ), [Q, B] = r.useState(!1), [V, q] = r.useState(!1), [G, J] = r.useState(0), [M, O] = r.useState(0), h = r.useCallback((o) => {
+      o && (J(o.selectedScrollSnap()), B(o.canScrollPrev()), q(o.canScrollNext()));
+    }, []), z = r.useCallback((o) => {
+      o && O(o.scrollSnapList().length);
+    }, []), E = r.useCallback(() => {
       e == null || e.scrollPrev();
-    }, [e]), y = o.useCallback(() => {
+    }, [e]), P = r.useCallback(() => {
       e == null || e.scrollNext();
-    }, [e]), A = o.useCallback(
-      (r) => {
-        e == null || e.scrollTo(r);
+    }, [e]), W = r.useCallback(
+      (o) => {
+        e == null || e.scrollTo(o);
       },
       [e]
-    ), K = o.useCallback(
-      (r) => {
-        const T = t === "horizontal" ? "ArrowLeft" : "ArrowUp", H = t === "horizontal" ? "ArrowRight" : "ArrowDown";
-        r.key === T ? (r.preventDefault(), N()) : r.key === H && (r.preventDefault(), y());
+    ), X = r.useCallback(
+      (o) => {
+        const L = t === "horizontal" ? "ArrowLeft" : "ArrowUp", D = t === "horizontal" ? "ArrowRight" : "ArrowDown";
+        o.key === L ? (o.preventDefault(), E()) : o.key === D && (o.preventDefault(), P());
       },
-      [t, N, y]
+      [t, E, P]
     );
-    o.useEffect(() => {
-      !e || !l || l(e);
-    }, [e, l]), o.useEffect(() => {
+    r.useEffect(() => {
+      !e || !n || n(e);
+    }, [e, n]), r.useEffect(() => {
       if (e)
-        return z(e.scrollSnapList().length), p(e), e.on("select", p), e.on("reInit", p), e.on("reInit", S), () => {
-          e.off("select", p), e.off("reInit", p), e.off("reInit", S);
+        return O(e.scrollSnapList().length), h(e), e.on("select", h), e.on("reInit", h), e.on("reInit", z), () => {
+          e.off("select", h), e.off("reInit", h), e.off("reInit", z);
         };
-    }, [e, p, S]);
-    const g = [], I = [];
-    return o.Children.forEach(i, (r) => {
-      o.isValidElement(r) && r.type === J ? g.push(r) : I.push(r);
-    }), /* @__PURE__ */ m(
-      R.Provider,
+    }, [e, h, z]);
+    const T = r.useRef(!1), S = r.useRef(!1), N = r.useRef(!1), R = g && M > 1, A = r.useCallback(
+      () => R ? e == null ? void 0 : e.plugins().autoplay : void 0,
+      [e, R]
+    ), k = r.useCallback(() => {
+      var o;
+      (o = A()) == null || o.stop();
+    }, [A]), I = r.useCallback(() => {
+      var o;
+      T.current || S.current || (o = A()) == null || o.play();
+    }, [A]);
+    r.useEffect(() => {
+      if (!e || !R) return;
+      const o = () => {
+        S.current = !0, N.current = !0, k();
+      }, L = () => {
+        S.current = !1, I();
+      }, D = () => {
+        N.current && (N.current = !1, I());
+      };
+      return e.on("pointerDown", o), e.on("pointerUp", L), e.on("settle", D), () => {
+        e.off("pointerDown", o), e.off("pointerUp", L), e.off("settle", D), S.current = !1, N.current = !1;
+      };
+    }, [e, R, k, I]);
+    const _ = [], H = [];
+    return r.Children.forEach(b, (o) => {
+      r.isValidElement(o) && o.type === fe ? _.push(o) : H.push(o);
+    }), /* @__PURE__ */ p(
+      F.Provider,
       {
         value: {
-          carouselRef: d,
+          carouselRef: j,
           api: e,
-          options: s,
+          options: l,
           orientation: t,
-          plugins: n,
-          scrollPrev: N,
-          scrollNext: y,
-          canScrollPrev: b,
-          canScrollNext: u,
-          selectedIndex: D,
-          scrollTo: A,
-          slidesCount: k
+          plugins: s,
+          scrollPrev: E,
+          scrollNext: P,
+          canScrollPrev: Q,
+          canScrollNext: V,
+          selectedIndex: G,
+          scrollTo: W,
+          slidesCount: M
         },
-        children: /* @__PURE__ */ j(
+        children: /* @__PURE__ */ Z(
           "div",
           {
-            ref: w,
-            onKeyDownCapture: K,
-            className: f,
+            ref: a,
+            onKeyDownCapture: X,
+            className: w,
             role: "region",
             "aria-roledescription": "carousel",
-            ...C,
+            onPointerEnter: (o) => {
+              o.pointerType === "mouse" && (T.current = !0, k()), m == null || m(o);
+            },
+            onPointerLeave: (o) => {
+              o.pointerType === "mouse" && (T.current = !1, I()), d == null || d(o);
+            },
+            ...x,
             children: [
-              /* @__PURE__ */ m("div", { className: "relative", children: I }),
-              g
+              /* @__PURE__ */ p("div", { className: "relative", children: H }),
+              _
             ]
           }
         )
@@ -102,90 +158,90 @@ const R = o.createContext(null), v = () => {
     );
   }
 );
-M.displayName = "Carousel";
-const U = o.forwardRef(
-  ({ className: t, overflowVisible: s = !1, ...c }, l) => {
-    const { carouselRef: n, orientation: f } = v(), i = f === "horizontal";
-    return /* @__PURE__ */ m(
+le.displayName = "Carousel";
+const ne = r.forwardRef(
+  ({ className: t, overflowVisible: l = !1, ...u }, n) => {
+    const { carouselRef: s, orientation: f } = v(), c = f === "horizontal";
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: n,
-        className: h(
+        ref: s,
+        className: C(
           // touch-action: keeps cross-axis native scroll while same-axis swipes go to Embla
           "select-none",
-          s ? "overflow-visible" : "overflow-hidden",
-          i ? "[touch-action:pan-y_pinch-zoom]" : "[touch-action:pan-x_pinch-zoom]"
+          l ? "overflow-visible" : "overflow-hidden",
+          c ? "[touch-action:pan-y_pinch-zoom]" : "[touch-action:pan-x_pinch-zoom]"
         ),
-        children: /* @__PURE__ */ m(
-          F,
+        children: /* @__PURE__ */ p(
+          oe,
           {
-            ref: l,
-            direction: i ? "row" : "column",
-            className: h(
-              i ? "-ml-comp-carousel-gap" : "-mt-comp-carousel-gap",
+            ref: n,
+            direction: c ? "row" : "column",
+            className: C(
+              c ? "-ml-comp-carousel-gap" : "-mt-comp-carousel-gap",
               t
             ),
-            ...c
+            ...u
           }
         )
       }
     );
   }
 );
-U.displayName = "CarouselContent";
-const V = o.forwardRef(
-  ({ className: t, ...s }, c) => {
-    const { orientation: l } = v();
-    return /* @__PURE__ */ m(
+ne.displayName = "CarouselContent";
+const ce = r.forwardRef(
+  ({ className: t, ...l }, u) => {
+    const { orientation: n } = v();
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: c,
+        ref: u,
         role: "group",
         "aria-roledescription": "slide",
-        className: h(
+        className: C(
           "min-w-0 shrink-0 grow-0 basis-full",
           {
-            "pl-comp-carousel-gap": l === "horizontal",
-            "pt-comp-carousel-gap": l !== "horizontal"
+            "pl-comp-carousel-gap": n === "horizontal",
+            "pt-comp-carousel-gap": n !== "horizontal"
           },
           t
         ),
-        ...s
+        ...l
       }
     );
   }
 );
-V.displayName = "CarouselItem";
-const q = o.forwardRef(
+ce.displayName = "CarouselItem";
+const ue = r.forwardRef(
   ({
     className: t,
-    size: s = "default",
-    ariaLabel: c,
-    hideWhenDisabled: l = !1,
-    onClick: n,
+    size: l = "default",
+    ariaLabel: u,
+    hideWhenDisabled: n = !1,
+    onClick: s,
     ...f
-  }, i) => {
-    const { orientation: C, scrollPrev: w, canScrollPrev: d } = v(), e = L(), b = c ?? e.carousel.previousAriaLabel, a = C === "horizontal", u = s === "sm";
-    return l && !d ? null : /* @__PURE__ */ m(
-      P,
+  }, c) => {
+    const { orientation: w, scrollPrev: b, canScrollPrev: m } = v(), d = U(), x = u ?? d.carousel.previousAriaLabel, a = w === "horizontal", i = l === "sm";
+    return n && !m ? null : /* @__PURE__ */ p(
+      K,
       {
-        ref: i,
+        ref: c,
         direction: "left",
-        size: s,
-        disabled: !d,
-        "aria-label": b,
-        onClick: (x) => {
-          w(), n == null || n(x);
+        size: l,
+        disabled: !m,
+        "aria-label": x,
+        onClick: (y) => {
+          b(), s == null || s(y);
         },
-        className: h(
+        className: C(
           "absolute",
           {
             "top-1/2 -translate-y-1/2": a,
             "left-1/2 -translate-x-1/2 rotate-90": !a,
-            "-left-comp-carousel-arrow-offset-sm": a && u,
-            "-left-comp-carousel-arrow-offset": a && !u,
-            "-top-comp-carousel-arrow-offset-v-sm": !a && u,
-            "-top-comp-carousel-arrow-offset-v": !a && !u
+            "-left-comp-carousel-arrow-offset-sm": a && i,
+            "-left-comp-carousel-arrow-offset": a && !i,
+            "-top-comp-carousel-arrow-offset-v-sm": !a && i,
+            "-top-comp-carousel-arrow-offset-v": !a && !i
           },
           t
         ),
@@ -194,37 +250,37 @@ const q = o.forwardRef(
     );
   }
 );
-q.displayName = "CarouselPrevious";
-const G = o.forwardRef(
+ue.displayName = "CarouselPrevious";
+const ie = r.forwardRef(
   ({
     className: t,
-    size: s = "default",
-    ariaLabel: c,
-    hideWhenDisabled: l = !1,
-    onClick: n,
+    size: l = "default",
+    ariaLabel: u,
+    hideWhenDisabled: n = !1,
+    onClick: s,
     ...f
-  }, i) => {
-    const { orientation: C, scrollNext: w, canScrollNext: d } = v(), e = L(), b = c ?? e.carousel.nextAriaLabel, a = C === "horizontal", u = s === "sm";
-    return l && !d ? null : /* @__PURE__ */ m(
-      P,
+  }, c) => {
+    const { orientation: w, scrollNext: b, canScrollNext: m } = v(), d = U(), x = u ?? d.carousel.nextAriaLabel, a = w === "horizontal", i = l === "sm";
+    return n && !m ? null : /* @__PURE__ */ p(
+      K,
       {
-        ref: i,
+        ref: c,
         direction: "right",
-        size: s,
-        disabled: !d,
-        "aria-label": b,
-        onClick: (x) => {
-          w(), n == null || n(x);
+        size: l,
+        disabled: !m,
+        "aria-label": x,
+        onClick: (y) => {
+          b(), s == null || s(y);
         },
-        className: h(
+        className: C(
           "absolute",
           {
             "top-1/2 -translate-y-1/2": a,
             "left-1/2 -translate-x-1/2 rotate-90": !a,
-            "-right-comp-carousel-arrow-offset-sm": a && u,
-            "-right-comp-carousel-arrow-offset": a && !u,
-            "-bottom-comp-carousel-arrow-offset-v-sm": !a && u,
-            "-bottom-comp-carousel-arrow-offset-v": !a && !u
+            "-right-comp-carousel-arrow-offset-sm": a && i,
+            "-right-comp-carousel-arrow-offset": a && !i,
+            "-bottom-comp-carousel-arrow-offset-v-sm": !a && i,
+            "-bottom-comp-carousel-arrow-offset-v": !a && !i
           },
           t
         ),
@@ -233,31 +289,32 @@ const G = o.forwardRef(
     );
   }
 );
-G.displayName = "CarouselNext";
-const J = ({
+ie.displayName = "CarouselNext";
+const fe = ({
   className: t,
-  ariaLabel: s,
-  buttonAriaLabel: c
+  ariaLabel: l,
+  buttonAriaLabel: u
 }) => {
-  const { selectedIndex: l, scrollTo: n, slidesCount: f } = v(), i = L();
-  return f <= 1 ? null : /* @__PURE__ */ m(
-    B,
+  const { selectedIndex: n, scrollTo: s, slidesCount: f } = v(), c = U();
+  return f <= 1 ? null : /* @__PURE__ */ p(
+    re,
     {
       count: f,
-      activeIndex: l,
-      onDotClick: n,
+      activeIndex: n,
+      onDotClick: s,
       interactive: !0,
-      className: h("mt-comp-carousel-dots-gap", t),
-      ariaLabel: s ?? i.carousel.dotsAriaLabel,
-      buttonAriaLabel: c ?? i.carousel.dotAriaLabel
+      className: C("mt-comp-carousel-dots-gap", t),
+      ariaLabel: l ?? c.carousel.dotsAriaLabel,
+      buttonAriaLabel: u ?? c.carousel.dotAriaLabel
     }
   );
 };
 export {
-  M as Carousel,
-  U as CarouselContent,
-  J as CarouselDots,
-  V as CarouselItem,
-  G as CarouselNext,
-  q as CarouselPrevious
+  le as Carousel,
+  ne as CarouselContent,
+  fe as CarouselDots,
+  ce as CarouselItem,
+  ie as CarouselNext,
+  ue as CarouselPrevious,
+  v as useCarousel
 };

package/dist/components/Carousel/Carousel.stories.d.ts

@@ -8,6 +8,8 @@ export declare const Vertical: Story;
 export declare const MultipleVisible: Story;
 export declare const WithLinks: Story;
 export declare const Looping: Story;
+export declare const Autoplay: Story;
+export declare const CustomControls: Story;
 export declare const SmallArrows: Story;
 export declare const NoDots: Story;
 //# sourceMappingURL=Carousel.stories.d.ts.map

package/dist/components/Carousel/Carousel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EACL,QAAQ,EAMT,MAAM,YAAY,CAAA;AAEnB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA2C/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiCtC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyCvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA"}
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,QAAQ,EAOT,MAAM,YAAY,CAAA;AAEnB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgD/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiCtC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyCvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAqCtB,CAAA;AA2BD,eAAO,MAAM,cAAc,EAAE,KAoD5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA"}

package/dist/components/Carousel/index.js

@@ -0,0 +1,10 @@
+import { Carousel as r, CarouselContent as s, CarouselDots as u, CarouselItem as C, CarouselNext as a, CarouselPrevious as l, useCarousel as t } from "./Carousel.js";
+export {
+  r as Carousel,
+  s as CarouselContent,
+  u as CarouselDots,
+  C as CarouselItem,
+  a as CarouselNext,
+  l as CarouselPrevious,
+  t as useCarousel
+};

package/dist/components/CategoryCard/CategoryCard.js

@@ -2,10 +2,10 @@ import { jsxs as l, Fragment as N, jsx as e } from "react/jsx-runtime";
 import * as i from "react";
 import { Slot as C } from "@radix-ui/react-slot";
 import { cva as w } from "class-variance-authority";
-import { Flex as x } from "../Flex/Flex.js";
 import { cn as t } from "../../utils/cn.js";
-import { Typography as f } from "../Typography/Typography.js";
+import { Flex as x } from "../Flex/Flex.js";
 import { Skeleton as n } from "../Skeleton/Skeleton.js";
+import { Typography as f } from "../Typography/Typography.js";
 const S = w([
   "group inline-flex w-full items-center gap-md no-underline",
   "py-sm pr-2xl pl-sm",

package/dist/components/CategoryCard/index.js

@@ -0,0 +1,6 @@
+import { CategoryCard as e, CategoryCardSkeleton as o, categoryCardVariants as t } from "./CategoryCard.js";
+export {
+  e as CategoryCard,
+  o as CategoryCardSkeleton,
+  t as categoryCardVariants
+};

package/dist/components/CategoryIcon/index.js

@@ -0,0 +1,5 @@
+import { CategoryIcon as a, categoryIconVariants as t } from "./CategoryIcon.js";
+export {
+  a as CategoryIcon,
+  t as categoryIconVariants
+};

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { forwardRef as v, useId as N } from "react";
 import * as c from "@radix-ui/react-checkbox";
-import { CheckMinus as z, Checked as w } from "../Icons/CustomIcons.js";
 import { cn as a } from "../../utils/cn.js";
+import { CheckMinus as z, Checked as w } from "../Icons/CustomIcons.js";
 import { Typography as n } from "../Typography/Typography.js";
 const C = v(
   ({

package/dist/components/Checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./Checkbox.js";
+export {
+  r as Checkbox
+};

package/dist/components/Chip/Chip.js

@@ -1,9 +1,9 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
 import { cva as m } from "class-variance-authority";
-import { EmptyCircle as f } from "../Icons/CustomIcons.js";
-import { cn as p } from "../../utils/cn.js";
-import { CheckCircleBold as x } from "@solar-icons/react-perf";
+import { cn as f } from "../../utils/cn.js";
+import { CheckCircleBold as p } from "@solar-icons/react-perf";
+import { EmptyCircle as x } from "../Icons/CustomIcons.js";
 import { Typography as b } from "../Typography/Typography.js";
 const v = m(
   [
@@ -73,11 +73,11 @@ const v = m(
         "aria-disabled": e,
         disabled: e,
         "data-state": r ? "checked" : "unchecked",
-        className: p(v({ checked: r, disabled: e, className: a })),
+        className: f(v({ checked: r, disabled: e, className: a })),
         onClick: d,
         ...s,
         children: [
-          r ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(f, {}),
+          r ? /* @__PURE__ */ t(p, {}) : /* @__PURE__ */ t(x, {}),
           /* @__PURE__ */ t(
             b,
             {

package/dist/components/Chip/index.js

@@ -0,0 +1,5 @@
+import { Chip as r, chipVariants as a } from "./Chip.js";
+export {
+  r as Chip,
+  a as chipVariants
+};

package/dist/components/DataTable/index.js

@@ -0,0 +1,5 @@
+import { DataTable as l, dataTableCellVariants as t } from "./DataTable.js";
+export {
+  l as DataTable,
+  t as dataTableCellVariants
+};