@telefonica/mistica 16.37.5 → 16.39.0

package/dist-es/carousel.js

@@ -51,69 +51,69 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as a, jsxs as H } from "react/jsx-runtime";
+import { jsx as c, jsxs as H } from "react/jsx-runtime";
 import * as o from "react";
-import { createElement as tt } from "react";
-import ot from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import st from "./generated/mistica-icons/icon-chevron-right-regular.js";
-import { useScreenSize as We, useTheme as ce, useIsInViewport as lt } from "./hooks.js";
+import { createElement as ot } from "react";
+import st from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import lt from "./generated/mistica-icons/icon-chevron-right-regular.js";
+import { useScreenSize as Ve, useTheme as ce, useIsInViewport as rt } from "./hooks.js";
 import Y from "./inline.js";
 import k from "classnames";
-import { useIsInverseOrMediaVariant as rt, useThemeVariant as nt, ThemeVariant as Le } from "./theme-variant-context.js";
-import { getPrefixedDataAttributes as me, listenResize as Ve } from "./utils/dom.js";
-import { isAndroid as De, isIos as at, isRunningAcceptanceTest as ct } from "./utils/platform.js";
-import { useDocumentVisibility as it } from "./utils/document-visibility.js";
-import { bulletsScrollableContainerBase as ut, bulletsScrollableContainer as ft, VISIBLE_BULLETS as z, scrollableBullet as dt, bulletButton as Ie, bulletVisibility as ht, bulletVisibilityMobile as pt, bulletVisibilityTablet as mt, bulletVisibilityDesktop as bt, slideshowBulletsContainer as gt, slideshowContainer as Ct, slideshowWithBullets as vt, slideshowControlsContainer as Re, slideshowControlsContainerSingleItem as Pt, slideshowAutoplayControlContainer as yt, slideshow as St, slideshowItem as Et, bulletActiveInverse as At, bulletInverse as Lt, bulletActive as It, bullet as Rt, bulletActiveSizing as Tt, bulletInactiveSizing as Te, bulletInactiveMediumSizing as Me, bulletInactiveSmallSizing as ke, vars as x, LARGE_BULLET_FULL_SIZE as Mt, SMALL_BULLET_FULL_SIZE as kt, carouselBullets as wt, noCarouselBulletsDesktop as xt, noCarouselBulletsTablet as Nt, noCarouselBulletsMobile as Bt, carouselComponentContainer as Wt, carouselControlsVisibility as Vt, carouselControlsVisibilityMobile as Dt, carouselControlsVisibilityTablet as Ot, carouselControlsVisibilityDesktop as zt, carouselControlsContainer as we, carouselAutoplayControlContainer as _t, carouselPagesControlsContainer as Gt, carouselContainer as Ft, carousel as Ut, centeredCarousel as $t, carouselWithScrollMobile as jt, carouselWithScrollTablet as Kt, carouselItem as Zt } from "./carousel.css-mistica.js";
-import { vars as Ht } from "./image.css-mistica.js";
-import { useDesktopContainerType as Yt } from "./desktop-container-type-context.js";
-import { VIVO_NEW_SKIN as qt } from "./skins/constants.js";
+import { useIsInverseOrMediaVariant as nt, useThemeVariant as at, ThemeVariant as Le } from "./theme-variant-context.js";
+import { getPrefixedDataAttributes as me, listenResize as De } from "./utils/dom.js";
+import { isAndroid as Oe, isIos as ct, isRunningAcceptanceTest as it } from "./utils/platform.js";
+import { useDocumentVisibility as ut } from "./utils/document-visibility.js";
+import { bulletsScrollableContainerBase as ft, bulletsScrollableContainer as dt, VISIBLE_BULLETS as _, scrollableBullet as ht, bulletButton as Te, bulletVisibility as pt, bulletVisibilityMobile as mt, bulletVisibilityTablet as bt, bulletVisibilityDesktop as gt, slideshowBulletsContainer as Ct, slideshowContainer as vt, slideshowWithBullets as Pt, slideshowControlsContainer as Re, slideshowControlsContainerSingleItem as yt, slideshowAutoplayControlContainer as St, slideshow as Et, slideshowItem as At, bulletActiveInverse as Lt, bulletInverse as Tt, bulletActive as Rt, bullet as Mt, bulletActiveSizing as It, bulletInactiveSizing as Me, bulletInactiveMediumSizing as Ie, bulletInactiveSmallSizing as ke, vars as N, LARGE_BULLET_FULL_SIZE as kt, SMALL_BULLET_FULL_SIZE as xt, carouselBullets as Nt, noCarouselBulletsDesktop as wt, noCarouselBulletsTablet as Bt, noCarouselBulletsMobile as Wt, carouselComponentContainer as Vt, carouselControlsVisibility as Dt, carouselControlsVisibilityMobile as Ot, carouselControlsVisibilityTablet as zt, carouselControlsVisibilityDesktop as _t, carouselControlsContainer as xe, carouselAutoplayControlContainer as Gt, carouselPagesControlsContainer as Ft, carouselContainer as Ut, carousel as $t, centeredCarousel as jt, carouselWithScrollMobile as Kt, carouselWithScrollTablet as Zt, carouselItem as Ht } from "./carousel.css-mistica.js";
+import { vars as Yt } from "./image.css-mistica.js";
+import { useDesktopContainerType as qt } from "./desktop-container-type-context.js";
+import { VIVO_NEW_SKIN as Jt } from "./skins/constants.js";
 import { applyCssVars as be } from "./utils/css.js";
-import { ResetResponsiveLayout as Jt } from "./responsive-layout.js";
-import { IconButton as xe, ToggleIconButton as Qt } from "./icon-button.js";
-import Xt from "./generated/mistica-icons/icon-pause-filled.js";
-import eo from "./generated/mistica-icons/icon-play-filled.js";
-import to from "./generated/mistica-icons/icon-reload-regular.js";
-import { carouselPrevButton as oo, carouselNextButton as so, carouselPauseAutoplay as lo, carouselReloadAutoplay as ro, carouselEnableAutoplay as no, carouselRegion as ao } from "./text-tokens.js";
-import { isClientSide as co } from "./utils/environment.js";
-const Oe = (e, t)=>{
-    const r = co() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [s, f] = o.useState(!!e && !r), i = it(), m = lt(t, !1);
+import { ResetResponsiveLayout as Qt } from "./responsive-layout.js";
+import { IconButton as Ne, ToggleIconButton as Xt } from "./icon-button.js";
+import eo from "./generated/mistica-icons/icon-pause-filled.js";
+import to from "./generated/mistica-icons/icon-play-filled.js";
+import oo from "./generated/mistica-icons/icon-reload-regular.js";
+import { carouselPageNumber as we, carouselPrevButton as so, carouselNextButton as lo, carouselPauseAutoplay as ro, carouselReloadAutoplay as no, carouselEnableAutoplay as ao, carouselRegion as co } from "./text-tokens.js";
+import { isClientSide as io } from "./utils/environment.js";
+const ze = (e, t)=>{
+    const r = io() ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1, [s, f] = o.useState(!!e && !r), i = ut(), p = rt(t, !1);
     return {
         isAutoplayEnabled: s && !!e,
-        shouldAutoplay: m && i && !!e && s,
+        shouldAutoplay: p && i && !!e && s,
         setShouldAutoPlay: f
     };
-}, w = ()=>{
+}, x = ()=>{
     throw new Error("You must wrap your component with a CarouselContextProvider to use CarouselContext");
-}, ze = {
+}, _e = {
     currentIndex: 0,
     numPages: 0
-}, _e = {
+}, Ge = {
     isAutoplayEnabled: !1,
     isAtLastPage: !1,
-    onAutoplayChanged: w
-}, Ge = {
-    setShouldAutoplay: w,
+    onAutoplayChanged: x
+}, Fe = {
+    setShouldAutoplay: x,
     prevArrowEnabled: !1,
     nextArrowEnabled: !1
 }, ge = /*#__PURE__*/ o.createContext({
-    goPrev: w,
-    goNext: w,
-    goToPage: w,
-    bulletsProps: ze,
-    autoplayControlProps: _e,
-    pageControlsProps: Ge
-}), Ce = /*#__PURE__*/ o.createContext(null), Wo = (param)=>{
+    goPrev: x,
+    goNext: x,
+    goToPage: x,
+    bulletsProps: _e,
+    autoplayControlProps: Ge,
+    pageControlsProps: Fe
+}), Ce = /*#__PURE__*/ o.createContext(null), Vo = (param)=>{
     let { children: e } = param;
-    const [t, r] = o.useState(ze), [s, f] = o.useState(_e), [i, m] = o.useState(Ge), v = o.useRef(w), h = o.useRef(w), l = o.useRef(w), u = o.useRef(w), A = o.useMemo(()=>({
+    const [t, r] = o.useState(_e), [s, f] = o.useState(Ge), [i, p] = o.useState(Fe), g = o.useRef(x), h = o.useRef(x), l = o.useRef(x), n = o.useRef(x), P = o.useMemo(()=>({
             goPrev: ()=>{
-                v.current();
+                g.current();
             },
             goNext: ()=>{
                 h.current();
             },
             goToPage: function(d) {
-                let _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-                l.current(d, _);
+                let w = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+                l.current(d, w);
             },
             bulletsProps: t,
             autoplayControlProps: s,
@@ -123,12 +123,12 @@ const Oe = (e, t)=>{
         s,
         i
     ]);
-    return /* @__PURE__ */ a(ge.Provider, {
-        value: A,
-        children: /* @__PURE__ */ a(Ce.Provider, {
+    return /* @__PURE__ */ c(ge.Provider, {
+        value: P,
+        children: /* @__PURE__ */ c(Ce.Provider, {
             value: {
                 setGoPrev: (d)=>{
-                    v.current = d;
+                    g.current = d;
                 },
                 setGoNext: (d)=>{
                     h.current = d;
@@ -138,67 +138,68 @@ const Oe = (e, t)=>{
                 },
                 setBulletsProps: r,
                 setAutoplayControlProps: f,
-                setPageControlsProps: m,
+                setPageControlsProps: p,
                 setIsAutoplayEnabledSetter: (d)=>{
-                    u.current = d;
+                    n.current = d;
                 }
             },
             children: e
         })
     });
-}, Vo = ()=>o.useContext(ge), Do = ge.Consumer, Fe = (param)=>{
+}, Do = ()=>o.useContext(ge), Oo = ge.Consumer, Ue = (param)=>{
     let { currentIndex: e, numPages: t } = param;
     var _t_tablet;
-    const r = rt(), { isTablet: s, isDesktopOrBigger: f } = We(), 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 r = nt(), { isTablet: s, isDesktopOrBigger: f } = Ve(), i = typeof t == "number" ? t : f ? t.desktop : s ? (_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile : t.mobile, p = (h)=>{
         const l = {};
-        if (r ? l[e === h ? At : Lt] = !0 : l[e === h ? It : Rt] = !0, e === h) return l[Tt] = !0, l;
-        const u = Math.abs(h - e);
-        return i <= z || u === 1 ? (l[Te] = !0, l) : e === 0 || e === i - 1 ? (l[Te] = u === 2, l[Me] = u === 3, l[ke] = u > 3, l) : (l[Me] = u === 2, l[ke] = u > 2, l);
-    }, v = (h)=>e + 2 < z ? h : i - e + 1 < z ? h - (i - z) : h - (e - 2);
-    return /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, me({
-        "component-name": "PageBullets"
+        if (r ? l[e === h ? Lt : Tt] = !0 : l[e === h ? Rt : Mt] = !0, e === h) return l[It] = !0, l;
+        const n = Math.abs(h - e);
+        return i <= _ || n === 1 ? (l[Me] = !0, l) : e === 0 || e === i - 1 ? (l[Me] = n === 2, l[Ie] = n === 3, l[ke] = n > 3, l) : (l[Ie] = n === 2, l[ke] = n > 2, l);
+    }, g = (h)=>e + 2 < _ ? h : i - e + 1 < _ ? h - (i - _) : h - (e - 2);
+    return /* @__PURE__ */ c("div", _object_spread_props(_object_spread({}, me({
+        "component-name": "PageBullets",
+        testid: "PageBullets"
     })), {
-        className: k(ut, {
-            [ft]: i > z
+        className: k(ft, {
+            [dt]: i > _
         }),
         children: Array.from({
             length: i
         }, (h, l)=>{
-            const u = v(l);
+            const n = g(l);
             var _t_tablet;
-            return /* @__PURE__ */ a("div", {
+            return /* @__PURE__ */ c("div", {
                 className: k({
-                    [dt]: i > z
+                    [ht]: i > _
                 }, typeof t == "number" ? {
-                    [Ie]: !0,
-                    [ht]: l < t
+                    [Te]: !0,
+                    [pt]: l < t
                 } : {
-                    [Ie]: !0,
-                    [pt]: l < t.mobile,
-                    [mt]: l < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
-                    [bt]: l < t.desktop
+                    [Te]: !0,
+                    [mt]: l < t.mobile,
+                    [bt]: l < ((_t_tablet = t.tablet) !== null && _t_tablet !== void 0 ? _t_tablet : t.mobile),
+                    [gt]: l < t.desktop
                 }),
                 style: _object_spread({}, be({
-                    [x.desktopBulletLeftPosition]: `${u * Mt}px`,
-                    [x.mobileBulletLeftPosition]: `${u * kt}px`
+                    [N.desktopBulletLeftPosition]: `${n * kt}px`,
+                    [N.mobileBulletLeftPosition]: `${n * xt}px`
                 })),
-                children: /* @__PURE__ */ a("div", {
-                    className: k(m(l))
+                children: /* @__PURE__ */ c("div", {
+                    className: k(p(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 } = ce(), l = nt();
+}, $e = (param)=>{
+    let { bleedLeft: e, bleedRight: t, goPrev: r, goNext: s, setShouldAutoplay: f, prevArrowEnabled: i, nextArrowEnabled: p, pagesCount: g, currentPageIndex: h } = param;
+    const { texts: l, t: n } = ce(), P = at(), d = i && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || we, h, g)}` : "", w = p && g !== void 0 && h !== void 0 ? `, ${n(l.carouselPageNumber || we, h + 2, g)}` : "";
     return /* @__PURE__ */ H(Y, {
-        space: l === "media" ? 16 : 8,
+        space: P === "media" ? 16 : 8,
         children: [
-            /* @__PURE__ */ a(xe, {
-                Icon: ot,
-                "aria-label": v.carouselPrevButton || h(oo),
+            /* @__PURE__ */ c(Ne, {
+                Icon: st,
+                "aria-label": (l.carouselPrevButton || n(so)) + d,
                 type: "neutral",
-                backgroundType: l === "media" ? "transparent" : "soft",
+                backgroundType: P === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedLeft: e,
                 onPress: ()=>{
@@ -206,33 +207,33 @@ const Oe = (e, t)=>{
                 },
                 disabled: !i
             }),
-            /* @__PURE__ */ a(xe, {
-                Icon: st,
-                "aria-label": v.carouselNextButton || h(so),
+            /* @__PURE__ */ c(Ne, {
+                Icon: lt,
+                "aria-label": (l.carouselNextButton || n(lo)) + w,
                 type: "neutral",
-                backgroundType: l === "media" ? "transparent" : "soft",
+                backgroundType: P === "media" ? "transparent" : "soft",
                 small: !0,
                 bleedRight: t,
                 onPress: ()=>{
                     s(), f(!1);
                 },
-                disabled: !m
+                disabled: !p
             })
         ]
     });
-}, $e = (param)=>{
+}, je = (param)=>{
     let { isAutoplayEnabled: e, isAtLastPage: t, onAutoplayChanged: r, bleedLeft: s = !1, bleedRight: f = !1 } = param;
-    const { texts: i, t: m } = ce();
-    return /* @__PURE__ */ a(Qt, {
+    const { texts: i, t: p } = ce();
+    return /* @__PURE__ */ c(Xt, {
         checkedProps: {
-            Icon: Xt,
+            Icon: eo,
             type: "neutral",
-            "aria-label": i.carouselPauseAutoplay || m(lo)
+            "aria-label": i.carouselPauseAutoplay || p(ro)
         },
         uncheckedProps: {
-            Icon: t ? to : eo,
+            Icon: t ? oo : to,
             type: "neutral",
-            "aria-label": t ? i.carouselReloadAutoplay || m(ro) : i.carouselEnableAutoplay || m(no)
+            "aria-label": t ? i.carouselReloadAutoplay || p(no) : i.carouselEnableAutoplay || p(ao)
         },
         small: !0,
         bleedLeft: s,
@@ -240,7 +241,7 @@ const Oe = (e, t)=>{
         onChange: r,
         checked: e
     });
-}, Ne = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], io = (e, t)=>{
+}, Be = (e, t, r)=>r ? typeof r == "number" ? r : r[e] || t[e] : t[e], uo = (e, t)=>{
     const r = {
         mobile: 1,
         tablet: 2,
@@ -251,58 +252,58 @@ const Oe = (e, t)=>{
         }
     };
     if (!t) return _object_spread_props(_object_spread({}, r), {
-        desktop: Ne(e, r.desktop)
+        desktop: Be(e, r.desktop)
     });
     if (typeof t == "number") return {
         mobile: t,
         tablet: t,
         desktop: t
     };
-    const s = Ne(e, r.desktop, t.desktop);
+    const s = Be(e, r.desktop, t.desktop);
     return _object_spread_props(_object_spread({}, r, t), {
         desktop: s
     });
-}, Be = (e, t)=>{
+}, We = (e, t)=>{
     if (e.length === 0) return [];
     const r = Math.ceil(e.length / t), s = [];
     for(let f = 0; f < e.length; f += r)s.push(e[f]);
     return s[s.length - 1] = e[e.length - r], s;
-}, uo = (e, t)=>{
+}, fo = (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;
-}, 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 } = ce(), D = Yt(), b = io(D || "large", m), { isDesktopOrBigger: V, isTablet: J } = We(), F = J ? b.tablet : b.mobile, T = Math.max(Math.floor(V ? b.desktop : F), 1), L = o.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] = o.useState({
+}, Ke = 5e3, Ze = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, initialActiveItem: i, itemsPerPage: p, itemsToScroll: g, mobilePageOffset: h, gap: l, free: n, centered: P, autoplay: d, withControls: w = !0, onPageChange: G, dataAttributes: ie, "aria-label": B, "aria-labelledby": W } = param;
+    const { platformOverrides: V, skinName: y, texts: ue, t: q } = ce(), O = qt(), b = uo(O || "large", p), { isDesktopOrBigger: D, isTablet: J } = Ve(), F = J ? b.tablet : b.mobile, M = Math.max(Math.floor(D ? b.desktop : F), 1), T = o.useRef(null), a = Math.ceil(e.length / Math.max(Math.floor(b.mobile), 1)), C = Math.ceil(e.length / Math.max(Math.floor(b.tablet), 1)), E = Math.ceil(e.length / Math.max(Math.floor(b.desktop), 1)), A = Math.ceil(e.length / M), [{ scrollLeft: Q, scrollRight: z }, fe] = o.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), [de, Ye] = o.useState([]), X = o.useMemo(()=>Be(de, I), [
+    }), [de, qe] = o.useState([]), X = o.useMemo(()=>We(de, A), [
         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);
+        A
+    ]), ee = g ? We(de, Math.ceil(e.length / g)) : X, U = z !== 0, te = Q !== 0, { isAutoplayEnabled: oe, shouldAutoplay: ve, setShouldAutoPlay: L } = ze(!!d, T);
     o.useEffect(()=>{
-        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));
+        if (T.current) {
+            const u = T.current, m = ()=>{
+                const { scrollWidth: re, clientWidth: Z } = u, ne = Math.round(u.scrollLeft), ae = Math.round(re - (ne + Z));
                 fe({
                     scrollLeft: ne,
                     scrollRight: ae
                 });
-            }, C = ()=>{
-                const re = c.scrollWidth - c.clientWidth;
-                Ye(Array.from(c.querySelectorAll("[data-item]")).map((Z, ne)=>{
+            }, v = ()=>{
+                const re = u.scrollWidth - u.clientWidth;
+                qe(Array.from(u.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);
+                    const ae = Z.offsetLeft, et = parseInt(getComputedStyle(Z).scrollMargin), tt = P && !D ? ae - Z.clientWidth / 2 : ae;
+                    return Math.min(tt - et - u.offsetLeft, re);
                 }));
             };
-            p(), C(), c.addEventListener("scroll", p);
-            const R = Ve(c, ()=>{
-                p(), C();
+            m(), v(), u.addEventListener("scroll", m);
+            const R = De(u, ()=>{
+                m(), v();
             });
             return ()=>{
-                c.removeEventListener("scroll", p), R();
+                u.removeEventListener("scroll", m), R();
             };
         }
         return ()=>{};
@@ -310,43 +311,43 @@ const Oe = (e, t)=>{
         b.desktop,
         b.tablet,
         b.mobile,
-        I,
-        l,
         A,
-        V,
+        l,
+        P,
+        D,
         e.length
     ]);
-    const $ = o.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({
+    const $ = o.useCallback(function(u) {
+        let m = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+        const v = T.current;
+        if (v) {
+            const R = X[u];
+            v.scrollTo({
                 left: R,
-                behavior: p ? "smooth" : "auto"
+                behavior: m ? "smooth" : "auto"
             });
         }
     }, [
         X
     ]), he = o.useCallback(()=>{
-        const c = L.current;
-        if (c) {
-            const { scrollLeft: p } = c, C = [
+        const u = T.current;
+        if (u) {
+            const { scrollLeft: m } = u, v = [
                 ...ee
-            ].reverse().find((R)=>R - p < -1);
-            c.scrollTo({
-                left: C,
+            ].reverse().find((R)=>R - m < -1);
+            u.scrollTo({
+                left: v,
                 behavior: "smooth"
             });
         }
     }, [
         ee
     ]), j = o.useCallback(()=>{
-        const c = L.current;
-        if (c) {
-            const { scrollLeft: p } = c, C = ee.find((R)=>R - p > 1);
-            c.scrollTo({
-                left: C,
+        const u = T.current;
+        if (u) {
+            const { scrollLeft: m } = u, v = ee.find((R)=>R - m > 1);
+            u.scrollTo({
+                left: v,
                 behavior: "smooth"
             });
         }
@@ -354,11 +355,11 @@ const Oe = (e, t)=>{
         ee
     ]);
     o.useEffect(()=>{
-        i !== void 0 && $(Math.floor(i / T), !1);
+        i !== void 0 && $(Math.floor(i / M), !1);
     }, [
         i,
         $,
-        T
+        M
     ]);
     const se = typeof d == "object" && d.loop || !1, K = o.useRef({
         interacting: !1,
@@ -366,85 +367,85 @@ const Oe = (e, t)=>{
     });
     o.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({
+            const u = typeof d == "boolean" ? Ke : d.time, m = setInterval(()=>{
+                var v;
+                K.current.interacting || (z !== 0 ? j() : se && ((v = T.current) == null || v.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 })));
-            }, c);
-            return ()=>clearInterval(p);
+            }, u);
+            return ()=>clearInterval(m);
         }
     }, [
         d,
         j,
-        O,
+        z,
         ve,
         se
     ]);
-    const S = uo(Q, X), qe = 20;
+    const S = fo(Q, X), Je = 20;
     o.useEffect(()=>{
-        S === I - 1 && !se && E(!1);
+        S === A - 1 && !se && L(!1);
     }, [
         S,
-        I,
-        E,
+        A,
+        L,
         se
     ]);
     const Pe = o.useRef(!i), ye = o.useRef(0);
     o.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);
+            const u = Math.min((S + 1) * M - 1, e.length - 1), m = [];
+            for(let v = 0; v < M; v++){
+                const R = u - v;
+                R >= 0 && m.unshift(R);
             }
             Pe.current ? ye.current !== S && G({
                 pageIndex: S,
-                shownItemIndexes: p
-            }) : Pe.current = p.includes(i || 0), ye.current = S;
+                shownItemIndexes: m
+            }) : Pe.current = m.includes(i || 0), ye.current = S;
         }
     }, [
         S,
         e.length,
-        T,
+        M,
         i,
         G
     ]);
-    const M = o.useContext(Ce), pe = o.useMemo(()=>({
+    const I = o.useContext(Ce), pe = o.useMemo(()=>({
             currentIndex: S,
             numPages: {
-                mobile: n,
-                tablet: g,
-                desktop: y
+                mobile: a,
+                tablet: C,
+                desktop: E
             }
         }), [
         S,
-        y,
-        n,
-        g
+        E,
+        a,
+        C
     ]), Se = o.useMemo(()=>({
             isAutoplayEnabled: oe,
-            isAtLastPage: S === I - 1,
-            onAutoplayChanged: E
+            isAtLastPage: S === A - 1,
+            onAutoplayChanged: L
         }), [
         oe,
         S,
-        I,
-        E
+        A,
+        L
     ]), Ee = o.useMemo(()=>({
-            setShouldAutoplay: E,
+            setShouldAutoplay: L,
             prevArrowEnabled: te,
             nextArrowEnabled: U
         }), [
-        E,
+        L,
         te,
         U
     ]);
     o.useEffect(()=>{
-        M && (M.setGoPrev(he), M.setGoNext(j), M.setGoToPage($), M.setBulletsProps(pe), M.setAutoplayControlProps(Se), M.setPageControlsProps(Ee), M.setIsAutoplayEnabledSetter(E));
+        I && (I.setGoPrev(he), I.setGoNext(j), I.setGoToPage($), I.setBulletsProps(pe), I.setAutoplayControlProps(Se), I.setPageControlsProps(Ee), I.setIsAutoplayEnabledSetter(L));
     }, [
-        M,
+        I,
         j,
         he,
         pe,
@@ -455,121 +456,124 @@ const Oe = (e, t)=>{
         U,
         d,
         oe,
-        E
+        L
     ]);
     let le = null;
     f ? le = f({
-        numPages: I,
+        numPages: A,
         currentIndex: S
-    }) : s && (le = /* @__PURE__ */ a(Fe, _object_spread({}, pe)));
-    const Je = "64px", Qe = "36px", Ae = /* @__PURE__ */ a("div", {
-        className: k(wt, // when renderBullets is provided, we let the consumer decide if the bullets should be hidden
+    }) : s && (le = /* @__PURE__ */ c(Ue, _object_spread({}, pe)));
+    const Qe = "64px", Xe = "36px", Ae = /* @__PURE__ */ c("div", {
+        className: k(Nt, // when renderBullets is provided, we let the consumer decide if the bullets should be hidden
         !f && {
-            [xt]: y <= 1,
-            [Nt]: g <= 1,
-            [Bt]: n <= 1
+            [wt]: E <= 1,
+            [Bt]: C <= 1,
+            [Wt]: a <= 1
         }),
         children: le
     });
     return /* @__PURE__ */ H("div", _object_spread_props(_object_spread({}, me(_object_spread({
-        "component-name": "Carousel"
+        "component-name": "Carousel",
+        testid: "Carousel"
     }, ie))), {
-        className: Wt,
+        className: Vt,
         role: "region",
-        "aria-label": N ? `${N}, ${ue.carouselRegion || q(ao)}` : void 0,
-        "aria-labelledby": N ? void 0 : B,
+        "aria-label": B ? `${B}, ${ue.carouselRegion || q(co)}` : void 0,
+        "aria-labelledby": B ? void 0 : W,
         children: [
-            /* @__PURE__ */ a("div", {
-                className: k(Vt, {
-                    [Dt]: n > 1,
-                    [Ot]: g > 1,
-                    [zt]: y > 1
+            /* @__PURE__ */ c("div", {
+                className: k(Dt, {
+                    [Ot]: a > 1,
+                    [zt]: C > 1,
+                    [_t]: E > 1
                 }),
-                children: _ ? /* @__PURE__ */ H(Y, {
+                children: w ? /* @__PURE__ */ H(Y, {
                     space: "between",
                     alignItems: "center",
-                    className: we,
+                    className: xe,
                     children: [
-                        !!d && /* @__PURE__ */ a("div", {
-                            className: _t,
-                            children: /* @__PURE__ */ a($e, {
+                        !!d && /* @__PURE__ */ c("div", {
+                            className: Gt,
+                            children: /* @__PURE__ */ c(je, {
                                 isAutoplayEnabled: oe,
-                                isAtLastPage: S === I - 1,
-                                onAutoplayChanged: (c)=>{
-                                    !U && c && $(0), E(c);
+                                isAtLastPage: S === A - 1,
+                                onAutoplayChanged: (u)=>{
+                                    !U && u && $(0), L(u);
                                 }
                             })
                         }),
                         Ae,
-                        /* @__PURE__ */ a("div", {
-                            className: Gt,
-                            children: /* @__PURE__ */ a(Ue, {
+                        /* @__PURE__ */ c("div", {
+                            className: Ft,
+                            children: /* @__PURE__ */ c($e, {
                                 goNext: j,
                                 goPrev: he,
-                                setShouldAutoplay: E,
+                                setShouldAutoplay: L,
                                 prevArrowEnabled: te,
-                                nextArrowEnabled: U
+                                nextArrowEnabled: U,
+                                pagesCount: A,
+                                currentPageIndex: S
                             })
                         })
                     ]
-                }) : le && /* @__PURE__ */ a(Y, {
+                }) : le && /* @__PURE__ */ c(Y, {
                     space: "around",
-                    className: we,
+                    className: xe,
                     children: Ae
                 })
             }),
-            /* @__PURE__ */ a("div", {
-                className: Ft,
-                children: /* @__PURE__ */ a("div", {
-                    className: k(Ut, {
-                        [$t]: A,
-                        [jt]: n > 1,
-                        [Kt]: g > 1
+            /* @__PURE__ */ c("div", {
+                className: Ut,
+                children: /* @__PURE__ */ c("div", {
+                    className: k($t, {
+                        [jt]: P,
+                        [Kt]: a > 1,
+                        [Zt]: C > 1
                     }),
                     role: "list",
                     style: _object_spread_props(_object_spread({}, be(_object_spread({
-                        [x.itemsPerPageDesktop]: String(b.desktop),
-                        [x.itemsPerPageTablet]: String(b.tablet),
-                        [x.itemsPerPageMobile]: String(b.mobile)
+                        [N.itemsPerPageDesktop]: String(b.desktop),
+                        [N.itemsPerPageTablet]: String(b.tablet),
+                        [N.itemsPerPageMobile]: String(b.mobile)
                     }, h === "large" ? {
-                        [x.mobilePageOffset]: Je
-                    } : P === qt ? {
-                        [x.mobilePageOffset]: Qe
+                        [N.mobilePageOffset]: Qe
+                    } : y === Jt ? {
+                        [N.mobilePageOffset]: Xe
                     } : {}, l !== void 0 ? {
-                        [x.gap]: String(l)
+                        [N.gap]: String(l)
                     } : {}))), {
-                        scrollSnapType: u ? "initial" : "x mandatory",
+                        scrollSnapType: n ? "initial" : "x mandatory",
                         // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
                         // there is a webkit rendering bug that causes a half pixel white line to appear at
                         // the bottom of the scrollable area in retina displays when it has a height with
                         // decimals. This extra padding avoids that line to partially cover the carousel
                         // slides border:
-                        paddingBottom: at(W) && !ct(W) ? 0.5 : void 0
+                        paddingBottom: ct(V) && !it(V) ? 0.5 : void 0
                     }),
-                    ref: L,
-                    onTouchStart: (c)=>{
-                        K.current.left = c.currentTarget.scrollLeft, K.current.interacting = !0;
+                    ref: T,
+                    onTouchStart: (u)=>{
+                        K.current.left = u.currentTarget.scrollLeft, K.current.interacting = !0;
                     },
-                    onTouchEnd: (c)=>{
-                        K.current.interacting = !1, Math.abs(c.currentTarget.scrollLeft - K.current.left) > qe && E(!1);
+                    onTouchEnd: (u)=>{
+                        K.current.interacting = !1, Math.abs(u.currentTarget.scrollLeft - K.current.left) > Je && L(!1);
                     },
                     onKeyDown: ()=>{
-                        E(!1);
+                        L(!1);
                     },
-                    children: e.map((c, p)=>/* @__PURE__ */ a("div", {
-                            className: k(Zt, r),
+                    children: e.map((u, m)=>/* @__PURE__ */ c("div", {
+                            className: k(Ht, r),
                             style: _object_spread_props(_object_spread({}, t), {
-                                scrollSnapStop: De(W) ? "always" : "normal"
+                                scrollSnapStop: Oe(V) ? "always" : "normal"
                             }),
                             role: "listitem",
                             "data-item": !0,
-                            children: c
-                        }, p))
+                            children: u
+                        }, m))
                 })
             })
         ]
     }));
-}, Ze = ()=>{
+}, He = ()=>{
     const [e, t] = o.useState(1);
     return o.useEffect(()=>{
         const r = ()=>{
@@ -579,15 +583,15 @@ const Oe = (e, t)=>{
             window.removeEventListener("resize", r);
         };
     }, []), e;
-}, Oo = (e)=>{
-    const t = Ze();
-    return /* @__PURE__ */ /*#__PURE__*/ tt(Ke, _object_spread_props(_object_spread({}, e), {
+}, zo = (e)=>{
+    const t = He();
+    return /* @__PURE__ */ /*#__PURE__*/ ot(Ze, _object_spread_props(_object_spread({}, e), {
         key: t
     }));
-}, 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__ */ a(Ke, {
+}, _o = (param)=>{
+    let { items: e, itemStyle: t, itemClassName: r, withBullets: s, renderBullets: f, withControls: i = !0, initialActiveItem: p, onPageChange: g, dataAttributes: h, "aria-label": l, "aria-labelledby": n } = param;
+    const P = He();
+    return /* @__PURE__ */ c(Ze, {
         items: e,
         itemStyle: t,
         itemClassName: r,
@@ -602,182 +606,184 @@ const Oe = (e, t)=>{
         withBullets: s,
         renderBullets: f,
         withControls: i,
-        initialActiveItem: m,
-        onPageChange: v,
+        initialActiveItem: p,
+        onPageChange: g,
         dataAttributes: h,
         "aria-label": l,
-        "aria-labelledby": u
-    }, A);
-}, He = /*#__PURE__*/ o.createContext(void 0), _o = ()=>o.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 } = ce(), l = o.useContext(Ce), u = o.useRef(null), [{ scrollLeft: A, scrollRight: d }, _] = o.useState({
+        "aria-labelledby": n
+    }, P);
+}, Ye = /*#__PURE__*/ o.createContext(void 0), Go = ()=>o.useContext(Ye), Fo = (param)=>{
+    let { items: e, withBullets: t, withControls: r = !0, autoplay: s, initialPageIndex: f = 0, onPageChange: i, dataAttributes: p, inverseBullets: g = !0 } = param;
+    const { platformOverrides: h } = ce(), l = o.useContext(Ce), n = o.useRef(null), [{ scrollLeft: P, scrollRight: d }, w] = o.useState({
         scrollLeft: 0,
         scrollRight: 1
-    }), G = d !== 0, ie = A !== 0, N = o.useCallback(()=>{
-        const n = u.current;
-        n && n.scrollBy({
-            left: -n.clientWidth,
+    }), G = d !== 0, ie = P !== 0, B = o.useCallback(()=>{
+        const a = n.current;
+        a && a.scrollBy({
+            left: -a.clientWidth,
             behavior: "smooth"
         });
-    }, []), B = o.useCallback(()=>{
-        const n = u.current;
-        n && n.scrollBy({
-            left: n.clientWidth,
+    }, []), W = o.useCallback(()=>{
+        const a = n.current;
+        a && a.scrollBy({
+            left: a.clientWidth,
             behavior: "smooth"
         });
-    }, []), W = o.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"
+    }, []), V = o.useCallback(function(a) {
+        let C = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
+        const E = n.current;
+        E && E.scrollTo({
+            left: E.clientWidth * a,
+            behavior: C ? "smooth" : "auto"
         });
     }, [
-        u
-    ]), P = u.current ? Math.floor((A + u.current.clientWidth / 2) / u.current.clientWidth) : 0;
+        n
+    ]), y = n.current ? Math.floor((P + n.current.clientWidth / 2) / n.current.clientWidth) : 0;
     o.useLayoutEffect(()=>{
-        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,
+        const a = n.current;
+        if (a) {
+            const C = ()=>{
+                const { scrollWidth: A, clientWidth: Q } = a, z = Math.round(a.scrollLeft), fe = Math.round(A - (z + Q));
+                w({
+                    scrollLeft: z,
                     scrollRight: fe
                 });
             };
-            g(), n.addEventListener("scroll", g);
-            const y = Ve(n, g);
+            C(), a.addEventListener("scroll", C);
+            const E = De(a, C);
             return ()=>{
-                n.removeEventListener("scroll", g), y();
+                a.removeEventListener("scroll", C), E();
             };
         }
     }, [
         e.length
     ]);
-    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: D } = Oe(!!s, u), b = typeof s == "object" && s.loop || !1;
+    const { isAutoplayEnabled: ue, shouldAutoplay: q, setShouldAutoPlay: O } = ze(!!s, n), b = typeof s == "object" && s.loop || !1;
     o.useEffect(()=>{
         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({
+            const a = typeof s == "boolean" ? Ke : s.time, C = setInterval(()=>{
+                var E;
+                d !== 0 ? W() : b && ((E = n.current) == null || E.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, n);
-            return ()=>clearInterval(g);
+            }, a);
+            return ()=>clearInterval(C);
         }
     }, [
         s,
-        B,
+        W,
         d,
         q,
         b
     ]), o.useEffect(()=>{
-        P === e.length - 1 && !b && D(!1);
+        y === e.length - 1 && !b && O(!1);
     }, [
-        P,
+        y,
         e.length,
-        D,
+        O,
         b
     ]);
-    const V = o.useRef(!1), J = o.useRef(0);
+    const D = o.useRef(!1), J = o.useRef(0);
     o.useEffect(()=>{
-        i && (V.current ? J.current !== P && i(P) : V.current = f === P), J.current = P;
+        i && (D.current ? J.current !== y && i(y) : D.current = f === y), J.current = y;
     }, [
-        P,
+        y,
         f,
         i
     ]), o.useEffect(()=>{
-        const n = u.current;
-        f !== void 0 && n && !V.current && n.scrollTo({
-            left: n.clientWidth * f
+        const a = n.current;
+        f !== void 0 && a && !D.current && a.scrollTo({
+            left: a.clientWidth * f
         });
     }, [
         f
     ]);
     const F = o.useMemo(()=>({
-            currentIndex: P,
+            currentIndex: y,
             numPages: e.length
         }), [
-        P,
+        y,
         e.length
     ]);
     o.useEffect(()=>{
-        l && (l.setGoPrev(N), l.setGoNext(B), l.setGoToPage(W), l.setBulletsProps(F));
+        l && (l.setGoPrev(B), l.setGoNext(W), l.setGoToPage(V), l.setBulletsProps(F));
     }, [
         l,
+        W,
         B,
-        N,
         F,
-        W
+        V
     ]);
-    const T = t && /* @__PURE__ */ a("div", {
-        className: gt,
-        children: /* @__PURE__ */ a(Le, {
-            variant: v ? "inverse" : "default",
-            children: /* @__PURE__ */ a(Fe, _object_spread({}, F))
+    const M = t && /* @__PURE__ */ c("div", {
+        className: Ct,
+        children: /* @__PURE__ */ c(Le, {
+            variant: g ? "inverse" : "default",
+            children: /* @__PURE__ */ c(Ue, _object_spread({}, F))
         })
-    }), L = !t && !s;
-    return /* @__PURE__ */ a(He.Provider, {
+    }), T = !t && !s;
+    return /* @__PURE__ */ c(Ye.Provider, {
         value: {
             withBullets: !!t
         },
-        children: /* @__PURE__ */ a(Jt, {
+        children: /* @__PURE__ */ c(Qt, {
             skipDesktop: !0,
             children: /* @__PURE__ */ H("div", _object_spread_props(_object_spread({
-                className: k(Ct, {
-                    [vt]: !!t
+                className: k(vt, {
+                    [Pt]: !!t
                 })
-            }, me(m, "SlideShow")), {
+            }, me(p, "SlideShow")), {
                 children: [
-                    e.length > 1 && (r ? /* @__PURE__ */ a(Le, {
+                    e.length > 1 && (r ? /* @__PURE__ */ c(Le, {
                         variant: "media",
                         children: /* @__PURE__ */ H(Y, {
-                            space: L ? 0 : "between",
+                            space: T ? 0 : "between",
                             alignItems: "center",
                             className: k(Re, {
-                                [Pt]: L
+                                [yt]: T
                             }),
                             children: [
-                                !!s && /* @__PURE__ */ a("div", {
-                                    className: yt,
-                                    children: /* @__PURE__ */ a($e, {
+                                !!s && /* @__PURE__ */ c("div", {
+                                    className: St,
+                                    children: /* @__PURE__ */ c(je, {
                                         isAutoplayEnabled: ue,
-                                        isAtLastPage: P === e.length - 1,
-                                        onAutoplayChanged: (n)=>{
-                                            P === e.length - 1 && n && W(0), D(n);
+                                        isAtLastPage: y === e.length - 1,
+                                        onAutoplayChanged: (a)=>{
+                                            y === e.length - 1 && a && V(0), O(a);
                                         }
                                     })
                                 }),
-                                T,
-                                /* @__PURE__ */ a(Ue, {
-                                    goNext: B,
-                                    goPrev: N,
-                                    setShouldAutoplay: D,
+                                M,
+                                /* @__PURE__ */ c($e, {
+                                    goNext: W,
+                                    goPrev: B,
+                                    setShouldAutoplay: O,
                                     prevArrowEnabled: ie,
-                                    nextArrowEnabled: G
+                                    nextArrowEnabled: G,
+                                    pagesCount: e.length,
+                                    currentPageIndex: y
                                 })
                             ]
                         })
-                    }) : t && /* @__PURE__ */ a(Y, {
+                    }) : t && /* @__PURE__ */ c(Y, {
                         space: "around",
                         className: Re,
-                        children: T
+                        children: M
                     })),
-                    /* @__PURE__ */ a("div", {
+                    /* @__PURE__ */ c("div", {
                         style: be({
-                            [Ht.mediaBorderRadius]: "0px"
+                            [Yt.mediaBorderRadius]: "0px"
                         }),
-                        children: /* @__PURE__ */ a("div", {
-                            className: St,
-                            ref: u,
-                            children: e.map((n, g)=>/* @__PURE__ */ a("div", {
-                                    className: Et,
+                        children: /* @__PURE__ */ c("div", {
+                            className: Et,
+                            ref: n,
+                            children: e.map((a, C)=>/* @__PURE__ */ c("div", {
+                                    className: At,
                                     style: {
-                                        scrollSnapStop: De(h) ? "always" : "normal"
+                                        scrollSnapStop: Oe(h) ? "always" : "normal"
                                     },
-                                    children: n
-                                }, g))
+                                    children: a
+                                }, C))
                         })
                     })
                 ]
@@ -785,4 +791,4 @@ const Oe = (e, t)=>{
         })
     });
 };
-export { Oo as Carousel, $e as CarouselAutoplayControl, Do as CarouselContextConsumer, Wo as CarouselContextProvider, Ue as CarouselPageControls, zo as CenteredCarousel, Fe as PageBullets, Go as Slideshow, Vo as useCarouselContext, _o as useSlideshowContext };
+export { zo as Carousel, je as CarouselAutoplayControl, Oo as CarouselContextConsumer, Vo as CarouselContextProvider, $e as CarouselPageControls, _o as CenteredCarousel, Ue as PageBullets, Fo as Slideshow, Do as useCarouselContext, Go as useSlideshowContext };