@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/carousel.js

@@ -108,33 +108,34 @@ 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);
 }
-import * as i from "react";
+import * as a from "react";
 import oe from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import re from "./generated/mistica-icons/icon-chevron-right-regular.js";
-import { useScreenSize as le, useTheme as se, useIsInViewport as ye, useIsomorphicLayoutEffect as Ie } from "./hooks.js";
-import ke from "./inline.js";
-import { createUseStyles as J } from "./jss.js";
-import Le from "./stack.js";
+import le from "./generated/mistica-icons/icon-chevron-right-regular.js";
+import { useScreenSize as se, useTheme as ne, useIsInViewport as Ie, useIsomorphicLayoutEffect as ye } from "./hooks.js";
+import $e from "./inline.js";
+import { createUseStyles as K } from "./jss.js";
+import ke from "./stack.js";
 import W from "./touchable.js";
-import k from "classnames";
-import { useResonsiveLayoutMargin as ne } from "./responsive-layout.js";
-import { useIsInverseVariant as $e, ThemeVariant as C } from "./theme-variant-context.js";
+import $ from "classnames";
+import { useIsInverseVariant as Le, ThemeVariant as T } from "./theme-variant-context.js";
 import { applyAlpha as Me } from "./utils/color.js";
 import { DisableBorderRadiusProvider as Re } from "./image.js";
 import { listenResize as ce, getPrefixedDataAttributes as Be } from "./utils/dom.js";
 import { isAndroid as ie } from "./utils/platform.js";
 import { useDocumentVisibility as Ae } from "./utils/document-visibility.js";
 import { useContainerType as Ee } from "./container-type-context.js";
-import { jsx as l, jsxs as H } from "./_virtual/jsx-runtime.js";
+import { vars as y } from "./responsive-layout.css-mistica.js";
+import { vars as A } from "./skins/skin-contract.css-mistica.js";
+import { jsx as l, jsxs as J } from "./_virtual/jsx-runtime.js";
 var ae = function(t, e) {
-    var o = Ae();
-    return ye(e, !1) && o && !!t;
-}, Ne = J(function(t) {
+    var r = Ae();
+    return Ie(e, !1) && r && !!t;
+}, Ne = K(function(t) {
     return {
         bullet: _defineProperty({
             backgroundColor: function(param) {
                 var e = param.isInverse;
-                return e ? Me(t.colors.inverse, 0.5) : t.colors.control;
+                return e ? Me(A.rawColors.inverse, 0.5) : A.colors.control;
             },
             width: 8,
             height: 8,
@@ -144,7 +145,7 @@ var ae = function(t, e) {
             "&.active": {
                 backgroundColor: function(param) {
                     var e = param.isInverse;
-                    return e ? t.colors.inverse : t.colors.controlActivated;
+                    return e ? A.colors.inverse : A.colors.controlActivated;
                 },
                 transform: "scale(1.25)"
             }
@@ -157,27 +158,27 @@ var ae = function(t, e) {
         })
     };
 }), de = function(param) {
-    var t = param.currentIndex, e = param.numPages, o = param.onPress;
-    var r = $e(), a = Ne({
-        isInverse: r
-    }), ref = le(), f = ref.isDesktopOrBigger;
-    return /* @__PURE__ */ l(ke, {
-        space: f ? 16 : 8,
+    var t = param.currentIndex, e = param.numPages, r = param.onPress;
+    var o = Le(), f = Ne({
+        isInverse: o
+    }), ref = se(), m = ref.isDesktopOrBigger;
+    return /* @__PURE__ */ l($e, {
+        space: m ? 16 : 8,
         alignItems: "center",
         children: Array.from({
             length: e
-        }, function($, d) {
+        }, function(p, c) {
             return /* @__PURE__ */ l(W, {
                 maybe: !0,
-                onPress: f && o ? function() {
-                    return o(d);
+                onPress: m && r ? function() {
+                    return r(c);
                 } : void 0,
                 children: /* @__PURE__ */ l("div", {
-                    className: k(a.bullet, {
-                        active: d === t
+                    className: $(f.bullet, {
+                        active: c === t
                     })
                 })
-            }, d);
+            }, c);
         })
     });
 }, ue = {
@@ -185,16 +186,16 @@ var ae = function(t, e) {
     "&::-webkit-scrollbar": {
         display: "none"
     }
-}, L = 40, he = function(t) {
+}, k = 40, he = function(t) {
     return _defineProperty({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        width: L,
-        height: L,
+        width: k,
+        height: k,
         borderRadius: "50%",
-        backgroundColor: t.colors.backgroundContainer,
-        border: "1px solid ".concat(t.colors.border),
+        backgroundColor: A.colors.backgroundContainer,
+        border: "1px solid ".concat(A.colors.border),
         transition: "opacity 0.2s",
         "&[disabled]": {
             opacity: 0
@@ -202,17 +203,17 @@ var ae = function(t, e) {
     }, t.mq.touchableOnly, {
         display: "none"
     });
-}, ee = function(t, e, o) {
+}, te = function(t, e) {
     switch(t){
         case "mobile-column":
         case "tablet-column":
-            return -o;
+            return "calc(".concat(y.sideMargin, " * -1)");
         case "desktop-wide-column":
-            return e ? -(24 + L) : -L / 2;
+            return "".concat(e ? -(24 + k) : -k / 2, "px");
         default:
-            return -L / 2;
+            return "".concat(-k / 2, "px");
     }
-}, Te = J(function(t) {
+}, Ce = K(function(t) {
     var _obj;
     return {
         carouselContainer: {
@@ -222,17 +223,17 @@ var ae = function(t, e) {
         arrowButton: _objectSpreadProps(_objectSpread({}, he(t)), {
             position: "absolute",
             zIndex: 2,
-            top: "calc(50% - ".concat(L / 2, "px)"),
+            top: "calc(50% - ".concat(k / 2, "px)"),
             "&.prev": {
                 left: function(param) {
-                    var e = param.containerType, o = param.isLargeDesktop, r = param.sideMargin;
-                    return ee(e, o, r);
+                    var e = param.containerType, r = param.isLargeDesktop;
+                    return te(e, r);
                 }
             },
             "&.next": {
                 right: function(param) {
-                    var e = param.containerType, o = param.isLargeDesktop, r = param.sideMargin;
-                    return ee(e, o, r);
+                    var e = param.containerType, r = param.isLargeDesktop;
+                    return te(e, r);
                 }
             }
         }),
@@ -248,10 +249,7 @@ var ae = function(t, e) {
             }
         }, ue), _defineProperty({}, t.mq.tabletOrSmaller, {
             "&$hasScroll": {
-                margin: function(param) {
-                    var e = param.sideMargin;
-                    return "0 -".concat(e, "px");
-                }
+                margin: "0 calc(".concat(y.sideMargin, " * -1)")
             },
             "&$centered::before, &$centered::after": {
                 content: '""',
@@ -265,8 +263,8 @@ var ae = function(t, e) {
             scrollSnapAlign: "start",
             flexShrink: 0,
             width: function(param) {
-                var e = param.itemsPerPageConfig, o = param.gap;
-                return "calc(".concat(100 / e.desktop, "% + ").concat(o / e.desktop, "px)");
+                var e = param.itemsPerPageConfig, r = param.gap;
+                return "calc(".concat(100 / e.desktop, "% + ").concat(r / e.desktop, "px)");
             },
             scrollMargin: function(param) {
                 var e = param.gap;
@@ -274,20 +272,20 @@ var ae = function(t, e) {
             },
             "&:first-child": {
                 width: function(param) {
-                    var e = param.itemsPerPageConfig, o = param.gap;
-                    return "calc(".concat(100 / e.desktop, "% - ").concat(o * (e.desktop - 1) / e.desktop, "px)");
+                    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(param) {
-                var e = param.itemsPerPageConfig, o = param.gap;
-                return "calc(".concat(100 / e.mobile, "% + ").concat(o / e.mobile, "px)");
+                var e = param.itemsPerPageConfig, r = param.gap;
+                return "calc(".concat(100 / e.mobile, "% + ").concat(r / e.mobile, "px)");
             },
             "&:first-child": {
                 width: function(param) {
-                    var e = param.itemsPerPageConfig, o = param.gap;
-                    return "calc(".concat(100 / e.mobile, "% - ").concat(o * (e.mobile - 1) / e.mobile, "px)");
+                    var e = param.itemsPerPageConfig, r = param.gap;
+                    return "calc(".concat(100 / e.mobile, "% - ").concat(r * (e.mobile - 1) / e.mobile, "px)");
                 }
             },
             scrollSnapAlign: "start",
@@ -297,27 +295,21 @@ var ae = function(t, e) {
             },
             "$hasScroll:not($centered) &": {
                 width: function(param) {
-                    var e = param.itemsPerPageConfig, o = param.mobilePageOffsetConfig, r = param.gap;
-                    return "calc(".concat(100 / e.mobile, "% - ").concat((o.next + o.prev + r) / e.mobile, "px)");
+                    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: function(param) {
-                        var e = param.sideMargin;
-                        return e;
-                    },
+                    paddingLeft: y.sideMargin,
                     width: function(param) {
-                        var e = param.itemsPerPageConfig, o = param.mobilePageOffsetConfig, r = param.gap, a = param.sideMargin;
-                        return "calc(".concat(100 / e.mobile, "% - ").concat((o.next + o.prev + r) / e.mobile + r - a, "px)");
+                        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(y.sideMargin, ")");
                     }
                 },
                 "&:last-child": {
-                    paddingRight: function(param) {
-                        var e = param.sideMargin;
-                        return e;
-                    },
+                    paddingRight: y.sideMargin,
                     width: function(param) {
-                        var e = param.itemsPerPageConfig, o = param.mobilePageOffsetConfig, r = param.gap, a = param.sideMargin;
-                        return "calc(".concat(100 / e.mobile, "% - ").concat((o.next + o.prev + r) / e.mobile - a, "px)");
+                        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(y.sideMargin, ")");
                     }
                 }
             },
@@ -343,7 +335,7 @@ var ae = function(t, e) {
             justifyContent: "center"
         }
     };
-}), Ce = function(t) {
+}), Te = function(t) {
     var e = {
         mobile: 1,
         desktop: 3
@@ -357,221 +349,220 @@ var ae = function(t, e) {
         next: t,
         prev: t
     } : t;
-}, te = function(t, e) {
+}, re = function(t, e) {
     if (t.length === 0) return [];
-    var o = Math.ceil(t.length / e), r = [];
-    for(var a = 0; a < t.length; a += o)r.push(t[a]);
-    return r[r.length - 1] = t[t.length - o], r;
+    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(t, e) {
-    var o = [];
-    for(var r = 0; r < e.length; r++)r === 0 ? o.push(e[0]) : o.push((e[r] + e[r - 1]) / 2);
-    for(var r1 = o.length - 1; r1 >= 0; r1--)if (t - o[r1] >= -1) return r1;
+    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 0;
-}, fe = 5e3, pe = function(param) {
-    var t = param.items, e = param.itemStyle, o = param.itemClassName, r = param.withBullets, a = param.renderBullets, f = param.initialActiveItem, $ = param.itemsPerPage, d = param.itemsToScroll, tmp = param.mobilePageOffset, p = tmp === void 0 ? 16 : tmp, M = param.gap, A = param.free, R = param.centered, x = param.autoplay, S = param.onPageChange, _ = param.dataAttributes;
-    var ref = se(), z = ref.texts, E = Ee(), g = Ce($), n = We(p), ref1 = le(), u = ref1.isDesktopOrBigger, N = ref1.isLargeDesktop, w = M != null ? M : u ? 16 : 8, O = ne(), m = Te({
-        itemsPerPageConfig: g,
-        mobilePageOffsetConfig: n,
-        free: A,
-        gap: w,
-        sideMargin: O,
-        containerType: E,
-        isLargeDesktop: N
-    }), v = i.useRef(null), B = Math.floor(u ? g.desktop : g.mobile), y = Math.ceil(t.length / B), ref2 = _slicedToArray(i.useState({
+}, fe = 5e3, me = function(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 = ne(), M = ref.texts, O = Ee(), n = Te(p), u = We(z), ref1 = se(), 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 = a.useRef(null), B = Math.floor(x ? n.desktop : n.mobile), S = Math.ceil(t.length / B), ref2 = _slicedToArray(a.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref3 = ref2[0], K = ref3.scrollLeft, F = ref3.scrollRight, me = ref2[1], ref4 = _slicedToArray(i.useState([]), 2), X = ref4[0], be = ref4[1], q = i.useMemo(function() {
-        return te(X, y);
+    }), 2), ref3 = ref2[0], Q = ref3.scrollLeft, X = ref3.scrollRight, pe = ref2[1], ref4 = _slicedToArray(a.useState([]), 2), Y = ref4[0], be = ref4[1], q = a.useMemo(function() {
+        return re(Y, S);
     }, [
-        X,
-        y
-    ]), D = d ? te(X, Math.ceil(t.length / d)) : q, ve = F !== 0, xe = K !== 0;
-    Ie(function() {
-        if (v.current) {
-            var s = v.current, c = function() {
-                var P = s.scrollWidth, G = s.clientWidth, I = Math.round(s.scrollLeft), U = Math.round(P - (I + G));
-                me({
+        Y,
+        S
+    ]), D = c ? re(Y, Math.ceil(t.length / c)) : q, ve = X !== 0, ge = Q !== 0;
+    ye(function() {
+        if (g.current) {
+            var s = g.current, i = function() {
+                var P = s.scrollWidth, H = s.clientWidth, I = Math.round(s.scrollLeft), U = Math.round(P - (I + H));
+                pe({
                     scrollLeft: I,
                     scrollRight: U
                 });
-            }, h = function() {
-                var P = s.scrollWidth - s.clientWidth, G = function(I) {
-                    return R || I === 0 ? 0 : u ? -w : n.prev;
+            }, d = function() {
+                var P = s.scrollWidth - s.clientWidth, H = function(I) {
+                    return L || I === 0 ? 0 : x ? -N : u.prev;
                 };
                 be(Array.from(s.querySelectorAll("[data-item]")).map(function(I, U) {
                     if (U === t.length - 1) return P;
-                    var Z = I.offsetLeft, we = G(U), Se = R && !u ? Z - I.clientWidth / 2 : Z;
+                    var ee = I.offsetLeft, we = H(U), Se = L && !x ? ee - I.clientWidth / 2 : ee;
                     return Math.min(Se - we - s.offsetLeft, P);
                 }));
             };
-            c(), h(), s.addEventListener("scroll", c);
-            var b = ce(s, function() {
-                c(), h();
+            i(), d(), s.addEventListener("scroll", i);
+            var h = ce(s, function() {
+                i(), d();
             });
             return function() {
-                s.removeEventListener("scroll", c), b();
+                s.removeEventListener("scroll", i), h();
             };
         }
         return function() {};
     }, [
-        g.desktop,
-        g.mobile,
-        n.next,
-        n.prev,
-        y,
-        w,
-        R,
-        u,
-        O,
+        n.desktop,
+        n.mobile,
+        u.next,
+        u.prev,
+        S,
+        N,
+        L,
+        x,
         t.length
     ]);
-    var j = i.useCallback(function(s) {
-        var c = v.current;
-        if (c) {
+    var j = a.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];
-            c.scrollTo({
+            d.scrollTo({
                 left: h,
-                behavior: "smooth"
+                behavior: i ? "smooth" : "auto"
             });
         }
     }, [
         q
-    ]), ge = i.useCallback(function() {
-        var s = v.current;
+    ]), xe = a.useCallback(function() {
+        var s = g.current;
         if (s) {
-            var c = s.scrollLeft, h = _toConsumableArray(D).reverse().find(function(b) {
-                return b - c < -1;
+            var i = s.scrollLeft, d = _toConsumableArray(D).reverse().find(function(h) {
+                return h - i < -1;
             });
             s.scrollTo({
-                left: h,
+                left: d,
                 behavior: "smooth"
             });
         }
     }, [
         D
-    ]), Y = i.useCallback(function() {
-        var s = v.current;
+    ]), G = a.useCallback(function() {
+        var s = g.current;
         if (s) {
-            var c = s.scrollLeft, h = D.find(function(b) {
-                return b - c > 1;
+            var i = s.scrollLeft, d = D.find(function(h) {
+                return h - i > 1;
             });
             s.scrollTo({
-                left: h,
+                left: d,
                 behavior: "smooth"
             });
         }
     }, [
         D
-    ]), Q = ae(!!x, v);
-    i.useEffect(function() {
-        f !== void 0 && j(Math.floor(f / B));
+    ]), Z = ae(!!b, g);
+    a.useEffect(function() {
+        m !== void 0 && j(Math.floor(m / B), !1);
     }, [
-        f,
+        m,
         j,
         B
-    ]), i.useEffect(function() {
-        if (Q && x) {
-            var s = typeof x == "boolean" ? fe : x.time, c = typeof x == "object" && x.loop, h = setInterval(function() {
-                var b;
-                F !== 0 ? Y() : c && ((b = v.current) == null || b.scrollTo({
+    ]), a.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({
                     left: 0,
                     behavior: "smooth"
                 }));
             }, s);
             return function() {
-                return clearInterval(h);
+                return clearInterval(d);
             };
         }
     }, [
-        x,
-        Y,
-        F,
-        Q
+        b,
+        G,
+        X,
+        Z
     ]);
-    var T = ze(K, q);
-    i.useEffect(function() {
-        if (S) {
-            var s = Math.min((T + 1) * B - 1, t.length - 1), c = [];
-            for(var h = 0; h < B; h++){
-                var b = s - h;
-                b >= 0 && c.unshift(b);
+    var C = ze(Q, q);
+    a.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);
             }
-            S({
-                pageIndex: T,
-                shownItemIndexes: c
+            E({
+                pageIndex: C,
+                shownItemIndexes: i
             });
         }
     }, [
-        T,
+        C,
         t.length,
         B,
-        S
+        E
     ]);
     var V = null;
     var _obj;
-    return a ? V = a({
-        numPages: y,
-        currentIndex: T,
+    return f ? V = f({
+        numPages: S,
+        currentIndex: C,
         onPress: j
-    }) : r && (V = y > 1 && /* @__PURE__ */ l(de, {
-        numPages: y,
-        currentIndex: T,
+    }) : o && (V = S > 1 && /* @__PURE__ */ l(de, {
+        numPages: S,
+        currentIndex: C,
         onPress: j
-    })), /* @__PURE__ */ H(Le, {
+    })), /* @__PURE__ */ J(ke, {
         space: 24,
-        dataAttributes: _,
+        dataAttributes: F,
         children: [
-            /* @__PURE__ */ H("div", {
-                className: m.carouselContainer,
+            /* @__PURE__ */ J("div", {
+                className: v.carouselContainer,
                 children: [
-                    /* @__PURE__ */ l(C, {
+                    /* @__PURE__ */ l(T, {
                         isInverse: !1,
                         children: /* @__PURE__ */ l(W, {
-                            className: k(m.arrowButton, "prev"),
-                            "aria-label": z.carouselPrevButton,
-                            onPress: ge,
-                            disabled: !xe,
+                            className: $(v.arrowButton, "prev"),
+                            "aria-label": M.carouselPrevButton,
+                            onPress: xe,
+                            disabled: !ge,
                             children: /* @__PURE__ */ l(oe, {})
                         })
                     }),
                     /* @__PURE__ */ l("div", {
-                        className: k(m.carousel, (_obj = {}, _defineProperty(_obj, m.centered, R), _defineProperty(_obj, m.hasScroll, y > 1), _obj)),
-                        ref: v,
-                        children: t.map(function(s, c) {
+                        className: $(v.carousel, (_obj = {}, _defineProperty(_obj, v.centered, L), _defineProperty(_obj, v.hasScroll, S > 1), _obj)),
+                        ref: g,
+                        children: t.map(function(s, i) {
                             return /* @__PURE__ */ l("div", {
-                                className: k(m.item, o),
+                                className: $(v.item, r),
                                 style: e,
                                 "data-item": !0,
                                 children: s
-                            }, c);
+                            }, i);
                         })
                     }),
-                    /* @__PURE__ */ l(C, {
+                    /* @__PURE__ */ l(T, {
                         isInverse: !1,
                         children: /* @__PURE__ */ l(W, {
-                            className: k(m.arrowButton, "next"),
-                            "aria-label": z.carouselNextButton,
-                            onPress: Y,
+                            className: $(v.arrowButton, "next"),
+                            "aria-label": M.carouselNextButton,
+                            onPress: G,
                             disabled: !ve,
-                            children: /* @__PURE__ */ l(re, {})
+                            children: /* @__PURE__ */ l(le, {})
                         })
                     })
                 ]
             }),
             V && /* @__PURE__ */ l("div", {
-                className: m.bullets,
+                className: v.bullets,
                 children: V
             })
         ]
     });
-}, tt = function(t) {
-    return /* @__PURE__ */ l(pe, _objectSpread({}, t));
+}, rt = function(t) {
+    return /* @__PURE__ */ l(me, _objectSpread({}, t));
 }, ot = function(param) {
-    var t = param.items, e = param.itemStyle, o = param.itemClassName, r = param.withBullets, a = param.renderBullets, f = param.initialActiveItem, $ = param.onPageChange, d = param.dataAttributes;
-    return /* @__PURE__ */ l(pe, {
+    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__ */ l(me, {
         items: t,
         itemStyle: e,
-        itemClassName: o,
+        itemClassName: r,
         itemsPerPage: {
             mobile: 1,
             desktop: 3
@@ -580,13 +571,13 @@ var ae = function(t, e) {
         itemsToScroll: 1,
         mobilePageOffset: 0,
         gap: 0,
-        withBullets: r,
-        renderBullets: a,
-        initialActiveItem: f,
-        onPageChange: $,
-        dataAttributes: d
+        withBullets: o,
+        renderBullets: f,
+        initialActiveItem: m,
+        onPageChange: p,
+        dataAttributes: c
     });
-}, Oe = J(function(t) {
+}, Oe = K(function(t) {
     return {
         slideshowContainer: {
             position: "relative"
@@ -597,10 +588,7 @@ var ae = function(t, e) {
             minWidth: "100%",
             scrollSnapType: "x mandatory"
         }, ue), _defineProperty({}, t.mq.tabletOrSmaller, {
-            margin: function(param) {
-                var e = param.sideMargin;
-                return "0 -".concat(e, "px");
-            }
+            margin: "0 calc(".concat(y.sideMargin, " * -1)")
         })),
         item: {
             width: "100%",
@@ -612,7 +600,7 @@ var ae = function(t, e) {
             border: "none",
             position: "absolute",
             zIndex: 2,
-            top: "calc(50% - ".concat(L / 2, "px)"),
+            top: "calc(50% - ".concat(k / 2, "px)"),
             "&.prev": _defineProperty({
                 left: 24
             }, t.mq.tabletOrSmaller, {
@@ -633,116 +621,114 @@ var ae = function(t, e) {
             zIndex: 2
         }
     };
-}), rt = function(param) {
-    var t = param.items, e = param.withBullets, o = param.autoplay, r = param.onPageChange, a = param.dataAttributes;
-    var ref = se(), f = ref.texts, $ = ne(), d = Oe({
-        sideMargin: $
-    }), p = i.useRef(null), ref1 = _slicedToArray(i.useState({
+}), lt = function(param) {
+    var t = param.items, e = param.withBullets, r = param.autoplay, o = param.onPageChange, f = param.dataAttributes;
+    var ref = ne(), m = ref.texts, p = Oe(), c = a.useRef(null), ref1 = _slicedToArray(a.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref2 = ref1[0], M = ref2.scrollLeft, A = ref2.scrollRight, R = ref1[1], x = i.useCallback(function() {
-        var n = p.current;
+    }), 2), ref2 = ref1[0], z = ref2.scrollLeft, w = ref2.scrollRight, _ = ref1[1], L = a.useCallback(function() {
+        var n = c.current;
         n && n.scrollBy({
             left: -n.clientWidth,
             behavior: "smooth"
         });
-    }, []), S = i.useCallback(function() {
-        var n = p.current;
+    }, []), b = a.useCallback(function() {
+        var n = c.current;
         n && n.scrollBy({
             left: n.clientWidth,
             behavior: "smooth"
         });
-    }, []), _ = A !== 0, z = M !== 0, E = p.current ? Math.floor((M + p.current.clientWidth / 2) / p.current.clientWidth) : 0;
-    i.useLayoutEffect(function() {
-        var n = p.current;
+    }, []), E = w !== 0, F = z !== 0, M = c.current ? Math.floor((z + c.current.clientWidth / 2) / c.current.clientWidth) : 0;
+    a.useLayoutEffect(function() {
+        var n = c.current;
         if (n) {
             var u = function() {
-                var w = n.scrollWidth, O = n.clientWidth, m = Math.round(n.scrollLeft), v = Math.round(w - (m + O));
-                R({
-                    scrollLeft: m,
-                    scrollRight: v
+                var R = n.scrollWidth, N = n.clientWidth, v = Math.round(n.scrollLeft), g = Math.round(R - (v + N));
+                _({
+                    scrollLeft: v,
+                    scrollRight: g
                 });
             };
             u(), n.addEventListener("scroll", u);
-            var N = ce(n, u);
+            var x = ce(n, u);
             return function() {
-                n.removeEventListener("scroll", u), N();
+                n.removeEventListener("scroll", u), x();
             };
         }
     }, [
         t.length
     ]);
-    var g = ae(!!o, p);
-    return i.useEffect(function() {
-        if (g && o) {
-            var n = typeof o == "boolean" ? fe : o.time, u = typeof o == "object" && o.loop, N = setInterval(function() {
-                var w;
-                A !== 0 ? S() : u && ((w = p.current) == null || w.scrollTo({
+    var O = ae(!!r, c);
+    return a.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({
                     left: 0,
                     behavior: "smooth"
                 }));
             }, n);
             return function() {
-                return clearInterval(N);
+                return clearInterval(x);
             };
         }
     }, [
-        o,
-        S,
-        A,
-        g
-    ]), i.useEffect(function() {
-        r && r(E);
+        r,
+        b,
+        w,
+        O
+    ]), a.useEffect(function() {
+        o && o(M);
     }, [
-        E,
-        r
-    ]), /* @__PURE__ */ H("div", _objectSpreadProps(_objectSpread({
-        className: d.slideshowContainer
-    }, Be(a)), {
+        M,
+        o
+    ]), /* @__PURE__ */ J("div", _objectSpreadProps(_objectSpread({
+        className: p.slideshowContainer
+    }, Be(f)), {
         children: [
-            /* @__PURE__ */ l(C, {
+            /* @__PURE__ */ l(T, {
                 isInverse: !1,
                 children: /* @__PURE__ */ l(W, {
-                    className: k(d.arrowButton, "prev"),
-                    "aria-label": f.carouselPrevButton,
-                    onPress: x,
-                    disabled: !z,
+                    className: $(p.arrowButton, "prev"),
+                    "aria-label": m.carouselPrevButton,
+                    onPress: L,
+                    disabled: !F,
                     children: /* @__PURE__ */ l(oe, {})
                 })
             }),
             /* @__PURE__ */ l(Re, {
                 children: /* @__PURE__ */ l("div", {
-                    className: d.slideshow,
-                    ref: p,
+                    className: p.slideshow,
+                    ref: c,
                     children: t.map(function(n, u) {
                         return /* @__PURE__ */ l("div", {
-                            className: d.item,
+                            className: p.item,
                             children: n
                         }, u);
                     })
                 })
             }),
-            /* @__PURE__ */ l(C, {
+            /* @__PURE__ */ l(T, {
                 isInverse: !1,
                 children: /* @__PURE__ */ l(W, {
-                    className: k(d.arrowButton, "next"),
-                    "aria-label": f.carouselNextButton,
-                    onPress: S,
-                    disabled: !_,
-                    children: /* @__PURE__ */ l(re, {})
+                    className: $(p.arrowButton, "next"),
+                    "aria-label": m.carouselNextButton,
+                    onPress: b,
+                    disabled: !E,
+                    children: /* @__PURE__ */ l(le, {})
                 })
             }),
-            e && t.length > 1 && /* @__PURE__ */ l(C, {
+            e && t.length > 1 && /* @__PURE__ */ l(T, {
                 isInverse: !0,
                 children: /* @__PURE__ */ l("div", {
-                    className: d.bullets,
+                    className: p.bullets,
                     children: /* @__PURE__ */ l(de, {
                         numPages: t.length,
-                        currentIndex: E
+                        currentIndex: M
                     })
                 })
             })
         ]
     }));
 };
-export { tt as Carousel, ot as CenteredCarousel, de as PageBullets, rt as Slideshow };
+export { rt as Carousel, ot as CenteredCarousel, de as PageBullets, lt as Slideshow };