@telefonica/mistica 14.4.0 → 14.5.0

package/dist-es/carousel.js

@@ -51,33 +51,33 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import * as c from "react";
-import X from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import Z from "./generated/mistica-icons/icon-chevron-right-regular.js";
-import { useScreenSize as $, useTheme as ee, useIsInViewport as pe, useIsomorphicLayoutEffect as ge } from "./hooks.js";
-import ve from "./inline.js";
-import be from "./stack.js";
-import { BaseTouchable as R } from "./touchable.js";
-import J from "classnames";
-import { useIsInverseVariant as Ie, ThemeVariant as M } from "./theme-variant-context.js";
-import { MediaBorderRadiusProvider as Pe } from "./image.js";
-import { listenResize as te, getPrefixedDataAttributes as xe } from "./utils/dom.js";
-import { isAndroid as se } from "./utils/platform.js";
-import { useDocumentVisibility as we } from "./utils/document-visibility.js";
-import { slideshowContainer as Se, slideshowPrevArrowButton as ke, slideshow as Le, slideshowItem as Ce, slideshowNextArrowButton as Ne, slideshowBullets as Ae, bulletActiveInverse as Me, bulletInverse as Re, bulletActive as Be, bullet as Ee, carouselContainer as ye, carouselPrevArrowButton as Te, carousel as We, centeredCarousel as De, carouselWithScroll as Ve, vars as _, carouselItem as Oe, carouselNextArrowButton as ze, carouselBullets as je } from "./carousel.css-mistica.js";
-import { assignInlineVars as _e } from "@vanilla-extract/dynamic";
-import { sprinkles as Fe } from "./sprinkles.css-mistica.js";
-import { useDesktopContainerType as Ue } from "./desktop-container-type-context.js";
+import $ from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import ee from "./generated/mistica-icons/icon-chevron-right-regular.js";
+import { useScreenSize as te, useTheme as se, useIsInViewport as be, useIsomorphicLayoutEffect as ve } from "./hooks.js";
+import Ie from "./inline.js";
+import Pe from "./stack.js";
+import { BaseTouchable as M } from "./touchable.js";
+import Q from "classnames";
+import { useIsInverseVariant as xe, ThemeVariant as A } from "./theme-variant-context.js";
+import { MediaBorderRadiusProvider as we } from "./image.js";
+import { listenResize as oe, getPrefixedDataAttributes as Se } from "./utils/dom.js";
+import { isAndroid as re } from "./utils/platform.js";
+import { useDocumentVisibility as ke } from "./utils/document-visibility.js";
+import { slideshowContainer as Le, slideshowPrevArrowButton as Ce, slideshow as Ne, slideshowItem as Re, slideshowNextArrowButton as Ae, slideshowBullets as Me, bulletActiveInverse as Be, bulletInverse as Ee, bulletActive as Te, bullet as ye, carouselContainer as We, carouselPrevArrowButton as De, carousel as Ve, centeredCarousel as ze, carouselWithScroll as Oe, vars as _, carouselItem as je, carouselNextArrowButton as _e, carouselBullets as Fe } from "./carousel.css-mistica.js";
+import { assignInlineVars as Ue } from "@vanilla-extract/dynamic";
+import { sprinkles as qe } from "./sprinkles.css-mistica.js";
+import { useDesktopContainerType as Ye } from "./desktop-container-type-context.js";
 import { jsx as s, jsxs as G } from "./_virtual/jsx-runtime.js";
-const oe = (e, r)=>{
-    const t = we();
-    return pe(r, !1) && t && !!e;
-}, re = (param)=>{
+const le = (e, r)=>{
+    const t = ke();
+    return be(r, !1) && t && !!e;
+}, ne = (param)=>{
     let { currentIndex: e , numPages: r , onPress: t  } = param;
-    const o = Ie(), { isDesktopOrBigger: u  } = $(), I = (P)=>{
-        const d = P === e;
-        return o ? d ? Me : Re : d ? Be : Ee;
+    const o = xe(), { isDesktopOrBigger: u  } = te(), m = (P)=>{
+        const f = P === e;
+        return o ? f ? Be : Ee : f ? Te : ye;
     };
-    return /* @__PURE__ */ s(ve, {
+    return /* @__PURE__ */ s(Ie, {
         space: u ? 16 : 8,
         alignItems: "center",
         dataAttributes: {
@@ -85,21 +85,21 @@ const oe = (e, r)=>{
         },
         children: Array.from({
             length: r
-        }, (P, d)=>/* @__PURE__ */ s(R, {
-                className: Fe({
+        }, (P, f)=>/* @__PURE__ */ s(M, {
+                className: qe({
                     display: "block",
                     padding: 0,
                     border: "none",
                     background: "transparent"
                 }),
                 maybe: !0,
-                onPress: u && t ? ()=>t(d) : void 0,
+                onPress: u && t ? ()=>t(f) : void 0,
                 children: /* @__PURE__ */ s("div", {
-                    className: I(d)
+                    className: m(f)
                 })
-            }, d))
+            }, f))
     });
-}, K = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], qe = (e, r)=>{
+}, X = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Ge = (e, r)=>{
     const t = {
         mobile: 1,
         tablet: 2,
@@ -110,54 +110,54 @@ const oe = (e, r)=>{
         }
     };
     if (!r) return _objectSpreadProps(_objectSpread({}, t), {
-        desktop: K(e, t.desktop)
+        desktop: X(e, t.desktop)
     });
     if (typeof r == "number") return {
         mobile: r,
         tablet: r,
         desktop: r
     };
-    const o = K(e, t.desktop, r.desktop);
+    const o = X(e, t.desktop, r.desktop);
     return _objectSpreadProps(_objectSpread({}, t, r), {
         desktop: o
     });
-}, Q = (e, r)=>{
+}, Z = (e, r)=>{
     if (e.length === 0) return [];
     const t = Math.ceil(e.length / r), o = [];
     for(let u = 0; u < e.length; u += t)o.push(e[u]);
     return o[o.length - 1] = e[e.length - t], o;
-}, Ye = (e, r)=>{
+}, He = (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 o1 = t.length - 1; o1 >= 0; o1--)if (e - t[o1] >= -1) return o1;
     return 0;
-}, le = 5e3, ne = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: I , itemsPerPage: P , itemsToScroll: d , gap: f , free: B , centered: w , autoplay: x , onPageChange: S , dataAttributes: k  } = param;
-    const { texts: E , platformOverrides: F  } = ee(), L = Ue(), m = qe(L || "large", P), { isDesktopOrBigger: n , isMobile: g  } = $(), C = g ? m.mobile : m.tablet, p = Math.max(Math.floor(n ? m.desktop : C), 1), v = c.useRef(null), b = Math.ceil(e.length / p), [{ scrollLeft: y , scrollRight: U  }, ie] = c.useState({
+}, ce = 5e3, ie = (param)=>{
+    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: m , itemsPerPage: P , itemsToScroll: f , gap: d , free: B , centered: w , autoplay: x , onPageChange: k , dataAttributes: L  } = param;
+    const { texts: E , platformOverrides: F  } = se(), C = Ye(), p = Ge(C || "large", P), { isDesktopOrBigger: n , isTablet: b  } = te(), N = b ? p.tablet : p.mobile, g = Math.max(Math.floor(n ? p.desktop : N), 1), v = c.useRef(null), I = Math.ceil(e.length / g), [{ scrollLeft: T , scrollRight: U  }, ue] = c.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [q, ae] = c.useState([]), T = c.useMemo(()=>Q(q, b), [
+    }), [q, fe] = c.useState([]), y = c.useMemo(()=>Z(q, I), [
         q,
-        b
-    ]), W = d ? Q(q, Math.ceil(e.length / d)) : T, ue = U !== 0, de = y !== 0;
-    ge(()=>{
+        I
+    ]), W = f ? Z(q, Math.ceil(e.length / f)) : y, de = U !== 0, he = T !== 0;
+    ve(()=>{
         if (v.current) {
             const l = v.current, i = ()=>{
-                const { scrollWidth: O , clientWidth: A  } = l, z = Math.round(l.scrollLeft), j = Math.round(O - (z + A));
-                ie({
-                    scrollLeft: z,
+                const { scrollWidth: z , clientWidth: R  } = l, O = Math.round(l.scrollLeft), j = Math.round(z - (O + R));
+                ue({
+                    scrollLeft: O,
                     scrollRight: j
                 });
             }, a = ()=>{
-                const O = l.scrollWidth - l.clientWidth;
-                ae(Array.from(l.querySelectorAll("[data-item]")).map((A, z)=>{
-                    if (z === e.length - 1) return O;
-                    const j = A.offsetLeft, he = parseInt(getComputedStyle(A).scrollMargin), me = w && !n ? j - A.clientWidth / 2 : j;
-                    return Math.min(me - he - l.offsetLeft, O);
+                const z = l.scrollWidth - l.clientWidth;
+                fe(Array.from(l.querySelectorAll("[data-item]")).map((R, O)=>{
+                    if (O === e.length - 1) return z;
+                    const j = R.offsetLeft, pe = parseInt(getComputedStyle(R).scrollMargin), ge = w && !n ? j - R.clientWidth / 2 : j;
+                    return Math.min(ge - pe - l.offsetLeft, z);
                 }));
             };
             i(), a(), l.addEventListener("scroll", i);
-            const h = te(l, ()=>{
+            const h = oe(l, ()=>{
                 i(), a();
             });
             return ()=>{
@@ -166,11 +166,11 @@ const oe = (e, r)=>{
         }
         return ()=>{};
     }, [
-        m.desktop,
-        m.tablet,
-        m.mobile,
-        b,
-        f,
+        p.desktop,
+        p.tablet,
+        p.mobile,
+        I,
+        d,
         w,
         n,
         e.length
@@ -179,15 +179,15 @@ const oe = (e, r)=>{
         let i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const a = v.current;
         if (a) {
-            const h = T[l];
+            const h = y[l];
             a.scrollTo({
                 left: h,
                 behavior: i ? "smooth" : "auto"
             });
         }
     }, [
-        T
-    ]), fe = c.useCallback(()=>{
+        y
+    ]), me = c.useCallback(()=>{
         const l = v.current;
         if (l) {
             const { scrollLeft: i  } = l, a = [
@@ -211,16 +211,16 @@ const oe = (e, r)=>{
         }
     }, [
         W
-    ]), H = oe(!!x, v);
+    ]), H = le(!!x, v);
     c.useEffect(()=>{
-        I !== void 0 && D(Math.floor(I / p), !1);
+        m !== void 0 && D(Math.floor(m / g), !1);
     }, [
-        I,
+        m,
         D,
-        p
+        g
     ]), c.useEffect(()=>{
         if (H && x) {
-            const l = typeof x == "boolean" ? le : x.time, i = typeof x == "object" && x.loop, a = setInterval(()=>{
+            const l = typeof x == "boolean" ? ce : x.time, i = typeof x == "object" && x.loop, a = setInterval(()=>{
                 var h;
                 U !== 0 ? Y() : i && ((h = v.current) == null || h.scrollTo({
                     left: 0,
@@ -235,98 +235,99 @@ const oe = (e, r)=>{
         U,
         H
     ]);
-    const N = Ye(y, T);
+    const S = He(T, y), J = c.useRef(!m), K = c.useRef(0);
     c.useEffect(()=>{
-        if (S) {
-            const l = Math.min((N + 1) * p - 1, e.length - 1), i = [];
-            for(let a = 0; a < p; a++){
+        if (k) {
+            const l = Math.min((S + 1) * g - 1, e.length - 1), i = [];
+            for(let a = 0; a < g; a++){
                 const h = l - a;
                 h >= 0 && i.unshift(h);
             }
-            S({
-                pageIndex: N,
+            J.current ? K.current !== S && k({
+                pageIndex: S,
                 shownItemIndexes: i
-            });
+            }) : J.current = i.includes(m || 0), K.current = S;
         }
     }, [
-        N,
+        S,
         e.length,
-        p,
-        S
+        g,
+        m,
+        k
     ]);
     let V = null;
     return u ? V = u({
-        numPages: b,
-        currentIndex: N,
+        numPages: I,
+        currentIndex: S,
         onPress: D
-    }) : o && (V = b > 1 && /* @__PURE__ */ s(re, {
-        numPages: b,
-        currentIndex: N,
+    }) : o && (V = I > 1 && /* @__PURE__ */ s(ne, {
+        numPages: I,
+        currentIndex: S,
         onPress: D
-    })), /* @__PURE__ */ G(be, {
+    })), /* @__PURE__ */ G(Pe, {
         space: 24,
         dataAttributes: _objectSpread({
             "component-name": "Carousel"
-        }, k),
+        }, L),
         children: [
             /* @__PURE__ */ G("div", {
-                className: ye,
+                className: We,
                 children: [
-                    /* @__PURE__ */ s(M, {
+                    /* @__PURE__ */ s(A, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ s(R, {
-                            className: Te,
+                        children: /* @__PURE__ */ s(M, {
+                            className: De,
                             "aria-label": E.carouselPrevButton,
-                            onPress: fe,
-                            disabled: !de,
-                            children: /* @__PURE__ */ s(X, {})
+                            onPress: me,
+                            disabled: !he,
+                            children: /* @__PURE__ */ s($, {})
                         })
                     }),
                     /* @__PURE__ */ s("div", {
-                        className: J(We, {
-                            [De]: w,
-                            [Ve]: b > 1
+                        className: Q(Ve, {
+                            [ze]: w,
+                            [Oe]: I > 1
                         }),
-                        style: _objectSpreadProps(_objectSpread({}, _e(_objectSpread({
-                            [_.itemsPerPageDesktop]: String(m.desktop),
-                            [_.itemsPerPageTablet]: String(m.tablet),
-                            [_.itemsPerPageMobile]: String(m.mobile)
-                        }, f !== void 0 ? {
-                            [_.gap]: String(f)
+                        style: _objectSpreadProps(_objectSpread({}, Ue(_objectSpread({
+                            [_.itemsPerPageDesktop]: String(p.desktop),
+                            [_.itemsPerPageTablet]: String(p.tablet),
+                            [_.itemsPerPageMobile]: String(p.mobile)
+                        }, d !== void 0 ? {
+                            [_.gap]: String(d)
                         } : {}))), {
                             scrollSnapType: B ? "initial" : "x mandatory"
                         }),
                         ref: v,
                         children: e.map((l, i)=>/* @__PURE__ */ s("div", {
-                                className: J(Oe, t),
+                                className: Q(je, t),
                                 style: _objectSpreadProps(_objectSpread({}, r), {
-                                    scrollSnapStop: se(F) ? "always" : "normal"
+                                    scrollSnapStop: re(F) ? "always" : "normal"
                                 }),
                                 "data-item": !0,
                                 children: l
                             }, i))
                     }),
-                    /* @__PURE__ */ s(M, {
+                    /* @__PURE__ */ s(A, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ s(R, {
-                            className: ze,
+                        children: /* @__PURE__ */ s(M, {
+                            className: _e,
                             "aria-label": E.carouselNextButton,
                             onPress: Y,
-                            disabled: !ue,
-                            children: /* @__PURE__ */ s(Z, {})
+                            disabled: !de,
+                            children: /* @__PURE__ */ s(ee, {})
                         })
                     })
                 ]
             }),
             V && /* @__PURE__ */ s("div", {
-                className: je,
+                className: Fe,
                 children: V
             })
         ]
     });
-}, ut = (e)=>/* @__PURE__ */ s(ne, _objectSpread({}, e)), dt = (param)=>/* @__PURE__ */ {
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: I , onPageChange: P , dataAttributes: d  } = param;
-    return s(ne, {
+}, dt = (e)=>/* @__PURE__ */ s(ie, _objectSpread({}, e)), ht = (param)=>/* @__PURE__ */ {
+    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: m , onPageChange: P , dataAttributes: f  } = param;
+    return s(ie, {
         items: e,
         itemStyle: r,
         itemClassName: t,
@@ -340,121 +341,121 @@ const oe = (e, r)=>{
         gap: 0,
         withBullets: o,
         renderBullets: u,
-        initialActiveItem: I,
+        initialActiveItem: m,
         onPageChange: P,
-        dataAttributes: d
+        dataAttributes: f
     });
-}, ce = /*#__PURE__*/ c.createContext(!1), ft = ()=>c.useContext(ce), Ge = (param)=>/* @__PURE__ */ {
+}, ae = /*#__PURE__*/ c.createContext(!1), mt = ()=>c.useContext(ae), Je = (param)=>/* @__PURE__ */ {
     let { children: e  } = param;
-    return s(ce.Provider, {
+    return s(ae.Provider, {
         value: !0,
         children: e
     });
-}, ht = (param)=>{
-    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: u , inverseBullets: I = !0  } = param;
-    const { texts: P , platformOverrides: d  } = ee(), f = c.useRef(null), [{ scrollLeft: B , scrollRight: w  }, x] = c.useState({
+}, pt = (param)=>{
+    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: u , inverseBullets: m = !0  } = param;
+    const { texts: P , platformOverrides: f  } = se(), d = c.useRef(null), [{ scrollLeft: B , scrollRight: w  }, x] = c.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), S = c.useCallback(()=>{
-        const n = f.current;
+    }), k = c.useCallback(()=>{
+        const n = d.current;
         n && n.scrollBy({
             left: -n.clientWidth,
             behavior: "smooth"
         });
-    }, []), k = c.useCallback(()=>{
-        const n = f.current;
+    }, []), L = c.useCallback(()=>{
+        const n = d.current;
         n && n.scrollBy({
             left: n.clientWidth,
             behavior: "smooth"
         });
-    }, []), E = w !== 0, F = B !== 0, L = f.current ? Math.floor((B + f.current.clientWidth / 2) / f.current.clientWidth) : 0;
+    }, []), E = w !== 0, F = B !== 0, C = d.current ? Math.floor((B + d.current.clientWidth / 2) / d.current.clientWidth) : 0;
     c.useLayoutEffect(()=>{
-        const n = f.current;
+        const n = d.current;
         if (n) {
-            const g = ()=>{
-                const { scrollWidth: p , clientWidth: v  } = n, b = Math.round(n.scrollLeft), y = Math.round(p - (b + v));
+            const b = ()=>{
+                const { scrollWidth: g , clientWidth: v  } = n, I = Math.round(n.scrollLeft), T = Math.round(g - (I + v));
                 x({
-                    scrollLeft: b,
-                    scrollRight: y
+                    scrollLeft: I,
+                    scrollRight: T
                 });
             };
-            g(), n.addEventListener("scroll", g);
-            const C = te(n, g);
+            b(), n.addEventListener("scroll", b);
+            const N = oe(n, b);
             return ()=>{
-                n.removeEventListener("scroll", g), C();
+                n.removeEventListener("scroll", b), N();
             };
         }
     }, [
         e.length
     ]);
-    const m = oe(!!t, f);
+    const p = le(!!t, d);
     return c.useEffect(()=>{
-        if (m && t) {
-            const n = typeof t == "boolean" ? le : t.time, g = typeof t == "object" && t.loop, C = setInterval(()=>{
-                var p;
-                w !== 0 ? k() : g && ((p = f.current) == null || p.scrollTo({
+        if (p && t) {
+            const n = typeof t == "boolean" ? ce : t.time, b = typeof t == "object" && t.loop, N = setInterval(()=>{
+                var g;
+                w !== 0 ? L() : b && ((g = d.current) == null || g.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
             }, n);
-            return ()=>clearInterval(C);
+            return ()=>clearInterval(N);
         }
     }, [
         t,
-        k,
+        L,
         w,
-        m
+        p
     ]), c.useEffect(()=>{
-        o && o(L);
+        o && o(C);
     }, [
-        L,
+        C,
         o
-    ]), /* @__PURE__ */ s(Ge, {
+    ]), /* @__PURE__ */ s(Je, {
         children: /* @__PURE__ */ G("div", _objectSpreadProps(_objectSpread({
-            className: Se
-        }, xe(u, "SlideShow")), {
+            className: Le
+        }, Se(u, "SlideShow")), {
             children: [
-                /* @__PURE__ */ s(M, {
+                /* @__PURE__ */ s(A, {
                     isInverse: !1,
-                    children: /* @__PURE__ */ s(R, {
-                        className: ke,
+                    children: /* @__PURE__ */ s(M, {
+                        className: Ce,
                         "aria-label": P.carouselPrevButton,
-                        onPress: S,
+                        onPress: k,
                         disabled: !F,
-                        children: /* @__PURE__ */ s(X, {})
+                        children: /* @__PURE__ */ s($, {})
                     })
                 }),
-                /* @__PURE__ */ s(Pe, {
+                /* @__PURE__ */ s(we, {
                     value: !1,
                     children: /* @__PURE__ */ s("div", {
-                        className: Le,
-                        ref: f,
-                        children: e.map((n, g)=>/* @__PURE__ */ s("div", {
-                                className: Ce,
+                        className: Ne,
+                        ref: d,
+                        children: e.map((n, b)=>/* @__PURE__ */ s("div", {
+                                className: Re,
                                 style: {
-                                    scrollSnapStop: se(d) ? "always" : "normal"
+                                    scrollSnapStop: re(f) ? "always" : "normal"
                                 },
                                 children: n
-                            }, g))
+                            }, b))
                     })
                 }),
-                /* @__PURE__ */ s(M, {
+                /* @__PURE__ */ s(A, {
                     isInverse: !1,
-                    children: /* @__PURE__ */ s(R, {
-                        className: Ne,
+                    children: /* @__PURE__ */ s(M, {
+                        className: Ae,
                         "aria-label": P.carouselNextButton,
-                        onPress: k,
+                        onPress: L,
                         disabled: !E,
-                        children: /* @__PURE__ */ s(Z, {})
+                        children: /* @__PURE__ */ s(ee, {})
                     })
                 }),
-                r && e.length > 1 && /* @__PURE__ */ s(M, {
-                    isInverse: I,
+                r && e.length > 1 && /* @__PURE__ */ s(A, {
+                    isInverse: m,
                     children: /* @__PURE__ */ s("div", {
-                        className: Ae,
-                        children: /* @__PURE__ */ s(re, {
+                        className: Me,
+                        children: /* @__PURE__ */ s(ne, {
                             numPages: e.length,
-                            currentIndex: L
+                            currentIndex: C
                         })
                     })
                 })
@@ -462,4 +463,4 @@ const oe = (e, r)=>{
         }))
     });
 };
-export { ut as Carousel, dt as CenteredCarousel, Ge as IsInsideSlideshowProvider, re as PageBullets, ht as Slideshow, ft as useIsInsideSlideshowContext };
+export { dt as Carousel, ht as CenteredCarousel, Je as IsInsideSlideshowProvider, ne as PageBullets, pt as Slideshow, mt as useIsInsideSlideshowContext };