@telefonica/mistica 14.39.0 → 14.40.0

package/dist/carousel.js

@@ -11,22 +11,22 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return It;
+        return Pt;
     },
     CenteredCarousel: function() {
-        return Pt;
+        return Nt;
     },
     IsInsideSlideshowProvider: function() {
-        return et;
+        return at;
     },
     PageBullets: function() {
-        return ae;
+        return he;
     },
     Slideshow: function() {
-        return wt;
+        return Lt;
     },
     useIsInsideSlideshowContext: function() {
-        return xt;
+        return Bt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -35,7 +35,6 @@ const _iconchevronleftregular = /*#__PURE__*/ _interop_require_default(require("
 const _iconchevronrightregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-chevron-right-regular.js"));
 const _hooks = require("./hooks.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
-const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _touchable = require("./touchable.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _themevariantcontext = require("./theme-variant-context.js");
@@ -44,7 +43,6 @@ const _platform = require("./utils/platform.js");
 const _documentvisibility = require("./utils/document-visibility.js");
 const _carouselcssmistica = require("./carousel.css-mistica.js");
 const _imagecssmistica = require("./image.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _desktopcontainertypecontext = require("./desktop-container-type-context.js");
 const _constants = require("./skins/constants.js");
 const _css = require("./utils/css.js");
@@ -146,42 +144,45 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const ie = (e, r)=>{
-    const t = (0, _documentvisibility.useDocumentVisibility)();
-    return (0, _hooks.useIsInViewport)(r, !1) && t && !!e;
-}, ae = (param)=>{
-    let { currentIndex: e, numPages: r, onPress: t } = param;
-    const o = (0, _themevariantcontext.useIsInverseVariant)(), { isDesktopOrBigger: h } = (0, _hooks.useScreenSize)(), m = (b)=>{
-        const f = b === e;
-        return o ? f ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse : f ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet;
-    };
+const de = (e, t)=>{
+    const o = (0, _documentvisibility.useDocumentVisibility)();
+    return (0, _hooks.useIsInViewport)(t, !1) && o && !!e;
+}, he = (param)=>{
+    let { currentIndex: e, numPages: t, onPress: o } = param;
+    var _t_tablet;
+    const l = (0, _themevariantcontext.useIsInverseVariant)(), { isDesktopOrBigger: h } = (0, _hooks.useScreenSize)(), m = (p)=>{
+        const n = p === e;
+        return l ? n ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse : n ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet;
+    }, I = typeof t == "number" ? t : Math.max(t.mobile, (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile, t.desktop);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
-        space: {
-            mobile: 8,
-            desktop: 16
-        },
+        space: 0,
         alignItems: "center",
         dataAttributes: {
             "component-name": "PageBullets"
         },
         children: Array.from({
-            length: r
-        }, (b, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                className: (0, _sprinklescssmistica.sprinkles)({
-                    display: "block",
-                    padding: 0,
-                    border: "none",
-                    background: "transparent"
+            length: I
+        }, (p, n)=>/* @__PURE__ */ {
+            var _t_tablet;
+            return (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+                className: (0, _classnames.default)(typeof t == "number" ? _carouselcssmistica.bulletButton : {
+                    [_carouselcssmistica.bulletButtonMobile]: n < t.mobile,
+                    [_carouselcssmistica.bulletButtonTablet]: n < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
+                    [_carouselcssmistica.bulletButtonDesktop]: n < t.desktop
                 }),
+                style: n === 0 ? {
+                    paddingLeft: 0
+                } : {},
                 maybe: !0,
-                onPress: h && t ? ()=>t(f) : void 0,
+                onPress: h && o ? ()=>o(n) : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: m(f)
+                    className: m(n)
                 })
-            }, f))
+            }, n);
+        })
     });
-}, Z = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Xe = (e, r)=>{
-    const t = {
+}, oe = (e, t, o)=>o ? typeof o == "number" ? o : o[e] || t[e] : t[e], ct = (e, t)=>{
+    const o = {
         mobile: 1,
         tablet: 2,
         desktop: {
@@ -190,59 +191,59 @@ const ie = (e, r)=>{
             large: 3
         }
     };
-    if (!r) return _object_spread_props(_object_spread({}, t), {
-        desktop: Z(e, t.desktop)
+    if (!t) return _object_spread_props(_object_spread({}, o), {
+        desktop: oe(e, o.desktop)
     });
-    if (typeof r == "number") return {
-        mobile: r,
-        tablet: r,
-        desktop: r
+    if (typeof t == "number") return {
+        mobile: t,
+        tablet: t,
+        desktop: t
     };
-    const o = Z(e, t.desktop, r.desktop);
-    return _object_spread_props(_object_spread({}, t, r), {
-        desktop: o
+    const l = oe(e, o.desktop, t.desktop);
+    return _object_spread_props(_object_spread({}, o, t), {
+        desktop: l
     });
-}, ee = (e, r)=>{
+}, se = (e, t)=>{
     if (e.length === 0) return [];
-    const t = Math.ceil(e.length / r), o = [];
-    for(let h = 0; h < e.length; h += t)o.push(e[h]);
-    return o[o.length - 1] = e[e.length - t], o;
-}, 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;
+    const o = Math.ceil(e.length / t), l = [];
+    for(let h = 0; h < e.length; h += o)l.push(e[h]);
+    return l[l.length - 1] = e[e.length - o], l;
+}, it = (e, t)=>{
+    const o = [];
+    for(let l = 0; l < t.length; l++)l === 0 ? o.push(t[0]) : o.push((t[l] + t[l - 1]) / 2);
+    for(let l = o.length - 1; l >= 0; l--)if (e - o[l] >= -1) return l;
     return 0;
-}, ue = 5e3, fe = (param)=>{
-    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: h, initialActiveItem: m, itemsPerPage: b, itemsToScroll: f, mobilePageOffset: p, gap: N, free: R, centered: A, autoplay: v, onPageChange: P, dataAttributes: F } = param;
-    const { texts: T, platformOverrides: x, skinName: y } = (0, _hooks.useTheme)(), c = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = Xe(c || "large", b), { isDesktopOrBigger: w, isTablet: C } = (0, _hooks.useScreenSize)(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), g = _react.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: G, scrollRight: q }, he] = _react.useState({
+}, me = 5e3, be = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: o, withBullets: l, renderBullets: h, initialActiveItem: m, itemsPerPage: I, itemsToScroll: p, mobilePageOffset: n, gap: S, free: N, centered: B, autoplay: g, onPageChange: x, dataAttributes: U } = param;
+    const { texts: A, platformOverrides: M, skinName: E } = (0, _hooks.useTheme)(), a = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = ct(a || "large", I), { isDesktopOrBigger: C, isTablet: k } = (0, _hooks.useScreenSize)(), q = k ? i.tablet : i.mobile, v = Math.max(Math.floor(C ? i.desktop : q), 1), b = _react.useRef(null), K = Math.ceil(e.length / Math.max(Math.floor(i.mobile), 1)), Y = Math.ceil(e.length / Math.max(Math.floor(i.tablet), 1)), Q = Math.ceil(e.length / Math.max(Math.floor(i.desktop), 1)), y = Math.ceil(e.length / v), [{ scrollLeft: X, scrollRight: $ }, ge] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [K, me] = _react.useState([]), W = _react.useMemo(()=>ee(K, S), [
-        K,
-        S
-    ]), O = f ? ee(K, Math.ceil(e.length / f)) : W, pe = q !== 0, ge = G !== 0;
+    }), [G, ve] = _react.useState([]), W = _react.useMemo(()=>se(G, y), [
+        G,
+        y
+    ]), D = p ? se(G, Math.ceil(e.length / p)) : W, Ie = $ !== 0, xe = X !== 0;
     _react.useEffect(()=>{
-        if (g.current) {
-            const l = g.current, a = ()=>{
-                const { scrollWidth: z, clientWidth: B } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + B));
-                he({
+        if (b.current) {
+            const r = b.current, u = ()=>{
+                const { scrollWidth: z, clientWidth: L } = r, _ = Math.round(r.scrollLeft), j = Math.round(z - (_ + L));
+                ge({
                     scrollLeft: _,
                     scrollRight: j
                 });
-            }, u = ()=>{
-                const z = l.scrollWidth - l.clientWidth;
-                me(Array.from(l.querySelectorAll("[data-item]")).map((B, _)=>{
+            }, f = ()=>{
+                const z = r.scrollWidth - r.clientWidth;
+                ve(Array.from(r.querySelectorAll("[data-item]")).map((L, _)=>{
                     if (_ === e.length - 1) return 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);
+                    const j = L.offsetLeft, Se = parseInt(getComputedStyle(L).scrollMargin), ke = B && !C ? j - L.clientWidth / 2 : j;
+                    return Math.min(ke - Se - r.offsetLeft, z);
                 }));
             };
-            a(), u(), l.addEventListener("scroll", a);
-            const d = (0, _dom.listenResize)(l, ()=>{
-                a(), u();
+            u(), f(), r.addEventListener("scroll", u);
+            const d = (0, _dom.listenResize)(r, ()=>{
+                u(), f();
             });
             return ()=>{
-                l.removeEventListener("scroll", a), d();
+                r.removeEventListener("scroll", u), d();
             };
         }
         return ()=>{};
@@ -250,108 +251,110 @@ const ie = (e, r)=>{
         i.desktop,
         i.tablet,
         i.mobile,
+        y,
         S,
-        N,
-        A,
-        w,
+        B,
+        C,
         e.length
     ]);
-    const D = _react.useCallback(function(l) {
-        let a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const u = g.current;
-        if (u) {
-            const d = W[l];
-            u.scrollTo({
+    const O = _react.useCallback(function(r) {
+        let u = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+        const f = b.current;
+        if (f) {
+            const d = W[r];
+            f.scrollTo({
                 left: d,
-                behavior: a ? "smooth" : "auto"
+                behavior: u ? "smooth" : "auto"
             });
         }
     }, [
         W
-    ]), be = _react.useCallback(()=>{
-        const l = g.current;
-        if (l) {
-            const { scrollLeft: a } = l, u = [
-                ...O
-            ].reverse().find((d)=>d - a < -1);
-            l.scrollTo({
-                left: u,
+    ]), Me = _react.useCallback(()=>{
+        const r = b.current;
+        if (r) {
+            const { scrollLeft: u } = r, f = [
+                ...D
+            ].reverse().find((d)=>d - u < -1);
+            r.scrollTo({
+                left: f,
                 behavior: "smooth"
             });
         }
     }, [
-        O
-    ]), Y = _react.useCallback(()=>{
-        const l = g.current;
-        if (l) {
-            const { scrollLeft: a } = l, u = O.find((d)=>d - a > 1);
-            l.scrollTo({
-                left: u,
+        D
+    ]), H = _react.useCallback(()=>{
+        const r = b.current;
+        if (r) {
+            const { scrollLeft: u } = r, f = D.find((d)=>d - u > 1);
+            r.scrollTo({
+                left: f,
                 behavior: "smooth"
             });
         }
     }, [
-        O
-    ]), H = ie(!!v, g);
+        D
+    ]), Z = de(!!g, b);
     _react.useEffect(()=>{
-        m !== void 0 && D(Math.floor(m / I), !1);
+        m !== void 0 && O(Math.floor(m / v), !1);
     }, [
         m,
-        D,
-        I
+        O,
+        v
     ]), _react.useEffect(()=>{
-        if (H && v) {
-            const l = typeof v == "boolean" ? ue : v.time, a = typeof v == "object" && v.loop, u = setInterval(()=>{
+        if (Z && g) {
+            const r = typeof g == "boolean" ? me : g.time, u = typeof g == "object" && g.loop, f = setInterval(()=>{
                 var d;
-                q !== 0 ? Y() : a && ((d = g.current) == null || d.scrollTo({
+                $ !== 0 ? H() : u && ((d = b.current) == null || d.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, l);
-            return ()=>clearInterval(u);
+            }, r);
+            return ()=>clearInterval(f);
         }
     }, [
-        v,
-        Y,
-        q,
-        H
+        g,
+        H,
+        $,
+        Z
     ]);
-    const k = Ze(G, W), J = _react.useRef(!m), Q = _react.useRef(0);
+    const w = it(X, W), ee = _react.useRef(!m), te = _react.useRef(0);
     _react.useEffect(()=>{
-        if (P) {
-            const l = Math.min((k + 1) * I - 1, e.length - 1), a = [];
-            for(let u = 0; u < I; u++){
-                const d = l - u;
-                d >= 0 && a.unshift(d);
+        if (x) {
+            const r = Math.min((w + 1) * v - 1, e.length - 1), u = [];
+            for(let f = 0; f < v; f++){
+                const d = r - f;
+                d >= 0 && u.unshift(d);
             }
-            J.current ? Q.current !== k && P({
-                pageIndex: k,
-                shownItemIndexes: a
-            }) : J.current = a.includes(m || 0), Q.current = k;
+            ee.current ? te.current !== w && x({
+                pageIndex: w,
+                shownItemIndexes: u
+            }) : ee.current = u.includes(m || 0), te.current = w;
         }
     }, [
-        k,
+        w,
         e.length,
-        I,
+        v,
         m,
-        P
+        x
     ]);
     let V = null;
     h ? V = h({
-        numPages: S,
-        currentIndex: k,
-        onPress: D
-    }) : o && (V = S > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
-        numPages: S,
-        currentIndex: k,
-        onPress: D
+        numPages: y,
+        currentIndex: w,
+        onPress: O
+    }) : l && (V = /* @__PURE__ */ (0, _jsxruntime.jsx)(he, {
+        numPages: {
+            mobile: K,
+            tablet: Y,
+            desktop: Q
+        },
+        currentIndex: w,
+        onPress: O
     }));
-    const ve = "64px", Ie = "36px";
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-        space: 24,
-        dataAttributes: _object_spread({
-            "component-name": "Carousel"
-        }, F),
+    const Ce = "64px", we = "36px";
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        "component-name": "Carousel"
+    }, U))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _carouselcssmistica.carouselContainer,
@@ -360,70 +363,75 @@ const ie = (e, r)=>{
                         isInverse: !1,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _carouselcssmistica.carouselPrevArrowButton,
-                            "aria-label": T.carouselPrevButton,
-                            onPress: be,
-                            disabled: !ge,
+                            "aria-label": A.carouselPrevButton,
+                            onPress: Me,
+                            disabled: !xe,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {})
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_carouselcssmistica.carousel, {
-                            [_carouselcssmistica.centeredCarousel]: A,
-                            [_carouselcssmistica.carouselWithScroll]: S > 1
+                            [_carouselcssmistica.centeredCarousel]: B,
+                            [_carouselcssmistica.carouselWithScrollMobile]: K > 1,
+                            [_carouselcssmistica.carouselWithScrollTablet]: Y > 1
                         }),
                         style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({
                             [_carouselcssmistica.vars.itemsPerPageDesktop]: String(i.desktop),
                             [_carouselcssmistica.vars.itemsPerPageTablet]: String(i.tablet),
                             [_carouselcssmistica.vars.itemsPerPageMobile]: String(i.mobile)
-                        }, p === "large" ? {
-                            [_carouselcssmistica.vars.mobilePageOffset]: ve
-                        } : y === _constants.VIVO_NEW_SKIN ? {
-                            [_carouselcssmistica.vars.mobilePageOffset]: Ie
-                        } : {}, N !== void 0 ? {
-                            [_carouselcssmistica.vars.gap]: String(N)
+                        }, n === "large" ? {
+                            [_carouselcssmistica.vars.mobilePageOffset]: Ce
+                        } : E === _constants.VIVO_NEW_SKIN ? {
+                            [_carouselcssmistica.vars.mobilePageOffset]: we
+                        } : {}, S !== void 0 ? {
+                            [_carouselcssmistica.vars.gap]: String(S)
                         } : {}))), {
-                            scrollSnapType: R ? "initial" : "x mandatory",
+                            scrollSnapType: N ? "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)(x) && !(0, _platform.isRunningAcceptanceTest)(x) ? 0.5 : void 0
+                            paddingBottom: (0, _platform.isIos)(M) && !(0, _platform.isRunningAcceptanceTest)(M) ? 0.5 : void 0
                         }),
-                        ref: g,
-                        children: e.map((l, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: (0, _classnames.default)(_carouselcssmistica.carouselItem, t),
-                                style: _object_spread_props(_object_spread({}, r), {
-                                    scrollSnapStop: (0, _platform.isAndroid)(x) ? "always" : "normal"
+                        ref: b,
+                        children: e.map((r, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(_carouselcssmistica.carouselItem, o),
+                                style: _object_spread_props(_object_spread({}, t), {
+                                    scrollSnapStop: (0, _platform.isAndroid)(M) ? "always" : "normal"
                                 }),
                                 "data-item": !0,
-                                children: l
-                            }, a))
+                                children: r
+                            }, u))
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                         isInverse: !1,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _carouselcssmistica.carouselNextArrowButton,
-                            "aria-label": T.carouselNextButton,
-                            onPress: Y,
-                            disabled: !pe,
+                            "aria-label": A.carouselNextButton,
+                            onPress: H,
+                            disabled: !Ie,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightregular.default, {})
                         })
                     })
                 ]
             }),
             V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _carouselcssmistica.carouselBullets,
+                className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, {
+                    [_carouselcssmistica.noCarouselBulletsDesktop]: Q <= 1,
+                    [_carouselcssmistica.noCarouselBulletsTablet]: Y <= 1,
+                    [_carouselcssmistica.noCarouselBulletsMobile]: K <= 1
+                }),
                 children: V
             })
         ]
-    });
-}, It = (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(fe, _object_spread({}, e)), Pt = (param)=>/* @__PURE__ */ {
-    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: h, initialActiveItem: m, onPageChange: b, dataAttributes: f } = param;
-    return (0, _jsxruntime.jsx)(fe, {
+    }));
+}, Pt = (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(be, _object_spread({}, e)), Nt = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: o, withBullets: l, renderBullets: h, initialActiveItem: m, onPageChange: I, dataAttributes: p } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(be, {
         items: e,
-        itemStyle: r,
-        itemClassName: t,
+        itemStyle: t,
+        itemClassName: o,
         itemsPerPage: {
             mobile: 1,
             tablet: 1,
@@ -432,78 +440,78 @@ const ie = (e, r)=>{
         centered: !0,
         itemsToScroll: 1,
         gap: 0,
-        withBullets: o,
+        withBullets: l,
         renderBullets: h,
         initialActiveItem: m,
-        onPageChange: b,
-        dataAttributes: f
+        onPageChange: I,
+        dataAttributes: p
     });
-}, de = /*#__PURE__*/ _react.createContext(!1), xt = ()=>_react.useContext(de), et = (param)=>/* @__PURE__ */ {
+}, pe = /*#__PURE__*/ _react.createContext(!1), Bt = ()=>_react.useContext(pe), at = (param)=>{
     let { children: e } = param;
-    return (0, _jsxruntime.jsx)(de.Provider, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(pe.Provider, {
         value: !0,
         children: e
     });
-}, wt = (param)=>{
-    let { items: e, withBullets: r, autoplay: t, onPageChange: o, dataAttributes: h, inverseBullets: m = !0 } = param;
-    const { texts: b, platformOverrides: f } = (0, _hooks.useTheme)(), p = _react.useRef(null), [{ scrollLeft: N, scrollRight: R }, A] = _react.useState({
+}, Lt = (param)=>{
+    let { items: e, withBullets: t, autoplay: o, onPageChange: l, dataAttributes: h, inverseBullets: m = !0 } = param;
+    const { texts: I, platformOverrides: p } = (0, _hooks.useTheme)(), n = _react.useRef(null), [{ scrollLeft: S, scrollRight: N }, B] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), v = _react.useCallback(()=>{
-        const c = p.current;
-        c && c.scrollBy({
-            left: -c.clientWidth,
+    }), g = _react.useCallback(()=>{
+        const a = n.current;
+        a && a.scrollBy({
+            left: -a.clientWidth,
             behavior: "smooth"
         });
-    }, []), P = _react.useCallback(()=>{
-        const c = p.current;
-        c && c.scrollBy({
-            left: c.clientWidth,
+    }, []), x = _react.useCallback(()=>{
+        const a = n.current;
+        a && a.scrollBy({
+            left: a.clientWidth,
             behavior: "smooth"
         });
-    }, []), F = R !== 0, T = N !== 0, x = p.current ? Math.floor((N + p.current.clientWidth / 2) / p.current.clientWidth) : 0;
+    }, []), U = N !== 0, A = S !== 0, M = n.current ? Math.floor((S + n.current.clientWidth / 2) / n.current.clientWidth) : 0;
     _react.useLayoutEffect(()=>{
-        const c = p.current;
-        if (c) {
+        const a = n.current;
+        if (a) {
             const i = ()=>{
-                const { scrollWidth: C, clientWidth: U } = c, I = Math.round(c.scrollLeft), g = Math.round(C - (I + U));
-                A({
-                    scrollLeft: I,
-                    scrollRight: g
+                const { scrollWidth: k, clientWidth: q } = a, v = Math.round(a.scrollLeft), b = Math.round(k - (v + q));
+                B({
+                    scrollLeft: v,
+                    scrollRight: b
                 });
             };
-            i(), c.addEventListener("scroll", i);
-            const w = (0, _dom.listenResize)(c, i);
+            i(), a.addEventListener("scroll", i);
+            const C = (0, _dom.listenResize)(a, i);
             return ()=>{
-                c.removeEventListener("scroll", i), w();
+                a.removeEventListener("scroll", i), C();
             };
         }
     }, [
         e.length
     ]);
-    const y = ie(!!t, p);
+    const E = de(!!o, n);
     return _react.useEffect(()=>{
-        if (y && t) {
-            const c = typeof t == "boolean" ? ue : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
-                var C;
-                R !== 0 ? P() : i && ((C = p.current) == null || C.scrollTo({
+        if (E && o) {
+            const a = typeof o == "boolean" ? me : o.time, i = typeof o == "object" && o.loop, C = setInterval(()=>{
+                var k;
+                N !== 0 ? x() : i && ((k = n.current) == null || k.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, c);
-            return ()=>clearInterval(w);
+            }, a);
+            return ()=>clearInterval(C);
         }
     }, [
-        t,
-        P,
-        R,
-        y
+        o,
+        x,
+        N,
+        E
     ]), _react.useEffect(()=>{
-        o && o(x);
+        l && l(M);
     }, [
-        x,
-        o
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(et, {
+        M,
+        l
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(at, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _carouselcssmistica.slideshowContainer
         }, (0, _dom.getPrefixedDataAttributes)(h, "SlideShow")), {
@@ -512,9 +520,9 @@ const ie = (e, r)=>{
                     isInverse: !1,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                         className: _carouselcssmistica.slideshowPrevArrowButton,
-                        "aria-label": b.carouselPrevButton,
-                        onPress: v,
-                        disabled: !T,
+                        "aria-label": I.carouselPrevButton,
+                        onPress: g,
+                        disabled: !A,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {})
                     })
                 }),
@@ -524,13 +532,13 @@ const ie = (e, r)=>{
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _carouselcssmistica.slideshow,
-                        ref: p,
-                        children: e.map((c, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        ref: n,
+                        children: e.map((a, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _carouselcssmistica.slideshowItem,
                                 style: {
-                                    scrollSnapStop: (0, _platform.isAndroid)(f) ? "always" : "normal"
+                                    scrollSnapStop: (0, _platform.isAndroid)(p) ? "always" : "normal"
                                 },
-                                children: c
+                                children: a
                             }, i))
                     })
                 }),
@@ -538,19 +546,19 @@ const ie = (e, r)=>{
                     isInverse: !1,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                         className: _carouselcssmistica.slideshowNextArrowButton,
-                        "aria-label": b.carouselNextButton,
-                        onPress: P,
-                        disabled: !F,
+                        "aria-label": I.carouselNextButton,
+                        onPress: x,
+                        disabled: !U,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightregular.default, {})
                     })
                 }),
-                r && e.length > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                t && e.length > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                     isInverse: m,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _carouselcssmistica.slideshowBullets,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(he, {
                             numPages: e.length,
-                            currentIndex: x
+                            currentIndex: M
                         })
                     })
                 })