@telefonica/mistica 13.2.3 → 13.4.0

package/dist/carousel.js

@@ -9,10 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    Carousel: ()=>it,
-    CenteredCarousel: ()=>at,
+    Carousel: ()=>ut,
+    CenteredCarousel: ()=>dt,
+    IsInsideSlideshowProvider: ()=>Ge,
     PageBullets: ()=>re,
-    Slideshow: ()=>ut
+    Slideshow: ()=>ht,
+    useIsInsideSlideshowContext: ()=>ft
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _iconChevronLeftRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-left-regular.js"));
@@ -133,19 +135,19 @@ const oe = (e, r)=>{
     return (0, _hooksJs.useIsInViewport)(r, !1) && t && !!e;
 }, re = (param)=>{
     let { currentIndex: e , numPages: r , onPress: t  } = param;
-    const s = (0, _themeVariantContextJs.useIsInverseVariant)(), { isDesktopOrBigger: f  } = (0, _hooksJs.useScreenSize)(), p = (v)=>{
-        const c = v === e;
-        return s ? c ? _carouselCssMisticaJs.bulletActiveInverse : _carouselCssMisticaJs.bulletInverse : c ? _carouselCssMisticaJs.bulletActive : _carouselCssMisticaJs.bullet;
+    const o = (0, _themeVariantContextJs.useIsInverseVariant)(), { isDesktopOrBigger: u  } = (0, _hooksJs.useScreenSize)(), I = (P)=>{
+        const d = P === e;
+        return o ? d ? _carouselCssMisticaJs.bulletActiveInverse : _carouselCssMisticaJs.bulletInverse : d ? _carouselCssMisticaJs.bulletActive : _carouselCssMisticaJs.bullet;
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
-        space: f ? 16 : 8,
+        space: u ? 16 : 8,
         alignItems: "center",
         dataAttributes: {
             "component-name": "PageBullets"
         },
         children: Array.from({
             length: r
-        }, (v, c)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+        }, (P, d)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
                 className: (0, _sprinklesCssMisticaJs.sprinkles)({
                     display: "block",
                     padding: 0,
@@ -153,13 +155,13 @@ const oe = (e, r)=>{
                     background: "transparent"
                 }),
                 maybe: !0,
-                onPress: f && t ? ()=>t(c) : void 0,
+                onPress: u && t ? ()=>t(d) : void 0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: p(c)
+                    className: I(d)
                 })
-            }, c))
+            }, d))
     });
-}, K = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Ue = (e, r)=>{
+}, K = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], qe = (e, r)=>{
     const t = {
         mobile: 1,
         tablet: 2,
@@ -177,157 +179,157 @@ const oe = (e, r)=>{
         tablet: r,
         desktop: r
     };
-    const s = K(e, t.desktop, r.desktop);
+    const o = K(e, t.desktop, r.desktop);
     return _objectSpreadProps(_objectSpread({}, t, r), {
-        desktop: s
+        desktop: o
     });
 }, Q = (e, r)=>{
     if (e.length === 0) return [];
-    const t = Math.ceil(e.length / r), s = [];
-    for(let f = 0; f < e.length; f += t)s.push(e[f]);
-    return s[s.length - 1] = e[e.length - t], s;
-}, qe = (e, r)=>{
+    const t = Math.ceil(e.length / r), o = [];
+    for(let u = 0; u < e.length; u += t)o.push(e[u]);
+    return o[o.length - 1] = e[e.length - t], o;
+}, Ye = (e, r)=>{
     const t = [];
-    for(let s = 0; s < r.length; s++)s === 0 ? t.push(r[0]) : t.push((r[s] + r[s - 1]) / 2);
-    for(let s1 = t.length - 1; s1 >= 0; s1--)if (e - t[s1] >= -1) return s1;
+    for(let o = 0; o < r.length; o++)o === 0 ? t.push(r[0]) : t.push((r[o] + r[o - 1]) / 2);
+    for(let o1 = t.length - 1; o1 >= 0; o1--)if (e - t[o1] >= -1) return o1;
     return 0;
 }, le = 5e3, ne = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: s , renderBullets: f , initialActiveItem: p , itemsPerPage: v , itemsToScroll: c , gap: w , free: S , centered: k , autoplay: g , onPageChange: P , dataAttributes: _  } = param;
-    const { texts: B , platformOverrides: L  } = (0, _hooksJs.useTheme)(), E = (0, _desktopContainerTypeContextJs.useDesktopContainerType)(), o = Ue(E || "large", v), { isDesktopOrBigger: h , isMobile: N  } = (0, _hooksJs.useScreenSize)(), x = N ? o.mobile : o.tablet, I = Math.max(Math.floor(h ? o.desktop : x), 1), m = _react.useRef(null), b = Math.ceil(e.length / I), [{ scrollLeft: G , scrollRight: F  }, ce] = _react.useState({
+    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: I , itemsPerPage: P , itemsToScroll: d , gap: f , free: B , centered: w , autoplay: x , onPageChange: S , dataAttributes: k  } = param;
+    const { texts: E , platformOverrides: F  } = (0, _hooksJs.useTheme)(), L = (0, _desktopContainerTypeContextJs.useDesktopContainerType)(), m = qe(L || "large", P), { isDesktopOrBigger: n , isMobile: g  } = (0, _hooksJs.useScreenSize)(), C = g ? m.mobile : m.tablet, p = Math.max(Math.floor(n ? m.desktop : C), 1), v = _react.useRef(null), b = Math.ceil(e.length / p), [{ scrollLeft: y , scrollRight: U  }, ie] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [U, ie] = _react.useState([]), y = _react.useMemo(()=>Q(U, b), [
-        U,
+    }), [q, ae] = _react.useState([]), T = _react.useMemo(()=>Q(q, b), [
+        q,
         b
-    ]), T = c ? Q(U, Math.ceil(e.length / c)) : y, ae = F !== 0, ue = G !== 0;
+    ]), W = d ? Q(q, Math.ceil(e.length / d)) : T, ue = U !== 0, de = y !== 0;
     (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
-        if (m.current) {
-            const n = m.current, i = ()=>{
-                const { scrollWidth: V , clientWidth: C  } = n, O = Math.round(n.scrollLeft), z = Math.round(V - (O + C));
-                ce({
-                    scrollLeft: O,
-                    scrollRight: z
+        if (v.current) {
+            const l = v.current, i = ()=>{
+                const { scrollWidth: O , clientWidth: A  } = l, z = Math.round(l.scrollLeft), j = Math.round(O - (z + A));
+                ie({
+                    scrollLeft: z,
+                    scrollRight: j
                 });
-            }, u = ()=>{
-                const V = n.scrollWidth - n.clientWidth;
-                ie(Array.from(n.querySelectorAll("[data-item]")).map((C, O)=>{
-                    if (O === e.length - 1) return V;
-                    const z = C.offsetLeft, de = parseInt(getComputedStyle(C).scrollMargin), he = k && !h ? z - C.clientWidth / 2 : z;
-                    return Math.min(he - de - n.offsetLeft, V);
+            }, a = ()=>{
+                const O = l.scrollWidth - l.clientWidth;
+                ae(Array.from(l.querySelectorAll("[data-item]")).map((A, z)=>{
+                    if (z === e.length - 1) return O;
+                    const j = A.offsetLeft, he = parseInt(getComputedStyle(A).scrollMargin), me = w && !n ? j - A.clientWidth / 2 : j;
+                    return Math.min(me - he - l.offsetLeft, O);
                 }));
             };
-            i(), u(), n.addEventListener("scroll", i);
-            const d = (0, _domJs.listenResize)(n, ()=>{
-                i(), u();
+            i(), a(), l.addEventListener("scroll", i);
+            const h = (0, _domJs.listenResize)(l, ()=>{
+                i(), a();
             });
             return ()=>{
-                n.removeEventListener("scroll", i), d();
+                l.removeEventListener("scroll", i), h();
             };
         }
         return ()=>{};
     }, [
-        o.desktop,
-        o.tablet,
-        o.mobile,
+        m.desktop,
+        m.tablet,
+        m.mobile,
         b,
+        f,
         w,
-        k,
-        h,
+        n,
         e.length
     ]);
-    const W = _react.useCallback(function(n) {
+    const D = _react.useCallback(function(l) {
         let i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const u = m.current;
-        if (u) {
-            const d = y[n];
-            u.scrollTo({
-                left: d,
+        const a = v.current;
+        if (a) {
+            const h = T[l];
+            a.scrollTo({
+                left: h,
                 behavior: i ? "smooth" : "auto"
             });
         }
     }, [
-        y
+        T
     ]), fe = _react.useCallback(()=>{
-        const n = m.current;
-        if (n) {
-            const { scrollLeft: i  } = n, u = [
-                ...T
-            ].reverse().find((d)=>d - i < -1);
-            n.scrollTo({
-                left: u,
+        const l = v.current;
+        if (l) {
+            const { scrollLeft: i  } = l, a = [
+                ...W
+            ].reverse().find((h)=>h - i < -1);
+            l.scrollTo({
+                left: a,
                 behavior: "smooth"
             });
         }
     }, [
-        T
-    ]), q = _react.useCallback(()=>{
-        const n = m.current;
-        if (n) {
-            const { scrollLeft: i  } = n, u = T.find((d)=>d - i > 1);
-            n.scrollTo({
-                left: u,
+        W
+    ]), Y = _react.useCallback(()=>{
+        const l = v.current;
+        if (l) {
+            const { scrollLeft: i  } = l, a = W.find((h)=>h - i > 1);
+            l.scrollTo({
+                left: a,
                 behavior: "smooth"
             });
         }
     }, [
-        T
-    ]), H = oe(!!g, m);
+        W
+    ]), H = oe(!!x, v);
     _react.useEffect(()=>{
-        p !== void 0 && W(Math.floor(p / I), !1);
+        I !== void 0 && D(Math.floor(I / p), !1);
     }, [
-        p,
-        W,
-        I
+        I,
+        D,
+        p
     ]), _react.useEffect(()=>{
-        if (H && g) {
-            const n = typeof g == "boolean" ? le : g.time, i = typeof g == "object" && g.loop, u = setInterval(()=>{
-                var d;
-                F !== 0 ? q() : i && ((d = m.current) == null || d.scrollTo({
+        if (H && x) {
+            const l = typeof x == "boolean" ? le : x.time, i = typeof x == "object" && x.loop, a = setInterval(()=>{
+                var h;
+                U !== 0 ? Y() : i && ((h = v.current) == null || h.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, n);
-            return ()=>clearInterval(u);
+            }, l);
+            return ()=>clearInterval(a);
         }
     }, [
-        g,
-        q,
-        F,
+        x,
+        Y,
+        U,
         H
     ]);
-    const A = qe(G, y);
+    const N = Ye(y, T);
     _react.useEffect(()=>{
-        if (P) {
-            const n = Math.min((A + 1) * I - 1, e.length - 1), i = [];
-            for(let u = 0; u < I; u++){
-                const d = n - u;
-                d >= 0 && i.unshift(d);
+        if (S) {
+            const l = Math.min((N + 1) * p - 1, e.length - 1), i = [];
+            for(let a = 0; a < p; a++){
+                const h = l - a;
+                h >= 0 && i.unshift(h);
             }
-            P({
-                pageIndex: A,
+            S({
+                pageIndex: N,
                 shownItemIndexes: i
             });
         }
     }, [
-        A,
+        N,
         e.length,
-        I,
-        P
+        p,
+        S
     ]);
-    let D = null;
-    return f ? D = f({
+    let V = null;
+    return u ? V = u({
         numPages: b,
-        currentIndex: A,
-        onPress: W
-    }) : s && (D = b > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, {
+        currentIndex: N,
+        onPress: D
+    }) : o && (V = b > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, {
         numPages: b,
-        currentIndex: A,
-        onPress: W
+        currentIndex: N,
+        onPress: D
     })), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         dataAttributes: _objectSpread({
             "component-name": "Carousel"
-        }, _),
+        }, k),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                 className: _carouselCssMisticaJs.carouselContainer,
@@ -336,56 +338,56 @@ const oe = (e, r)=>{
                         isInverse: !1,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
                             className: _carouselCssMisticaJs.carouselPrevArrowButton,
-                            "aria-label": B.carouselPrevButton,
+                            "aria-label": E.carouselPrevButton,
                             onPress: fe,
-                            disabled: !ue,
+                            disabled: !de,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {})
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: (0, _classnames.default)(_carouselCssMisticaJs.carousel, {
-                            [_carouselCssMisticaJs.centeredCarousel]: k,
+                            [_carouselCssMisticaJs.centeredCarousel]: w,
                             [_carouselCssMisticaJs.carouselWithScroll]: b > 1
                         }),
                         style: _objectSpreadProps(_objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread({
-                            [_carouselCssMisticaJs.vars.itemsPerPageDesktop]: String(o.desktop),
-                            [_carouselCssMisticaJs.vars.itemsPerPageTablet]: String(o.tablet),
-                            [_carouselCssMisticaJs.vars.itemsPerPageMobile]: String(o.mobile)
-                        }, w !== void 0 ? {
-                            [_carouselCssMisticaJs.vars.gap]: String(w)
+                            [_carouselCssMisticaJs.vars.itemsPerPageDesktop]: String(m.desktop),
+                            [_carouselCssMisticaJs.vars.itemsPerPageTablet]: String(m.tablet),
+                            [_carouselCssMisticaJs.vars.itemsPerPageMobile]: String(m.mobile)
+                        }, f !== void 0 ? {
+                            [_carouselCssMisticaJs.vars.gap]: String(f)
                         } : {}))), {
-                            scrollSnapType: S ? "initial" : "x mandatory"
+                            scrollSnapType: B ? "initial" : "x mandatory"
                         }),
-                        ref: m,
-                        children: e.map((n, i)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        ref: v,
+                        children: e.map((l, i)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                                 className: (0, _classnames.default)(_carouselCssMisticaJs.carouselItem, t),
                                 style: _objectSpreadProps(_objectSpread({}, r), {
-                                    scrollSnapStop: (0, _platformJs.isAndroid)(L) ? "always" : "normal"
+                                    scrollSnapStop: (0, _platformJs.isAndroid)(F) ? "always" : "normal"
                                 }),
                                 "data-item": !0,
-                                children: n
+                                children: l
                             }, i))
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                         isInverse: !1,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
                             className: _carouselCssMisticaJs.carouselNextArrowButton,
-                            "aria-label": B.carouselNextButton,
-                            onPress: q,
-                            disabled: !ae,
+                            "aria-label": E.carouselNextButton,
+                            onPress: Y,
+                            disabled: !ue,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronRightRegularJs.default, {})
                         })
                     })
                 ]
             }),
-            D && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            V && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _carouselCssMisticaJs.carouselBullets,
-                children: D
+                children: V
             })
         ]
     });
-}, it = (e)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ne, _objectSpread({}, e)), at = (param)=>/* @__PURE__ */ {
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: s , renderBullets: f , initialActiveItem: p , onPageChange: v , dataAttributes: c  } = param;
+}, ut = (e)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ne, _objectSpread({}, e)), dt = (param)=>/* @__PURE__ */ {
+    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: u , initialActiveItem: I , onPageChange: P , dataAttributes: d  } = param;
     return (0, _jsxRuntimeJs.jsx)(ne, {
         items: e,
         itemStyle: r,
@@ -398,118 +400,127 @@ const oe = (e, r)=>{
         centered: !0,
         itemsToScroll: 1,
         gap: 0,
-        withBullets: s,
-        renderBullets: f,
-        initialActiveItem: p,
-        onPageChange: v,
-        dataAttributes: c
+        withBullets: o,
+        renderBullets: u,
+        initialActiveItem: I,
+        onPageChange: P,
+        dataAttributes: d
+    });
+}, ce = /*#__PURE__*/ _react.createContext(!1), ft = ()=>_react.useContext(ce), Ge = (param)=>/* @__PURE__ */ {
+    let { children: e  } = param;
+    return (0, _jsxRuntimeJs.jsx)(ce.Provider, {
+        value: !0,
+        children: e
     });
-}, ut = (param)=>{
-    let { items: e , withBullets: r , autoplay: t , onPageChange: s , dataAttributes: f  } = param;
-    const { texts: p , platformOverrides: v  } = (0, _hooksJs.useTheme)(), c = _react.useRef(null), [{ scrollLeft: w , scrollRight: S  }, k] = _react.useState({
+}, ht = (param)=>{
+    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: u , inverseBullets: I = !0  } = param;
+    const { texts: P , platformOverrides: d  } = (0, _hooksJs.useTheme)(), f = _react.useRef(null), [{ scrollLeft: B , scrollRight: w  }, x] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), g = _react.useCallback(()=>{
-        const o = c.current;
-        o && o.scrollBy({
-            left: -o.clientWidth,
+    }), S = _react.useCallback(()=>{
+        const n = f.current;
+        n && n.scrollBy({
+            left: -n.clientWidth,
             behavior: "smooth"
         });
-    }, []), P = _react.useCallback(()=>{
-        const o = c.current;
-        o && o.scrollBy({
-            left: o.clientWidth,
+    }, []), k = _react.useCallback(()=>{
+        const n = f.current;
+        n && n.scrollBy({
+            left: n.clientWidth,
             behavior: "smooth"
         });
-    }, []), _ = S !== 0, B = w !== 0, L = c.current ? Math.floor((w + c.current.clientWidth / 2) / c.current.clientWidth) : 0;
+    }, []), E = w !== 0, F = B !== 0, L = f.current ? Math.floor((B + f.current.clientWidth / 2) / f.current.clientWidth) : 0;
     _react.useLayoutEffect(()=>{
-        const o = c.current;
-        if (o) {
-            const h = ()=>{
-                const { scrollWidth: x , clientWidth: I  } = o, m = Math.round(o.scrollLeft), b = Math.round(x - (m + I));
-                k({
-                    scrollLeft: m,
-                    scrollRight: b
+        const n = f.current;
+        if (n) {
+            const g = ()=>{
+                const { scrollWidth: p , clientWidth: v  } = n, b = Math.round(n.scrollLeft), y = Math.round(p - (b + v));
+                x({
+                    scrollLeft: b,
+                    scrollRight: y
                 });
             };
-            h(), o.addEventListener("scroll", h);
-            const N = (0, _domJs.listenResize)(o, h);
+            g(), n.addEventListener("scroll", g);
+            const C = (0, _domJs.listenResize)(n, g);
             return ()=>{
-                o.removeEventListener("scroll", h), N();
+                n.removeEventListener("scroll", g), C();
             };
         }
     }, [
         e.length
     ]);
-    const E = oe(!!t, c);
+    const m = oe(!!t, f);
     return _react.useEffect(()=>{
-        if (E && t) {
-            const o = typeof t == "boolean" ? le : t.time, h = typeof t == "object" && t.loop, N = setInterval(()=>{
-                var x;
-                S !== 0 ? P() : h && ((x = c.current) == null || x.scrollTo({
+        if (m && t) {
+            const n = typeof t == "boolean" ? le : t.time, g = typeof t == "object" && t.loop, C = setInterval(()=>{
+                var p;
+                w !== 0 ? k() : g && ((p = f.current) == null || p.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, o);
-            return ()=>clearInterval(N);
+            }, n);
+            return ()=>clearInterval(C);
         }
     }, [
         t,
-        P,
-        S,
-        E
+        k,
+        w,
+        m
     ]), _react.useEffect(()=>{
-        s && s(L);
+        o && o(L);
     }, [
         L,
-        s
-    ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: _carouselCssMisticaJs.slideshowContainer
-    }, (0, _domJs.getPrefixedDataAttributes)(f, "SlideShow")), {
-        children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-                isInverse: !1,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
-                    className: _carouselCssMisticaJs.slideshowPrevArrowButton,
-                    "aria-label": p.carouselPrevButton,
-                    onPress: g,
-                    disabled: !B,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {})
-                })
-            }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.DisableBorderRadiusProvider, {
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: _carouselCssMisticaJs.slideshow,
-                    ref: c,
-                    children: e.map((o, h)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: _carouselCssMisticaJs.slideshowItem,
-                            style: {
-                                scrollSnapStop: (0, _platformJs.isAndroid)(v) ? "always" : "normal"
-                            },
-                            children: o
-                        }, h))
-                })
-            }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-                isInverse: !1,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
-                    className: _carouselCssMisticaJs.slideshowNextArrowButton,
-                    "aria-label": p.carouselNextButton,
-                    onPress: P,
-                    disabled: !_,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronRightRegularJs.default, {})
-                })
-            }),
-            r && e.length > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-                isInverse: !0,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: _carouselCssMisticaJs.slideshowBullets,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, {
-                        numPages: e.length,
-                        currentIndex: L
+        o
+    ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ge, {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+            className: _carouselCssMisticaJs.slideshowContainer
+        }, (0, _domJs.getPrefixedDataAttributes)(u, "SlideShow")), {
+            children: [
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    isInverse: !1,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                        className: _carouselCssMisticaJs.slideshowPrevArrowButton,
+                        "aria-label": P.carouselPrevButton,
+                        onPress: S,
+                        disabled: !F,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {})
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+                    value: !1,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: _carouselCssMisticaJs.slideshow,
+                        ref: f,
+                        children: e.map((n, g)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                className: _carouselCssMisticaJs.slideshowItem,
+                                style: {
+                                    scrollSnapStop: (0, _platformJs.isAndroid)(d) ? "always" : "normal"
+                                },
+                                children: n
+                            }, g))
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    isInverse: !1,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                        className: _carouselCssMisticaJs.slideshowNextArrowButton,
+                        "aria-label": P.carouselNextButton,
+                        onPress: k,
+                        disabled: !E,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronRightRegularJs.default, {})
+                    })
+                }),
+                r && e.length > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    isInverse: I,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: _carouselCssMisticaJs.slideshowBullets,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, {
+                            numPages: e.length,
+                            currentIndex: L
+                        })
                     })
                 })
-            })
-        ]
-    }));
+            ]
+        }))
+    });
 };

package/dist/header.d.ts

@@ -51,7 +51,11 @@ export declare const MainSectionHeader: React.FC<MainSectionHeaderProps>;
 type HeaderLayoutProps = {
     isInverse?: boolean;
     breadcrumbs?: RendersNullableElement<typeof NavigationBreadcrumbs>;
-    header: React.ReactNode;
+    /**
+     * Intentionally not forced to RendersElement<typeof Header> to allow skeletons for example
+     * The header is optional in order to allow webviews to delegate the header visualization to the surrounding native app.
+     */
+    header?: React.ReactNode;
     extra?: React.ReactNode;
     sideBySideExtraOnDesktop?: boolean;
     children?: void;