@telefonica/mistica 16.71.0 → 16.72.0

package/dist-es/carousel.js

@@ -54,29 +54,29 @@ function _object_spread_props(target, source) {
 import { jsx as i, jsxs as H } from "react/jsx-runtime";
 import * as s from "react";
 import { createElement as st } from "react";
-import lt from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import rt from "./generated/mistica-icons/icon-chevron-right-regular.js";
-import { useTheme as ce, useIsomorphicLayoutEffect as nt, useScreenSize as Ve, useIsInViewport as at } from "./hooks.js";
+import rt from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import lt from "./generated/mistica-icons/icon-chevron-right-regular.js";
+import { useTheme as ce, useIsomorphicLayoutEffect as nt, useScreenSize as Oe, useIsInViewport as at } from "./hooks.js";
 import Y from "./inline.js";
 import N from "classnames";
-import { ThemeVariant as Ae, useThemeVariant as De } from "./theme-variant-context.js";
-import { listenResize as Oe, getPrefixedDataAttributes as me } from "./utils/dom.js";
-import { isAndroid as ze, isIos as ct, isRunningAcceptanceTest as it } from "./utils/platform.js";
+import { ThemeVariant as Ae, useThemeVariant as We } from "./theme-variant-context.js";
+import { listenResize as De, getPrefixedDataAttributes as me } from "./utils/dom.js";
+import { isAndroid as _e, isIos as ct, isRunningAcceptanceTest as it } from "./utils/platform.js";
 import { useDocumentVisibility as ut } from "./utils/document-visibility.js";
-import { slideshowBulletsContainer as ft, slideshowAutoplayControlContainer as dt, slideshowControlsContainer as Te, slideshowControlsContainerSingleItem as ht, slideshow as pt, slideshowItem as mt, slideshowContainer as bt, slideshowWithBullets as gt, scrollableBullet as Ct, VISIBLE_BULLETS as z, bulletVisibility as vt, bulletButton as Re, bulletVisibilityDesktop as Pt, bulletVisibilityTablet as yt, bulletVisibilityMobile as St, bulletsScrollableContainerBase as Lt, bulletsScrollableContainer as Et, carouselBullets as At, noCarouselBulletsMobile as Tt, noCarouselBulletsTablet as Rt, noCarouselBulletsDesktop as Mt, carouselComponentContainer as kt, carouselControlsContainer as Me, carouselAutoplayControlContainer as Nt, carouselPagesControlsContainer as wt, carouselControlsVisibility as xt, carouselControlsVisibilityDesktop as Bt, carouselControlsVisibilityTablet as It, carouselControlsVisibilityMobile as Wt, carouselContainer as Vt, carouselItem as Dt, vars as x, carousel as Ot, carouselWithScrollTablet as zt, carouselWithScrollMobile as _t, centeredCarousel as Ft, bulletActiveBrand as Gt, bulletBrand as Ut, bulletActiveNegative as $t, bulletNegative as jt, bulletActive as Kt, bullet as Zt, bulletActiveSizing as Ht, bulletInactiveSizing as ke, bulletInactiveMediumSizing as Ne, bulletInactiveSmallSizing as we, SMALL_BULLET_FULL_SIZE as Yt, LARGE_BULLET_FULL_SIZE as qt } from "./carousel.css-mistica.js";
+import { slideshowBulletsContainer as ft, slideshowAutoplayControlContainer as dt, slideshowControlsContainer as Te, slideshowControlsContainerSingleItem as ht, slideshow as pt, slideshowItem as mt, slideshowContainer as bt, slideshowWithBullets as gt, scrollableBullet as Ct, VISIBLE_BULLETS as _, bulletVisibility as vt, bulletButton as Re, bulletVisibilityDesktop as Pt, bulletVisibilityTablet as yt, bulletVisibilityMobile as St, bulletsScrollableContainerBase as Lt, bulletsScrollableContainer as Et, carouselBullets as At, noCarouselBulletsMobile as Tt, noCarouselBulletsTablet as Rt, noCarouselBulletsDesktop as Mt, carouselComponentContainer as kt, carouselControlsContainer as Me, carouselAutoplayControlContainer as Nt, carouselPagesControlsContainer as wt, carouselControlsVisibility as It, carouselControlsVisibilityDesktop as xt, carouselControlsVisibilityTablet as Bt, carouselControlsVisibilityMobile as Vt, carouselContainer as Ot, carouselItem as Wt, vars as I, carousel as Dt, carouselWithScrollTablet as _t, carouselWithScrollMobile as zt, centeredCarousel as Ft, bulletActiveBrand as Gt, bulletBrand as Ut, bulletActiveNegative as $t, bulletNegative as jt, bulletActive as Kt, bullet as Zt, bulletActiveSizing as Ht, bulletInactiveSizing as ke, bulletInactiveMediumSizing as Ne, bulletInactiveSmallSizing as we, SMALL_BULLET_FULL_SIZE as Yt, LARGE_BULLET_FULL_SIZE as qt } from "./carousel.css-mistica.js";
 import { vars as Jt } from "./image.css-mistica.js";
 import { useDesktopContainerType as Qt } from "./desktop-container-type-context.js";
-import { VIVO_NEW_SKIN as Xt } from "./skins/constants.js";
+import { VIVO_SKIN as Xt, VIVO_EVOLUTION_SKIN as eo } from "./skins/constants.js";
 import { applyCssVars as be } from "./utils/css.js";
-import { ResetResponsiveLayout as eo } from "./responsive-layout.js";
-import { InternalIconButton as xe, ToggleIconButton as to } from "./icon-button.js";
-import oo from "./generated/mistica-icons/icon-pause-filled.js";
-import so from "./generated/mistica-icons/icon-play-filled.js";
+import { ResetResponsiveLayout as to } from "./responsive-layout.js";
+import { InternalIconButton as Ie, ToggleIconButton as oo } from "./icon-button.js";
+import so from "./generated/mistica-icons/icon-pause-filled.js";
+import ro from "./generated/mistica-icons/icon-play-filled.js";
 import lo from "./generated/mistica-icons/icon-reload-regular.js";
-import { carouselReloadAutoplay as ro, carouselEnableAutoplay as no, carouselPauseAutoplay as ao, carouselRegion as co, carouselPageNumber as io, carouselFirstButton as uo, carouselPrevButton as fo, carouselLastButton as ho, carouselNextButton as po } from "./text-tokens.js";
-import { isClientSide as mo } from "./utils/environment.js";
-const _e = (e, t)=>{
-    const r = mo() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [o, u] = s.useState(!!e && !r), n = ut(), p = at(t, !1);
+import { carouselReloadAutoplay as no, carouselEnableAutoplay as ao, carouselPauseAutoplay as co, carouselRegion as io, carouselPageNumber as uo, carouselFirstButton as fo, carouselPrevButton as ho, carouselLastButton as po, carouselNextButton as mo } from "./text-tokens.js";
+import { isClientSide as bo } from "./utils/environment.js";
+const ze = (e, t)=>{
+    const l = bo() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [o, u] = s.useState(!!e && !l), n = ut(), p = at(t, !1);
     return {
         isAutoplayEnabled: o && !!e,
         shouldAutoplay: p && n && !!e && o,
@@ -102,9 +102,9 @@ const _e = (e, t)=>{
     bulletsProps: Fe,
     autoplayControlProps: Ge,
     pageControlsProps: Ue
-}), Ce = /*#__PURE__*/ s.createContext(null), Fo = (param)=>{
+}), Ce = /*#__PURE__*/ s.createContext(null), Go = (param)=>{
     let { children: e } = param;
-    const [t, r] = s.useState(Fe), [o, u] = s.useState(Ge), [n, p] = s.useState(Ue), b = s.useRef(w), d = s.useRef(w), l = s.useRef(w), a = s.useRef(w), y = s.useMemo(()=>({
+    const [t, l] = s.useState(Fe), [o, u] = s.useState(Ge), [n, p] = s.useState(Ue), b = s.useRef(w), d = s.useRef(w), r = s.useRef(w), a = s.useRef(w), y = s.useMemo(()=>({
             goPrev: ()=>{
                 b.current();
             },
@@ -112,8 +112,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,
@@ -134,9 +134,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)=>{
@@ -146,76 +146,75 @@ const _e = (e, t)=>{
             children: e
         })
     });
-}, Go = ()=>s.useContext(ge), Uo = ge.Consumer, $e = (param)=>{
+}, Uo = ()=>s.useContext(ge), $o = ge.Consumer, $e = (param)=>{
     let { currentIndex: e, numPages: t } = param;
     var _t_tablet;
-    const r = De(), { isTablet: o, isDesktopOrBigger: u } = Ve(), 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 ? Gt : Ut] = !0 : r === "negative" ? l[e === d ? $t : jt] = !0 : l[e === d ? Kt : Zt] = !0, e === d) return l[Ht] = !0, l;
+    const l = We(), { isTablet: o, isDesktopOrBigger: u } = Oe(), 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 ? Gt : Ut] = !0 : l === "negative" ? r[e === d ? $t : jt] = !0 : r[e === d ? Kt : Zt] = !0, e === d) return r[Ht] = !0, r;
         const a = Math.abs(d - e);
-        return n <= z || a === 1 ? (l[ke] = !0, l) : e === 0 || e === n - 1 ? (l[ke] = a === 2, l[Ne] = a === 3, l[we] = a > 3, l) : (l[Ne] = a === 2, l[we] = a > 2, l);
-    }, b = (d)=>e + 2 < z ? d : n - e + 1 < z ? d - (n - z) : d - (e - 2);
+        return n <= _ || a === 1 ? (r[ke] = !0, r) : e === 0 || e === n - 1 ? (r[ke] = a === 2, r[Ne] = a === 3, r[we] = a > 3, r) : (r[Ne] = a === 2, r[we] = a > 2, r);
+    }, b = (d)=>e + 2 < _ ? d : n - e + 1 < _ ? d - (n - _) : d - (e - 2);
     return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, me({
-        "component-name": "PageBullets",
         testid: "PageBullets"
     })), {
         className: N(Lt, {
-            [Et]: n > z
+            [Et]: n > _
         }),
         children: Array.from({
             length: n
-        }, (d, l)=>{
-            const a = b(l);
+        }, (d, r)=>{
+            const a = b(r);
             var _t_tablet;
             return /* @__PURE__ */ i("div", {
                 className: N({
-                    [Ct]: n > z
+                    [Ct]: n > _
                 }, typeof t == "number" ? {
                     [Re]: !0,
-                    [vt]: l < t
+                    [vt]: r < t
                 } : {
                     [Re]: !0,
-                    [St]: l < t.mobile,
-                    [yt]: l < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
-                    [Pt]: l < t.desktop
+                    [St]: r < t.mobile,
+                    [yt]: r < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
+                    [Pt]: r < t.desktop
                 }),
-                "data-testid": e === l ? "active-bullet" : "bullet",
+                "data-testid": e === r ? "active-bullet" : "bullet",
                 style: _object_spread({}, be({
-                    [x.desktopBulletLeftPosition]: `${a * qt}px`,
-                    [x.mobileBulletLeftPosition]: `${a * Yt}px`
+                    [I.desktopBulletLeftPosition]: `${a * qt}px`,
+                    [I.mobileBulletLeftPosition]: `${a * Yt}px`
                 })),
                 children: /* @__PURE__ */ i("div", {
-                    className: N(p(l))
+                    className: N(p(r))
                 })
-            }, l);
+            }, r);
         })
     }));
-}, Be = (e, t, r)=>{
-    const { texts: o, t: u } = ce(), 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 || io, d(t), r)}` : "";
-    return e === "prev" ? p ? (o.carouselFirstButton || u(uo)) + l : (o.carouselPrevButton || u(fo)) + l : b ? (o.carouselLastButton || u(ho)) + l : (o.carouselNextButton || u(po)) + l;
+}, xe = (e, t, l)=>{
+    const { texts: o, t: u } = ce(), 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 || uo, d(t), l)}` : "";
+    return e === "prev" ? p ? (o.carouselFirstButton || u(fo)) + r : (o.carouselPrevButton || u(ho)) + r : b ? (o.carouselLastButton || u(po)) + r : (o.carouselNextButton || u(mo)) + 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 = De(), 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 = We(), a = xe("prev", d, b), y = xe("next", d, b);
     return /* @__PURE__ */ H(Y, {
-        space: l === "media" ? 16 : 8,
+        space: r === "media" ? 16 : 8,
         children: [
-            /* @__PURE__ */ i(xe, {
-                Icon: lt,
+            /* @__PURE__ */ i(Ie, {
+                Icon: rt,
                 "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
             }),
-            /* @__PURE__ */ i(xe, {
-                Icon: rt,
+            /* @__PURE__ */ i(Ie, {
+                Icon: lt,
                 "aria-label": y,
                 type: "neutral",
-                backgroundType: l === "media" ? "transparent" : "soft",
+                backgroundType: r === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedRight: t,
                 onPress: ()=>{
@@ -226,27 +225,27 @@ 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 } = ce();
-    return /* @__PURE__ */ i(to, {
+    return /* @__PURE__ */ i(oo, {
         checkedProps: {
-            Icon: oo,
+            Icon: so,
             type: "neutral",
-            "aria-label": n.carouselPauseAutoplay || p(ao)
+            "aria-label": n.carouselPauseAutoplay || p(co)
         },
         uncheckedProps: {
-            Icon: t ? lo : so,
+            Icon: t ? lo : ro,
             type: "neutral",
-            "aria-label": t ? n.carouselReloadAutoplay || p(ro) : n.carouselEnableAutoplay || p(no)
+            "aria-label": t ? n.carouselReloadAutoplay || p(no) : n.carouselEnableAutoplay || p(ao)
         },
         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: {
@@ -255,55 +254,55 @@ 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 } = ce(), D = Qt(), g = bo(D || "large", p), { isDesktopOrBigger: V, isTablet: J } = Ve(), G = J ? g.tablet : g.mobile, M = Math.max(Math.floor(V ? g.desktop : G), 1), A = s.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] = s.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 } = ce(), W = Qt(), g = go(W || "large", p), { isDesktopOrBigger: O, isTablet: J } = Oe(), G = J ? g.tablet : g.mobile, M = Math.max(Math.floor(O ? g.desktop : G), 1), A = s.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] = s.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), [de, Je] = s.useState([]), X = s.useMemo(()=>We(de, L), [
+    }), [de, Je] = s.useState([]), X = s.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);
     s.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);
-            const R = Oe(f, ()=>{
+            const R = De(f, ()=>{
                 m(), S();
             });
             return ()=>{
@@ -316,9 +315,9 @@ const _e = (e, t)=>{
         g.tablet,
         g.mobile,
         L,
-        l,
+        r,
         y,
-        V,
+        O,
         e.length
     ]);
     const $ = s.useCallback(function(f) {
@@ -373,7 +372,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"
                 })));
@@ -383,11 +382,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;
     s.useEffect(()=>{
         P === L - 1 && !se && E(!1);
     }, [
@@ -462,11 +461,11 @@ 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__ */ i($e, _object_spread({}, pe)));
+    }) : o && (re = /* @__PURE__ */ i($e, _object_spread({}, pe)));
     const Xe = "64px", et = "36px", Ee = /* @__PURE__ */ i("div", {
         className: N(At, // when renderBullets is provided, we let the consumer decide if the bullets should be hidden
         !u && {
@@ -474,24 +473,23 @@ const _e = (e, t)=>{
             [Rt]: C <= 1,
             [Tt]: c <= 1
         }),
-        children: le
+        children: re
     });
     return /* @__PURE__ */ H("div", _object_spread_props(_object_spread({}, me(_object_spread({
-        "component-name": "Carousel",
         testid: "Carousel"
     }, ie))), {
         className: kt,
         role: "region",
-        "aria-label": B ? `${B}, ${ue.carouselRegion || q(co)}` : void 0,
-        "aria-labelledby": B ? void 0 : I,
+        "aria-label": x ? `${x}, ${ue.carouselRegion || q(io)}` : void 0,
+        "aria-labelledby": x ? void 0 : B,
         children: [
             /* @__PURE__ */ i("div", {
-                className: N(xt, {
-                    [Wt]: c > 1,
-                    [It]: C > 1,
-                    [Bt]: T > 1
+                className: N(It, {
+                    [Vt]: c > 1,
+                    [Bt]: C > 1,
+                    [xt]: T > 1
                 }),
-                children: _ ? /* @__PURE__ */ H(Y, {
+                children: z ? /* @__PURE__ */ H(Y, {
                     space: "between",
                     alignItems: "center",
                     className: Me,
@@ -520,31 +518,31 @@ const _e = (e, t)=>{
                             })
                         })
                     ]
-                }) : le && /* @__PURE__ */ i(Y, {
+                }) : re && /* @__PURE__ */ i(Y, {
                     space: "around",
                     className: Me,
                     children: Ee
                 })
             }),
             /* @__PURE__ */ i("div", {
-                className: Vt,
+                className: Ot,
                 children: /* @__PURE__ */ i("div", {
-                    className: N(Ot, {
+                    className: N(Dt, {
                         [Ft]: y,
-                        [_t]: c > 1,
-                        [zt]: C > 1
+                        [zt]: c > 1,
+                        [_t]: C > 1
                     }),
                     role: "list",
                     style: _object_spread_props(_object_spread({}, be(_object_spread({
-                        [x.itemsPerPageDesktop]: String(g.desktop),
-                        [x.itemsPerPageTablet]: String(g.tablet),
-                        [x.itemsPerPageMobile]: String(g.mobile)
+                        [I.itemsPerPageDesktop]: String(g.desktop),
+                        [I.itemsPerPageTablet]: String(g.tablet),
+                        [I.itemsPerPageMobile]: String(g.mobile)
                     }, d === "large" ? {
-                        [x.mobilePageOffset]: Xe
-                    } : v === Xt ? {
-                        [x.mobilePageOffset]: et
-                    } : {}, l !== void 0 ? {
-                        [x.gap]: String(l)
+                        [I.mobilePageOffset]: Xe
+                    } : v === Xt || v === eo ? {
+                        [I.mobilePageOffset]: et
+                    } : {}, r !== void 0 ? {
+                        [I.gap]: String(r)
                     } : {}))), {
                         scrollSnapType: a ? "initial" : "x mandatory",
                         // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
@@ -552,7 +550,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: ct(W) && !it(W) ? 0.5 : void 0
+                        paddingBottom: ct(V) && !it(V) ? 0.5 : void 0
                     }),
                     ref: A,
                     onTouchStart: (f)=>{
@@ -565,9 +563,9 @@ const _e = (e, t)=>{
                         E(!1);
                     },
                     children: e.map((f, m)=>/* @__PURE__ */ i("div", {
-                            className: N(Dt, r),
+                            className: N(Wt, l),
                             style: _object_spread_props(_object_spread({}, t), {
-                                scrollSnapStop: ze(W) ? "always" : "normal"
+                                scrollSnapStop: _e(V) ? "always" : "normal"
                             }),
                             role: "listitem",
                             "data-item": !0,
@@ -580,25 +578,25 @@ const _e = (e, t)=>{
 }, Ye = ()=>{
     const [e, t] = s.useState(1);
     return s.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__*/ st(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__ */ i(He, {
         items: e,
         itemStyle: t,
-        itemClassName: r,
+        itemClassName: l,
         itemsPerPage: {
             mobile: 1,
             tablet: 1,
@@ -613,27 +611,27 @@ const _e = (e, t)=>{
         initialActiveItem: p,
         onPageChange: b,
         dataAttributes: d,
-        "aria-label": l,
+        "aria-label": r,
         "aria-labelledby": a
     }, y);
-}, qe = /*#__PURE__*/ s.createContext(void 0), Ko = ()=>s.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 } = ce(), l = s.useContext(Ce), a = s.useRef(null), [{ scrollLeft: y, scrollRight: h }, _] = s.useState({
+}, qe = /*#__PURE__*/ s.createContext(void 0), Zo = ()=>s.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 } = ce(), r = s.useContext(Ce), a = s.useRef(null), [{ scrollLeft: y, scrollRight: h }, z] = s.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), F = h !== 0, ie = y !== 0, B = s.useCallback(()=>{
+    }), F = h !== 0, ie = y !== 0, x = s.useCallback(()=>{
         const c = a.current;
         c && c.scrollBy({
             left: -c.clientWidth,
             behavior: "smooth"
         });
-    }, []), I = s.useCallback(()=>{
+    }, []), B = s.useCallback(()=>{
         const c = a.current;
         c && c.scrollBy({
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), W = s.useCallback(function(c) {
+    }, []), V = s.useCallback(function(c) {
         let C = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
         const T = a.current;
         T && T.scrollTo({
@@ -647,14 +645,14 @@ 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
                 });
             };
             C(), c.addEventListener("scroll", C);
-            const T = Oe(c, C);
+            const T = De(c, C);
             return ()=>{
                 c.removeEventListener("scroll", C), T();
             };
@@ -662,12 +660,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;
     s.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"
                 }));
@@ -676,28 +674,28 @@ const _e = (e, t)=>{
         }
     }, [
         o,
-        I,
+        B,
         h,
         q,
         g
     ]), s.useEffect(()=>{
-        v === e.length - 1 && !g && D(!1);
+        v === e.length - 1 && !g && W(!1);
     }, [
         v,
         e.length,
-        D,
+        W,
         g
     ]);
-    const V = s.useRef(!1), J = s.useRef(0);
+    const O = s.useRef(!1), J = s.useRef(0);
     s.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
     ]), s.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
         });
     }, [
@@ -711,13 +709,13 @@ const _e = (e, t)=>{
         e.length
     ]);
     s.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__ */ i("div", {
         className: ft,
@@ -730,15 +728,17 @@ const _e = (e, t)=>{
         value: {
             withBullets: !!t
         },
-        children: /* @__PURE__ */ i(eo, {
+        children: /* @__PURE__ */ i(to, {
             skipDesktop: !0,
             children: /* @__PURE__ */ H("div", _object_spread_props(_object_spread({
                 className: N(bt, {
                     [gt]: !!t
                 })
-            }, me(p, "SlideShow")), {
+            }, me(_object_spread({
+                testid: "SlideShow"
+            }, p))), {
                 children: [
-                    e.length > 1 && (r ? /* @__PURE__ */ i(Ae, {
+                    e.length > 1 && (l ? /* @__PURE__ */ i(Ae, {
                         variant: "media",
                         children: /* @__PURE__ */ H(Y, {
                             space: A ? 0 : "between",
@@ -753,15 +753,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__ */ i(je, {
-                                    goNext: I,
-                                    goPrev: B,
-                                    setShouldAutoplay: D,
+                                    goNext: B,
+                                    goPrev: x,
+                                    setShouldAutoplay: W,
                                     prevArrowEnabled: ie,
                                     nextArrowEnabled: F,
                                     pagesCount: e.length,
@@ -784,7 +784,7 @@ const _e = (e, t)=>{
                             children: e.map((c, C)=>/* @__PURE__ */ i("div", {
                                     className: mt,
                                     style: {
-                                        scrollSnapStop: ze(d) ? "always" : "normal"
+                                        scrollSnapStop: _e(d) ? "always" : "normal"
                                     },
                                     children: c
                                 }, C))
@@ -795,4 +795,4 @@ const _e = (e, t)=>{
         })
     });
 };
-export { $o as Carousel, Ke as CarouselAutoplayControl, Uo as CarouselContextConsumer, Fo as CarouselContextProvider, je as CarouselPageControls, jo as CenteredCarousel, $e as PageBullets, Zo as Slideshow, Go as useCarouselContext, Ko as useSlideshowContext };
+export { jo as Carousel, Ke as CarouselAutoplayControl, $o as CarouselContextConsumer, Go as CarouselContextProvider, je as CarouselPageControls, Ko as CenteredCarousel, $e as PageBullets, Ho as Slideshow, Uo as useCarouselContext, Zo as useSlideshowContext };