@telefonica/mistica 16.71.0 → 16.72.0

package/dist/carousel.js

@@ -11,34 +11,34 @@ function _export(target, all) {
 }
 _export(exports, {
     get Carousel () {
-        return $o;
+        return jo;
     },
     get CarouselAutoplayControl () {
         return Ke;
     },
     get CarouselContextConsumer () {
-        return Uo;
+        return $o;
     },
     get CarouselContextProvider () {
-        return Fo;
+        return Go;
     },
     get CarouselPageControls () {
         return je;
     },
     get CenteredCarousel () {
-        return jo;
+        return Ko;
     },
     get PageBullets () {
         return $e;
     },
     get Slideshow () {
-        return Zo;
+        return Ho;
     },
     get useCarouselContext () {
-        return Go;
+        return Uo;
     },
     get useSlideshowContext () {
-        return Ko;
+        return Zo;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -162,8 +162,8 @@ 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, [o, u] = _react.useState(!!e && !r), n = (0, _documentvisibility.useDocumentVisibility)(), p = (0, _hooks.useIsInViewport)(t, !1);
+const ze = (e, t)=>{
+    const l = (0, _environment.isClientSide)() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [o, u] = _react.useState(!!e && !l), n = (0, _documentvisibility.useDocumentVisibility)(), p = (0, _hooks.useIsInViewport)(t, !1);
     return {
         isAutoplayEnabled: o && !!e,
         shouldAutoplay: p && n && !!e && o,
@@ -189,9 +189,9 @@ const _e = (e, t)=>{
     bulletsProps: Fe,
     autoplayControlProps: Ge,
     pageControlsProps: Ue
-}), Ce = /*#__PURE__*/ _react.createContext(null), Fo = (param)=>{
+}), Ce = /*#__PURE__*/ _react.createContext(null), Go = (param)=>{
     let { children: e } = param;
-    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), y = _react.useMemo(()=>({
+    const [t, l] = _react.useState(Fe), [o, u] = _react.useState(Ge), [n, p] = _react.useState(Ue), b = _react.useRef(w), d = _react.useRef(w), r = _react.useRef(w), a = _react.useRef(w), y = _react.useMemo(()=>({
             goPrev: ()=>{
                 b.current();
             },
@@ -199,8 +199,8 @@ const _e = (e, t)=>{
                 d.current();
             },
             goToPage: function(h) {
-                let _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-                l.current(h, _);
+                let z = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+                r.current(h, z);
             },
             bulletsProps: t,
             autoplayControlProps: o,
@@ -221,9 +221,9 @@ const _e = (e, t)=>{
                     d.current = h;
                 },
                 setGoToPage: (h)=>{
-                    l.current = h;
+                    r.current = h;
                 },
-                setBulletsProps: r,
+                setBulletsProps: l,
                 setAutoplayControlProps: u,
                 setPageControlsProps: p,
                 setIsAutoplayEnabledSetter: (h)=>{
@@ -233,17 +233,16 @@ const _e = (e, t)=>{
             children: e
         })
     });
-}, Go = ()=>_react.useContext(ge), Uo = ge.Consumer, $e = (param)=>{
+}, Uo = ()=>_react.useContext(ge), $o = ge.Consumer, $e = (param)=>{
     let { currentIndex: e, numPages: t } = param;
     var _t_tablet;
-    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 === 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 l = (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 r = {};
+        if (l === "brand" || l === "media" ? r[e === d ? _carouselcssmistica.bulletActiveBrand : _carouselcssmistica.bulletBrand] = !0 : l === "negative" ? r[e === d ? _carouselcssmistica.bulletActiveNegative : _carouselcssmistica.bulletNegative] = !0 : r[e === d ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet] = !0, e === d) return r[_carouselcssmistica.bulletActiveSizing] = !0, r;
         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);
+        return n <= _carouselcssmistica.VISIBLE_BULLETS || a === 1 ? (r[_carouselcssmistica.bulletInactiveSizing] = !0, r) : e === 0 || e === n - 1 ? (r[_carouselcssmistica.bulletInactiveSizing] = a === 2, r[_carouselcssmistica.bulletInactiveMediumSizing] = a === 3, r[_carouselcssmistica.bulletInactiveSmallSizing] = a > 3, r) : (r[_carouselcssmistica.bulletInactiveMediumSizing] = a === 2, r[_carouselcssmistica.bulletInactiveSmallSizing] = a > 2, r);
     }, 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, {
@@ -251,50 +250,50 @@ const _e = (e, t)=>{
         }),
         children: Array.from({
             length: n
-        }, (d, l)=>{
-            const a = b(l);
+        }, (d, r)=>{
+            const a = b(r);
             var _t_tablet;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)({
                     [_carouselcssmistica.scrollableBullet]: n > _carouselcssmistica.VISIBLE_BULLETS
                 }, typeof t == "number" ? {
                     [_carouselcssmistica.bulletButton]: !0,
-                    [_carouselcssmistica.bulletVisibility]: l < t
+                    [_carouselcssmistica.bulletVisibility]: r < 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
+                    [_carouselcssmistica.bulletVisibilityMobile]: r < t.mobile,
+                    [_carouselcssmistica.bulletVisibilityTablet]: r < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
+                    [_carouselcssmistica.bulletVisibilityDesktop]: r < t.desktop
                 }),
-                "data-testid": e === l ? "active-bullet" : "bullet",
+                "data-testid": e === r ? "active-bullet" : "bullet",
                 style: _object_spread({}, (0, _css.applyCssVars)({
                     [_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))
+                    className: (0, _classnames.default)(p(r))
                 })
-            }, l);
+            }, r);
         })
     }));
-}, 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;
+}, xe = (e, t, l)=>{
+    const { texts: o, t: u } = (0, _hooks.useTheme)(), n = t !== void 0 && l !== void 0, p = n && t === 0, b = n && t === l - 1, d = (a)=>e === "prev" ? p ? a + 1 : a : b ? a + 1 : a + 2, r = n ? `, ${u(o.carouselPageNumber || _texttokens.carouselPageNumber, d(t), l)}` : "";
+    return e === "prev" ? p ? (o.carouselFirstButton || u(_texttokens.carouselFirstButton)) + r : (o.carouselPrevButton || u(_texttokens.carouselPrevButton)) + r : b ? (o.carouselLastButton || u(_texttokens.carouselLastButton)) + r : (o.carouselNextButton || u(_texttokens.carouselNextButton)) + r;
 }, je = (param)=>{
-    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), y = Be("next", d, b);
+    let { bleedLeft: e, bleedRight: t, goPrev: l, goNext: o, setShouldAutoplay: u, prevArrowEnabled: n, nextArrowEnabled: p, pagesCount: b, currentPageIndex: d } = param;
+    const r = (0, _themevariantcontext.useThemeVariant)(), a = xe("prev", d, b), y = xe("next", d, b);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-        space: l === "media" ? 16 : 8,
+        space: r === "media" ? 16 : 8,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
                 Icon: _iconchevronleftregular.default,
                 "aria-label": a,
                 type: "neutral",
-                backgroundType: l === "media" ? "transparent" : "soft",
+                backgroundType: r === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedLeft: e,
                 onPress: ()=>{
-                    r(), u(!1);
+                    l(), u(!1);
                 },
                 "aria-disabled": !n
             }),
@@ -302,7 +301,7 @@ const _e = (e, t)=>{
                 Icon: _iconchevronrightregular.default,
                 "aria-label": y,
                 type: "neutral",
-                backgroundType: l === "media" ? "transparent" : "soft",
+                backgroundType: r === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedRight: t,
                 onPress: ()=>{
@@ -313,7 +312,7 @@ const _e = (e, t)=>{
         ]
     });
 }, Ke = (param)=>{
-    let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: o = !1, bleedRight: u = !1 } = param;
+    let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: l, bleedLeft: o = !1, bleedRight: u = !1 } = param;
     const { texts: n, t: p } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, {
         checkedProps: {
@@ -329,11 +328,11 @@ const _e = (e, t)=>{
         small: !0,
         bleedLeft: o,
         bleedRight: u,
-        onChange: r,
+        onChange: l,
         checked: e
     });
-}, Ie = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], bo = (e, t)=>{
-    const r = {
+}, Be = (e, t, l)=>l ? typeof l == "number" ? l : l[e] || t[e] : t[e], go = (e, t)=>{
+    const l = {
         mobile: 1,
         tablet: 2,
         desktop: {
@@ -342,51 +341,51 @@ const _e = (e, t)=>{
             large: 3
         }
     };
-    if (!t) return _object_spread_props(_object_spread({}, r), {
-        desktop: Ie(e, r.desktop)
+    if (!t) return _object_spread_props(_object_spread({}, l), {
+        desktop: Be(e, l.desktop)
     });
     if (typeof t == "number") return {
         mobile: t,
         tablet: t,
         desktop: t
     };
-    const o = Ie(e, r.desktop, t.desktop);
-    return _object_spread_props(_object_spread({}, r, t), {
+    const o = Be(e, l.desktop, t.desktop);
+    return _object_spread_props(_object_spread({}, l, t), {
         desktop: o
     });
-}, We = (e, t)=>{
+}, Ve = (e, t)=>{
     if (e.length === 0) return [];
-    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 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;
+    const l = Math.ceil(e.length / t), o = [];
+    for(let u = 0; u < e.length; u += l)o.push(e[u]);
+    return o[o.length - 1] = e[e.length - l], o;
+}, Co = (e, t)=>{
+    const l = [];
+    for(let o = 0; o < t.length; o++)o === 0 ? l.push(t[0]) : l.push((t[o] + t[o - 1]) / 2);
+    for(let o = l.length - 1; o >= 0; o--)if (e - l[o] >= -1) return o;
     return 0;
 }, Ze = 5e3, He = (param)=>{
-    let { items: e, itemStyle: t, itemClassName: r, withBullets: o, renderBullets: u, initialActiveItem: n, itemsPerPage: p, itemsToScroll: b, mobilePageOffset: d, gap: l, free: a, centered: y, autoplay: h, withControls: _ = !0, onPageChange: F, dataAttributes: ie, "aria-label": B, "aria-labelledby": I } = param;
-    const { platformOverrides: W, skinName: v, 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), A = _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)), T = Math.ceil(e.length / Math.max(Math.floor(g.desktop), 1)), L = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: O }, fe] = _react.useState({
+    let { items: e, itemStyle: t, itemClassName: l, withBullets: o, renderBullets: u, initialActiveItem: n, itemsPerPage: p, itemsToScroll: b, mobilePageOffset: d, gap: r, free: a, centered: y, autoplay: h, withControls: z = !0, onPageChange: F, dataAttributes: ie, "aria-label": x, "aria-labelledby": B } = param;
+    const { platformOverrides: V, skinName: v, texts: ue, t: q } = (0, _hooks.useTheme)(), W = (0, _desktopcontainertypecontext.useDesktopContainerType)(), g = go(W || "large", p), { isDesktopOrBigger: O, isTablet: J } = (0, _hooks.useScreenSize)(), G = J ? g.tablet : g.mobile, M = Math.max(Math.floor(O ? g.desktop : G), 1), A = _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)), T = Math.ceil(e.length / Math.max(Math.floor(g.desktop), 1)), L = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: D }, fe] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), [de, Je] = _react.useState([]), X = _react.useMemo(()=>We(de, L), [
+    }), [de, Je] = _react.useState([]), X = _react.useMemo(()=>Ve(de, L), [
         de,
         L
-    ]), ee = b ? We(de, Math.ceil(e.length / b)) : X, U = O !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: E } = _e(!!h, A);
+    ]), ee = b ? Ve(de, Math.ceil(e.length / b)) : X, U = D !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: E } = ze(!!h, A);
     _react.useEffect(()=>{
         if (A.current) {
             const f = A.current, m = ()=>{
-                const { scrollWidth: re, clientWidth: Z } = f, ne = Math.round(f.scrollLeft), ae = Math.round(re - (ne + Z));
+                const { scrollWidth: le, clientWidth: Z } = f, ne = Math.round(f.scrollLeft), ae = Math.round(le - (ne + Z));
                 fe({
                     scrollLeft: ne,
                     scrollRight: ae
                 });
             }, S = ()=>{
-                const re = f.scrollWidth - f.clientWidth;
+                const le = 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 = y && !V ? ae - Z.clientWidth / 2 : ae;
-                    return Math.min(ot - tt - f.offsetLeft, re);
+                    if (ne === e.length - 1) return le;
+                    const ae = Z.offsetLeft, tt = parseInt(getComputedStyle(Z).scrollMargin), ot = y && !O ? ae - Z.clientWidth / 2 : ae;
+                    return Math.min(ot - tt - f.offsetLeft, le);
                 }));
             };
             m(), S(), f.addEventListener("scroll", m);
@@ -403,9 +402,9 @@ const _e = (e, t)=>{
         g.tablet,
         g.mobile,
         L,
-        l,
+        r,
         y,
-        V,
+        O,
         e.length
     ]);
     const $ = _react.useCallback(function(f) {
@@ -460,7 +459,7 @@ const _e = (e, t)=>{
         if (ve && h) {
             const f = typeof h == "boolean" ? Ze : h.time, m = setInterval(()=>{
                 var _A_current;
-                K.current.interacting || (O !== 0 ? j() : se && ((_A_current = A.current) === null || _A_current === void 0 ? void 0 : _A_current.scrollTo({
+                K.current.interacting || (D !== 0 ? j() : se && ((_A_current = A.current) === null || _A_current === void 0 ? void 0 : _A_current.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 })));
@@ -470,11 +469,11 @@ const _e = (e, t)=>{
     }, [
         h,
         j,
-        O,
+        D,
         ve,
         se
     ]);
-    const P = go(Q, X), Qe = 20;
+    const P = Co(Q, X), Qe = 20;
     _react.useEffect(()=>{
         P === L - 1 && !se && E(!1);
     }, [
@@ -549,27 +548,26 @@ const _e = (e, t)=>{
         oe,
         E
     ]);
-    let le = null;
-    u ? le = u({
+    let re = null;
+    u ? re = u({
         numPages: L,
         currentIndex: P
-    }) : o && (le = /* @__PURE__ */ (0, _jsxruntime.jsx)($e, _object_spread({}, pe)));
+    }) : o && (re = /* @__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]: T <= 1,
             [_carouselcssmistica.noCarouselBulletsTablet]: C <= 1,
             [_carouselcssmistica.noCarouselBulletsMobile]: c <= 1
         }),
-        children: le
+        children: re
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-        "component-name": "Carousel",
         testid: "Carousel"
     }, ie))), {
         className: _carouselcssmistica.carouselComponentContainer,
         role: "region",
-        "aria-label": B ? `${B}, ${ue.carouselRegion || q(_texttokens.carouselRegion)}` : void 0,
-        "aria-labelledby": B ? void 0 : I,
+        "aria-label": x ? `${x}, ${ue.carouselRegion || q(_texttokens.carouselRegion)}` : void 0,
+        "aria-labelledby": x ? void 0 : B,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_carouselcssmistica.carouselControlsVisibility, {
@@ -577,7 +575,7 @@ const _e = (e, t)=>{
                     [_carouselcssmistica.carouselControlsVisibilityTablet]: C > 1,
                     [_carouselcssmistica.carouselControlsVisibilityDesktop]: T > 1
                 }),
-                children: _ ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                children: z ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                     space: "between",
                     alignItems: "center",
                     className: _carouselcssmistica.carouselControlsContainer,
@@ -606,7 +604,7 @@ const _e = (e, t)=>{
                             })
                         })
                     ]
-                }) : le && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+                }) : re && /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                     space: "around",
                     className: _carouselcssmistica.carouselControlsContainer,
                     children: Ee
@@ -627,10 +625,10 @@ const _e = (e, t)=>{
                         [_carouselcssmistica.vars.itemsPerPageMobile]: String(g.mobile)
                     }, d === "large" ? {
                         [_carouselcssmistica.vars.mobilePageOffset]: Xe
-                    } : v === _constants.VIVO_NEW_SKIN ? {
+                    } : v === _constants.VIVO_SKIN || v === _constants.VIVO_EVOLUTION_SKIN ? {
                         [_carouselcssmistica.vars.mobilePageOffset]: et
-                    } : {}, l !== void 0 ? {
-                        [_carouselcssmistica.vars.gap]: String(l)
+                    } : {}, r !== void 0 ? {
+                        [_carouselcssmistica.vars.gap]: String(r)
                     } : {}))), {
                         scrollSnapType: a ? "initial" : "x mandatory",
                         // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
@@ -638,7 +636,7 @@ const _e = (e, t)=>{
                         // 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
+                        paddingBottom: (0, _platform.isIos)(V) && !(0, _platform.isRunningAcceptanceTest)(V) ? 0.5 : void 0
                     }),
                     ref: A,
                     onTouchStart: (f)=>{
@@ -651,9 +649,9 @@ const _e = (e, t)=>{
                         E(!1);
                     },
                     children: e.map((f, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(_carouselcssmistica.carouselItem, r),
+                            className: (0, _classnames.default)(_carouselcssmistica.carouselItem, l),
                             style: _object_spread_props(_object_spread({}, t), {
-                                scrollSnapStop: (0, _platform.isAndroid)(W) ? "always" : "normal"
+                                scrollSnapStop: (0, _platform.isAndroid)(V) ? "always" : "normal"
                             }),
                             role: "listitem",
                             "data-item": !0,
@@ -666,25 +664,25 @@ const _e = (e, t)=>{
 }, Ye = ()=>{
     const [e, t] = _react.useState(1);
     return _react.useEffect(()=>{
-        const r = ()=>{
-            window.innerWidth !== 0 && (t((o)=>o + 1), window.removeEventListener("resize", r));
+        const l = ()=>{
+            window.innerWidth !== 0 && (t((o)=>o + 1), window.removeEventListener("resize", l));
         };
-        return window.innerWidth === 0 && window.addEventListener("resize", r), ()=>{
-            window.removeEventListener("resize", r);
+        return window.innerWidth === 0 && window.addEventListener("resize", l), ()=>{
+            window.removeEventListener("resize", l);
         };
     }, []), e;
-}, $o = (e)=>{
+}, jo = (e)=>{
     const t = Ye();
     return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(He, _object_spread_props(_object_spread({}, e), {
         key: t
     }));
-}, 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;
+}, Ko = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: l, withBullets: o, renderBullets: u, withControls: n = !0, initialActiveItem: p, onPageChange: b, dataAttributes: d, "aria-label": r, "aria-labelledby": a } = param;
     const y = Ye();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(He, {
         items: e,
         itemStyle: t,
-        itemClassName: r,
+        itemClassName: l,
         itemsPerPage: {
             mobile: 1,
             tablet: 1,
@@ -699,27 +697,27 @@ const _e = (e, t)=>{
         initialActiveItem: p,
         onPageChange: b,
         dataAttributes: d,
-        "aria-label": l,
+        "aria-label": r,
         "aria-labelledby": a
     }, y);
-}, 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: y, scrollRight: h }, _] = _react.useState({
+}, qe = /*#__PURE__*/ _react.createContext(void 0), Zo = ()=>_react.useContext(qe), Ho = (param)=>{
+    let { items: e, withBullets: t, withControls: l = !0, autoplay: o, initialPageIndex: u = 0, onPageChange: n, dataAttributes: p, inverseBullets: b = !0 } = param;
+    const { platformOverrides: d } = (0, _hooks.useTheme)(), r = _react.useContext(Ce), a = _react.useRef(null), [{ scrollLeft: y, scrollRight: h }, z] = _react.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), F = h !== 0, ie = y !== 0, B = _react.useCallback(()=>{
+    }), F = h !== 0, ie = y !== 0, x = _react.useCallback(()=>{
         const c = a.current;
         c && c.scrollBy({
             left: -c.clientWidth,
             behavior: "smooth"
         });
-    }, []), I = _react.useCallback(()=>{
+    }, []), B = _react.useCallback(()=>{
         const c = a.current;
         c && c.scrollBy({
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), W = _react.useCallback(function(c) {
+    }, []), V = _react.useCallback(function(c) {
         let C = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const T = a.current;
         T && T.scrollTo({
@@ -733,9 +731,9 @@ const _e = (e, t)=>{
         const c = a.current;
         if (c) {
             const C = ()=>{
-                const { scrollWidth: L, clientWidth: Q } = c, O = Math.round(c.scrollLeft), fe = Math.round(L - (O + Q));
-                _({
-                    scrollLeft: O,
+                const { scrollWidth: L, clientWidth: Q } = c, D = Math.round(c.scrollLeft), fe = Math.round(L - (D + Q));
+                z({
+                    scrollLeft: D,
                     scrollRight: fe
                 });
             };
@@ -748,12 +746,12 @@ const _e = (e, t)=>{
     }, [
         e.length
     ]);
-    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: D } = _e(!!o, a), g = typeof o == "object" && o.loop || !1;
+    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: W } = ze(!!o, a), g = typeof o == "object" && o.loop || !1;
     _react.useEffect(()=>{
         if (q && o) {
             const c = typeof o == "boolean" ? Ze : o.time, C = setInterval(()=>{
                 var _a_current;
-                h !== 0 ? I() : g && ((_a_current = a.current) === null || _a_current === void 0 ? void 0 : _a_current.scrollTo({
+                h !== 0 ? B() : g && ((_a_current = a.current) === null || _a_current === void 0 ? void 0 : _a_current.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -762,28 +760,28 @@ const _e = (e, t)=>{
         }
     }, [
         o,
-        I,
+        B,
         h,
         q,
         g
     ]), _react.useEffect(()=>{
-        v === e.length - 1 && !g && D(!1);
+        v === e.length - 1 && !g && W(!1);
     }, [
         v,
         e.length,
-        D,
+        W,
         g
     ]);
-    const V = _react.useRef(!1), J = _react.useRef(0);
+    const O = _react.useRef(!1), J = _react.useRef(0);
     _react.useEffect(()=>{
-        n && (V.current ? J.current !== v && n(v) : V.current = u === v), J.current = v;
+        n && (O.current ? J.current !== v && n(v) : O.current = u === v), J.current = v;
     }, [
         v,
         u,
         n
     ]), _react.useEffect(()=>{
         const c = a.current;
-        u !== void 0 && c && !V.current && c.scrollTo({
+        u !== void 0 && c && !O.current && c.scrollTo({
             left: c.clientWidth * u
         });
     }, [
@@ -797,13 +795,13 @@ const _e = (e, t)=>{
         e.length
     ]);
     _react.useEffect(()=>{
-        l && (l.setGoPrev(B), l.setGoNext(I), l.setGoToPage(W), l.setBulletsProps(G));
+        r && (r.setGoPrev(x), r.setGoNext(B), r.setGoToPage(V), r.setBulletsProps(G));
     }, [
-        l,
-        I,
+        r,
         B,
+        x,
         G,
-        W
+        V
     ]);
     const M = t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _carouselcssmistica.slideshowBulletsContainer,
@@ -822,9 +820,11 @@ const _e = (e, t)=>{
                 className: (0, _classnames.default)(_carouselcssmistica.slideshowContainer, {
                     [_carouselcssmistica.slideshowWithBullets]: !!t
                 })
-            }, (0, _dom.getPrefixedDataAttributes)(p, "SlideShow")), {
+            }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+                testid: "SlideShow"
+            }, p))), {
                 children: [
-                    e.length > 1 && (r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                    e.length > 1 && (l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                         variant: "media",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                             space: A ? 0 : "between",
@@ -839,15 +839,15 @@ const _e = (e, t)=>{
                                         isAutoplayEnabled: ue,
                                         isAtLastPage: v === e.length - 1,
                                         onAutoplayChanged: (c)=>{
-                                            v === e.length - 1 && c && W(0), D(c);
+                                            v === e.length - 1 && c && V(0), W(c);
                                         }
                                     })
                                 }),
                                 M,
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
-                                    goNext: I,
-                                    goPrev: B,
-                                    setShouldAutoplay: D,
+                                    goNext: B,
+                                    goPrev: x,
+                                    setShouldAutoplay: W,
                                     prevArrowEnabled: ie,
                                     nextArrowEnabled: F,
                                     pagesCount: e.length,