@telefonica/mistica 16.31.0 → 16.32.0

package/dist/carousel.js

@@ -11,28 +11,34 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return qt;
+        return Oo;
+    },
+    CarouselAutoplayControl: function() {
+        return $e;
     },
     CarouselContextConsumer: function() {
-        return Yt;
+        return Do;
     },
     CarouselContextProvider: function() {
-        return Kt;
+        return Wo;
+    },
+    CarouselPageControls: function() {
+        return Ue;
     },
     CenteredCarousel: function() {
-        return Zt;
+        return zo;
     },
     PageBullets: function() {
-        return we;
+        return Fe;
     },
     Slideshow: function() {
-        return Ht;
+        return Go;
     },
     useCarouselContext: function() {
-        return Ut;
+        return Vo;
     },
     useSlideshowContext: function() {
-        return $t;
+        return _o;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -41,7 +47,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 _touchable = require("./touchable.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _themevariantcontext = require("./theme-variant-context.js");
 const _dom = require("./utils/dom.js");
@@ -53,7 +58,12 @@ const _desktopcontainertypecontext = require("./desktop-container-type-context.j
 const _constants = require("./skins/constants.js");
 const _css = require("./utils/css.js");
 const _responsivelayout = require("./responsive-layout.js");
+const _iconbutton = require("./icon-button.js");
+const _iconpausefilled = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-pause-filled.js"));
+const _iconplayfilled = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-play-filled.js"));
+const _iconreloadregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-reload-regular.js"));
 const _texttokens = require("./text-tokens.js");
+const _environment = require("./utils/environment.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -152,90 +162,173 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Pe = (t, e)=>{
-    const s = (0, _documentvisibility.useDocumentVisibility)();
-    return (0, _hooks.useIsInViewport)(e, !1) && s && !!t;
-}, we = (param)=>{
-    let { currentIndex: t, numPages: e, onPress: s } = param;
-    var _e_tablet;
-    const r = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { isDesktopOrBigger: i } = (0, _hooks.useScreenSize)(), m = (u)=>{
-        const f = u === t;
-        return r ? f ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse : f ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet;
-    }, P = typeof e == "number" ? e : Math.max(e.mobile, (_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile, e.desktop);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
-        space: 0,
-        alignItems: "center",
-        dataAttributes: {
-            "component-name": "PageBullets"
-        },
-        children: Array.from({
-            length: P
-        }, (u, f)=>/* @__PURE__ */ {
-            var _e_tablet;
-            return (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                className: (0, _classnames.default)(typeof e == "number" ? _carouselcssmistica.bulletButton : {
-                    [_carouselcssmistica.bulletButtonMobile]: f < e.mobile,
-                    [_carouselcssmistica.bulletButtonTablet]: f < ((_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile),
-                    [_carouselcssmistica.bulletButtonDesktop]: f < e.desktop
-                }),
-                style: f === 0 ? {
-                    paddingLeft: 0
-                } : {},
-                maybe: !0,
-                onPress: i && s ? ()=>s(f) : void 0,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: m(f)
-                })
-            }, f);
-        })
-    });
-}, se = ()=>{
+const Oe = (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)(), m = (0, _hooks.useIsInViewport)(t, !1);
+    return {
+        isAutoplayEnabled: s && !!e,
+        shouldAutoplay: m && i && !!e && s,
+        setShouldAutoPlay: f
+    };
+}, w = ()=>{
     throw new Error("You must wrap your component with a CarouselContextProvider to use CarouselContext");
-}, Ie = se, Me = se, ke = se, Ne = {
+}, ze = {
     currentIndex: 0,
     numPages: 0
-}, re = /*#__PURE__*/ _react.createContext({
-    goPrev: Ie,
-    goNext: Me,
-    goToPage: ke,
-    bulletsProps: Ne
-}), le = /*#__PURE__*/ _react.createContext(null), Kt = (param)=>{
-    let { children: t } = param;
-    const [e, s] = _react.useState(Ne), r = _react.useRef(Ie), i = _react.useRef(Me), m = _react.useRef(ke), P = _react.useMemo(()=>({
+}, _e = {
+    isAutoplayEnabled: !1,
+    isAtLastPage: !1,
+    onAutoplayChanged: w
+}, Ge = {
+    setShouldAutoplay: w,
+    prevArrowEnabled: !1,
+    nextArrowEnabled: !1
+}, ge = /*#__PURE__*/ _react.createContext({
+    goPrev: w,
+    goNext: w,
+    goToPage: w,
+    bulletsProps: ze,
+    autoplayControlProps: _e,
+    pageControlsProps: Ge
+}), Ce = /*#__PURE__*/ _react.createContext(null), Wo = (param)=>{
+    let { children: e } = param;
+    const [t, r] = _react.useState(ze), [s, f] = _react.useState(_e), [i, m] = _react.useState(Ge), v = _react.useRef(w), h = _react.useRef(w), l = _react.useRef(w), u = _react.useRef(w), A = _react.useMemo(()=>({
             goPrev: ()=>{
-                r.current();
+                v.current();
             },
             goNext: ()=>{
-                i.current();
+                h.current();
             },
-            goToPage: function(u) {
-                let f = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-                m.current(u, f);
+            goToPage: function(d) {
+                let _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+                l.current(d, _);
             },
-            bulletsProps: e
+            bulletsProps: t,
+            autoplayControlProps: s,
+            pageControlsProps: i
         }), [
-        e
+        t,
+        s,
+        i
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(re.Provider, {
-        value: P,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le.Provider, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ge.Provider, {
+        value: A,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce.Provider, {
             value: {
-                setGoPrev: (u)=>{
-                    r.current = u;
+                setGoPrev: (d)=>{
+                    v.current = d;
                 },
-                setGoNext: (u)=>{
-                    i.current = u;
+                setGoNext: (d)=>{
+                    h.current = d;
                 },
-                setGoToPage: (u)=>{
-                    m.current = u;
+                setGoToPage: (d)=>{
+                    l.current = d;
                 },
-                setBulletsProps: s
+                setBulletsProps: r,
+                setAutoplayControlProps: f,
+                setPageControlsProps: m,
+                setIsAutoplayEnabledSetter: (d)=>{
+                    u.current = d;
+                }
             },
-            children: t
+            children: e
+        })
+    });
+}, Vo = ()=>_react.useContext(ge), Do = ge.Consumer, Fe = (param)=>{
+    let { currentIndex: e, numPages: t } = param;
+    var _t_tablet;
+    const r = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { 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, m = (h)=>{
+        const l = {};
+        if (r ? l[e === h ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse] = !0 : l[e === h ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === h) return l[_carouselcssmistica.bulletActiveSizing] = !0, l;
+        const u = Math.abs(h - e);
+        return i <= _carouselcssmistica.VISIBLE_BULLETS || u === 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = !0, l) : e === 0 || e === i - 1 ? (l[_carouselcssmistica.bulletInactiveSizing] = u === 2, l[_carouselcssmistica.bulletInactiveMediumSizing] = u === 3, l[_carouselcssmistica.bulletInactiveSmallSizing] = u > 3, l) : (l[_carouselcssmistica.bulletInactiveMediumSizing] = u === 2, l[_carouselcssmistica.bulletInactiveSmallSizing] = u > 2, l);
+    }, v = (h)=>e + 2 < _carouselcssmistica.VISIBLE_BULLETS ? h : i - e + 1 < _carouselcssmistica.VISIBLE_BULLETS ? h - (i - _carouselcssmistica.VISIBLE_BULLETS) : h - (e - 2);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)({
+        "component-name": "PageBullets"
+    })), {
+        className: (0, _classnames.default)(_carouselcssmistica.bulletsScrollableContainerBase, {
+            [_carouselcssmistica.bulletsScrollableContainer]: i > _carouselcssmistica.VISIBLE_BULLETS
+        }),
+        children: Array.from({
+            length: i
+        }, (h, l)=>{
+            const u = v(l);
+            var _t_tablet;
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)({
+                    [_carouselcssmistica.scrollableBullet]: i > _carouselcssmistica.VISIBLE_BULLETS
+                }, typeof t == "number" ? {
+                    [_carouselcssmistica.bulletButton]: !0,
+                    [_carouselcssmistica.bulletVisibility]: l < t
+                } : {
+                    [_carouselcssmistica.bulletButton]: !0,
+                    [_carouselcssmistica.bulletVisibilityMobile]: l < t.mobile,
+                    [_carouselcssmistica.bulletVisibilityTablet]: l < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
+                    [_carouselcssmistica.bulletVisibilityDesktop]: l < t.desktop
+                }),
+                style: _object_spread({}, (0, _css.applyCssVars)({
+                    [_carouselcssmistica.vars.desktopBulletLeftPosition]: `${u * _carouselcssmistica.LARGE_BULLET_FULL_SIZE}px`,
+                    [_carouselcssmistica.vars.mobileBulletLeftPosition]: `${u * _carouselcssmistica.SMALL_BULLET_FULL_SIZE}px`
+                })),
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(m(l))
+                })
+            }, l);
         })
+    }));
+}, Ue = (param)=>{
+    let { bleedLeft: e, bleedRight: t, goPrev: r, goNext: s, setShouldAutoplay: f, prevArrowEnabled: i, nextArrowEnabled: m } = param;
+    const { texts: v, t: h } = (0, _hooks.useTheme)(), l = (0, _themevariantcontext.useThemeVariant)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+        space: l === "media" ? 16 : 8,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+                Icon: _iconchevronleftregular.default,
+                "aria-label": v.carouselPrevButton || h(_texttokens.carouselPrevButton),
+                type: "neutral",
+                backgroundType: l === "media" ? "transparent" : "soft",
+                small: !0,
+                bleedLeft: e,
+                onPress: ()=>{
+                    r(), f(!1);
+                },
+                disabled: !i
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+                Icon: _iconchevronrightregular.default,
+                "aria-label": v.carouselNextButton || h(_texttokens.carouselNextButton),
+                type: "neutral",
+                backgroundType: l === "media" ? "transparent" : "soft",
+                small: !0,
+                bleedRight: t,
+                onPress: ()=>{
+                    s(), f(!1);
+                },
+                disabled: !m
+            })
+        ]
     });
-}, Ut = ()=>_react.useContext(re), Yt = re.Consumer, ie = (t, e, s)=>s ? typeof s == "number" ? s : s[t] || e[t] : e[t], It = (t, e)=>{
-    const s = {
+}, $e = (param)=>{
+    let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: s = !1, bleedRight: f = !1 } = param;
+    const { texts: i, t: m } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, {
+        checkedProps: {
+            Icon: _iconpausefilled.default,
+            type: "neutral",
+            "aria-label": i.carouselPauseAutoplay || m(_texttokens.carouselPauseAutoplay)
+        },
+        uncheckedProps: {
+            Icon: t ? _iconreloadregular.default : _iconplayfilled.default,
+            type: "neutral",
+            "aria-label": t ? i.carouselReloadAutoplay || m(_texttokens.carouselReloadAutoplay) : i.carouselEnableAutoplay || m(_texttokens.carouselEnableAutoplay)
+        },
+        small: !0,
+        bleedLeft: s,
+        bleedRight: f,
+        onChange: r,
+        checked: e
+    });
+}, Ne = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], io = (e, t)=>{
+    const r = {
         mobile: 1,
         tablet: 2,
         desktop: {
@@ -244,279 +337,346 @@ const Pe = (t, e)=>{
             large: 3
         }
     };
-    if (!e) return _object_spread_props(_object_spread({}, s), {
-        desktop: ie(t, s.desktop)
+    if (!t) return _object_spread_props(_object_spread({}, r), {
+        desktop: Ne(e, r.desktop)
     });
-    if (typeof e == "number") return {
-        mobile: e,
-        tablet: e,
-        desktop: e
+    if (typeof t == "number") return {
+        mobile: t,
+        tablet: t,
+        desktop: t
     };
-    const r = ie(t, s.desktop, e.desktop);
-    return _object_spread_props(_object_spread({}, s, e), {
-        desktop: r
+    const s = Ne(e, r.desktop, t.desktop);
+    return _object_spread_props(_object_spread({}, r, t), {
+        desktop: s
     });
-}, ue = (t, e)=>{
-    if (t.length === 0) return [];
-    const s = Math.ceil(t.length / e), r = [];
-    for(let i = 0; i < t.length; i += s)r.push(t[i]);
-    return r[r.length - 1] = t[t.length - s], r;
-}, Mt = (t, e)=>{
-    const s = [];
-    for(let r = 0; r < e.length; r++)r === 0 ? s.push(e[0]) : s.push((e[r] + e[r - 1]) / 2);
-    for(let r = s.length - 1; r >= 0; r--)if (t - s[r] >= -1) return r;
+}, Be = (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;
+}, uo = (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;
     return 0;
-}, Se = 5e3, Re = (param)=>{
-    let { items: t, itemStyle: e, itemClassName: s, withBullets: r, renderBullets: i, initialActiveItem: m, itemsPerPage: P, itemsToScroll: u, mobilePageOffset: f, gap: S, free: I, centered: h, autoplay: x, onPageChange: N, dataAttributes: J } = param;
-    const { texts: R, platformOverrides: w, skinName: j, t: F } = (0, _hooks.useTheme)(), Q = (0, _desktopcontainertypecontext.useDesktopContainerType)(), a = It(Q || "large", P), { isDesktopOrBigger: B, isTablet: W } = (0, _hooks.useScreenSize)(), K = W ? a.tablet : a.mobile, C = Math.max(Math.floor(B ? a.desktop : K), 1), l = _react.useRef(null), p = Math.ceil(t.length / Math.max(Math.floor(a.mobile), 1)), v = Math.ceil(t.length / Math.max(Math.floor(a.tablet), 1)), M = Math.ceil(t.length / Math.max(Math.floor(a.desktop), 1)), E = Math.ceil(t.length / C), [{ scrollLeft: A, scrollRight: D }, Le] = _react.useState({
+}, je = 5e3, Ke = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, initialActiveItem: i, itemsPerPage: m, itemsToScroll: v, mobilePageOffset: h, gap: l, free: u, centered: A, autoplay: d, withControls: _ = !0, onPageChange: G, dataAttributes: ie, "aria-label": N, "aria-labelledby": B } = param;
+    const { platformOverrides: W, skinName: P, texts: ue, t: q } = (0, _hooks.useTheme)(), D = (0, _desktopcontainertypecontext.useDesktopContainerType)(), b = io(D || "large", m), { isDesktopOrBigger: V, isTablet: J } = (0, _hooks.useScreenSize)(), F = J ? b.tablet : b.mobile, T = Math.max(Math.floor(V ? b.desktop : F), 1), L = _react.useRef(null), n = Math.ceil(e.length / Math.max(Math.floor(b.mobile), 1)), g = Math.ceil(e.length / Math.max(Math.floor(b.tablet), 1)), y = Math.ceil(e.length / Math.max(Math.floor(b.desktop), 1)), I = Math.ceil(e.length / T), [{ scrollLeft: Q, scrollRight: O }, fe] = _react.useState({
         scrollLeft: 0,
-        scrollRight: 0
-    }), [X, Te] = _react.useState([]), U = _react.useMemo(()=>ue(X, E), [
-        X,
-        E
-    ]), Y = u ? ue(X, Math.ceil(t.length / u)) : U, ye = D !== 0, We = A !== 0;
+        scrollRight: 1
+    }), [de, Ye] = _react.useState([]), X = _react.useMemo(()=>Be(de, I), [
+        de,
+        I
+    ]), ee = v ? Be(de, Math.ceil(e.length / v)) : X, U = O !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: E } = Oe(!!d, L);
     _react.useEffect(()=>{
-        if (l.current) {
-            const c = l.current, d = ()=>{
-                const { scrollWidth: Z, clientWidth: O } = c, $ = Math.round(c.scrollLeft), H = Math.round(Z - ($ + O));
-                Le({
-                    scrollLeft: $,
-                    scrollRight: H
+        if (L.current) {
+            const c = L.current, p = ()=>{
+                const { scrollWidth: re, clientWidth: Z } = c, ne = Math.round(c.scrollLeft), ae = Math.round(re - (ne + Z));
+                fe({
+                    scrollLeft: ne,
+                    scrollRight: ae
                 });
-            }, b = ()=>{
-                const Z = c.scrollWidth - c.clientWidth;
-                Te(Array.from(c.querySelectorAll("[data-item]")).map((O, $)=>{
-                    if ($ === t.length - 1) return Z;
-                    const H = O.offsetLeft, Ge = parseInt(getComputedStyle(O).scrollMargin), Oe = h && !B ? H - O.clientWidth / 2 : H;
-                    return Math.min(Oe - Ge - c.offsetLeft, Z);
+            }, C = ()=>{
+                const re = c.scrollWidth - c.clientWidth;
+                Ye(Array.from(c.querySelectorAll("[data-item]")).map((Z, ne)=>{
+                    if (ne === e.length - 1) return re;
+                    const ae = Z.offsetLeft, Xe = parseInt(getComputedStyle(Z).scrollMargin), et = A && !V ? ae - Z.clientWidth / 2 : ae;
+                    return Math.min(et - Xe - c.offsetLeft, re);
                 }));
             };
-            d(), b(), c.addEventListener("scroll", d);
-            const g = (0, _dom.listenResize)(c, ()=>{
-                d(), b();
+            p(), C(), c.addEventListener("scroll", p);
+            const R = (0, _dom.listenResize)(c, ()=>{
+                p(), C();
             });
             return ()=>{
-                c.removeEventListener("scroll", d), g();
+                c.removeEventListener("scroll", p), R();
             };
         }
         return ()=>{};
     }, [
-        a.desktop,
-        a.tablet,
-        a.mobile,
-        E,
-        S,
-        h,
-        B,
-        t.length
+        b.desktop,
+        b.tablet,
+        b.mobile,
+        I,
+        l,
+        A,
+        V,
+        e.length
     ]);
-    const L = _react.useCallback(function(c) {
-        let d = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const b = l.current;
-        if (b) {
-            const g = U[c];
-            b.scrollTo({
-                left: g,
-                behavior: d ? "smooth" : "auto"
+    const $ = _react.useCallback(function(c) {
+        let p = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+        const C = L.current;
+        if (C) {
+            const R = X[c];
+            C.scrollTo({
+                left: R,
+                behavior: p ? "smooth" : "auto"
             });
         }
     }, [
-        U
-    ]), ee = _react.useCallback(()=>{
-        const c = l.current;
+        X
+    ]), he = _react.useCallback(()=>{
+        const c = L.current;
         if (c) {
-            const { scrollLeft: d } = c, b = [
-                ...Y
-            ].reverse().find((g)=>g - d < -1);
+            const { scrollLeft: p } = c, C = [
+                ...ee
+            ].reverse().find((R)=>R - p < -1);
             c.scrollTo({
-                left: b,
+                left: C,
                 behavior: "smooth"
             });
         }
     }, [
-        Y
-    ]), G = _react.useCallback(()=>{
-        const c = l.current;
+        ee
+    ]), j = _react.useCallback(()=>{
+        const c = L.current;
         if (c) {
-            const { scrollLeft: d } = c, b = Y.find((g)=>g - d > 1);
+            const { scrollLeft: p } = c, C = ee.find((R)=>R - p > 1);
             c.scrollTo({
-                left: b,
+                left: C,
                 behavior: "smooth"
             });
         }
     }, [
-        Y
-    ]), ne = Pe(!!x, l);
+        ee
+    ]);
     _react.useEffect(()=>{
-        m !== void 0 && L(Math.floor(m / C), !1);
+        i !== void 0 && $(Math.floor(i / T), !1);
     }, [
-        m,
-        L,
-        C
-    ]), _react.useEffect(()=>{
-        if (ne && x) {
-            const c = typeof x == "boolean" ? Se : x.time, d = typeof x == "object" && x.loop, b = setInterval(()=>{
-                var g;
-                D !== 0 ? G() : d && ((g = l.current) == null || g.scrollTo({
+        i,
+        $,
+        T
+    ]);
+    const se = typeof d == "object" && d.loop || !1, K = _react.useRef({
+        interacting: !1,
+        left: 0
+    });
+    _react.useEffect(()=>{
+        if (ve && d) {
+            const c = typeof d == "boolean" ? je : d.time, p = setInterval(()=>{
+                var C;
+                K.current.interacting || (O !== 0 ? j() : se && ((C = L.current) == null || C.scrollTo({
                     left: 0,
                     behavior: "smooth"
-                }));
+                })));
             }, c);
-            return ()=>clearInterval(b);
+            return ()=>clearInterval(p);
         }
     }, [
-        x,
-        G,
-        D,
-        ne
+        d,
+        j,
+        O,
+        ve,
+        se
     ]);
-    const k = Mt(A, U), ce = _react.useRef(!m), ae = _react.useRef(0);
+    const S = uo(Q, X), qe = 20;
     _react.useEffect(()=>{
-        if (N) {
-            const c = Math.min((k + 1) * C - 1, t.length - 1), d = [];
-            for(let b = 0; b < C; b++){
-                const g = c - b;
-                g >= 0 && d.unshift(g);
+        S === I - 1 && !se && E(!1);
+    }, [
+        S,
+        I,
+        E,
+        se
+    ]);
+    const Pe = _react.useRef(!i), ye = _react.useRef(0);
+    _react.useEffect(()=>{
+        if (G) {
+            const c = Math.min((S + 1) * T - 1, e.length - 1), p = [];
+            for(let C = 0; C < T; C++){
+                const R = c - C;
+                R >= 0 && p.unshift(R);
             }
-            ce.current ? ae.current !== k && N({
-                pageIndex: k,
-                shownItemIndexes: d
-            }) : ce.current = d.includes(m || 0), ae.current = k;
+            Pe.current ? ye.current !== S && G({
+                pageIndex: S,
+                shownItemIndexes: p
+            }) : Pe.current = p.includes(i || 0), ye.current = S;
         }
     }, [
-        k,
-        t.length,
-        C,
-        m,
-        N
+        S,
+        e.length,
+        T,
+        i,
+        G
     ]);
-    const T = _react.useContext(le), te = _react.useMemo(()=>({
-            currentIndex: k,
+    const M = _react.useContext(Ce), pe = _react.useMemo(()=>({
+            currentIndex: S,
             numPages: {
-                mobile: p,
-                tablet: v,
-                desktop: M
+                mobile: n,
+                tablet: g,
+                desktop: y
             }
         }), [
-        k,
-        M,
-        p,
-        v
+        S,
+        y,
+        n,
+        g
+    ]), Se = _react.useMemo(()=>({
+            isAutoplayEnabled: oe,
+            isAtLastPage: S === I - 1,
+            onAutoplayChanged: E
+        }), [
+        oe,
+        S,
+        I,
+        E
+    ]), Ee = _react.useMemo(()=>({
+            setShouldAutoplay: E,
+            prevArrowEnabled: te,
+            nextArrowEnabled: U
+        }), [
+        E,
+        te,
+        U
     ]);
     _react.useEffect(()=>{
-        T && (T.setGoPrev(ee), T.setGoNext(G), T.setGoToPage(L), T.setBulletsProps(te));
+        M && (M.setGoPrev(he), M.setGoNext(j), M.setGoToPage($), M.setBulletsProps(pe), M.setAutoplayControlProps(Se), M.setPageControlsProps(Ee), M.setIsAutoplayEnabledSetter(E));
     }, [
-        T,
-        G,
-        ee,
+        M,
+        j,
+        he,
+        pe,
+        Se,
+        Ee,
+        $,
         te,
-        L
+        U,
+        d,
+        oe,
+        E
     ]);
-    let q = null;
-    i ? q = i({
-        numPages: E,
-        currentIndex: k,
-        onPress: L
-    }) : r && (q = /* @__PURE__ */ (0, _jsxruntime.jsx)(we, _object_spread_props(_object_spread({}, te), {
-        onPress: L
-    })));
-    const Ae = "64px", De = "36px";
+    let le = null;
+    f ? le = f({
+        numPages: I,
+        currentIndex: S
+    }) : s && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, _object_spread({}, pe)));
+    const Je = "64px", Qe = "36px", Ae = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, !f && {
+            [_carouselcssmistica.noCarouselBulletsDesktop]: y <= 1,
+            [_carouselcssmistica.noCarouselBulletsTablet]: g <= 1,
+            [_carouselcssmistica.noCarouselBulletsMobile]: n <= 1
+        }),
+        children: le
+    });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         "component-name": "Carousel"
-    }, J))), {
+    }, ie))), {
+        className: _carouselcssmistica.carouselComponentContainer,
+        role: "region",
+        "aria-label": N ? `${N}, ${ue.carouselRegion || q(_texttokens.carouselRegion)}` : void 0,
+        "aria-labelledby": N ? void 0 : B,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: _carouselcssmistica.carouselContainer,
-                children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                        isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                            className: _carouselcssmistica.carouselPrevArrowButton,
-                            "aria-label": R.carouselPrevButton || F(_texttokens.carouselPrevButton),
-                            onPress: ee,
-                            disabled: !We,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {})
-                        })
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_carouselcssmistica.carousel, {
-                            [_carouselcssmistica.centeredCarousel]: h,
-                            [_carouselcssmistica.carouselWithScrollMobile]: p > 1,
-                            [_carouselcssmistica.carouselWithScrollTablet]: v > 1
-                        }),
-                        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({
-                            [_carouselcssmistica.vars.itemsPerPageDesktop]: String(a.desktop),
-                            [_carouselcssmistica.vars.itemsPerPageTablet]: String(a.tablet),
-                            [_carouselcssmistica.vars.itemsPerPageMobile]: String(a.mobile)
-                        }, f === "large" ? {
-                            [_carouselcssmistica.vars.mobilePageOffset]: Ae
-                        } : j === _constants.VIVO_NEW_SKIN ? {
-                            [_carouselcssmistica.vars.mobilePageOffset]: De
-                        } : {}, S !== void 0 ? {
-                            [_carouselcssmistica.vars.gap]: String(S)
-                        } : {}))), {
-                            scrollSnapType: I ? "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)(w) && !(0, _platform.isRunningAcceptanceTest)(w) ? 0.5 : void 0
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(_carouselcssmistica.carouselControlsVisibility, {
+                    [_carouselcssmistica.carouselControlsVisibilityMobile]: n > 1,
+                    [_carouselcssmistica.carouselControlsVisibilityTablet]: g > 1,
+                    [_carouselcssmistica.carouselControlsVisibilityDesktop]: y > 1
+                }),
+                children: _ ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    space: "between",
+                    alignItems: "center",
+                    className: _carouselcssmistica.carouselControlsContainer,
+                    children: [
+                        !!d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _carouselcssmistica.carouselAutoplayControlContainer,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+                                isAutoplayEnabled: oe,
+                                isAtLastPage: S === I - 1,
+                                onAutoplayChanged: (c)=>{
+                                    !U && c && $(0), E(c);
+                                }
+                            })
                         }),
-                        ref: l,
-                        children: t.map((c, d)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: (0, _classnames.default)(_carouselcssmistica.carouselItem, s),
-                                style: _object_spread_props(_object_spread({}, e), {
-                                    scrollSnapStop: (0, _platform.isAndroid)(w) ? "always" : "normal"
-                                }),
-                                "data-item": !0,
-                                children: c
-                            }, d))
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                        isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                            className: _carouselcssmistica.carouselNextArrowButton,
-                            "aria-label": R.carouselNextButton || F(_texttokens.carouselNextButton),
-                            onPress: G,
-                            disabled: !ye,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightregular.default, {})
+                        Ae,
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _carouselcssmistica.carouselPagesControlsContainer,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ue, {
+                                goNext: j,
+                                goPrev: he,
+                                setShouldAutoplay: E,
+                                prevArrowEnabled: te,
+                                nextArrowEnabled: U
+                            })
                         })
-                    })
-                ]
+                    ]
+                }) : le && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+                    space: "around",
+                    className: _carouselcssmistica.carouselControlsContainer,
+                    children: Ae
+                })
             }),
-            q && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_carouselcssmistica.carouselBullets, !i && {
-                    [_carouselcssmistica.noCarouselBulletsDesktop]: M <= 1,
-                    [_carouselcssmistica.noCarouselBulletsTablet]: v <= 1,
-                    [_carouselcssmistica.noCarouselBulletsMobile]: p <= 1
-                }),
-                children: q
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _carouselcssmistica.carouselContainer,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(_carouselcssmistica.carousel, {
+                        [_carouselcssmistica.centeredCarousel]: A,
+                        [_carouselcssmistica.carouselWithScrollMobile]: n > 1,
+                        [_carouselcssmistica.carouselWithScrollTablet]: g > 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.mobilePageOffset]: Je
+                    } : P === _constants.VIVO_NEW_SKIN ? {
+                        [_carouselcssmistica.vars.mobilePageOffset]: Qe
+                    } : {}, l !== void 0 ? {
+                        [_carouselcssmistica.vars.gap]: String(l)
+                    } : {}))), {
+                        scrollSnapType: u ? "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)(W) && !(0, _platform.isRunningAcceptanceTest)(W) ? 0.5 : void 0
+                    }),
+                    ref: L,
+                    onTouchStart: (c)=>{
+                        K.current.left = c.currentTarget.scrollLeft, K.current.interacting = !0;
+                    },
+                    onTouchEnd: (c)=>{
+                        K.current.interacting = !1, Math.abs(c.currentTarget.scrollLeft - K.current.left) > qe && E(!1);
+                    },
+                    onKeyDown: ()=>{
+                        E(!1);
+                    },
+                    children: e.map((c, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(_carouselcssmistica.carouselItem, r),
+                            style: _object_spread_props(_object_spread({}, t), {
+                                scrollSnapStop: (0, _platform.isAndroid)(W) ? "always" : "normal"
+                            }),
+                            role: "listitem",
+                            "data-item": !0,
+                            children: c
+                        }, p))
+                })
             })
         ]
     }));
-}, Be = ()=>{
-    const [t, e] = _react.useState(1);
+}, Ze = ()=>{
+    const [e, t] = _react.useState(1);
     return _react.useEffect(()=>{
-        const s = ()=>{
-            window.innerWidth !== 0 && (e((r)=>r + 1), window.removeEventListener("resize", s));
+        const r = ()=>{
+            window.innerWidth !== 0 && (t((s)=>s + 1), window.removeEventListener("resize", r));
         };
-        return window.innerWidth === 0 && window.addEventListener("resize", s), ()=>{
-            window.removeEventListener("resize", s);
+        return window.innerWidth === 0 && window.addEventListener("resize", r), ()=>{
+            window.removeEventListener("resize", r);
         };
-    }, []), t;
-}, qt = (t)=>{
-    const e = Be();
-    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Re, _object_spread_props(_object_spread({}, t), {
-        key: e
+    }, []), e;
+}, Oo = (e)=>{
+    const t = Ze();
+    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Ke, _object_spread_props(_object_spread({}, e), {
+        key: t
     }));
-}, Zt = (param)=>{
-    let { items: t, itemStyle: e, itemClassName: s, withBullets: r, renderBullets: i, initialActiveItem: m, onPageChange: P, dataAttributes: u } = param;
-    const f = Be();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Re, {
-        items: t,
-        itemStyle: e,
-        itemClassName: s,
+}, zo = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, withControls: i = !0, initialActiveItem: m, onPageChange: v, dataAttributes: h, "aria-label": l, "aria-labelledby": u } = param;
+    const A = Ze();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ke, {
+        items: e,
+        itemStyle: t,
+        itemClassName: r,
         itemsPerPage: {
             mobile: 1,
             tablet: 1,
@@ -525,159 +685,185 @@ const Pe = (t, e)=>{
         centered: !0,
         itemsToScroll: 1,
         gap: 0,
-        withBullets: r,
-        renderBullets: i,
+        withBullets: s,
+        renderBullets: f,
+        withControls: i,
         initialActiveItem: m,
-        onPageChange: P,
-        dataAttributes: u
-    }, f);
-}, Ee = /*#__PURE__*/ _react.createContext(void 0), $t = ()=>_react.useContext(Ee), Ht = (param)=>{
-    let { items: t, withBullets: e, autoplay: s, initialPageIndex: r = 0, onPageChange: i, dataAttributes: m, inverseBullets: P = !0 } = param;
-    const { texts: u, platformOverrides: f, t: S } = (0, _hooks.useTheme)(), I = _react.useContext(le), h = _react.useRef(null), [{ scrollLeft: x, scrollRight: N }, J] = _react.useState({
+        onPageChange: v,
+        dataAttributes: h,
+        "aria-label": l,
+        "aria-labelledby": u
+    }, A);
+}, He = /*#__PURE__*/ _react.createContext(void 0), _o = ()=>_react.useContext(He), Go = (param)=>{
+    let { items: e, withBullets: t, withControls: r = !0, autoplay: s, initialPageIndex: f = 0, onPageChange: i, dataAttributes: m, inverseBullets: v = !0 } = param;
+    const { platformOverrides: h } = (0, _hooks.useTheme)(), l = _react.useContext(Ce), u = _react.useRef(null), [{ scrollLeft: A, scrollRight: d }, _] = _react.useState({
         scrollLeft: 0,
-        scrollRight: 0
-    }), R = _react.useCallback(()=>{
-        const l = h.current;
-        l && l.scrollBy({
-            left: -l.clientWidth,
+        scrollRight: 1
+    }), G = d !== 0, ie = A !== 0, N = _react.useCallback(()=>{
+        const n = u.current;
+        n && n.scrollBy({
+            left: -n.clientWidth,
             behavior: "smooth"
         });
-    }, []), w = _react.useCallback(()=>{
-        const l = h.current;
-        l && l.scrollBy({
-            left: l.clientWidth,
+    }, []), B = _react.useCallback(()=>{
+        const n = u.current;
+        n && n.scrollBy({
+            left: n.clientWidth,
             behavior: "smooth"
         });
-    }, []), j = _react.useCallback(function(l) {
-        let p = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const v = h.current;
-        v && v.scrollTo({
-            left: v.clientWidth * l,
-            behavior: p ? "smooth" : "auto"
+    }, []), W = _react.useCallback(function(n) {
+        let g = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+        const y = u.current;
+        y && y.scrollTo({
+            left: y.clientWidth * n,
+            behavior: g ? "smooth" : "auto"
         });
     }, [
-        h
-    ]), F = N !== 0, Q = x !== 0, a = h.current ? Math.floor((x + h.current.clientWidth / 2) / h.current.clientWidth) : 0;
+        u
+    ]), P = u.current ? Math.floor((A + u.current.clientWidth / 2) / u.current.clientWidth) : 0;
     _react.useLayoutEffect(()=>{
-        const l = h.current;
-        if (l) {
-            const p = ()=>{
-                const { scrollWidth: M, clientWidth: E } = l, A = Math.round(l.scrollLeft), D = Math.round(M - (A + E));
-                J({
-                    scrollLeft: A,
-                    scrollRight: D
+        const n = u.current;
+        if (n) {
+            const g = ()=>{
+                const { scrollWidth: I, clientWidth: Q } = n, O = Math.round(n.scrollLeft), fe = Math.round(I - (O + Q));
+                _({
+                    scrollLeft: O,
+                    scrollRight: fe
                 });
             };
-            p(), l.addEventListener("scroll", p);
-            const v = (0, _dom.listenResize)(l, p);
+            g(), n.addEventListener("scroll", g);
+            const y = (0, _dom.listenResize)(n, g);
             return ()=>{
-                l.removeEventListener("scroll", p), v();
+                n.removeEventListener("scroll", g), y();
             };
         }
     }, [
-        t.length
+        e.length
     ]);
-    const B = Pe(!!s, h);
+    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: D } = Oe(!!s, u), b = typeof s == "object" && s.loop || !1;
     _react.useEffect(()=>{
-        if (B && s) {
-            const l = typeof s == "boolean" ? Se : s.time, p = typeof s == "object" && s.loop, v = setInterval(()=>{
-                var M;
-                N !== 0 ? w() : p && ((M = h.current) == null || M.scrollTo({
+        if (q && s) {
+            const n = typeof s == "boolean" ? je : s.time, g = setInterval(()=>{
+                var y;
+                d !== 0 ? B() : b && ((y = u.current) == null || y.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, l);
-            return ()=>clearInterval(v);
+            }, n);
+            return ()=>clearInterval(g);
         }
     }, [
         s,
-        w,
-        N,
-        B
+        B,
+        d,
+        q,
+        b
+    ]), _react.useEffect(()=>{
+        P === e.length - 1 && !b && D(!1);
+    }, [
+        P,
+        e.length,
+        D,
+        b
     ]);
-    const W = _react.useRef(!1), K = _react.useRef(0);
+    const V = _react.useRef(!1), J = _react.useRef(0);
     _react.useEffect(()=>{
-        i && (W.current ? K.current !== a && i(a) : W.current = r === a), K.current = a;
+        i && (V.current ? J.current !== P && i(P) : V.current = f === P), J.current = P;
     }, [
-        a,
-        r,
+        P,
+        f,
         i
     ]), _react.useEffect(()=>{
-        const l = h.current;
-        r !== void 0 && l && !W.current && l.scrollTo({
-            left: l.clientWidth * r
+        const n = u.current;
+        f !== void 0 && n && !V.current && n.scrollTo({
+            left: n.clientWidth * f
         });
     }, [
-        r
+        f
     ]);
-    const C = _react.useMemo(()=>({
-            currentIndex: a,
-            numPages: t.length
+    const F = _react.useMemo(()=>({
+            currentIndex: P,
+            numPages: e.length
         }), [
-        a,
-        t.length
+        P,
+        e.length
     ]);
-    return _react.useEffect(()=>{
-        I && (I.setGoPrev(R), I.setGoNext(w), I.setGoToPage(j), I.setBulletsProps(C));
+    _react.useEffect(()=>{
+        l && (l.setGoPrev(N), l.setGoNext(B), l.setGoToPage(W), l.setBulletsProps(F));
     }, [
-        I,
-        w,
-        R,
-        C,
-        j
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(Ee.Provider, {
+        l,
+        B,
+        N,
+        F,
+        W
+    ]);
+    const T = t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _carouselcssmistica.slideshowBulletsContainer,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+            variant: v ? "inverse" : "default",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, _object_spread({}, F))
+        })
+    }), L = !t && !s;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(He.Provider, {
         value: {
-            withBullets: !!e
+            withBullets: !!t
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
             skipDesktop: !0,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
                 className: (0, _classnames.default)(_carouselcssmistica.slideshowContainer, {
-                    [_carouselcssmistica.slideshowWithBullets]: !!e
+                    [_carouselcssmistica.slideshowWithBullets]: !!t
                 })
             }, (0, _dom.getPrefixedDataAttributes)(m, "SlideShow")), {
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                        isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                            className: _carouselcssmistica.slideshowPrevArrowButton,
-                            "aria-label": u.carouselPrevButton || S(_texttokens.carouselPrevButton),
-                            onPress: R,
-                            disabled: !Q,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {})
+                    e.length > 1 && (r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                        variant: "media",
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                            space: L ? 0 : "between",
+                            alignItems: "center",
+                            className: (0, _classnames.default)(_carouselcssmistica.slideshowControlsContainer, {
+                                [_carouselcssmistica.slideshowControlsContainerSingleItem]: L
+                            }),
+                            children: [
+                                !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _carouselcssmistica.slideshowAutoplayControlContainer,
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+                                        isAutoplayEnabled: ue,
+                                        isAtLastPage: P === e.length - 1,
+                                        onAutoplayChanged: (n)=>{
+                                            P === e.length - 1 && n && W(0), D(n);
+                                        }
+                                    })
+                                }),
+                                T,
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(Ue, {
+                                    goNext: B,
+                                    goPrev: N,
+                                    setShouldAutoplay: D,
+                                    prevArrowEnabled: ie,
+                                    nextArrowEnabled: G
+                                })
+                            ]
                         })
-                    }),
+                    }) : t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+                        space: "around",
+                        className: _carouselcssmistica.slideshowControlsContainer,
+                        children: T
+                    })),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: (0, _css.applyCssVars)({
                             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                         }),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _carouselcssmistica.slideshow,
-                            ref: h,
-                            children: t.map((l, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            ref: u,
+                            children: e.map((n, g)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _carouselcssmistica.slideshowItem,
                                     style: {
-                                        scrollSnapStop: (0, _platform.isAndroid)(f) ? "always" : "normal"
+                                        scrollSnapStop: (0, _platform.isAndroid)(h) ? "always" : "normal"
                                     },
-                                    children: l
-                                }, p))
-                        })
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                        isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                            className: _carouselcssmistica.slideshowNextArrowButton,
-                            "aria-label": u.carouselNextButton || S(_texttokens.carouselNextButton),
-                            onPress: w,
-                            disabled: !F,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightregular.default, {})
-                        })
-                    }),
-                    e && t.length > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                        isInverse: P,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: _carouselcssmistica.slideshowBullets,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(we, _object_spread({}, C))
+                                    children: n
+                                }, g))
                         })
                     })
                 ]