@telefonica/mistica 16.45.0 → 16.47.0

package/dist/carousel.js

@@ -11,34 +11,34 @@ function _export(target, all) {
 }
 _export(exports, {
     get Carousel () {
-        return Go;
+        return $o;
     },
     get CarouselAutoplayControl () {
         return Ke;
     },
     get CarouselContextConsumer () {
-        return _o;
+        return Uo;
     },
     get CarouselContextProvider () {
-        return Oo;
+        return Fo;
     },
     get CarouselPageControls () {
         return je;
     },
     get CenteredCarousel () {
-        return Fo;
+        return jo;
     },
     get PageBullets () {
         return $e;
     },
     get Slideshow () {
-        return $o;
+        return Zo;
     },
     get useCarouselContext () {
-        return zo;
+        return Go;
     },
     get useSlideshowContext () {
-        return Uo;
+        return Ko;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -163,18 +163,18 @@ function _object_spread_props(target, source) {
     return target;
 }
 const _e = (e, t)=>{
-    const r = (0, _environment.isClientSide)() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [s, f] = _react.useState(!!e && !r), i = (0, _documentvisibility.useDocumentVisibility)(), p = (0, _hooks.useIsInViewport)(t, !1);
+    const r = (0, _environment.isClientSide)() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [o, u] = _react.useState(!!e && !r), n = (0, _documentvisibility.useDocumentVisibility)(), p = (0, _hooks.useIsInViewport)(t, !1);
     return {
-        isAutoplayEnabled: s && !!e,
-        shouldAutoplay: p && i && !!e && s,
-        setShouldAutoPlay: f
+        isAutoplayEnabled: o && !!e,
+        shouldAutoplay: p && n && !!e && o,
+        setShouldAutoPlay: u
     };
 }, w = ()=>{
     throw new Error("You must wrap your component with a CarouselContextProvider to use CarouselContext");
-}, Ge = {
+}, Fe = {
     currentIndex: 0,
     numPages: 0
-}, Fe = {
+}, Ge = {
     isAutoplayEnabled: !1,
     isAtLastPage: !1,
     onAutoplayChanged: w
@@ -186,77 +186,77 @@ const _e = (e, t)=>{
     goPrev: w,
     goNext: w,
     goToPage: w,
-    bulletsProps: Ge,
-    autoplayControlProps: Fe,
+    bulletsProps: Fe,
+    autoplayControlProps: Ge,
     pageControlsProps: Ue
-}), Ce = /*#__PURE__*/ _react.createContext(null), Oo = (param)=>{
+}), Ce = /*#__PURE__*/ _react.createContext(null), Fo = (param)=>{
     let { children: e } = param;
-    const [t, r] = _react.useState(Ge), [s, f] = _react.useState(Fe), [i, p] = _react.useState(Ue), g = _react.useRef(w), h = _react.useRef(w), l = _react.useRef(w), n = _react.useRef(w), P = _react.useMemo(()=>({
+    const [t, r] = _react.useState(Fe), [o, u] = _react.useState(Ge), [n, p] = _react.useState(Ue), b = _react.useRef(w), d = _react.useRef(w), l = _react.useRef(w), a = _react.useRef(w), S = _react.useMemo(()=>({
             goPrev: ()=>{
-                g.current();
+                b.current();
             },
             goNext: ()=>{
-                h.current();
+                d.current();
             },
-            goToPage: function(d) {
-                let I = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-                l.current(d, I);
+            goToPage: function(h) {
+                let _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+                l.current(h, _);
             },
             bulletsProps: t,
-            autoplayControlProps: s,
-            pageControlsProps: i
+            autoplayControlProps: o,
+            pageControlsProps: n
         }), [
         t,
-        s,
-        i
+        o,
+        n
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(ge.Provider, {
-        value: P,
+        value: S,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce.Provider, {
             value: {
-                setGoPrev: (d)=>{
-                    g.current = d;
+                setGoPrev: (h)=>{
+                    b.current = h;
                 },
-                setGoNext: (d)=>{
-                    h.current = d;
+                setGoNext: (h)=>{
+                    d.current = h;
                 },
-                setGoToPage: (d)=>{
-                    l.current = d;
+                setGoToPage: (h)=>{
+                    l.current = h;
                 },
                 setBulletsProps: r,
-                setAutoplayControlProps: f,
+                setAutoplayControlProps: u,
                 setPageControlsProps: p,
-                setIsAutoplayEnabledSetter: (d)=>{
-                    n.current = d;
+                setIsAutoplayEnabledSetter: (h)=>{
+                    a.current = h;
                 }
             },
             children: e
         })
     });
-}, zo = ()=>_react.useContext(ge), _o = ge.Consumer, $e = (param)=>{
+}, Go = ()=>_react.useContext(ge), Uo = ge.Consumer, $e = (param)=>{
     let { currentIndex: e, numPages: t } = param;
     var _t_tablet;
-    const r = (0, _themevariantcontext.useThemeVariant)(), { isTablet: s, isDesktopOrBigger: f } = (0, _hooks.useScreenSize)(), i = typeof t == "number" ? t : f ? t.desktop : s ? (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile : t.mobile, p = (h)=>{
+    const r = (0, _themevariantcontext.useThemeVariant)(), { isTablet: o, isDesktopOrBigger: u } = (0, _hooks.useScreenSize)(), n = typeof t == "number" ? t : u ? t.desktop : o ? (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile : t.mobile, p = (d)=>{
         const l = {};
-        if (r === "brand" || r === "media" ? l[e === h ? _carouselcssmistica.bulletActiveBrand : _carouselcssmistica.bulletBrand] = !0 : r === "negative" ? l[e === h ? _carouselcssmistica.bulletActiveNegative : _carouselcssmistica.bulletNegative] = !0 : l[e === h ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === h) return l[_carouselcssmistica.bulletActiveSizing] = !0, l;
-        const n = Math.abs(h - e);
-        return i <= _carouselcssmistica.VISIBLE_BULLETS || n === 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = !0, l) : e === 0 || e === i - 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = n === 2, l[_carouselcssmistica.bulletInactiveMediumSizing] = n === 3, l[_carouselcssmistica.bulletInactiveSmallSizing] = n > 3, l) : (l[_carouselcssmistica.bulletInactiveMediumSizing] = n === 2, l[_carouselcssmistica.bulletInactiveSmallSizing] = n > 2, l);
-    }, g = (h)=>e + 2 < _carouselcssmistica.VISIBLE_BULLETS ? h : i - e + 1 < _carouselcssmistica.VISIBLE_BULLETS ? h - (i - _carouselcssmistica.VISIBLE_BULLETS) : h - (e - 2);
+        if (r === "brand" || r === "media" ? l[e === d ? _carouselcssmistica.bulletActiveBrand : _carouselcssmistica.bulletBrand] = !0 : r === "negative" ? l[e === d ? _carouselcssmistica.bulletActiveNegative : _carouselcssmistica.bulletNegative] = !0 : l[e === d ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === d) return l[_carouselcssmistica.bulletActiveSizing] = !0, l;
+        const a = Math.abs(d - e);
+        return n <= _carouselcssmistica.VISIBLE_BULLETS || a === 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = !0, l) : e === 0 || e === n - 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = a === 2, l[_carouselcssmistica.bulletInactiveMediumSizing] = a === 3, l[_carouselcssmistica.bulletInactiveSmallSizing] = a > 3, l) : (l[_carouselcssmistica.bulletInactiveMediumSizing] = a === 2, l[_carouselcssmistica.bulletInactiveSmallSizing] = a > 2, l);
+    }, b = (d)=>e + 2 < _carouselcssmistica.VISIBLE_BULLETS ? d : n - e + 1 < _carouselcssmistica.VISIBLE_BULLETS ? d - (n - _carouselcssmistica.VISIBLE_BULLETS) : d - (e - 2);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)({
         "component-name": "PageBullets",
         testid: "PageBullets"
     })), {
         className: (0, _classnames.default)(_carouselcssmistica.bulletsScrollableContainerBase, {
-            [_carouselcssmistica.bulletsScrollableContainer]: i > _carouselcssmistica.VISIBLE_BULLETS
+            [_carouselcssmistica.bulletsScrollableContainer]: n > _carouselcssmistica.VISIBLE_BULLETS
         }),
         children: Array.from({
-            length: i
-        }, (h, l)=>{
-            const n = g(l);
+            length: n
+        }, (d, l)=>{
+            const a = b(l);
             var _t_tablet;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)({
-                    [_carouselcssmistica.scrollableBullet]: i > _carouselcssmistica.VISIBLE_BULLETS
+                    [_carouselcssmistica.scrollableBullet]: n > _carouselcssmistica.VISIBLE_BULLETS
                 }, typeof t == "number" ? {
                     [_carouselcssmistica.bulletButton]: !0,
                     [_carouselcssmistica.bulletVisibility]: l < t
@@ -266,9 +266,10 @@ const _e = (e, t)=>{
                     [_carouselcssmistica.bulletVisibilityTablet]: l < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
                     [_carouselcssmistica.bulletVisibilityDesktop]: l < t.desktop
                 }),
+                "data-testid": e === l ? "active-bullet" : "bullet",
                 style: _object_spread({}, (0, _css.applyCssVars)({
-                    [_carouselcssmistica.vars.desktopBulletLeftPosition]: `${n * _carouselcssmistica.LARGE_BULLET_FULL_SIZE}px`,
-                    [_carouselcssmistica.vars.mobileBulletLeftPosition]: `${n * _carouselcssmistica.SMALL_BULLET_FULL_SIZE}px`
+                    [_carouselcssmistica.vars.desktopBulletLeftPosition]: `${a * _carouselcssmistica.LARGE_BULLET_FULL_SIZE}px`,
+                    [_carouselcssmistica.vars.mobileBulletLeftPosition]: `${a * _carouselcssmistica.SMALL_BULLET_FULL_SIZE}px`
                 })),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(p(l))
@@ -276,59 +277,62 @@ const _e = (e, t)=>{
             }, l);
         })
     }));
+}, Be = (e, t, r)=>{
+    const { texts: o, t: u } = (0, _hooks.useTheme)(), n = t !== void 0 && r !== void 0, p = n && t === 0, b = n && t === r - 1, d = (a)=>e === "prev" ? p ? a + 1 : a : b ? a + 1 : a + 2, l = n ? `, ${u(o.carouselPageNumber || _texttokens.carouselPageNumber, d(t), r)}` : "";
+    return e === "prev" ? p ? (o.carouselFirstButton || u(_texttokens.carouselFirstButton)) + l : (o.carouselPrevButton || u(_texttokens.carouselPrevButton)) + l : b ? (o.carouselLastButton || u(_texttokens.carouselLastButton)) + l : (o.carouselNextButton || u(_texttokens.carouselNextButton)) + l;
 }, je = (param)=>{
-    let { bleedLeft: e, bleedRight: t, goPrev: r, goNext: s, setShouldAutoplay: f, prevArrowEnabled: i, nextArrowEnabled: p, pagesCount: g, currentPageIndex: h } = param;
-    const { texts: l, t: n } = (0, _hooks.useTheme)(), P = (0, _themevariantcontext.useThemeVariant)(), d = i && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h, g)}` : "", I = p && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || _texttokens.carouselPageNumber, h + 2, g)}` : "";
+    let { bleedLeft: e, bleedRight: t, goPrev: r, goNext: o, setShouldAutoplay: u, prevArrowEnabled: n, nextArrowEnabled: p, pagesCount: b, currentPageIndex: d } = param;
+    const l = (0, _themevariantcontext.useThemeVariant)(), a = Be("prev", d, b), S = Be("next", d, b);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-        space: P === "media" ? 16 : 8,
+        space: l === "media" ? 16 : 8,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
                 Icon: _iconchevronleftregular.default,
-                "aria-label": (l.carouselPrevButton || n(_texttokens.carouselPrevButton)) + d,
+                "aria-label": a,
                 type: "neutral",
-                backgroundType: P === "media" ? "transparent" : "soft",
+                backgroundType: l === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedLeft: e,
                 onPress: ()=>{
-                    r(), f(!1);
+                    r(), u(!1);
                 },
-                disabled: !i
+                "aria-disabled": !n
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
                 Icon: _iconchevronrightregular.default,
-                "aria-label": (l.carouselNextButton || n(_texttokens.carouselNextButton)) + I,
+                "aria-label": S,
                 type: "neutral",
-                backgroundType: P === "media" ? "transparent" : "soft",
+                backgroundType: l === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedRight: t,
                 onPress: ()=>{
-                    s(), f(!1);
+                    o(), u(!1);
                 },
-                disabled: !p
+                "aria-disabled": !p
             })
         ]
     });
 }, Ke = (param)=>{
-    let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: s = !1, bleedRight: f = !1 } = param;
-    const { texts: i, t: p } = (0, _hooks.useTheme)();
+    let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: o = !1, bleedRight: u = !1 } = param;
+    const { texts: n, t: p } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, {
         checkedProps: {
             Icon: _iconpausefilled.default,
             type: "neutral",
-            "aria-label": i.carouselPauseAutoplay || p(_texttokens.carouselPauseAutoplay)
+            "aria-label": n.carouselPauseAutoplay || p(_texttokens.carouselPauseAutoplay)
         },
         uncheckedProps: {
             Icon: t ? _iconreloadregular.default : _iconplayfilled.default,
             type: "neutral",
-            "aria-label": t ? i.carouselReloadAutoplay || p(_texttokens.carouselReloadAutoplay) : i.carouselEnableAutoplay || p(_texttokens.carouselEnableAutoplay)
+            "aria-label": t ? n.carouselReloadAutoplay || p(_texttokens.carouselReloadAutoplay) : n.carouselEnableAutoplay || p(_texttokens.carouselEnableAutoplay)
         },
         small: !0,
-        bleedLeft: s,
-        bleedRight: f,
+        bleedLeft: o,
+        bleedRight: u,
         onChange: r,
         checked: e
     });
-}, Be = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], ho = (e, t)=>{
+}, Ie = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], bo = (e, t)=>{
     const r = {
         mobile: 1,
         tablet: 2,
@@ -339,76 +343,76 @@ const _e = (e, t)=>{
         }
     };
     if (!t) return _object_spread_props(_object_spread({}, r), {
-        desktop: Be(e, r.desktop)
+        desktop: Ie(e, r.desktop)
     });
     if (typeof t == "number") return {
         mobile: t,
         tablet: t,
         desktop: t
     };
-    const s = Be(e, r.desktop, t.desktop);
+    const o = Ie(e, r.desktop, t.desktop);
     return _object_spread_props(_object_spread({}, r, t), {
-        desktop: s
+        desktop: o
     });
 }, We = (e, t)=>{
     if (e.length === 0) return [];
-    const r = Math.ceil(e.length / t), s = [];
-    for(let f = 0; f < e.length; f += r)s.push(e[f]);
-    return s[s.length - 1] = e[e.length - r], s;
-}, po = (e, t)=>{
+    const r = Math.ceil(e.length / t), o = [];
+    for(let u = 0; u < e.length; u += r)o.push(e[u]);
+    return o[o.length - 1] = e[e.length - r], o;
+}, go = (e, t)=>{
     const r = [];
-    for(let s = 0; s < t.length; s++)s === 0 ? r.push(t[0]) : r.push((t[s] + t[s - 1]) / 2);
-    for(let s = r.length - 1; s >= 0; s--)if (e - r[s] >= -1) return s;
+    for(let o = 0; o < t.length; o++)o === 0 ? r.push(t[0]) : r.push((t[o] + t[o - 1]) / 2);
+    for(let o = r.length - 1; o >= 0; o--)if (e - r[o] >= -1) return o;
     return 0;
 }, Ze = 5e3, He = (param)=>{
-    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, initialActiveItem: i, itemsPerPage: p, itemsToScroll: g, mobilePageOffset: h, gap: l, free: n, centered: P, autoplay: d, withControls: I = !0, onPageChange: G, dataAttributes: ie, "aria-label": B, "aria-labelledby": W } = param;
-    const { platformOverrides: V, skinName: y, texts: ue, t: q } = (0, _hooks.useTheme)(), O = (0, _desktopcontainertypecontext.useDesktopContainerType)(), b = ho(O || "large", p), { isDesktopOrBigger: D, isTablet: J } = (0, _hooks.useScreenSize)(), F = J ? b.tablet : b.mobile, M = Math.max(Math.floor(D ? b.desktop : F), 1), T = _react.useRef(null), a = Math.ceil(e.length / Math.max(Math.floor(b.mobile), 1)), C = Math.ceil(e.length / Math.max(Math.floor(b.tablet), 1)), E = Math.ceil(e.length / Math.max(Math.floor(b.desktop), 1)), A = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: z }, fe] = _react.useState({
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: o, renderBullets: u, initialActiveItem: n, itemsPerPage: p, itemsToScroll: b, mobilePageOffset: d, gap: l, free: a, centered: S, autoplay: h, withControls: _ = !0, onPageChange: F, dataAttributes: ie, "aria-label": B, "aria-labelledby": I } = param;
+    const { platformOverrides: W, skinName: P, texts: ue, t: q } = (0, _hooks.useTheme)(), D = (0, _desktopcontainertypecontext.useDesktopContainerType)(), g = bo(D || "large", p), { isDesktopOrBigger: V, isTablet: J } = (0, _hooks.useScreenSize)(), G = J ? g.tablet : g.mobile, M = Math.max(Math.floor(V ? g.desktop : G), 1), T = _react.useRef(null), c = Math.ceil(e.length / Math.max(Math.floor(g.mobile), 1)), C = Math.ceil(e.length / Math.max(Math.floor(g.tablet), 1)), L = Math.ceil(e.length / Math.max(Math.floor(g.desktop), 1)), E = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: O }, fe] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), [de, Je] = _react.useState([]), X = _react.useMemo(()=>We(de, A), [
+    }), [de, Je] = _react.useState([]), X = _react.useMemo(()=>We(de, E), [
         de,
-        A
-    ]), ee = g ? We(de, Math.ceil(e.length / g)) : X, U = z !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: L } = _e(!!d, T);
+        E
+    ]), ee = b ? We(de, Math.ceil(e.length / b)) : X, U = O !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: A } = _e(!!h, T);
     _react.useEffect(()=>{
         if (T.current) {
-            const u = T.current, m = ()=>{
-                const { scrollWidth: re, clientWidth: Z } = u, ne = Math.round(u.scrollLeft), ae = Math.round(re - (ne + Z));
+            const f = T.current, m = ()=>{
+                const { scrollWidth: re, clientWidth: Z } = f, ne = Math.round(f.scrollLeft), ae = Math.round(re - (ne + Z));
                 fe({
                     scrollLeft: ne,
                     scrollRight: ae
                 });
             }, v = ()=>{
-                const re = u.scrollWidth - u.clientWidth;
-                Je(Array.from(u.querySelectorAll("[data-item]")).map((Z, ne)=>{
+                const re = f.scrollWidth - f.clientWidth;
+                Je(Array.from(f.querySelectorAll("[data-item]")).map((Z, ne)=>{
                     if (ne === e.length - 1) return re;
-                    const ae = Z.offsetLeft, tt = parseInt(getComputedStyle(Z).scrollMargin), ot = P && !D ? ae - Z.clientWidth / 2 : ae;
-                    return Math.min(ot - tt - u.offsetLeft, re);
+                    const ae = Z.offsetLeft, tt = parseInt(getComputedStyle(Z).scrollMargin), ot = S && !V ? ae - Z.clientWidth / 2 : ae;
+                    return Math.min(ot - tt - f.offsetLeft, re);
                 }));
             };
-            m(), v(), u.addEventListener("scroll", m);
-            const R = (0, _dom.listenResize)(u, ()=>{
+            m(), v(), f.addEventListener("scroll", m);
+            const R = (0, _dom.listenResize)(f, ()=>{
                 m(), v();
             });
             return ()=>{
-                u.removeEventListener("scroll", m), R();
+                f.removeEventListener("scroll", m), R();
             };
         }
         return ()=>{};
     }, [
-        b.desktop,
-        b.tablet,
-        b.mobile,
-        A,
+        g.desktop,
+        g.tablet,
+        g.mobile,
+        E,
         l,
-        P,
-        D,
+        S,
+        V,
         e.length
     ]);
-    const $ = _react.useCallback(function(u) {
+    const $ = _react.useCallback(function(f) {
         let m = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const v = T.current;
         if (v) {
-            const R = X[u];
+            const R = X[f];
             v.scrollTo({
                 left: R,
                 behavior: m ? "smooth" : "auto"
@@ -417,12 +421,12 @@ const _e = (e, t)=>{
     }, [
         X
     ]), he = _react.useCallback(()=>{
-        const u = T.current;
-        if (u) {
-            const { scrollLeft: m } = u, v = [
+        const f = T.current;
+        if (f) {
+            const { scrollLeft: m } = f, v = [
                 ...ee
             ].reverse().find((R)=>R - m < -1);
-            u.scrollTo({
+            f.scrollTo({
                 left: v,
                 behavior: "smooth"
             });
@@ -430,10 +434,10 @@ const _e = (e, t)=>{
     }, [
         ee
     ]), j = _react.useCallback(()=>{
-        const u = T.current;
-        if (u) {
-            const { scrollLeft: m } = u, v = ee.find((R)=>R - m > 1);
-            u.scrollTo({
+        const f = T.current;
+        if (f) {
+            const { scrollLeft: m } = f, v = ee.find((R)=>R - m > 1);
+            f.scrollTo({
                 left: v,
                 behavior: "smooth"
             });
@@ -442,119 +446,119 @@ const _e = (e, t)=>{
         ee
     ]);
     _react.useEffect(()=>{
-        i !== void 0 && $(Math.floor(i / M), !1);
+        n !== void 0 && $(Math.floor(n / M), !1);
     }, [
-        i,
+        n,
         $,
         M
     ]);
-    const se = typeof d == "object" && d.loop || !1, K = _react.useRef({
+    const se = typeof h == "object" && h.loop || !1, K = _react.useRef({
         interacting: !1,
         left: 0
     });
     _react.useEffect(()=>{
-        if (ve && d) {
-            const u = typeof d == "boolean" ? Ze : d.time, m = setInterval(()=>{
+        if (ve && h) {
+            const f = typeof h == "boolean" ? Ze : h.time, m = setInterval(()=>{
                 var v;
-                K.current.interacting || (z !== 0 ? j() : se && ((v = T.current) == null || v.scrollTo({
+                K.current.interacting || (O !== 0 ? j() : se && ((v = T.current) == null || v.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 })));
-            }, u);
+            }, f);
             return ()=>clearInterval(m);
         }
     }, [
-        d,
+        h,
         j,
-        z,
+        O,
         ve,
         se
     ]);
-    const S = po(Q, X), Qe = 20;
+    const y = go(Q, X), Qe = 20;
     _react.useEffect(()=>{
-        S === A - 1 && !se && L(!1);
+        y === E - 1 && !se && A(!1);
     }, [
-        S,
+        y,
+        E,
         A,
-        L,
         se
     ]);
-    const Pe = _react.useRef(!i), ye = _react.useRef(0);
+    const Pe = _react.useRef(!n), ye = _react.useRef(0);
     _react.useEffect(()=>{
-        if (G) {
-            const u = Math.min((S + 1) * M - 1, e.length - 1), m = [];
+        if (F) {
+            const f = Math.min((y + 1) * M - 1, e.length - 1), m = [];
             for(let v = 0; v < M; v++){
-                const R = u - v;
+                const R = f - v;
                 R >= 0 && m.unshift(R);
             }
-            Pe.current ? ye.current !== S && G({
-                pageIndex: S,
+            Pe.current ? ye.current !== y && F({
+                pageIndex: y,
                 shownItemIndexes: m
-            }) : Pe.current = m.includes(i || 0), ye.current = S;
+            }) : Pe.current = m.includes(n || 0), ye.current = y;
         }
     }, [
-        S,
+        y,
         e.length,
         M,
-        i,
-        G
+        n,
+        F
     ]);
-    const N = _react.useContext(Ce), pe = _react.useMemo(()=>({
-            currentIndex: S,
+    const k = _react.useContext(Ce), pe = _react.useMemo(()=>({
+            currentIndex: y,
             numPages: {
-                mobile: a,
+                mobile: c,
                 tablet: C,
-                desktop: E
+                desktop: L
             }
         }), [
-        S,
-        E,
-        a,
+        y,
+        L,
+        c,
         C
     ]), Se = _react.useMemo(()=>({
             isAutoplayEnabled: oe,
-            isAtLastPage: S === A - 1,
-            onAutoplayChanged: L
+            isAtLastPage: y === E - 1,
+            onAutoplayChanged: A
         }), [
         oe,
-        S,
-        A,
-        L
-    ]), Ee = _react.useMemo(()=>({
-            setShouldAutoplay: L,
+        y,
+        E,
+        A
+    ]), Le = _react.useMemo(()=>({
+            setShouldAutoplay: A,
             prevArrowEnabled: te,
             nextArrowEnabled: U
         }), [
-        L,
+        A,
         te,
         U
     ]);
     _react.useEffect(()=>{
-        N && (N.setGoPrev(he), N.setGoNext(j), N.setGoToPage($), N.setBulletsProps(pe), N.setAutoplayControlProps(Se), N.setPageControlsProps(Ee), N.setIsAutoplayEnabledSetter(L));
+        k && (k.setGoPrev(he), k.setGoNext(j), k.setGoToPage($), k.setBulletsProps(pe), k.setAutoplayControlProps(Se), k.setPageControlsProps(Le), k.setIsAutoplayEnabledSetter(A));
     }, [
-        N,
+        k,
         j,
         he,
         pe,
         Se,
-        Ee,
+        Le,
         $,
         te,
         U,
-        d,
+        h,
         oe,
-        L
+        A
     ]);
     let le = null;
-    f ? le = f({
-        numPages: A,
-        currentIndex: S
-    }) : s && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, pe)));
-    const Xe = "64px", et = "36px", Ae = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, !f && {
-            [_carouselcssmistica.noCarouselBulletsDesktop]: E <= 1,
+    u ? le = u({
+        numPages: E,
+        currentIndex: y
+    }) : o && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, pe)));
+    const Xe = "64px", et = "36px", Ee = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, !u && {
+            [_carouselcssmistica.noCarouselBulletsDesktop]: L <= 1,
             [_carouselcssmistica.noCarouselBulletsTablet]: C <= 1,
-            [_carouselcssmistica.noCarouselBulletsMobile]: a <= 1
+            [_carouselcssmistica.noCarouselBulletsMobile]: c <= 1
         }),
         children: le
     });
@@ -565,95 +569,95 @@ const _e = (e, t)=>{
         className: _carouselcssmistica.carouselComponentContainer,
         role: "region",
         "aria-label": B ? `${B}, ${ue.carouselRegion || q(_texttokens.carouselRegion)}` : void 0,
-        "aria-labelledby": B ? void 0 : W,
+        "aria-labelledby": B ? void 0 : I,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_carouselcssmistica.carouselControlsVisibility, {
-                    [_carouselcssmistica.carouselControlsVisibilityMobile]: a > 1,
+                    [_carouselcssmistica.carouselControlsVisibilityMobile]: c > 1,
                     [_carouselcssmistica.carouselControlsVisibilityTablet]: C > 1,
-                    [_carouselcssmistica.carouselControlsVisibilityDesktop]: E > 1
+                    [_carouselcssmistica.carouselControlsVisibilityDesktop]: L > 1
                 }),
-                children: I ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                children: _ ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                     space: "between",
                     alignItems: "center",
                     className: _carouselcssmistica.carouselControlsContainer,
                     children: [
-                        !!d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        !!h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.carouselAutoplayControlContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ke, {
                                 isAutoplayEnabled: oe,
-                                isAtLastPage: S === A - 1,
-                                onAutoplayChanged: (u)=>{
-                                    !U && u && $(0), L(u);
+                                isAtLastPage: y === E - 1,
+                                onAutoplayChanged: (f)=>{
+                                    !U && f && $(0), A(f);
                                 }
                             })
                         }),
-                        Ae,
+                        Ee,
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.carouselPagesControlsContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
                                 goNext: j,
                                 goPrev: he,
-                                setShouldAutoplay: L,
+                                setShouldAutoplay: A,
                                 prevArrowEnabled: te,
                                 nextArrowEnabled: U,
-                                pagesCount: A,
-                                currentPageIndex: S
+                                pagesCount: E,
+                                currentPageIndex: y
                             })
                         })
                     ]
                 }) : le && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                     space: "around",
                     className: _carouselcssmistica.carouselControlsContainer,
-                    children: Ae
+                    children: Ee
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _carouselcssmistica.carouselContainer,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_carouselcssmistica.carousel, {
-                        [_carouselcssmistica.centeredCarousel]: P,
-                        [_carouselcssmistica.carouselWithScrollMobile]: a > 1,
+                        [_carouselcssmistica.centeredCarousel]: S,
+                        [_carouselcssmistica.carouselWithScrollMobile]: c > 1,
                         [_carouselcssmistica.carouselWithScrollTablet]: C > 1
                     }),
                     role: "list",
                     style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({
-                        [_carouselcssmistica.vars.itemsPerPageDesktop]: String(b.desktop),
-                        [_carouselcssmistica.vars.itemsPerPageTablet]: String(b.tablet),
-                        [_carouselcssmistica.vars.itemsPerPageMobile]: String(b.mobile)
-                    }, h === "large" ? {
+                        [_carouselcssmistica.vars.itemsPerPageDesktop]: String(g.desktop),
+                        [_carouselcssmistica.vars.itemsPerPageTablet]: String(g.tablet),
+                        [_carouselcssmistica.vars.itemsPerPageMobile]: String(g.mobile)
+                    }, d === "large" ? {
                         [_carouselcssmistica.vars.mobilePageOffset]: Xe
-                    } : y === _constants.VIVO_NEW_SKIN ? {
+                    } : P === _constants.VIVO_NEW_SKIN ? {
                         [_carouselcssmistica.vars.mobilePageOffset]: et
                     } : {}, l !== void 0 ? {
                         [_carouselcssmistica.vars.gap]: String(l)
                     } : {}))), {
-                        scrollSnapType: n ? "initial" : "x mandatory",
+                        scrollSnapType: a ? "initial" : "x mandatory",
                         // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
                         // there is a webkit rendering bug that causes a half pixel white line to appear at
                         // the bottom of the scrollable area in retina displays when it has a height with
                         // decimals. This extra padding avoids that line to partially cover the carousel
                         // slides border:
-                        paddingBottom: (0, _platform.isIos)(V) && !(0, _platform.isRunningAcceptanceTest)(V) ? 0.5 : void 0
+                        paddingBottom: (0, _platform.isIos)(W) && !(0, _platform.isRunningAcceptanceTest)(W) ? 0.5 : void 0
                     }),
                     ref: T,
-                    onTouchStart: (u)=>{
-                        K.current.left = u.currentTarget.scrollLeft, K.current.interacting = !0;
+                    onTouchStart: (f)=>{
+                        K.current.left = f.currentTarget.scrollLeft, K.current.interacting = !0;
                     },
-                    onTouchEnd: (u)=>{
-                        K.current.interacting = !1, Math.abs(u.currentTarget.scrollLeft - K.current.left) > Qe && L(!1);
+                    onTouchEnd: (f)=>{
+                        K.current.interacting = !1, Math.abs(f.currentTarget.scrollLeft - K.current.left) > Qe && A(!1);
                     },
                     onKeyDown: ()=>{
-                        L(!1);
+                        A(!1);
                     },
-                    children: e.map((u, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: e.map((f, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)(_carouselcssmistica.carouselItem, r),
                             style: _object_spread_props(_object_spread({}, t), {
-                                scrollSnapStop: (0, _platform.isAndroid)(V) ? "always" : "normal"
+                                scrollSnapStop: (0, _platform.isAndroid)(W) ? "always" : "normal"
                             }),
                             role: "listitem",
                             "data-item": !0,
-                            children: u
+                            children: f
                         }, m))
                 })
             })
@@ -663,20 +667,20 @@ const _e = (e, t)=>{
     const [e, t] = _react.useState(1);
     return _react.useEffect(()=>{
         const r = ()=>{
-            window.innerWidth !== 0 && (t((s)=>s + 1), window.removeEventListener("resize", r));
+            window.innerWidth !== 0 && (t((o)=>o + 1), window.removeEventListener("resize", r));
         };
         return window.innerWidth === 0 && window.addEventListener("resize", r), ()=>{
             window.removeEventListener("resize", r);
         };
     }, []), e;
-}, Go = (e)=>{
+}, $o = (e)=>{
     const t = Ye();
     return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(He, _object_spread_props(_object_spread({}, e), {
         key: t
     }));
-}, Fo = (param)=>{
-    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, withControls: i = !0, initialActiveItem: p, onPageChange: g, dataAttributes: h, "aria-label": l, "aria-labelledby": n } = param;
-    const P = Ye();
+}, jo = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: o, renderBullets: u, withControls: n = !0, initialActiveItem: p, onPageChange: b, dataAttributes: d, "aria-label": l, "aria-labelledby": a } = param;
+    const S = Ye();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(He, {
         items: e,
         itemStyle: t,
@@ -689,125 +693,125 @@ const _e = (e, t)=>{
         centered: !0,
         itemsToScroll: 1,
         gap: 0,
-        withBullets: s,
-        renderBullets: f,
-        withControls: i,
+        withBullets: o,
+        renderBullets: u,
+        withControls: n,
         initialActiveItem: p,
-        onPageChange: g,
-        dataAttributes: h,
+        onPageChange: b,
+        dataAttributes: d,
         "aria-label": l,
-        "aria-labelledby": n
-    }, P);
-}, qe = /*#__PURE__*/ _react.createContext(void 0), Uo = ()=>_react.useContext(qe), $o = (param)=>{
-    let { items: e, withBullets: t, withControls: r = !0, autoplay: s, initialPageIndex: f = 0, onPageChange: i, dataAttributes: p, inverseBullets: g = !0 } = param;
-    const { platformOverrides: h } = (0, _hooks.useTheme)(), l = _react.useContext(Ce), n = _react.useRef(null), [{ scrollLeft: P, scrollRight: d }, I] = _react.useState({
+        "aria-labelledby": a
+    }, S);
+}, qe = /*#__PURE__*/ _react.createContext(void 0), Ko = ()=>_react.useContext(qe), Zo = (param)=>{
+    let { items: e, withBullets: t, withControls: r = !0, autoplay: o, initialPageIndex: u = 0, onPageChange: n, dataAttributes: p, inverseBullets: b = !0 } = param;
+    const { platformOverrides: d } = (0, _hooks.useTheme)(), l = _react.useContext(Ce), a = _react.useRef(null), [{ scrollLeft: S, scrollRight: h }, _] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), G = d !== 0, ie = P !== 0, B = _react.useCallback(()=>{
-        const a = n.current;
-        a && a.scrollBy({
-            left: -a.clientWidth,
+    }), F = h !== 0, ie = S !== 0, B = _react.useCallback(()=>{
+        const c = a.current;
+        c && c.scrollBy({
+            left: -c.clientWidth,
             behavior: "smooth"
         });
-    }, []), W = _react.useCallback(()=>{
-        const a = n.current;
-        a && a.scrollBy({
-            left: a.clientWidth,
+    }, []), I = _react.useCallback(()=>{
+        const c = a.current;
+        c && c.scrollBy({
+            left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), V = _react.useCallback(function(a) {
+    }, []), W = _react.useCallback(function(c) {
         let C = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const E = n.current;
-        E && E.scrollTo({
-            left: E.clientWidth * a,
+        const L = a.current;
+        L && L.scrollTo({
+            left: L.clientWidth * c,
             behavior: C ? "smooth" : "auto"
         });
     }, [
-        n
-    ]), y = n.current ? Math.floor((P + n.current.clientWidth / 2) / n.current.clientWidth) : 0;
+        a
+    ]), P = a.current ? Math.floor((S + a.current.clientWidth / 2) / a.current.clientWidth) : 0;
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        const a = n.current;
-        if (a) {
+        const c = a.current;
+        if (c) {
             const C = ()=>{
-                const { scrollWidth: A, clientWidth: Q } = a, z = Math.round(a.scrollLeft), fe = Math.round(A - (z + Q));
-                I({
-                    scrollLeft: z,
+                const { scrollWidth: E, clientWidth: Q } = c, O = Math.round(c.scrollLeft), fe = Math.round(E - (O + Q));
+                _({
+                    scrollLeft: O,
                     scrollRight: fe
                 });
             };
-            C(), a.addEventListener("scroll", C);
-            const E = (0, _dom.listenResize)(a, C);
+            C(), c.addEventListener("scroll", C);
+            const L = (0, _dom.listenResize)(c, C);
             return ()=>{
-                a.removeEventListener("scroll", C), E();
+                c.removeEventListener("scroll", C), L();
             };
         }
     }, [
         e.length
     ]);
-    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: O } = _e(!!s, n), b = typeof s == "object" && s.loop || !1;
+    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: D } = _e(!!o, a), g = typeof o == "object" && o.loop || !1;
     _react.useEffect(()=>{
-        if (q && s) {
-            const a = typeof s == "boolean" ? Ze : s.time, C = setInterval(()=>{
-                var E;
-                d !== 0 ? W() : b && ((E = n.current) == null || E.scrollTo({
+        if (q && o) {
+            const c = typeof o == "boolean" ? Ze : o.time, C = setInterval(()=>{
+                var L;
+                h !== 0 ? I() : g && ((L = a.current) == null || L.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, a);
+            }, c);
             return ()=>clearInterval(C);
         }
     }, [
-        s,
-        W,
-        d,
+        o,
+        I,
+        h,
         q,
-        b
+        g
     ]), _react.useEffect(()=>{
-        y === e.length - 1 && !b && O(!1);
+        P === e.length - 1 && !g && D(!1);
     }, [
-        y,
+        P,
         e.length,
-        O,
-        b
+        D,
+        g
     ]);
-    const D = _react.useRef(!1), J = _react.useRef(0);
+    const V = _react.useRef(!1), J = _react.useRef(0);
     _react.useEffect(()=>{
-        i && (D.current ? J.current !== y && i(y) : D.current = f === y), J.current = y;
+        n && (V.current ? J.current !== P && n(P) : V.current = u === P), J.current = P;
     }, [
-        y,
-        f,
-        i
+        P,
+        u,
+        n
     ]), _react.useEffect(()=>{
-        const a = n.current;
-        f !== void 0 && a && !D.current && a.scrollTo({
-            left: a.clientWidth * f
+        const c = a.current;
+        u !== void 0 && c && !V.current && c.scrollTo({
+            left: c.clientWidth * u
         });
     }, [
-        f
+        u
     ]);
-    const F = _react.useMemo(()=>({
-            currentIndex: y,
+    const G = _react.useMemo(()=>({
+            currentIndex: P,
             numPages: e.length
         }), [
-        y,
+        P,
         e.length
     ]);
     _react.useEffect(()=>{
-        l && (l.setGoPrev(B), l.setGoNext(W), l.setGoToPage(V), l.setBulletsProps(F));
+        l && (l.setGoPrev(B), l.setGoNext(I), l.setGoToPage(W), l.setBulletsProps(G));
     }, [
         l,
-        W,
+        I,
         B,
-        F,
-        V
+        G,
+        W
     ]);
     const M = t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _carouselcssmistica.slideshowBulletsContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-            variant: g ? "inverse" : "default",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, F))
+            variant: b ? "inverse" : "default",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, G))
         })
-    }), T = !t && !s;
+    }), T = !t && !o;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(qe.Provider, {
         value: {
             withBullets: !!t
@@ -829,25 +833,25 @@ const _e = (e, t)=>{
                                 [_carouselcssmistica.slideshowControlsContainerSingleItem]: T
                             }),
                             children: [
-                                !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                !!o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _carouselcssmistica.slideshowAutoplayControlContainer,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ke, {
                                         isAutoplayEnabled: ue,
-                                        isAtLastPage: y === e.length - 1,
-                                        onAutoplayChanged: (a)=>{
-                                            y === e.length - 1 && a && V(0), O(a);
+                                        isAtLastPage: P === e.length - 1,
+                                        onAutoplayChanged: (c)=>{
+                                            P === e.length - 1 && c && W(0), D(c);
                                         }
                                     })
                                 }),
                                 M,
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
-                                    goNext: W,
+                                    goNext: I,
                                     goPrev: B,
-                                    setShouldAutoplay: O,
+                                    setShouldAutoplay: D,
                                     prevArrowEnabled: ie,
-                                    nextArrowEnabled: G,
+                                    nextArrowEnabled: F,
                                     pagesCount: e.length,
-                                    currentPageIndex: y
+                                    currentPageIndex: P
                                 })
                             ]
                         })
@@ -862,13 +866,13 @@ const _e = (e, t)=>{
                         }),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.slideshow,
-                            ref: n,
-                            children: e.map((a, C)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            ref: a,
+                            children: e.map((c, C)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _carouselcssmistica.slideshowItem,
                                     style: {
-                                        scrollSnapStop: (0, _platform.isAndroid)(h) ? "always" : "normal"
+                                        scrollSnapStop: (0, _platform.isAndroid)(d) ? "always" : "normal"
                                     },
-                                    children: a
+                                    children: c
                                 }, C))
                         })
                     })