@telefonica/mistica 12.10.0 → 12.11.0

package/dist/carousel.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return rt;
+        return nt;
     },
     CenteredCarousel: function() {
-        return ot;
+        return ct;
     },
     PageBullets: function() {
-        return de;
+        return oe;
     },
     Slideshow: function() {
-        return lt;
+        return it;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -27,19 +27,16 @@ var _iconChevronLeftRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./
 var _iconChevronRightRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-right-regular.js"));
 var _hooksJs = require("./hooks.js");
 var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
-var _jssJs = require("./jss.js");
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _touchableJs = /*#__PURE__*/ _interopRequireWildcard(require("./touchable.js"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _themeVariantContextJs = require("./theme-variant-context.js");
-var _colorJs = require("./utils/color.js");
 var _imageJs = require("./image.js");
 var _domJs = require("./utils/dom.js");
 var _platformJs = require("./utils/platform.js");
 var _documentVisibilityJs = require("./utils/document-visibility.js");
-var _containerTypeContextJs = require("./container-type-context.js");
-var _responsiveLayoutCssMisticaJs = require("./responsive-layout.css-mistica.js");
-var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _carouselCssMisticaJs = require("./carousel.css-mistica.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -195,411 +192,227 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var ae = function ae(t, e) {
-    var r = (0, _documentVisibilityJs.useDocumentVisibility)();
-    return (0, _hooksJs.useIsInViewport)(e, !1) && r && !!t;
-}, Ne = (0, _jssJs.createUseStyles)(function(t) {
-    return {
-        bullet: _defineProperty({
-            backgroundColor: function backgroundColor(param) {
-                var e = param.isInverse;
-                return e ? (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.inverse, 0.5) : _skinContractCssMisticaJs.vars.colors.control;
-            },
-            width: 8,
-            height: 8,
-            borderRadius: "50%",
-            transition: "transform 0.3s ease-in-out, background-color 0.3s ease-in-out",
-            zIndex: 2,
-            "&.active": {
-                backgroundColor: function backgroundColor(param) {
-                    var e = param.isInverse;
-                    return e ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.controlActivated;
-                },
-                transform: "scale(1.25)"
-            }
-        }, t.mq.tabletOrSmaller, {
-            width: 4,
-            height: 4,
-            "&.active": {
-                transform: "scale(1.5)"
-            }
-        })
+var re = function re(e, c) {
+    var l = (0, _documentVisibilityJs.useDocumentVisibility)();
+    return (0, _hooksJs.useIsInViewport)(c, !1) && l && !!e;
+}, oe = function oe(param) {
+    var e = param.currentIndex, c = param.numPages, l = param.onPress;
+    var r = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useScreenSize)(), h = ref.isDesktopOrBigger, g = function g(I) {
+        var n = I === e;
+        return r ? n ? _carouselCssMisticaJs.bulletActiveInverse : _carouselCssMisticaJs.bulletInverse : n ? _carouselCssMisticaJs.bulletActive : _carouselCssMisticaJs.bullet;
     };
-}), de = function de(param) {
-    var t = param.currentIndex, e = param.numPages, r = param.onPress;
-    var o = (0, _themeVariantContextJs.useIsInverseVariant)(), f = Ne({
-        isInverse: o
-    }), ref = (0, _hooksJs.useScreenSize)(), m = ref.isDesktopOrBigger;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
-        space: m ? 16 : 8,
+        space: h ? 16 : 8,
         alignItems: "center",
         children: Array.from({
-            length: e
-        }, function(p, c) {
+            length: c
+        }, function(I, n) {
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
                 maybe: !0,
-                onPress: m && r ? function() {
-                    return r(c);
+                onPress: h && l ? function() {
+                    return l(n);
                 } : void 0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: (0, _classnames.default)(f.bullet, {
-                        active: c === t
-                    })
+                    className: g(n)
                 })
-            }, c);
+            }, n);
         })
     });
-}, ue = {
-    scrollbarWidth: "none",
-    "&::-webkit-scrollbar": {
-        display: "none"
-    }
-}, k = 40, he = function he(t) {
-    return _defineProperty({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: k,
-        height: k,
-        borderRadius: "50%",
-        backgroundColor: _skinContractCssMisticaJs.vars.colors.backgroundContainer,
-        border: "1px solid ".concat(_skinContractCssMisticaJs.vars.colors.border),
-        transition: "opacity 0.2s",
-        "&[disabled]": {
-            opacity: 0
-        }
-    }, t.mq.touchableOnly, {
-        display: "none"
-    });
-}, te = function te(t, e) {
-    switch(t){
-        case "mobile-column":
-        case "tablet-column":
-            return "calc(".concat(_responsiveLayoutCssMisticaJs.vars.sideMargin, " * -1)");
-        case "desktop-wide-column":
-            return "".concat(e ? -(24 + k) : -k / 2, "px");
-        default:
-            return "".concat(-k / 2, "px");
-    }
-}, Ce = (0, _jssJs.createUseStyles)(function(t) {
-    var _obj;
-    return {
-        carouselContainer: {
-            minWidth: 64,
-            position: "relative"
-        },
-        arrowButton: _objectSpreadProps(_objectSpread({}, he(t)), {
-            position: "absolute",
-            zIndex: 2,
-            top: "calc(50% - ".concat(k / 2, "px)"),
-            "&.prev": {
-                left: function left(param) {
-                    var e = param.containerType, r = param.isLargeDesktop;
-                    return te(e, r);
-                }
-            },
-            "&.next": {
-                right: function right(param) {
-                    var e = param.containerType, r = param.isLargeDesktop;
-                    return te(e, r);
-                }
-            }
-        }),
-        hasScroll: {},
-        centered: {},
-        carousel: _objectSpreadProps(_objectSpread({
-            display: "flex",
-            overflowX: "auto",
-            minWidth: "100%",
-            scrollSnapType: function scrollSnapType(param) {
-                var e = param.free;
-                return e ? "initial" : "x mandatory";
-            }
-        }, ue), _defineProperty({}, t.mq.tabletOrSmaller, {
-            "&$hasScroll": {
-                margin: "0 calc(".concat(_responsiveLayoutCssMisticaJs.vars.sideMargin, " * -1)")
-            },
-            "&$centered::before, &$centered::after": {
-                content: '""',
-                flexShrink: 0,
-                display: "block",
-                width: "25%"
-            }
-        })),
-        item: (_obj = {
-            scrollSnapStop: (0, _platformJs.isAndroid)(t.platformOverrides) ? "always" : "normal",
-            scrollSnapAlign: "start",
-            flexShrink: 0,
-            width: function width(param) {
-                var e = param.itemsPerPageConfig, r = param.gap;
-                return "calc(".concat(100 / e.desktop, "% + ").concat(r / e.desktop, "px)");
-            },
-            scrollMargin: function scrollMargin(param) {
-                var e = param.gap;
-                return "-".concat(e, "px");
-            },
-            "&:first-child": {
-                width: function width(param) {
-                    var e = param.itemsPerPageConfig, r = param.gap;
-                    return "calc(".concat(100 / e.desktop, "% - ").concat(r * (e.desktop - 1) / e.desktop, "px)");
-                },
-                scrollMargin: 0
-            }
-        }, _defineProperty(_obj, t.mq.tabletOrSmaller, {
-            width: function width(param) {
-                var e = param.itemsPerPageConfig, r = param.gap;
-                return "calc(".concat(100 / e.mobile, "% + ").concat(r / e.mobile, "px)");
-            },
-            "&:first-child": {
-                width: function width(param) {
-                    var e = param.itemsPerPageConfig, r = param.gap;
-                    return "calc(".concat(100 / e.mobile, "% - ").concat(r * (e.mobile - 1) / e.mobile, "px)");
-                }
-            },
-            scrollSnapAlign: "start",
-            scrollMargin: function scrollMargin(param) {
-                var e = param.mobilePageOffsetConfig;
-                return "".concat(e.prev, "px");
-            },
-            "$hasScroll:not($centered) &": {
-                width: function width(param) {
-                    var e = param.itemsPerPageConfig, r = param.mobilePageOffsetConfig, o = param.gap;
-                    return "calc(".concat(100 / e.mobile, "% - ").concat((r.next + r.prev + o) / e.mobile, "px)");
-                },
-                "&:first-child": {
-                    paddingLeft: _responsiveLayoutCssMisticaJs.vars.sideMargin,
-                    width: function width(param) {
-                        var e = param.itemsPerPageConfig, r = param.mobilePageOffsetConfig, o = param.gap;
-                        return "calc(".concat(100 / e.mobile, "% - ").concat((r.next + r.prev + o) / e.mobile + o, "px + ").concat(_responsiveLayoutCssMisticaJs.vars.sideMargin, ")");
-                    }
-                },
-                "&:last-child": {
-                    paddingRight: _responsiveLayoutCssMisticaJs.vars.sideMargin,
-                    width: function width(param) {
-                        var e = param.itemsPerPageConfig, r = param.mobilePageOffsetConfig, o = param.gap;
-                        return "calc(".concat(100 / e.mobile, "% - ").concat((r.next + r.prev + o) / e.mobile, "px + ").concat(_responsiveLayoutCssMisticaJs.vars.sideMargin, ")");
-                    }
-                }
-            },
-            "$centered &": {
-                width: function width() {
-                    return "50%";
-                },
-                scrollSnapAlign: "center",
-                scrollMargin: function scrollMargin() {
-                    return 0;
-                }
-            }
-        }), _defineProperty(_obj, "&:not(:empty) ~ &:not(:empty)", {
-            paddingLeft: function paddingLeft(param) {
-                var e = param.gap;
-                return e;
-            }
-        }), _defineProperty(_obj, "&:empty", {
-            display: "none"
-        }), _obj),
-        bullets: {
-            display: "flex",
-            justifyContent: "center"
-        }
-    };
-}), Te = function Te(t) {
-    var e = {
+}, Fe = function Fe(e) {
+    var c = {
         mobile: 1,
         desktop: 3
     };
-    return t ? typeof t == "number" ? {
-        mobile: t,
-        desktop: t
-    } : _objectSpread({}, e, t) : e;
-}, We = function We(t) {
-    return typeof t == "number" ? {
-        next: t,
-        prev: t
-    } : t;
-}, re = function re(t, e) {
-    if (t.length === 0) return [];
-    var r = Math.ceil(t.length / e), o = [];
-    for(var f = 0; f < t.length; f += r)o.push(t[f]);
-    return o[o.length - 1] = t[t.length - r], o;
-}, ze = function ze(t, e) {
-    var r = [];
-    for(var o = 0; o < e.length; o++)o === 0 ? r.push(e[0]) : r.push((e[o] + e[o - 1]) / 2);
-    for(var o1 = r.length - 1; o1 >= 0; o1--)if (t - r[o1] >= -1) return o1;
+    return e ? typeof e == "number" ? {
+        mobile: e,
+        desktop: e
+    } : _objectSpread({}, c, e) : c;
+}, Ue = function Ue(e) {
+    return typeof e == "number" ? {
+        next: e,
+        prev: e
+    } : e;
+}, J = function J(e, c) {
+    if (e.length === 0) return [];
+    var l = Math.ceil(e.length / c), r = [];
+    for(var h = 0; h < e.length; h += l)r.push(e[h]);
+    return r[r.length - 1] = e[e.length - l], r;
+}, qe = function qe(e, c) {
+    var l = [];
+    for(var r = 0; r < c.length; r++)r === 0 ? l.push(c[0]) : l.push((c[r] + c[r - 1]) / 2);
+    for(var r1 = l.length - 1; r1 >= 0; r1--)if (e - l[r1] >= -1) return r1;
     return 0;
-}, fe = 5e3, me = function me(param) {
-    var t = param.items, e = param.itemStyle, r = param.itemClassName, o = param.withBullets, f = param.renderBullets, m = param.initialActiveItem, p = param.itemsPerPage, c = param.itemsToScroll, tmp = param.mobilePageOffset, z = tmp === void 0 ? 16 : tmp, w = param.gap, _ = param.free, L = param.centered, b = param.autoplay, E = param.onPageChange, F = param.dataAttributes;
-    var ref = (0, _hooksJs.useTheme)(), M = ref.texts, O = (0, _containerTypeContextJs.useContainerType)(), n = Te(p), u = We(z), ref1 = (0, _hooksJs.useScreenSize)(), x = ref1.isDesktopOrBigger, R = ref1.isLargeDesktop, N = w != null ? w : x ? 16 : 8, v = Ce({
-        itemsPerPageConfig: n,
-        mobilePageOffsetConfig: u,
-        free: _,
-        gap: N,
-        containerType: O,
-        isLargeDesktop: R
-    }), g = _react.useRef(null), B = Math.floor(x ? n.desktop : n.mobile), S = Math.ceil(t.length / B), ref2 = _slicedToArray(_react.useState({
+}, se = 5e3, le = function le(param) {
+    var e = param.items, c = param.itemStyle, l = param.itemClassName, r = param.withBullets, h = param.renderBullets, g = param.initialActiveItem, I = param.itemsPerPage, n = param.itemsToScroll, tmp = param.mobilePageOffset, C = tmp === void 0 ? 16 : tmp, p = param.gap, z = param.free, S = param.centered, v = param.autoplay, N = param.onPageChange, _ = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), w = ref.texts, M = ref.platformOverrides, o = Fe(I), f = Ue(C), ref1 = (0, _hooksJs.useScreenSize)(), P = ref1.isDesktopOrBigger, d = _react.useRef(null), x = Math.floor(P ? o.desktop : o.mobile), b = Math.ceil(e.length / x), ref2 = _slicedToArray(_react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref3 = ref2[0], Q = ref3.scrollLeft, X = ref3.scrollRight, pe = ref2[1], ref4 = _slicedToArray(_react.useState([]), 2), Y = ref4[0], be = ref4[1], q = _react.useMemo(function() {
-        return re(Y, S);
+    }), 2), ref3 = ref2[0], B = ref3.scrollLeft, j = ref3.scrollRight, ne = ref2[1], ref4 = _slicedToArray(_react.useState([]), 2), F = ref4[0], ce = ref4[1], T = _react.useMemo(function() {
+        return J(F, b);
     }, [
-        Y,
-        S
-    ]), D = c ? re(Y, Math.ceil(t.length / c)) : q, ve = X !== 0, ge = Q !== 0;
+        F,
+        b
+    ]), k = n ? J(F, Math.ceil(e.length / n)) : T, ie = j !== 0, ae = B !== 0;
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        if (g.current) {
-            var s = g.current, i = function i() {
-                var P = s.scrollWidth, H = s.clientWidth, I = Math.round(s.scrollLeft), U = Math.round(P - (I + H));
-                pe({
-                    scrollLeft: I,
-                    scrollRight: U
+        if (d.current) {
+            var s = d.current, i = function i() {
+                var D = s.scrollWidth, q = s.clientWidth, L = Math.round(s.scrollLeft), O = Math.round(D - (L + q));
+                ne({
+                    scrollLeft: L,
+                    scrollRight: O
                 });
-            }, d = function d() {
-                var P = s.scrollWidth - s.clientWidth, H = function H(I) {
-                    return L || I === 0 ? 0 : x ? -N : u.prev;
+            }, u = function u() {
+                var D = s.scrollWidth - s.clientWidth, q = function q(L) {
+                    return S || L === 0 ? 0 : P ? -(p != null ? p : _carouselCssMisticaJs.DEFAULT_DESKTOP_GAP) : f.prev;
                 };
-                be(Array.from(s.querySelectorAll("[data-item]")).map(function(I, U) {
-                    if (U === t.length - 1) return P;
-                    var ee = I.offsetLeft, we = H(U), Se = L && !x ? ee - I.clientWidth / 2 : ee;
-                    return Math.min(Se - we - s.offsetLeft, P);
+                ce(Array.from(s.querySelectorAll("[data-item]")).map(function(L, O) {
+                    if (O === e.length - 1) return D;
+                    var Y = L.offsetLeft, fe = q(O), he = S && !P ? Y - L.clientWidth / 2 : Y;
+                    return Math.min(he - fe - s.offsetLeft, D);
                 }));
             };
-            i(), d(), s.addEventListener("scroll", i);
-            var h = (0, _domJs.listenResize)(s, function() {
-                i(), d();
+            i(), u(), s.addEventListener("scroll", i);
+            var m = (0, _domJs.listenResize)(s, function() {
+                i(), u();
             });
             return function() {
-                s.removeEventListener("scroll", i), h();
+                s.removeEventListener("scroll", i), m();
             };
         }
         return function() {};
     }, [
-        n.desktop,
-        n.mobile,
-        u.next,
-        u.prev,
+        o.desktop,
+        o.mobile,
+        f.next,
+        f.prev,
+        b,
+        p,
         S,
-        N,
-        L,
-        x,
-        t.length
+        P,
+        e.length
     ]);
-    var j = _react.useCallback(function(s) {
+    var y = _react.useCallback(function(s) {
         var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        var d = g.current;
-        if (d) {
-            var h = q[s];
-            d.scrollTo({
-                left: h,
+        var u = d.current;
+        if (u) {
+            var m = T[s];
+            u.scrollTo({
+                left: m,
                 behavior: i ? "smooth" : "auto"
             });
         }
     }, [
-        q
-    ]), xe = _react.useCallback(function() {
-        var s = g.current;
+        T
+    ]), ue = _react.useCallback(function() {
+        var s = d.current;
         if (s) {
-            var i = s.scrollLeft, d = _toConsumableArray(D).reverse().find(function(h) {
-                return h - i < -1;
+            var i = s.scrollLeft, u = _toConsumableArray(k).reverse().find(function(m) {
+                return m - i < -1;
             });
             s.scrollTo({
-                left: d,
+                left: u,
                 behavior: "smooth"
             });
         }
     }, [
-        D
-    ]), G = _react.useCallback(function() {
-        var s = g.current;
+        k
+    ]), U = _react.useCallback(function() {
+        var s = d.current;
         if (s) {
-            var i = s.scrollLeft, d = D.find(function(h) {
-                return h - i > 1;
+            var i = s.scrollLeft, u = k.find(function(m) {
+                return m - i > 1;
             });
             s.scrollTo({
-                left: d,
+                left: u,
                 behavior: "smooth"
             });
         }
     }, [
-        D
-    ]), Z = ae(!!b, g);
+        k
+    ]), K = re(!!v, d);
     _react.useEffect(function() {
-        m !== void 0 && j(Math.floor(m / B), !1);
+        g !== void 0 && y(Math.floor(g / x), !1);
     }, [
-        m,
-        j,
-        B
+        g,
+        y,
+        x
     ]), _react.useEffect(function() {
-        if (Z && b) {
-            var s = typeof b == "boolean" ? fe : b.time, i = typeof b == "object" && b.loop, d = setInterval(function() {
-                var h;
-                X !== 0 ? G() : i && ((h = g.current) == null || h.scrollTo({
+        if (K && v) {
+            var s = typeof v == "boolean" ? se : v.time, i = typeof v == "object" && v.loop, u = setInterval(function() {
+                var m;
+                j !== 0 ? U() : i && ((m = d.current) == null || m.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
             }, s);
             return function() {
-                return clearInterval(d);
+                return clearInterval(u);
             };
         }
     }, [
-        b,
-        G,
-        X,
-        Z
+        v,
+        U,
+        j,
+        K
     ]);
-    var C = ze(Q, q);
+    var A = qe(B, T);
     _react.useEffect(function() {
-        if (E) {
-            var s = Math.min((C + 1) * B - 1, t.length - 1), i = [];
-            for(var d = 0; d < B; d++){
-                var h = s - d;
-                h >= 0 && i.unshift(h);
+        if (N) {
+            var s = Math.min((A + 1) * x - 1, e.length - 1), i = [];
+            for(var u = 0; u < x; u++){
+                var m = s - u;
+                m >= 0 && i.unshift(m);
             }
-            E({
-                pageIndex: C,
+            N({
+                pageIndex: A,
                 shownItemIndexes: i
             });
         }
     }, [
-        C,
-        t.length,
-        B,
-        E
+        A,
+        e.length,
+        x,
+        N
     ]);
-    var V = null;
-    var _obj;
-    return f ? V = f({
-        numPages: S,
-        currentIndex: C,
-        onPress: j
-    }) : o && (V = S > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(de, {
-        numPages: S,
-        currentIndex: C,
-        onPress: j
+    var W = null;
+    var _obj, _obj1;
+    return h ? W = h({
+        numPages: b,
+        currentIndex: A,
+        onPress: y
+    }) : r && (W = b > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(oe, {
+        numPages: b,
+        currentIndex: A,
+        onPress: y
     })), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
-        dataAttributes: F,
+        dataAttributes: _,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: v.carouselContainer,
+                className: _carouselCssMisticaJs.carouselContainer,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                            className: (0, _classnames.default)(v.arrowButton, "prev"),
-                            "aria-label": M.carouselPrevButton,
-                            onPress: xe,
-                            disabled: !ge,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                            className: _carouselCssMisticaJs.carouselPrevArrowButton,
+                            "aria-label": w.carouselPrevButton,
+                            onPress: ue,
+                            disabled: !ae,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {})
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: (0, _classnames.default)(v.carousel, (_obj = {}, _defineProperty(_obj, v.centered, L), _defineProperty(_obj, v.hasScroll, S > 1), _obj)),
-                        ref: g,
-                        children: t.map(function(s, i) {
+                        className: (0, _classnames.default)(_carouselCssMisticaJs.carousel, (_obj = {}, _defineProperty(_obj, _carouselCssMisticaJs.centeredCarousel, S), _defineProperty(_obj, _carouselCssMisticaJs.carouselWithScroll, b > 1), _obj)),
+                        style: _objectSpreadProps(_objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread((_obj1 = {}, _defineProperty(_obj1, _carouselCssMisticaJs.vars.itemsPerPageDesktop, String(o.desktop)), _defineProperty(_obj1, _carouselCssMisticaJs.vars.itemsPerPageMobile, String(o.mobile)), _defineProperty(_obj1, _carouselCssMisticaJs.vars.mobilePageOffsetNext, String(f.next)), _defineProperty(_obj1, _carouselCssMisticaJs.vars.mobilePageOffsetPrev, String(f.prev)), _obj1), p !== void 0 ? _defineProperty({}, _carouselCssMisticaJs.vars.gap, String(p)) : {}))), {
+                            scrollSnapType: z ? "initial" : "x mandatory"
+                        }),
+                        ref: d,
+                        children: e.map(function(s, i) {
                             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: (0, _classnames.default)(v.item, r),
-                                style: e,
+                                className: (0, _classnames.default)(_carouselCssMisticaJs.carouselItem, l),
+                                style: _objectSpreadProps(_objectSpread({}, c), {
+                                    scrollSnapStop: (0, _platformJs.isAndroid)(M) ? "always" : "normal"
+                                }),
                                 "data-item": !0,
                                 children: s
                             }, i);
@@ -607,30 +420,30 @@ var ae = function ae(t, e) {
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                         isInverse: !1,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                            className: (0, _classnames.default)(v.arrowButton, "next"),
-                            "aria-label": M.carouselNextButton,
-                            onPress: G,
-                            disabled: !ve,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                            className: _carouselCssMisticaJs.carouselNextArrowButton,
+                            "aria-label": w.carouselNextButton,
+                            onPress: U,
+                            disabled: !ie,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronRightRegularJs.default, {})
                         })
                     })
                 ]
             }),
-            V && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: v.bullets,
-                children: V
+            W && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _carouselCssMisticaJs.carouselBullets,
+                children: W
             })
         ]
     });
-}, rt = function rt(t) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(me, _objectSpread({}, t));
-}, ot = function ot(param) {
-    var t = param.items, e = param.itemStyle, r = param.itemClassName, o = param.withBullets, f = param.renderBullets, m = param.initialActiveItem, p = param.onPageChange, c = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(me, {
-        items: t,
-        itemStyle: e,
-        itemClassName: r,
+}, nt = function nt(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(le, _objectSpread({}, e));
+}, ct = function ct(param) {
+    var e = param.items, c = param.itemStyle, l = param.itemClassName, r = param.withBullets, h = param.renderBullets, g = param.initialActiveItem, I = param.onPageChange, n = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(le, {
+        items: e,
+        itemStyle: c,
+        itemClassName: l,
         itemsPerPage: {
             mobile: 1,
             desktop: 3
@@ -639,160 +452,119 @@ var ae = function ae(t, e) {
         itemsToScroll: 1,
         mobilePageOffset: 0,
         gap: 0,
-        withBullets: o,
-        renderBullets: f,
-        initialActiveItem: m,
-        onPageChange: p,
-        dataAttributes: c
+        withBullets: r,
+        renderBullets: h,
+        initialActiveItem: g,
+        onPageChange: I,
+        dataAttributes: n
     });
-}, Oe = (0, _jssJs.createUseStyles)(function(t) {
-    return {
-        slideshowContainer: {
-            position: "relative"
-        },
-        slideshow: _objectSpreadProps(_objectSpread({
-            display: "flex",
-            overflowX: "auto",
-            minWidth: "100%",
-            scrollSnapType: "x mandatory"
-        }, ue), _defineProperty({}, t.mq.tabletOrSmaller, {
-            margin: "0 calc(".concat(_responsiveLayoutCssMisticaJs.vars.sideMargin, " * -1)")
-        })),
-        item: {
-            width: "100%",
-            scrollSnapStop: (0, _platformJs.isAndroid)(t.platformOverrides) ? "always" : "normal",
-            scrollSnapAlign: "start",
-            flexShrink: 0
-        },
-        arrowButton: _objectSpreadProps(_objectSpread({}, he(t)), {
-            border: "none",
-            position: "absolute",
-            zIndex: 2,
-            top: "calc(50% - ".concat(k / 2, "px)"),
-            "&.prev": _defineProperty({
-                left: 24
-            }, t.mq.tabletOrSmaller, {
-                left: 0
-            }),
-            "&.next": _defineProperty({
-                right: 24
-            }, t.mq.tabletOrSmaller, {
-                right: 0
-            })
-        }),
-        bullets: {
-            position: "absolute",
-            bottom: 24,
-            display: "flex",
-            justifyContent: "center",
-            width: "100%",
-            zIndex: 2
-        }
-    };
-}), lt = function lt(param) {
-    var t = param.items, e = param.withBullets, r = param.autoplay, o = param.onPageChange, f = param.dataAttributes;
-    var ref = (0, _hooksJs.useTheme)(), m = ref.texts, p = Oe(), c = _react.useRef(null), ref1 = _slicedToArray(_react.useState({
+}, it = function it(param) {
+    var e = param.items, c = param.withBullets, l = param.autoplay, r = param.onPageChange, h = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), g = ref.texts, I = ref.platformOverrides, n = _react.useRef(null), ref1 = _slicedToArray(_react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref2 = ref1[0], z = ref2.scrollLeft, w = ref2.scrollRight, _ = ref1[1], L = _react.useCallback(function() {
-        var n = c.current;
-        n && n.scrollBy({
-            left: -n.clientWidth,
+    }), 2), ref2 = ref1[0], C = ref2.scrollLeft, p = ref2.scrollRight, z = ref1[1], S = _react.useCallback(function() {
+        var o = n.current;
+        o && o.scrollBy({
+            left: -o.clientWidth,
             behavior: "smooth"
         });
-    }, []), b = _react.useCallback(function() {
-        var n = c.current;
-        n && n.scrollBy({
-            left: n.clientWidth,
+    }, []), v = _react.useCallback(function() {
+        var o = n.current;
+        o && o.scrollBy({
+            left: o.clientWidth,
             behavior: "smooth"
         });
-    }, []), E = w !== 0, F = z !== 0, M = c.current ? Math.floor((z + c.current.clientWidth / 2) / c.current.clientWidth) : 0;
+    }, []), N = p !== 0, _ = C !== 0, w = n.current ? Math.floor((C + n.current.clientWidth / 2) / n.current.clientWidth) : 0;
     _react.useLayoutEffect(function() {
-        var n = c.current;
-        if (n) {
-            var u = function u() {
-                var R = n.scrollWidth, N = n.clientWidth, v = Math.round(n.scrollLeft), g = Math.round(R - (v + N));
-                _({
-                    scrollLeft: v,
-                    scrollRight: g
+        var o = n.current;
+        if (o) {
+            var f = function f() {
+                var d = o.scrollWidth, x = o.clientWidth, b = Math.round(o.scrollLeft), B = Math.round(d - (b + x));
+                z({
+                    scrollLeft: b,
+                    scrollRight: B
                 });
             };
-            u(), n.addEventListener("scroll", u);
-            var x = (0, _domJs.listenResize)(n, u);
+            f(), o.addEventListener("scroll", f);
+            var P = (0, _domJs.listenResize)(o, f);
             return function() {
-                n.removeEventListener("scroll", u), x();
+                o.removeEventListener("scroll", f), P();
             };
         }
     }, [
-        t.length
+        e.length
     ]);
-    var O = ae(!!r, c);
+    var M = re(!!l, n);
     return _react.useEffect(function() {
-        if (O && r) {
-            var n = typeof r == "boolean" ? fe : r.time, u = typeof r == "object" && r.loop, x = setInterval(function() {
-                var R;
-                w !== 0 ? b() : u && ((R = c.current) == null || R.scrollTo({
+        if (M && l) {
+            var o = typeof l == "boolean" ? se : l.time, f = typeof l == "object" && l.loop, P = setInterval(function() {
+                var d;
+                p !== 0 ? v() : f && ((d = n.current) == null || d.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
-            }, n);
+            }, o);
             return function() {
-                return clearInterval(x);
+                return clearInterval(P);
             };
         }
     }, [
-        r,
-        b,
-        w,
-        O
+        l,
+        v,
+        p,
+        M
     ]), _react.useEffect(function() {
-        o && o(M);
+        r && r(w);
     }, [
-        M,
-        o
+        w,
+        r
     ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: p.slideshowContainer
-    }, (0, _domJs.getPrefixedDataAttributes)(f)), {
+        className: _carouselCssMisticaJs.slideshowContainer
+    }, (0, _domJs.getPrefixedDataAttributes)(h)), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                 isInverse: !1,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                    className: (0, _classnames.default)(p.arrowButton, "prev"),
-                    "aria-label": m.carouselPrevButton,
-                    onPress: L,
-                    disabled: !F,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                    className: _carouselCssMisticaJs.slideshowPrevArrowButton,
+                    "aria-label": g.carouselPrevButton,
+                    onPress: S,
+                    disabled: !_,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {})
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.DisableBorderRadiusProvider, {
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: p.slideshow,
-                    ref: c,
-                    children: t.map(function(n, u) {
+                    className: _carouselCssMisticaJs.slideshow,
+                    ref: n,
+                    children: e.map(function(o, f) {
                         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: p.item,
-                            children: n
-                        }, u);
+                            className: _carouselCssMisticaJs.slideshowItem,
+                            style: {
+                                scrollSnapStop: (0, _platformJs.isAndroid)(I) ? "always" : "normal"
+                            },
+                            children: o
+                        }, f);
                     })
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                 isInverse: !1,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                    className: (0, _classnames.default)(p.arrowButton, "next"),
-                    "aria-label": m.carouselNextButton,
-                    onPress: b,
-                    disabled: !E,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                    className: _carouselCssMisticaJs.slideshowNextArrowButton,
+                    "aria-label": g.carouselNextButton,
+                    onPress: v,
+                    disabled: !N,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronRightRegularJs.default, {})
                 })
             }),
-            e && t.length > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+            c && e.length > 1 && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                 isInverse: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: p.bullets,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(de, {
-                        numPages: t.length,
-                        currentIndex: M
+                    className: _carouselCssMisticaJs.slideshowBullets,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(oe, {
+                        numPages: e.length,
+                        currentIndex: w
                     })
                 })
             })