@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/carousel.css-mistica.js

@@ -2,11 +2,11 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./grid-layout.css.ts.vanilla.css-mistica.js";
 import "./carousel.css.ts.vanilla.css-mistica.js";
-var f = "_1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf46", b = "_1abcu72 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf47", y = "_1abcu72 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf4o", r = "_1abcu75 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt", c = "_1abcu7m _1abcu7b _1y2v1nfba _1y2v1nfcu", e = "_1y2v1nfba _1y2v1nfbj", u = "_1y2v1nfb3 _1y2v1nfd7 _1y2v1nfb4", t = "_1abcu7p", o = "_1abcu7t _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5", s = "_1abcu7s _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5", l = "_1abcu7n", i = "_1abcu7o", d = "_1abcu7w _1abcu7b _1y2v1nfba _1y2v1nfcu", p = "_1abcu714 _1y2v1nfb5 _1y2v1nffw _1y2v1nfba _1y2v1nfbj _1y2v1nfbx", w = "_1y2v1nfb4", m = "_1abcu7y _1y2v1nfbx _1y2v1nfbs", h = "_1abcu712 _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5 _1y2v1nffh", P = "_1abcu710 _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5 _1y2v1nff2", j = {
+var f = "_1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf46", b = "_1abcu72 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf47", y = "_1abcu72 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt _1y2v1nf4o", r = "_1abcu75 _1abcu71 _1y2v1nfc2 _1y2v1nfci _1y2v1nfdt", c = "_1abcu7m _1abcu7b _1y2v1nfba _1y2v1nfcu", e = "_1y2v1nfba _1y2v1nfbj", u = "_1y2v1nfb3 _1y2v1nfd7 _1y2v1nfb4", t = "_1abcu7p", o = "_1abcu7t _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5", s = "_1abcu7s _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5", l = "_1abcu7n", i = "_1abcu7o", d = "_1abcu7w _1abcu7b _1y2v1nfba _1y2v1nfcu", p = "_1abcu714 _1y2v1nfb5 _1y2v1nffx _1y2v1nfba _1y2v1nfbj _1y2v1nfbx", m = "_1y2v1nfb4", w = "_1abcu7y _1y2v1nfbx _1y2v1nfbs", P = "_1abcu712 _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5 _1y2v1nffi", h = "_1abcu710 _1abcu7r _1abcu7d _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt _1y2v1nf33 _1y2v1nfc8 _1y2v1nfco _1y2v1nfdr _1y2v1nfb5 _1y2v1nff3", j = {
     itemsPerPageMobile: "var(--_1abcu7g)",
     itemsPerPageTablet: "var(--_1abcu7h)",
     itemsPerPageDesktop: "var(--_1abcu7i)",
     gap: "var(--_1abcu7j)",
     mobilePageOffset: "var(--_1abcu7k)"
 };
-export { f as bullet, b as bulletActive, y as bulletActiveInverse, r as bulletInverse, c as carousel, e as carouselBullets, u as carouselContainer, t as carouselItem, o as carouselNextArrowButton, s as carouselPrevArrowButton, l as carouselWithScroll, i as centeredCarousel, d as slideshow, p as slideshowBullets, w as slideshowContainer, m as slideshowItem, h as slideshowNextArrowButton, P as slideshowPrevArrowButton, j as vars };
+export { f as bullet, b as bulletActive, y as bulletActiveInverse, r as bulletInverse, c as carousel, e as carouselBullets, u as carouselContainer, t as carouselItem, o as carouselNextArrowButton, s as carouselPrevArrowButton, l as carouselWithScroll, i as centeredCarousel, d as slideshow, p as slideshowBullets, m as slideshowContainer, w as slideshowItem, P as slideshowNextArrowButton, h as slideshowPrevArrowButton, j as vars };

package/dist-es/carousel.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -50,35 +51,35 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as s, jsxs as G } from "react/jsx-runtime";
+import { jsx as s, jsxs as $ } from "react/jsx-runtime";
 import * as n from "react";
 import te from "./generated/mistica-icons/icon-chevron-left-regular.js";
 import se from "./generated/mistica-icons/icon-chevron-right-regular.js";
-import { useScreenSize as oe, useTheme as re, useIsInViewport as xe } from "./hooks.js";
-import we from "./inline.js";
-import Se from "./stack.js";
-import { BaseTouchable as E } from "./touchable.js";
-import Z from "classnames";
-import { useIsInverseVariant as ke, ThemeVariant as B } from "./theme-variant-context.js";
-import { MediaBorderRadiusProvider as Ne } from "./image.js";
+import { useScreenSize as oe, useTheme as re, useIsInViewport as we } from "./hooks.js";
+import Se from "./inline.js";
+import ke from "./stack.js";
+import { BaseTouchable as M } from "./touchable.js";
+import X from "classnames";
+import { useIsInverseVariant as Ne, ThemeVariant as E } from "./theme-variant-context.js";
 import { listenResize as le, getPrefixedDataAttributes as Ce } from "./utils/dom.js";
 import { isAndroid as ne, isIos as Le, isRunningAcceptanceTest as Re } from "./utils/platform.js";
 import { useDocumentVisibility as Ae } from "./utils/document-visibility.js";
-import { slideshowContainer as Me, slideshowPrevArrowButton as Be, slideshow as Ee, slideshowItem as Te, slideshowNextArrowButton as ye, slideshowBullets as We, bulletActiveInverse as Oe, bulletInverse as De, bulletActive as Ve, bullet as ze, carouselContainer as _e, carouselPrevArrowButton as je, carousel as Fe, centeredCarousel as Ue, carouselWithScroll as qe, vars as L, carouselItem as Ke, carouselNextArrowButton as Ye, carouselBullets as Ge } from "./carousel.css-mistica.js";
-import { assignInlineVars as He } from "@vanilla-extract/dynamic";
-import { sprinkles as Je } from "./sprinkles.css-mistica.js";
-import { useDesktopContainerType as Qe } from "./desktop-container-type-context.js";
-import { VIVO_NEW_SKIN as Xe } from "./skins/constants.js";
-const ce = (e, r)=>{
+import { slideshowContainer as Be, slideshowPrevArrowButton as Ee, slideshow as Me, slideshowItem as Te, slideshowNextArrowButton as ye, slideshowBullets as We, bulletActiveInverse as Oe, bulletInverse as De, bulletActive as Ve, bullet as ze, carouselContainer as _e, carouselPrevArrowButton as je, carousel as Fe, centeredCarousel as Ue, carouselWithScroll as qe, vars as L, carouselItem as Ke, carouselNextArrowButton as Ye, carouselBullets as $e } from "./carousel.css-mistica.js";
+import { vars as Ge } from "./image.css-mistica.js";
+import { sprinkles as He } from "./sprinkles.css-mistica.js";
+import { useDesktopContainerType as Je } from "./desktop-container-type-context.js";
+import { VIVO_NEW_SKIN as Qe } from "./skins/constants.js";
+import { applyCssVars as ce } from "./utils/css.js";
+const ie = (e, r)=>{
     const t = Ae();
-    return xe(r, !1) && t && !!e;
-}, ie = (param)=>{
-    let { currentIndex: e , numPages: r , onPress: t  } = param;
-    const o = ke(), { isDesktopOrBigger: f  } = oe(), m = (b)=>{
-        const d = b === e;
+    return we(r, !1) && t && !!e;
+}, ae = (param)=>{
+    let { currentIndex: e, numPages: r, onPress: t } = param;
+    const o = Ne(), { isDesktopOrBigger: f } = oe(), m = (v)=>{
+        const d = v === e;
         return o ? d ? Oe : De : d ? Ve : ze;
     };
-    return /* @__PURE__ */ s(we, {
+    return /* @__PURE__ */ s(Se, {
         space: f ? 16 : 8,
         alignItems: "center",
         dataAttributes: {
@@ -86,8 +87,8 @@ const ce = (e, r)=>{
         },
         children: Array.from({
             length: r
-        }, (b, d)=>/* @__PURE__ */ s(E, {
-                className: Je({
+        }, (v, d)=>/* @__PURE__ */ s(M, {
+                className: He({
                     display: "block",
                     padding: 0,
                     border: "none",
@@ -100,7 +101,7 @@ const ce = (e, r)=>{
                 })
             }, d))
     });
-}, $ = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Ze = (e, r)=>{
+}, Z = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Xe = (e, r)=>{
     const t = {
         mobile: 1,
         tablet: 2,
@@ -111,14 +112,14 @@ const ce = (e, r)=>{
         }
     };
     if (!r) return _object_spread_props(_object_spread({}, t), {
-        desktop: $(e, t.desktop)
+        desktop: Z(e, t.desktop)
     });
     if (typeof r == "number") return {
         mobile: r,
         tablet: r,
         desktop: r
     };
-    const o = $(e, t.desktop, r.desktop);
+    const o = Z(e, t.desktop, r.desktop);
     return _object_spread_props(_object_spread({}, t, r), {
         desktop: o
     });
@@ -127,34 +128,34 @@ const ce = (e, r)=>{
     const t = Math.ceil(e.length / r), o = [];
     for(let f = 0; f < e.length; f += t)o.push(e[f]);
     return o[o.length - 1] = e[e.length - t], o;
-}, $e = (e, r)=>{
+}, Ze = (e, r)=>{
     const t = [];
     for(let o = 0; o < r.length; o++)o === 0 ? t.push(r[0]) : t.push((r[o] + r[o - 1]) / 2);
     for(let o = t.length - 1; o >= 0; o--)if (e - t[o] >= -1) return o;
     return 0;
-}, ae = 5e3, ue = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , itemsPerPage: b , itemsToScroll: d , mobilePageOffset: g , gap: N , free: R , centered: A , autoplay: v , onPageChange: P , dataAttributes: F  } = param;
-    const { texts: T , platformOverrides: x , skinName: y  } = re(), c = Qe(), i = Ze(c || "large", b), { isDesktopOrBigger: w , isTablet: C  } = oe(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), p = n.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H , scrollRight: q  }, de] = n.useState({
+}, ue = 5e3, fe = (param)=>{
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, itemsPerPage: v, itemsToScroll: d, mobilePageOffset: p, gap: N, free: R, centered: A, autoplay: b, onPageChange: P, dataAttributes: F } = param;
+    const { texts: T, platformOverrides: x, skinName: y } = re(), c = Je(), i = Xe(c || "large", v), { isDesktopOrBigger: w, isTablet: C } = oe(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), g = n.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: G, scrollRight: q }, he] = n.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [K, he] = n.useState([]), W = n.useMemo(()=>ee(K, S), [
+    }), [K, me] = n.useState([]), W = n.useMemo(()=>ee(K, S), [
         K,
         S
-    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, ge = H !== 0;
+    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, pe = q !== 0, ge = G !== 0;
     n.useEffect(()=>{
-        if (p.current) {
-            const l = p.current, a = ()=>{
-                const { scrollWidth: z , clientWidth: M  } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
-                de({
+        if (g.current) {
+            const l = g.current, a = ()=>{
+                const { scrollWidth: z, clientWidth: B } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + B));
+                he({
                     scrollLeft: _,
                     scrollRight: j
                 });
             }, u = ()=>{
                 const z = l.scrollWidth - l.clientWidth;
-                he(Array.from(l.querySelectorAll("[data-item]")).map((M, _)=>{
+                me(Array.from(l.querySelectorAll("[data-item]")).map((B, _)=>{
                     if (_ === e.length - 1) return z;
-                    const j = M.offsetLeft, Ie = parseInt(getComputedStyle(M).scrollMargin), Pe = A && !w ? j - M.clientWidth / 2 : j;
-                    return Math.min(Pe - Ie - l.offsetLeft, z);
+                    const j = B.offsetLeft, Pe = parseInt(getComputedStyle(B).scrollMargin), xe = A && !w ? j - B.clientWidth / 2 : j;
+                    return Math.min(xe - Pe - l.offsetLeft, z);
                 }));
             };
             a(), u(), l.addEventListener("scroll", a);
@@ -178,7 +179,7 @@ const ce = (e, r)=>{
     ]);
     const D = n.useCallback(function(l) {
         let a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const u = p.current;
+        const u = g.current;
         if (u) {
             const h = W[l];
             u.scrollTo({
@@ -188,10 +189,10 @@ const ce = (e, r)=>{
         }
     }, [
         W
-    ]), pe = n.useCallback(()=>{
-        const l = p.current;
+    ]), ve = n.useCallback(()=>{
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = [
+            const { scrollLeft: a } = l, u = [
                 ...O
             ].reverse().find((h)=>h - a < -1);
             l.scrollTo({
@@ -202,9 +203,9 @@ const ce = (e, r)=>{
     }, [
         O
     ]), Y = n.useCallback(()=>{
-        const l = p.current;
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = O.find((h)=>h - a > 1);
+            const { scrollLeft: a } = l, u = O.find((h)=>h - a > 1);
             l.scrollTo({
                 left: u,
                 behavior: "smooth"
@@ -212,7 +213,7 @@ const ce = (e, r)=>{
         }
     }, [
         O
-    ]), J = ce(!!v, p);
+    ]), H = ie(!!b, g);
     n.useEffect(()=>{
         m !== void 0 && D(Math.floor(m / I), !1);
     }, [
@@ -220,10 +221,10 @@ const ce = (e, r)=>{
         D,
         I
     ]), n.useEffect(()=>{
-        if (J && v) {
-            const l = typeof v == "boolean" ? ae : v.time, a = typeof v == "object" && v.loop, u = setInterval(()=>{
+        if (H && b) {
+            const l = typeof b == "boolean" ? ue : b.time, a = typeof b == "object" && b.loop, u = setInterval(()=>{
                 var h;
-                q !== 0 ? Y() : a && ((h = p.current) == null || h.scrollTo({
+                q !== 0 ? Y() : a && ((h = g.current) == null || h.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -231,12 +232,12 @@ const ce = (e, r)=>{
             return ()=>clearInterval(u);
         }
     }, [
-        v,
+        b,
         Y,
         q,
-        J
+        H
     ]);
-    const k = $e(H, W), Q = n.useRef(!m), X = n.useRef(0);
+    const k = Ze(G, W), J = n.useRef(!m), Q = n.useRef(0);
     n.useEffect(()=>{
         if (P) {
             const l = Math.min((k + 1) * I - 1, e.length - 1), a = [];
@@ -244,10 +245,10 @@ const ce = (e, r)=>{
                 const h = l - u;
                 h >= 0 && a.unshift(h);
             }
-            Q.current ? X.current !== k && P({
+            J.current ? Q.current !== k && P({
                 pageIndex: k,
                 shownItemIndexes: a
-            }) : Q.current = a.includes(m || 0), X.current = k;
+            }) : J.current = a.includes(m || 0), Q.current = k;
         }
     }, [
         k,
@@ -261,44 +262,44 @@ const ce = (e, r)=>{
         numPages: S,
         currentIndex: k,
         onPress: D
-    }) : o && (V = S > 1 && /* @__PURE__ */ s(ie, {
+    }) : o && (V = S > 1 && /* @__PURE__ */ s(ae, {
         numPages: S,
         currentIndex: k,
         onPress: D
     }));
-    const be = "64px", ve = "36px";
-    return /* @__PURE__ */ G(Se, {
+    const be = "64px", Ie = "36px";
+    return /* @__PURE__ */ $(ke, {
         space: 24,
         dataAttributes: _object_spread({
             "component-name": "Carousel"
         }, F),
         children: [
-            /* @__PURE__ */ G("div", {
+            /* @__PURE__ */ $("div", {
                 className: _e,
                 children: [
-                    /* @__PURE__ */ s(B, {
+                    /* @__PURE__ */ s(E, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ s(E, {
+                        children: /* @__PURE__ */ s(M, {
                             className: je,
                             "aria-label": T.carouselPrevButton,
-                            onPress: pe,
+                            onPress: ve,
                             disabled: !ge,
                             children: /* @__PURE__ */ s(te, {})
                         })
                     }),
                     /* @__PURE__ */ s("div", {
-                        className: Z(Fe, {
+                        className: X(Fe, {
                             [Ue]: A,
                             [qe]: S > 1
                         }),
-                        style: _object_spread_props(_object_spread({}, He(_object_spread({
+                        style: _object_spread_props(_object_spread({}, ce(_object_spread({
                             [L.itemsPerPageDesktop]: String(i.desktop),
                             [L.itemsPerPageTablet]: String(i.tablet),
                             [L.itemsPerPageMobile]: String(i.mobile)
-                        }, g === "large" ? {
+                        }, p === "large" ? {
                             [L.mobilePageOffset]: be
-                        } : y === Xe ? {
-                            [L.mobilePageOffset]: ve
+                        } : y === Qe ? {
+                            [L.mobilePageOffset]: Ie
                         } : {}, N !== void 0 ? {
                             [L.gap]: String(N)
                         } : {}))), {
@@ -310,9 +311,9 @@ const ce = (e, r)=>{
                             // slides border:
                             paddingBottom: Le(x) && !Re(x) ? 0.5 : void 0
                         }),
-                        ref: p,
+                        ref: g,
                         children: e.map((l, a)=>/* @__PURE__ */ s("div", {
-                                className: Z(Ke, t),
+                                className: X(Ke, t),
                                 style: _object_spread_props(_object_spread({}, r), {
                                     scrollSnapStop: ne(x) ? "always" : "normal"
                                 }),
@@ -320,27 +321,27 @@ const ce = (e, r)=>{
                                 children: l
                             }, a))
                     }),
-                    /* @__PURE__ */ s(B, {
+                    /* @__PURE__ */ s(E, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ s(E, {
+                        children: /* @__PURE__ */ s(M, {
                             className: Ye,
                             "aria-label": T.carouselNextButton,
                             onPress: Y,
-                            disabled: !me,
+                            disabled: !pe,
                             children: /* @__PURE__ */ s(se, {})
                         })
                     })
                 ]
             }),
             V && /* @__PURE__ */ s("div", {
-                className: Ge,
+                className: $e,
                 children: V
             })
         ]
     });
-}, It = (e)=>/* @__PURE__ */ s(ue, _object_spread({}, e)), Pt = (param)=>/* @__PURE__ */ {
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , onPageChange: b , dataAttributes: d  } = param;
-    return s(ue, {
+}, It = (e)=>/* @__PURE__ */ s(fe, _object_spread({}, e)), Pt = (param)=>/* @__PURE__ */ {
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, onPageChange: v, dataAttributes: d } = param;
+    return s(fe, {
         items: e,
         itemStyle: r,
         itemClassName: t,
@@ -355,41 +356,41 @@ const ce = (e, r)=>{
         withBullets: o,
         renderBullets: f,
         initialActiveItem: m,
-        onPageChange: b,
+        onPageChange: v,
         dataAttributes: d
     });
-}, fe = /*#__PURE__*/ n.createContext(!1), xt = ()=>n.useContext(fe), et = (param)=>/* @__PURE__ */ {
-    let { children: e  } = param;
-    return s(fe.Provider, {
+}, de = /*#__PURE__*/ n.createContext(!1), xt = ()=>n.useContext(de), et = (param)=>/* @__PURE__ */ {
+    let { children: e } = param;
+    return s(de.Provider, {
         value: !0,
         children: e
     });
 }, wt = (param)=>{
-    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: f , inverseBullets: m = !0  } = param;
-    const { texts: b , platformOverrides: d  } = re(), g = n.useRef(null), [{ scrollLeft: N , scrollRight: R  }, A] = n.useState({
+    let { items: e, withBullets: r, autoplay: t, onPageChange: o, dataAttributes: f, inverseBullets: m = !0 } = param;
+    const { texts: v, platformOverrides: d } = re(), p = n.useRef(null), [{ scrollLeft: N, scrollRight: R }, A] = n.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), v = n.useCallback(()=>{
-        const c = g.current;
+    }), b = n.useCallback(()=>{
+        const c = p.current;
         c && c.scrollBy({
             left: -c.clientWidth,
             behavior: "smooth"
         });
     }, []), P = n.useCallback(()=>{
-        const c = g.current;
+        const c = p.current;
         c && c.scrollBy({
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), F = R !== 0, T = N !== 0, x = g.current ? Math.floor((N + g.current.clientWidth / 2) / g.current.clientWidth) : 0;
+    }, []), F = R !== 0, T = N !== 0, x = p.current ? Math.floor((N + p.current.clientWidth / 2) / p.current.clientWidth) : 0;
     n.useLayoutEffect(()=>{
-        const c = g.current;
+        const c = p.current;
         if (c) {
             const i = ()=>{
-                const { scrollWidth: C , clientWidth: U  } = c, I = Math.round(c.scrollLeft), p = Math.round(C - (I + U));
+                const { scrollWidth: C, clientWidth: U } = c, I = Math.round(c.scrollLeft), g = Math.round(C - (I + U));
                 A({
                     scrollLeft: I,
-                    scrollRight: p
+                    scrollRight: g
                 });
             };
             i(), c.addEventListener("scroll", i);
@@ -401,12 +402,12 @@ const ce = (e, r)=>{
     }, [
         e.length
     ]);
-    const y = ce(!!t, g);
+    const y = ie(!!t, p);
     return n.useEffect(()=>{
         if (y && t) {
-            const c = typeof t == "boolean" ? ae : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
+            const c = typeof t == "boolean" ? ue : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
                 var C;
-                R !== 0 ? P() : i && ((C = g.current) == null || C.scrollTo({
+                R !== 0 ? P() : i && ((C = p.current) == null || C.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -424,25 +425,27 @@ const ce = (e, r)=>{
         x,
         o
     ]), /* @__PURE__ */ s(et, {
-        children: /* @__PURE__ */ G("div", _object_spread_props(_object_spread({
-            className: Me
+        children: /* @__PURE__ */ $("div", _object_spread_props(_object_spread({
+            className: Be
         }, Ce(f, "SlideShow")), {
             children: [
-                /* @__PURE__ */ s(B, {
+                /* @__PURE__ */ s(E, {
                     isInverse: !1,
-                    children: /* @__PURE__ */ s(E, {
-                        className: Be,
-                        "aria-label": b.carouselPrevButton,
-                        onPress: v,
+                    children: /* @__PURE__ */ s(M, {
+                        className: Ee,
+                        "aria-label": v.carouselPrevButton,
+                        onPress: b,
                         disabled: !T,
                         children: /* @__PURE__ */ s(te, {})
                     })
                 }),
-                /* @__PURE__ */ s(Ne, {
-                    value: !1,
+                /* @__PURE__ */ s("div", {
+                    style: ce({
+                        [Ge.mediaBorderRadius]: "0px"
+                    }),
                     children: /* @__PURE__ */ s("div", {
-                        className: Ee,
-                        ref: g,
+                        className: Me,
+                        ref: p,
                         children: e.map((c, i)=>/* @__PURE__ */ s("div", {
                                 className: Te,
                                 style: {
@@ -452,21 +455,21 @@ const ce = (e, r)=>{
                             }, i))
                     })
                 }),
-                /* @__PURE__ */ s(B, {
+                /* @__PURE__ */ s(E, {
                     isInverse: !1,
-                    children: /* @__PURE__ */ s(E, {
+                    children: /* @__PURE__ */ s(M, {
                         className: ye,
-                        "aria-label": b.carouselNextButton,
+                        "aria-label": v.carouselNextButton,
                         onPress: P,
                         disabled: !F,
                         children: /* @__PURE__ */ s(se, {})
                     })
                 }),
-                r && e.length > 1 && /* @__PURE__ */ s(B, {
+                r && e.length > 1 && /* @__PURE__ */ s(E, {
                     isInverse: m,
                     children: /* @__PURE__ */ s("div", {
                         className: We,
-                        children: /* @__PURE__ */ s(ie, {
+                        children: /* @__PURE__ */ s(ae, {
                             numPages: e.length,
                             currentIndex: x
                         })
@@ -476,4 +479,4 @@ const ce = (e, r)=>{
         }))
     });
 };
-export { It as Carousel, Pt as CenteredCarousel, et as IsInsideSlideshowProvider, ie as PageBullets, wt as Slideshow, xt as useIsInsideSlideshowContext };
+export { It as Carousel, Pt as CenteredCarousel, et as IsInsideSlideshowProvider, ae as PageBullets, wt as Slideshow, xt as useIsInsideSlideshowContext };

package/dist-es/checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -52,7 +53,7 @@ function _object_spread_props(target, source) {
 }
 import { jsx as a, jsxs as A } from "react/jsx-runtime";
 import * as m from "react";
-import { SPACE as D } from "./utils/key-codes.js";
+import { SPACE as D } from "./utils/keys.js";
 import { useControlProps as L } from "./form-context.js";
 import N from "./inline.js";
 import { Text3 as f } from "./text.js";
@@ -63,8 +64,8 @@ import { checkboxContainerDisabled as E, checkboxContainer as V, disabled as x,
 import { vars as v } from "./skins/skin-contract.css-mistica.js";
 import { combineRefs as z } from "./utils/common.js";
 const B = (param)=>{
-    let { isChecked: e , disabled: c  } = param;
-    const { isIos: o  } = R(), l = o ? /* @__PURE__ */ a("svg", {
+    let { isChecked: e, disabled: c } = param;
+    const { isIos: l } = R(), o = l ? /* @__PURE__ */ a("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -88,47 +89,47 @@ const B = (param)=>{
         })
     });
     return /* @__PURE__ */ a("div", {
-        className: n(j[e ? "checked" : o ? "ios" : "rest"], {
+        className: n(j[e ? "checked" : l ? "ios" : "rest"], {
             [x]: c
         }),
-        children: l
+        children: o
     });
 }, K = /*#__PURE__*/ m.forwardRef((e, c)=>{
-    const o = P(e["aria-labelledby"]), l = e["aria-label"], C = l || e["aria-labelledby"], { defaultValue: g , value: t , onChange: s , focusableRef: w , disabled: i  } = L({
+    const l = P(e["aria-labelledby"]), o = e["aria-label"], C = o || e["aria-labelledby"], { defaultValue: g, value: t, onChange: s, focusableRef: w, disabled: i } = L({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [d, y] = m.useState(!!g), h = ()=>{
-        t === void 0 ? (y(!d), s(!d)) : s(!t);
-    }, I = (r)=>{
-        r.keyCode === D && (r.preventDefault(), r.stopPropagation(), h());
+    }), [r, y] = m.useState(!!g), h = ()=>{
+        t === void 0 ? (y(!r), s(!r)) : s(!t);
+    }, I = (d)=>{
+        d.key === D && (d.preventDefault(), d.stopPropagation(), h());
     }, b = /* @__PURE__ */ a(B, {
         disabled: i,
-        isChecked: t !== null && t !== void 0 ? t : d
+        isChecked: t !== null && t !== void 0 ? t : r
     });
     return(// When the checkbox is disabled, it shouldn't be focusable
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
         id: e.id,
         role: e.role || "checkbox",
-        "aria-checked": t !== null && t !== void 0 ? t : d,
+        "aria-checked": t !== null && t !== void 0 ? t : r,
         onKeyDown: i ? void 0 : I,
-        onClick: (r)=>{
-            r.stopPropagation(), i || h();
+        onClick: (d)=>{
+            d.stopPropagation(), i || h();
         },
         tabIndex: i ? void 0 : 0,
         ref: z(c, w),
         className: i ? E : V,
-        "aria-label": l,
-        "aria-labelledby": l ? void 0 : o,
+        "aria-label": o,
+        "aria-labelledby": o ? void 0 : l,
         "aria-disabled": i
     }, S(e.dataAttributes, "Checkbox")), {
         children: e.render ? e.render({
             controlElement: b,
-            labelId: o,
-            checked: t !== null && t !== void 0 ? t : d,
+            labelId: l,
+            checked: t !== null && t !== void 0 ? t : r,
             disabled: !!i
         }) : /* @__PURE__ */ A(N, {
             space: 16,
@@ -147,7 +148,7 @@ const B = (param)=>{
                 e.children && /* @__PURE__ */ a(f, {
                     regular: !0,
                     as: "div",
-                    id: o,
+                    id: l,
                     role: C ? "presentation" : void 0,
                     children: /* @__PURE__ */ a("span", {
                         className: i ? x : "",

package/dist-es/chip.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -65,7 +66,7 @@ import { getPrefixedDataAttributes as g } from "./utils/dom.js";
 import { useThemeVariant as W } from "./theme-variant-context.js";
 import { BaseTouchable as v } from "./touchable.js";
 const F = (e)=>{
-    const { Icon: c , children: P , id: k , dataAttributes: l , active: s , badge: r , onClose: d  } = e, { texts: T , isDarkMode: A , textPresets: I  } = N(), m = W() === "alternative", { isTabletOrSmaller: a  } = V(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ t(C, {
+    const { Icon: c, children: P, id: k, dataAttributes: l, active: s, badge: r, onClose: d } = e, { texts: T, isDarkMode: A, textPresets: I } = N(), m = W() === "alternative", { isTabletOrSmaller: a } = V(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ t(C, {
             children: r === !0 ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(x, {
                 value: r
             })

package/dist-es/circle.js

@@ -55,7 +55,7 @@ import { circle as a } from "./circle.css-mistica.js";
 import { vars as d } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as f } from "./utils/dom.js";
 const n = (param)=>{
-    let { children: e , backgroundColor: i , backgroundImage: o , size: t , border: r = !1 , dataAttributes: s  } = param;
+    let { children: e, backgroundColor: i, backgroundImage: o, size: t, border: r = !1, dataAttributes: s } = param;
     const l = r === !0 ? d.colors.border : r, c = r ? `1px solid ${l}` : void 0;
     return /* @__PURE__ */ m("div", _object_spread_props(_object_spread({
         className: a,

package/dist-es/community/advanced-data-card.css-mistica.js

@@ -3,5 +3,5 @@ import "./advanced-data-card.css.ts.vanilla.css-mistica.js";
 var a = "_1x00fru3 _1x00fru1 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbw _1y2v1nfbm _1y2v1nf7x", _ = {
     default: "_1x00fruk",
     mobile: "_1x00frul"
-}, n = "_1x00frur", v = "_1x00frun", t = "_1x00fruo _1x00frun", u = "_1x00fru9 _1x00fru1 _1y2v1nf90 _1y2v1nfa9 _1y2v1nf6c _1y2v1nf7x", x = "_1x00frud _1y2v1nfb4 _1y2v1nfba _1y2v1nfbw _1y2v1nfbg _1y2v1nfbx _1y2v1nfce _1x00frub", y = "_1x00frui", o = "_1x00fruq _1y2v1nfba _1y2v1nfbf", b = "_1y2v1nfba _1y2v1nfbw _1y2v1nfbp _1y2v1nfdj", i = "_1x00frum", e = "_1y2v1nfff", d = "_1x00frub", c = "_1x00fru1 _1y2v1nf90 _1y2v1nfa9", l = "_1x00fru4", m = "_1x00fru7", g = "_1x00fru5", h = "_1x00frua";
-export { a as actions, _ as actionsVariants, n as adjustButtonLink, v as button, t as buttonMobile, u as cardContentStyle, x as dataCard, y as divider, o as footerDirection, b as footerText, i as marginRightAuto, e as marginRightButton, d as minHeight, c as paddingX, l as touchableArea, m as touchableCardOverlay, g as touchableContainer, h as zindex };
+}, n = "_1x00frur", v = "_1x00frun", t = "_1x00fruo _1x00frun", u = "_1x00fru9 _1x00fru1 _1y2v1nf90 _1y2v1nfa9 _1y2v1nf6c _1y2v1nf7x", x = "_1x00frud _1y2v1nfb4 _1y2v1nfba _1y2v1nfbw _1y2v1nfbg _1y2v1nfbx _1y2v1nfce _1x00frub", y = "_1x00frui", o = "_1x00fruq _1y2v1nfba _1y2v1nfbf", b = "_1y2v1nfba _1y2v1nfbw _1y2v1nfbp _1y2v1nfdj", i = "_1x00frum", e = "_1y2v1nffg", d = "_1x00frub", c = "_1x00fru1 _1y2v1nf90 _1y2v1nfa9", l = "_1x00fru4", g = "_1x00fru7", m = "_1x00fru5", h = "_1x00frua";
+export { a as actions, _ as actionsVariants, n as adjustButtonLink, v as button, t as buttonMobile, u as cardContentStyle, x as dataCard, y as divider, o as footerDirection, b as footerText, i as marginRightAuto, e as marginRightButton, d as minHeight, c as paddingX, l as touchableArea, g as touchableCardOverlay, m as touchableContainer, h as zindex };