@telefonica/mistica 16.52.0 → 16.53.0

package/dist/card-internal.js

@@ -185,7 +185,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     let { type: e, children: o, width: a, height: r, aspectRatio: n, "aria-label": l, "aria-labelledby": u, "aria-description": h, "aria-describedby": m, dataAttributes: d, backgroundColor: b, variant: v } = param;
     const x = a && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(n), f = x ? (0, _css.applyCssVars)({
         [_cardinternalcssmistica.vars.aspectRatio]: String(x)
-    }) : {}, k = b ? "none" : void 0, c = e === "naked";
+    }) : {}, k = b ? "none" : void 0, s = e === "naked";
     return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         ref: p,
@@ -213,9 +213,9 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 height: "100%",
                 variant: v,
                 className: (0, _classnames.default)(_cardinternalcssmistica.boxed),
-                background: c ? "transparent" : b,
-                borderRadius: c ? "none" : _skincontractcssmistica.vars.borderRadii.container,
-                border: c ? "none" : k,
+                background: s ? "transparent" : b,
+                borderRadius: s ? "none" : _skincontractcssmistica.vars.borderRadii.container,
+                border: s ? "none" : k,
                 overflow: "visible",
                 children: o
             })
@@ -362,7 +362,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     if (v === "error") return {
         video: x
     };
-    const k = v === "loading", c = x ? {
+    const k = v === "loading", s = x ? {
         uncheckedProps: {
             Icon: k && !(0, _platform.isRunningAcceptanceTest)() ? Yt : qt,
             label: k ? "" : h.pauseIconButtonLabel || m(_texttokens.pauseIconButtonLabel)
@@ -377,7 +377,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     } : void 0;
     return {
         video: x,
-        videoAction: c
+        videoAction: s
     };
 }, Ut = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: a, buttonLink: r } = param;
@@ -443,7 +443,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     }, k = (()=>{
         if (h) return h;
         if (r !== void 0 || n !== void 0) {
-            const t = d === "left" || d === "right", s = {
+            const t = d === "left" || d === "right", c = {
                 fit: {
                     objectFit: "contain",
                     objectPosition: `bottom ${d}`
@@ -465,19 +465,19 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     testid: "image"
                 },
                 alt: u
-            }), t ? s[l] : {}));
+            }), t ? c[l] : {}));
         }
         return null;
     })();
     if (!k) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    const c = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
+    const s = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
         [_imagecssmistica.vars.mediaBorderRadius]: "0px"
     }));
     return d === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
                 aspectRatio: p,
-                style: c,
+                style: s,
                 children: k
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
@@ -490,7 +490,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: _object_spread_props(_object_spread({}, c), {
+                style: _object_spread_props(_object_spread({}, s), {
                     width: b,
                     flexShrink: 0,
                     flexGrow: 0,
@@ -515,7 +515,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         negative: _skincontractcssmistica.vars.colors.dividerNegative,
         media: _skincontractcssmistica.vars.colors.dividerBrand,
         alternative: _skincontractcssmistica.vars.colors.divider
-    }[a], c = e === "naked", t = d || (m && m !== a ? m === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : v === "brand" || v === "media" || v === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), s = b !== null && b !== void 0 ? b : !t;
+    }[a], s = e === "naked", t = d || (m && m !== a ? m === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : v === "brand" || v === "media" || v === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), c = b !== null && b !== void 0 ? b : !t;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: m || a,
         children: [
@@ -525,25 +525,26 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     background: t || (h ? p : void 0),
                     position: "relative",
                     backdropFilter: h ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: c ? 0 : _skincontractcssmistica.vars.borderRadii.container,
-                    borderBottomRightRadius: c ? 0 : _skincontractcssmistica.vars.borderRadii.container
+                    borderBottomLeftRadius: s ? 0 : _skincontractcssmistica.vars.borderRadii.container,
+                    borderBottomRightRadius: s ? 0 : _skincontractcssmistica.vars.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            borderTop: s ? `1px solid ${k}` : void 0,
-                            marginRight: c ? 16 : 0
+                            borderTop: c ? `1px solid ${k}` : void 0,
+                            marginRight: s ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "data-testid": "footer",
                         className: (0, _classnames.default)({
-                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !c
+                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !s,
+                            [_cardinternalcssmistica.containerPaddingBottomVariants[o]]: !s
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: c ? 0 : 16,
-                            paddingRight: c ? 16 : void 0
+                            paddingBottom: s ? 0 : void 0,
+                            paddingRight: s ? 16 : void 0
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
@@ -587,33 +588,33 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         ]
     });
 }, ii = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: a, size: r, variant: n, headline: l, title: u, titleAs: h = "h3", titleLinesMax: m, pretitle: d, pretitleAs: b, pretitleLinesMax: v, subtitle: p, subtitleLinesMax: x, description: f, descriptionLinesMax: k, withTextShadow: c } = param;
-    const { textPresets: t, colorValues: s } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), z = {
+    let { type: e, hasCustomBackground: o, headlineRef: a, size: r, variant: n, headline: l, title: u, titleAs: h = "h3", titleLinesMax: m, pretitle: d, pretitleAs: b, pretitleLinesMax: v, subtitle: p, subtitleLinesMax: x, description: f, descriptionLinesMax: k, withTextShadow: s } = param;
+    const { textPresets: t, colorValues: c } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), T = {
         hyphens: "auto"
     }, E = {
         default: {
-            pretitle: s.textPrimary,
-            title: s.textPrimary,
-            subtitle: s.textPrimary,
-            description: s.textSecondary
+            pretitle: c.textPrimary,
+            title: c.textPrimary,
+            subtitle: c.textPrimary,
+            description: c.textSecondary
         },
         brand: {
-            pretitle: s.textPrimaryBrand,
-            title: s.textPrimaryBrand,
-            subtitle: s.textPrimaryBrand,
-            description: s.textSecondaryBrand
+            pretitle: c.textPrimaryBrand,
+            title: c.textPrimaryBrand,
+            subtitle: c.textPrimaryBrand,
+            description: c.textSecondaryBrand
         },
         negative: {
-            pretitle: s.textPrimaryNegative,
-            title: s.textPrimaryNegative,
-            subtitle: s.textPrimaryNegative,
-            description: s.textSecondaryNegative
+            pretitle: c.textPrimaryNegative,
+            title: c.textPrimaryNegative,
+            subtitle: c.textPrimaryNegative,
+            description: c.textSecondaryNegative
         },
         media: {
-            pretitle: s.textPrimaryMedia,
-            title: s.textPrimaryMedia,
-            subtitle: s.textPrimaryMedia,
-            description: e === "cover" && o ? s.textPrimaryMedia : s.textSecondaryMedia
+            pretitle: c.textPrimaryMedia,
+            title: c.textPrimaryMedia,
+            subtitle: c.textPrimaryMedia,
+            description: e === "cover" && o ? c.textPrimaryMedia : c.textSecondaryMedia
         }
     }, N = {
         snap: {
@@ -706,7 +707,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 weight: "regular"
             }
         }
-    }, P = E[n] || E[M] || E.default, w = N[r] || N.default, A = c ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, oe = l && // Read order 2. Visual order 1
+    }, P = E[n] || E[M] || E.default, w = N[r] || N.default, A = s ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, oe = l && // Read order 2. Visual order 1
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 8,
@@ -718,14 +719,14 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             type: "promo",
             children: l
         }) : l
-    }), T = d && // Read order: 3 or 1. Visual order 2
+    }), z = d && // Read order: 3 or 1. Visual order 2
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 4,
             order: 2
         },
         "data-testid": "pretitle",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.pretitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, T, w.pretitle), {
             as: b || "p",
             truncate: v,
             color: P.pretitle,
@@ -739,7 +740,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             order: 3
         },
         "data-testid": "title",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.title), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, T, w.title), {
             as: h,
             truncate: m,
             color: P.title,
@@ -753,7 +754,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             order: 4
         },
         "data-testid": "subtitle",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.subtitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, T, w.subtitle), {
             as: "p",
             truncate: x,
             color: P.subtitle,
@@ -767,7 +768,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             order: 5
         },
         "data-testid": "description",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.description), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, T, w.description), {
             as: "p",
             truncate: k,
             color: P.description,
@@ -776,9 +777,9 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         }))
     }), [X, K] = u && (0, _headings.isBiggerHeading)(h, b) ? [
         _,
-        T
+        z
     ] : [
-        T,
+        z,
         _
     ];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -797,8 +798,8 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
 }, oi = [
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
-], ri = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, je = (e, o)=>e.replace(ri, (a, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Pi = /*#__PURE__*/ _react.forwardRef((_param, Ze)=>{
-    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: n, imageAlt: l = "", imageFit: u = "fill-center", videoSrc: h, videoRef: m, media: d, mediaAspectRatio: b = "auto", mediaPosition: v = "top", mediaWidth: p = 150, circledImage: x, asset: f, headline: k, title: c, titleAs: t = "h3", titleLinesMax: s, pretitle: M, pretitleAs: z, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: P, description: w, descriptionLinesMax: A, dataAttributes: oe, variant: T, width: _, height: re, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: ne, buttonSecondary: de, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, footerDivider: Ye, topActions: xe, onClose: ye, closeButtonLabel: qe, "aria-label": Se, "aria-labelledby": se, "aria-description": Be, "aria-describedby": Re, gradientOverlayColor: W, videoLoop: Je, videoAutoPlay: Qe, videoDataAttributes: Ue } = _param, V = _object_without_properties(_param, [
+], ri = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, je = (e, o)=>e.replace(ri, (a, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Pi = /*#__PURE__*/ _react.forwardRef((_param, et)=>{
+    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: n, imageAlt: l = "", imageFit: u = "fill-center", videoSrc: h, videoRef: m, media: d, mediaAspectRatio: b = "auto", mediaPosition: v = "top", mediaWidth: p = 150, circledImage: x, asset: f, headline: k, title: s, titleAs: t = "h3", titleLinesMax: c, pretitle: M, pretitleAs: T, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: P, description: w, descriptionLinesMax: A, dataAttributes: oe, variant: z, width: _, height: re, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: ne, buttonSecondary: de, buttonLink: le, showFooter: Ke, footerBackgroundColor: We, footerVariant: Ye, footerSlot: ke, footerDivider: qe, topActions: xe, onClose: ye, closeButtonLabel: Je, "aria-label": Se, "aria-labelledby": se, "aria-description": Be, "aria-describedby": Re, gradientOverlayColor: W, videoLoop: Qe, videoAutoPlay: Ue, videoDataAttributes: Ze } = _param, V = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -852,16 +853,16 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         "videoAutoPlay",
         "videoDataAttributes"
     ]);
-    const { text: He, ref: et } = (0, _hooks.useInnerText)(), { text: we, ref: tt } = (0, _hooks.useInnerText)(), B = !!(V.href || V.to || V.onPress), ce = !!(ne || de || le), { colorValues: Le } = (0, _hooks.useTheme)(), pe = e === "media" || e === "naked", it = pe && (r !== void 0 || n !== void 0), ze = pe && h !== void 0, Te = it || ze, ue = pe && !!d && !Te, R = Te || ue, H = e === "naked", S = R ? v : "top", Ce = e === "naked" && x ? 1 : b, he = e === "cover" && (r !== void 0 || n !== void 0), Y = e === "cover" && h !== void 0, De = !!a || he || Y, F = he || Y, ot = ze || Y, { video: Ie, videoAction: me } = Qt({
-        src: ot ? h : void 0,
+    const { text: He, ref: tt } = (0, _hooks.useInnerText)(), { text: we, ref: it } = (0, _hooks.useInnerText)(), B = !!(V.href || V.to || V.onPress), ce = !!(ne || de || le), { colorValues: Le } = (0, _hooks.useTheme)(), pe = e === "media" || e === "naked", ot = pe && (r !== void 0 || n !== void 0), Te = pe && h !== void 0, ze = ot || Te, ue = pe && !!d && !ze, R = ze || ue, H = e === "naked", S = R ? v : "top", Ce = e === "naked" && x ? 1 : b, he = e === "cover" && (r !== void 0 || n !== void 0), Y = e === "cover" && h !== void 0, De = !!a || he || Y, F = he || Y, rt = Te || Y, { video: Ie, videoAction: me } = Qt({
+        src: rt ? h : void 0,
         poster: r,
         ref: m,
         autoHeight: e === "cover" || S !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ce) === 0,
-        loop: Je,
-        autoPlay: Qe,
-        dataAttributes: Ue
-    }), $ = (0, _themevariantcontext.useThemeVariant)(), rt = T ? (0, _themevariantcontext.normalizeVariant)(T) : $, C = T && (0, _themevariantcontext.normalizeVariant)(T) || (e === "cover" && De ? "media" : "default"), at = C === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, D = Xe && (ce || !!ke) || ce && B, Ne = !D && ce, q = ((xe === null || xe === void 0 ? void 0 : xe.length) || 0) + (ye ? 1 : 0), Pe = me ? q + 1 : q, nt = f && !(R && S === "left"), dt = e !== "cover" && Pe > 0 && !nt && !k, j = e === "cover" || e === "data" && o === "display", O = _skincontractcssmistica.vars.borderRadii.container, lt = he || Y ? "transparent" : a || (C === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : C === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), st = Se || (se ? void 0 : (c && (0, _headings.isBiggerHeading)(t, z) ? [
-        c,
+        loop: Qe,
+        autoPlay: Ue,
+        dataAttributes: Ze
+    }), $ = (0, _themevariantcontext.useThemeVariant)(), at = z ? (0, _themevariantcontext.normalizeVariant)(z) : $, C = z && (0, _themevariantcontext.normalizeVariant)(z) || (e === "cover" && De ? "media" : "default"), nt = C === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, D = Ke && (ce || !!ke) || ce && B, Ne = !D && ce, q = ((xe === null || xe === void 0 ? void 0 : xe.length) || 0) + (ye ? 1 : 0), Pe = me ? q + 1 : q, dt = f && !(R && S === "left"), lt = e !== "cover" && Pe > 0 && !dt && !k, j = e === "cover" || e === "data" && o === "display", O = _skincontractcssmistica.vars.borderRadii.container, st = he || Y ? "transparent" : a || (C === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : C === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), ct = Se || (se ? void 0 : (s && (0, _headings.isBiggerHeading)(t, T) ? [
+        s,
         l,
         we,
         M,
@@ -871,18 +872,18 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     ] : [
         M,
         we,
-        c,
+        s,
         l,
         N,
         w,
         He
-    ]).filter(Boolean).join(" ")), ct = ()=>W === "transparent" ? [
+    ]).filter(Boolean).join(" ")), pt = ()=>W === "transparent" ? [
             "transparent",
             "transparent"
         ] : W ? [
             je(Le.cardContentOverlay, W),
             je(Le.cardFooterOverlay, W)
-        ] : oi, [pt, ut] = ct();
+        ] : oi, [ut, ht] = pt();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_t, {
         "aria-label": B ? void 0 : Se,
         "aria-labelledby": B ? void 0 : se,
@@ -891,18 +892,18 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         type: e,
         size: o,
         dataAttributes: oe,
-        ref: Ze,
+        ref: et,
         variant: C,
         width: _,
         height: re,
         aspectRatio: ae,
-        backgroundColor: lt,
+        backgroundColor: st,
         children: [
             F && /* @__PURE__ */ (0, _jsxruntime.jsx)(Xt, {
                 video: Ie,
                 src: r,
                 srcSet: n,
-                backgroundVariant: rt
+                backgroundVariant: at
             }),
             me && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -923,7 +924,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0,
-                "aria-label": B ? st : void 0,
+                "aria-label": B ? ct : void 0,
                 "aria-labelledby": B ? se : void 0,
                 "aria-description": B ? Be : void 0,
                 "aria-describedby": B ? Re : void 0,
@@ -941,7 +942,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     },
                     children: [
                         B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: at
+                            className: nt
                         }),
                         ue && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             style: _object_spread({
@@ -994,7 +995,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                         display: "flex",
                                         flexDirection: "column",
                                         height: j ? void 0 : "100%",
-                                        background: F ? pt : void 0,
+                                        background: F ? ut : void 0,
                                         // padding overrides for specific cases
                                         paddingTop: j && F ? 40 : f || H && S !== "top" ? 16 : H && !R ? 0 : void 0,
                                         paddingLeft: H && (S !== "left" || !R) ? 0 : void 0,
@@ -1012,16 +1013,16 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ii, {
                                                         type: e,
                                                         hasCustomBackground: De,
-                                                        headlineRef: tt,
+                                                        headlineRef: it,
                                                         variant: C,
                                                         size: o,
                                                         headline: k,
                                                         pretitle: M,
-                                                        pretitleAs: z,
+                                                        pretitleAs: T,
                                                         pretitleLinesMax: E,
-                                                        title: c,
+                                                        title: s,
                                                         titleAs: t,
-                                                        titleLinesMax: s,
+                                                        titleLinesMax: c,
                                                         subtitle: N,
                                                         subtitleLinesMax: P,
                                                         description: w,
@@ -1029,7 +1030,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                                         withTextShadow: F
                                                     })
                                                 }),
-                                                dt && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                lt && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                     style: {
                                                         flexShrink: 0,
                                                         flexGrow: 0,
@@ -1042,7 +1043,7 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                         }),
                                         !j && K === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
                                         X && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                            ref: et,
+                                            ref: tt,
                                             "data-testid": "slot",
                                             children: X
                                         }),
@@ -1063,9 +1064,9 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             D && /* @__PURE__ */ (0, _jsxruntime.jsx)(ti, {
                 type: e,
                 variant: C,
-                footerVariant: We,
-                footerBackgroundColor: Ke,
-                footerDivider: Ye,
+                footerVariant: Ye,
+                footerBackgroundColor: We,
+                footerDivider: qe,
                 size: o,
                 footerSlot: ke,
                 buttonPrimary: ne,
@@ -1073,11 +1074,11 @@ const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 buttonLink: le,
                 hasBackgroundImageOrVideo: F,
                 externalVariant: $,
-                overlayColor: ut
+                overlayColor: ht
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
                 onClose: ye,
-                closeButtonLabel: qe,
+                closeButtonLabel: Je,
                 actions: xe,
                 variant: F || R && S !== "left" ? "media" : C
             })

package/dist/carousel.css-mistica.js

@@ -16,40 +16,40 @@ _export(exports, {
         return u;
     },
     get VISIBLE_BULLETS () {
-        return B;
+        return g;
     },
     get bullet () {
         return o;
     },
     get bulletActive () {
-        return p;
+        return C;
     },
     get bulletActiveBrand () {
-        return C;
+        return m;
     },
     get bulletActiveNegative () {
-        return g;
+        return p;
     },
     get bulletActiveSizing () {
-        return L;
+        return h;
     },
     get bulletBrand () {
-        return y;
+        return s;
     },
     get bulletButton () {
         return c;
     },
     get bulletInactiveMediumSizing () {
-        return d;
+        return j;
     },
     get bulletInactiveSizing () {
-        return m;
+        return q;
     },
     get bulletInactiveSmallSizing () {
-        return h;
+        return B;
     },
     get bulletNegative () {
-        return s;
+        return y;
     },
     get bulletVisibility () {
         return e;
@@ -64,16 +64,16 @@ _export(exports, {
         return i;
     },
     get bulletsScrollableContainer () {
-        return S;
+        return d;
     },
     get bulletsScrollableContainerBase () {
-        return j;
+        return L;
     },
     get carousel () {
         return M;
     },
     get carouselAutoplayControlContainer () {
-        return k;
+        return T;
     },
     get carouselBullets () {
         return F;
@@ -82,22 +82,22 @@ _export(exports, {
         return l;
     },
     get carouselContainer () {
-        return P;
+        return w;
     },
     get carouselControlsContainer () {
-        return q;
+        return I;
     },
     get carouselControlsVisibility () {
-        return V;
+        return P;
     },
     get carouselControlsVisibilityDesktop () {
-        return T;
+        return A;
     },
     get carouselControlsVisibilityMobile () {
-        return z;
+        return V;
     },
     get carouselControlsVisibilityTablet () {
-        return A;
+        return z;
     },
     get carouselItem () {
         return W;
@@ -106,13 +106,13 @@ _export(exports, {
         return E;
     },
     get carouselWithScrollMobile () {
-        return U;
+        return x;
     },
     get carouselWithScrollTablet () {
-        return D;
+        return U;
     },
     get centeredCarousel () {
-        return x;
+        return D;
     },
     get noCarouselBulletsDesktop () {
         return N;
@@ -136,7 +136,7 @@ _export(exports, {
         return Q;
     },
     get slideshowContainer () {
-        return w;
+        return S;
     },
     get slideshowControlsContainer () {
         return H;
@@ -148,18 +148,18 @@ _export(exports, {
         return R;
     },
     get slideshowWithBullets () {
-        return I;
+        return k;
     },
     get vars () {
         return n;
     }
 });
 /* empty css                                     */ /* empty css                                             */ /* empty css                                    */ var u = 12, b = 14, n = {
-    itemsPerPageMobile: "var(--v16_52_1abcu71)",
-    itemsPerPageTablet: "var(--v16_52_1abcu72)",
-    itemsPerPageDesktop: "var(--v16_52_1abcu73)",
-    gap: "var(--v16_52_1abcu74)",
-    mobilePageOffset: "var(--v16_52_1abcu75)",
-    mobileBulletLeftPosition: "var(--v16_52_1abcu76)",
-    desktopBulletLeftPosition: "var(--v16_52_1abcu77)"
-}, l = "v16_52_1abcu79 v16_52_1abcu78 v16_52_1y2v1nfpm v16_52_1y2v1nfps", c = "v16_52_1abcu7b v16_52_1abcu7a v16_52_1y2v1nffl v16_52_1y2v1nfgu v16_52_1y2v1nfi3 v16_52_1y2v1nfjc v16_52_1y2v1nfpo v16_52_1y2v1nfs4 v16_52_1y2v1nffe", e = "v16_52_1abcu7c v16_52_1abcu7b v16_52_1abcu7a v16_52_1y2v1nffl v16_52_1y2v1nfgu v16_52_1y2v1nfi3 v16_52_1y2v1nfjc v16_52_1y2v1nfpo v16_52_1y2v1nfs4 v16_52_1y2v1nffe", r = "v16_52_1abcu7d v16_52_1abcu7b v16_52_1abcu7a v16_52_1y2v1nffl v16_52_1y2v1nfgu v16_52_1y2v1nfi3 v16_52_1y2v1nfjc v16_52_1y2v1nfpo v16_52_1y2v1nfs4 v16_52_1y2v1nffe", i = "v16_52_1abcu7e v16_52_1abcu7b v16_52_1abcu7a v16_52_1y2v1nffl v16_52_1y2v1nfgu v16_52_1y2v1nfi3 v16_52_1y2v1nfjc v16_52_1y2v1nfpo v16_52_1y2v1nfs4 v16_52_1y2v1nffe", t = "v16_52_1abcu7f v16_52_1abcu7b v16_52_1abcu7a v16_52_1y2v1nffl v16_52_1y2v1nfgu v16_52_1y2v1nfi3 v16_52_1y2v1nfjc v16_52_1y2v1nfpo v16_52_1y2v1nfs4 v16_52_1y2v1nffe", f = "v16_52_1abcu7h v16_52_1abcu7g v16_52_1y2v1nfph", o = "v16_52_1abcu7l v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6 v16_52_1abcu7k v16_52_1y2v1nfb3", y = "v16_52_1abcu7m v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6", s = "v16_52_1abcu7n v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6", p = "v16_52_1abcu7p v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6 v16_52_1abcu7o v16_52_1y2v1nfb4", C = "v16_52_1abcu7r v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6 v16_52_1abcu7q v16_52_1y2v1nfba", g = "v16_52_1abcu7t v16_52_1abcu7j v16_52_1abcu7i v16_52_1y2v1nfs6 v16_52_1abcu7s v16_52_1y2v1nfb9", m = "v16_52_1abcu7u", B = 5, L = "v16_52_1abcu7v v16_52_1abcu7u", d = "v16_52_1abcu7w v16_52_1abcu7u", h = "v16_52_1abcu7x v16_52_1abcu7u", j = "v16_52_1abcu7z v16_52_1abcu7y v16_52_1y2v1nfpm v16_52_1y2v1nfq1 v16_52_1y2v1nfpg v16_52_1y2v1nfqz", S = "v16_52_1abcu710", w = "v16_52_1abcu712 v16_52_1abcu711 v16_52_1y2v1nfpg", I = "v16_52_1abcu713", P = "v16_52_1abcu715 v16_52_1y2v1nfpf v16_52_1y2v1nfrj v16_52_1y2v1nfpg", q = "v16_52_1abcu717 v16_52_1abcu716 v16_52_1y2v1nffo", V = "v16_52_1abcu718", z = "v16_52_1abcu719", A = "v16_52_1abcu71a", T = "v16_52_1abcu71b", k = "v16_52_1abcu71d v16_52_1abcu71c v16_52_1y2v1nfrj", E = "v16_52_1abcu71e", M = "v16_52_1abcu71g v16_52_1abcu714 v16_52_1abcu71f v16_52_1y2v1nfpm v16_52_1y2v1nfr6", U = "v16_52_1abcu71h", D = "v16_52_1abcu71i", x = "v16_52_1abcu71j", W = "v16_52_1abcu71k", F = "v16_52_1abcu71m v16_52_1abcu71l v16_52_1y2v1nfpm v16_52_1y2v1nfpv", N = "v16_52_1abcu71n", Z = "v16_52_1abcu71o", G = "v16_52_1abcu71p", O = "v16_52_1abcu71r v16_52_1abcu714 v16_52_1abcu71q v16_52_1y2v1nfpm v16_52_1y2v1nfr6", R = "v16_52_1abcu71t v16_52_1abcu71s v16_52_1y2v1nfq9 v16_52_1y2v1nfq4", H = "v16_52_1abcu71v v16_52_1abcu71u v16_52_1y2v1nfph v16_52_1y2v1nfu9 v16_52_1y2v1nftb v16_52_1y2v1nftq v16_52_1y2v1nfpm v16_52_1y2v1nfq9 v16_52_1y2v1nfqz", J = "v16_52_1abcu71x v16_52_1abcu71w v16_52_1y2v1nfpw", K = "v16_52_1abcu71z v16_52_1abcu71y v16_52_1y2v1nfrl", Q = "v16_52_1abcu721 v16_52_1abcu720 v16_52_1y2v1nfpm v16_52_1y2v1nfpv v16_52_1y2v1nfff v16_52_1y2v1nfi6 v16_52_1y2v1nfjf";
+    itemsPerPageMobile: "var(--v16_53_1abcu71)",
+    itemsPerPageTablet: "var(--v16_53_1abcu72)",
+    itemsPerPageDesktop: "var(--v16_53_1abcu73)",
+    gap: "var(--v16_53_1abcu74)",
+    mobilePageOffset: "var(--v16_53_1abcu75)",
+    mobileBulletLeftPosition: "var(--v16_53_1abcu76)",
+    desktopBulletLeftPosition: "var(--v16_53_1abcu77)"
+}, l = "v16_53_1abcu79 v16_53_1abcu78 v16_53_1y2v1nfq2 v16_53_1y2v1nfq8", c = "v16_53_1abcu7b v16_53_1abcu7a v16_53_1y2v1nfg1 v16_53_1y2v1nfha v16_53_1y2v1nfij v16_53_1y2v1nfjs v16_53_1y2v1nfq4 v16_53_1y2v1nfsk v16_53_1y2v1nffu", e = "v16_53_1abcu7c v16_53_1abcu7b v16_53_1abcu7a v16_53_1y2v1nfg1 v16_53_1y2v1nfha v16_53_1y2v1nfij v16_53_1y2v1nfjs v16_53_1y2v1nfq4 v16_53_1y2v1nfsk v16_53_1y2v1nffu", r = "v16_53_1abcu7d v16_53_1abcu7b v16_53_1abcu7a v16_53_1y2v1nfg1 v16_53_1y2v1nfha v16_53_1y2v1nfij v16_53_1y2v1nfjs v16_53_1y2v1nfq4 v16_53_1y2v1nfsk v16_53_1y2v1nffu", i = "v16_53_1abcu7e v16_53_1abcu7b v16_53_1abcu7a v16_53_1y2v1nfg1 v16_53_1y2v1nfha v16_53_1y2v1nfij v16_53_1y2v1nfjs v16_53_1y2v1nfq4 v16_53_1y2v1nfsk v16_53_1y2v1nffu", t = "v16_53_1abcu7f v16_53_1abcu7b v16_53_1abcu7a v16_53_1y2v1nfg1 v16_53_1y2v1nfha v16_53_1y2v1nfij v16_53_1y2v1nfjs v16_53_1y2v1nfq4 v16_53_1y2v1nfsk v16_53_1y2v1nffu", f = "v16_53_1abcu7h v16_53_1abcu7g v16_53_1y2v1nfpx", o = "v16_53_1abcu7l v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm v16_53_1abcu7k v16_53_1y2v1nfbj", s = "v16_53_1abcu7m v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm", y = "v16_53_1abcu7n v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm", C = "v16_53_1abcu7p v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm v16_53_1abcu7o v16_53_1y2v1nfbk", m = "v16_53_1abcu7r v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm v16_53_1abcu7q v16_53_1y2v1nfbq", p = "v16_53_1abcu7t v16_53_1abcu7j v16_53_1abcu7i v16_53_1y2v1nfsm v16_53_1abcu7s v16_53_1y2v1nfbp", q = "v16_53_1abcu7u", g = 5, h = "v16_53_1abcu7v v16_53_1abcu7u", j = "v16_53_1abcu7w v16_53_1abcu7u", B = "v16_53_1abcu7x v16_53_1abcu7u", L = "v16_53_1abcu7z v16_53_1abcu7y v16_53_1y2v1nfq2 v16_53_1y2v1nfqh v16_53_1y2v1nfpw v16_53_1y2v1nfrf", d = "v16_53_1abcu710", S = "v16_53_1abcu712 v16_53_1abcu711 v16_53_1y2v1nfpw", k = "v16_53_1abcu713", w = "v16_53_1abcu715 v16_53_1y2v1nfpv v16_53_1y2v1nfrz v16_53_1y2v1nfpw", I = "v16_53_1abcu717 v16_53_1abcu716 v16_53_1y2v1nfg4", P = "v16_53_1abcu718", V = "v16_53_1abcu719", z = "v16_53_1abcu71a", A = "v16_53_1abcu71b", T = "v16_53_1abcu71d v16_53_1abcu71c v16_53_1y2v1nfrz", E = "v16_53_1abcu71e", M = "v16_53_1abcu71g v16_53_1abcu714 v16_53_1abcu71f v16_53_1y2v1nfq2 v16_53_1y2v1nfrm", x = "v16_53_1abcu71h", U = "v16_53_1abcu71i", D = "v16_53_1abcu71j", W = "v16_53_1abcu71k", F = "v16_53_1abcu71m v16_53_1abcu71l v16_53_1y2v1nfq2 v16_53_1y2v1nfqb", N = "v16_53_1abcu71n", Z = "v16_53_1abcu71o", G = "v16_53_1abcu71p", O = "v16_53_1abcu71r v16_53_1abcu714 v16_53_1abcu71q v16_53_1y2v1nfq2 v16_53_1y2v1nfrm", R = "v16_53_1abcu71t v16_53_1abcu71s v16_53_1y2v1nfqp v16_53_1y2v1nfqk", H = "v16_53_1abcu71v v16_53_1abcu71u v16_53_1y2v1nfpx v16_53_1y2v1nfup v16_53_1y2v1nftr v16_53_1y2v1nfu6 v16_53_1y2v1nfq2 v16_53_1y2v1nfqp v16_53_1y2v1nfrf", J = "v16_53_1abcu71x v16_53_1abcu71w v16_53_1y2v1nfqc", K = "v16_53_1abcu71z v16_53_1abcu71y v16_53_1y2v1nfs1", Q = "v16_53_1abcu721 v16_53_1abcu720 v16_53_1y2v1nfq2 v16_53_1y2v1nfqb v16_53_1y2v1nffv v16_53_1y2v1nfim v16_53_1y2v1nfjv";