@telefonica/mistica 16.57.0-beta.2 → 16.58.0-beta.1

package/dist-es/card-internal.js

@@ -78,57 +78,57 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as i, jsxs as y, Fragment as Q } from "react/jsx-runtime";
-import * as I from "react";
-import { touchableContent as mt, touchableCardOverlayInverse as gt, touchableCardOverlay as bt, contentContainer as ft, textContent as vt, slotContainerSpaceBetween as kt, containerPaddingXVariants as Z, containerPaddingBottomVariants as Ge, containerPaddingTopVariants as ge, touchable as Ve, touchableContainer as xt, topActionsContainer as yt, vars as St, boxed as Bt, container as Rt, backgroundImageOrVideoContainer as Ht, actionsContainerVariants as wt } from "./card-internal.css-mistica.js";
-import { vars as te } from "./image.css-mistica.js";
-import { closeButtonLabel as Lt, playIconButtonLabel as Ct, pauseIconButtonLabel as Tt } from "./text-tokens.js";
-import { Text as J } from "./text.js";
-import { useInnerText as Ae, useTheme as ie } from "./hooks.js";
-import { useThemeVariant as be, normalizeVariant as Fe, ThemeVariant as fe } from "./theme-variant-context.js";
-import zt from "./tag.js";
-import Oe from "./stack.js";
-import _e from "./image.js";
-import Dt from "./video.js";
-import Me from "./inline.js";
-import It from "./spinner.js";
-import Nt from "./generated/mistica-icons/icon-play-filled.js";
-import Pt from "./generated/mistica-icons/icon-pause-filled.js";
-import Vt from "./generated/mistica-icons/icon-close-regular.js";
-import { getPrefixedDataAttributes as At } from "./utils/dom.js";
-import { applyCssVars as _ } from "./utils/css.js";
-import { InternalBoxed as Ft } from "./boxed.js";
-import { BaseTouchable as Ot } from "./touchable.js";
-import { aspectRatioToNumber as ve, AspectRatioContainer as Mt } from "./utils/aspect-ratio-support.js";
-import { vars as g } from "./skins/skin-contract.css-mistica.js";
-import { IconButton as Et, ToggleIconButton as $t } from "./icon-button.js";
-import { combineRefs as jt } from "./utils/common.js";
-import { isRunningAcceptanceTest as Ee } from "./utils/platform.js";
-import w from "classnames";
-import Gt from "./button-group.js";
-import { isBiggerHeading as Xe } from "./utils/headings.js";
-import { applyAlpha as _t } from "./utils/color.js";
-const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
-    let { type: e, children: o, width: a, height: r, aspectRatio: n, "aria-label": s, "aria-labelledby": u, "aria-description": h, "aria-describedby": m, dataAttributes: d, backgroundColor: b, variant: v } = param;
-    const x = a && r ? void 0 : ve(n), f = x ? _({
-        [St.aspectRatio]: String(x)
-    }) : {}, k = b ? "none" : void 0, l = e === "naked";
+import { jsx as t, jsxs as y, Fragment as ne } from "react/jsx-runtime";
+import * as N from "react";
+import { touchableCardOverlayInverse as kt, touchableCardOverlay as yt, contentContainer as St, textContent as Bt, slotContainerSpaceBetween as Rt, containerPaddingXVariants as le, containerPaddingBottomVariants as Ze, containerPaddingTopVariants as Re, touchable as Q, topActionsContainer as Ht, vars as wt, boxed as Lt, container as zt, backgroundImageOrVideoContainer as Ct, touchableContent as It, touchableContainer as Be, stretchedTouchable as Nt, actionsContainerVariants as Dt, stretchedLink as Tt } from "./card-internal.css-mistica.js";
+import { vars as ce } from "./image.css-mistica.js";
+import { closeButtonLabel as Vt, playIconButtonLabel as At, pauseIconButtonLabel as Ot } from "./text-tokens.js";
+import { Text as ae } from "./text.js";
+import { useInnerText as Ke, useTheme as pe } from "./hooks.js";
+import { useThemeVariant as Le, normalizeVariant as We, ThemeVariant as ze } from "./theme-variant-context.js";
+import Ft from "./tag.js";
+import Ye from "./stack.js";
+import et from "./image.js";
+import Pt from "./video.js";
+import qe from "./inline.js";
+import Mt from "./spinner.js";
+import Et from "./generated/mistica-icons/icon-play-filled.js";
+import $t from "./generated/mistica-icons/icon-pause-filled.js";
+import jt from "./generated/mistica-icons/icon-close-regular.js";
+import { getPrefixedDataAttributes as Gt } from "./utils/dom.js";
+import { applyCssVars as U } from "./utils/css.js";
+import { InternalBoxed as _t } from "./boxed.js";
+import { BaseTouchable as He } from "./touchable.js";
+import { aspectRatioToNumber as Ce, AspectRatioContainer as Xt } from "./utils/aspect-ratio-support.js";
+import { vars as f } from "./skins/skin-contract.css-mistica.js";
+import { IconButton as Kt, ToggleIconButton as Wt } from "./icon-button.js";
+import { combineRefs as Yt } from "./utils/common.js";
+import { isRunningAcceptanceTest as Je } from "./utils/platform.js";
+import R from "classnames";
+import qt from "./button-group.js";
+import { isBiggerHeading as we } from "./utils/headings.js";
+import { applyAlpha as Jt } from "./utils/color.js";
+const Qt = /*#__PURE__*/ N.forwardRef((param, p)=>{
+    let { type: e, children: o, width: a, height: r, aspectRatio: d, "aria-label": u, "aria-labelledby": h, "aria-description": l, "aria-describedby": c, dataAttributes: n, backgroundColor: v, variant: m } = param;
+    const b = a && r ? void 0 : Ce(d), x = b ? U({
+        [wt.aspectRatio]: String(b)
+    }) : {}, k = v ? "none" : void 0, s = e === "naked";
     return(// aria-description should be vaild, but this eslint rule is complaining about it
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    /* @__PURE__ */ i("section", _object_spread_props(_object_spread({
+    /* @__PURE__ */ t("section", _object_spread_props(_object_spread({
         ref: p,
-        "aria-label": s,
-        "aria-labelledby": u,
-        "aria-description": h,
-        "aria-describedby": m,
-        className: w(Rt)
-    }, At(d, "InternalCard")), {
+        "aria-label": u,
+        "aria-labelledby": h,
+        "aria-description": l,
+        "aria-describedby": c,
+        className: R(zt)
+    }, Gt(n, "InternalCard")), {
         style: _object_spread({
             width: a || "100%",
             height: r || "100%",
             position: "relative"
-        }, f),
-        children: /* @__PURE__ */ i("div", {
+        }, x),
+        children: /* @__PURE__ */ t("div", {
             style: {
                 display: "flex",
                 flexDirection: "column",
@@ -136,65 +136,65 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
                 position: "relative",
                 minHeight: "100%"
             },
-            children: /* @__PURE__ */ i(Ft, {
+            children: /* @__PURE__ */ t(_t, {
                 width: "100%",
                 height: "100%",
-                variant: v,
-                className: w(Bt),
-                background: l ? "transparent" : b,
-                borderRadius: l ? "none" : g.borderRadii.container,
-                border: l ? "none" : k,
+                variant: m,
+                className: R(Lt),
+                background: s ? "transparent" : v,
+                borderRadius: s ? "none" : f.borderRadii.container,
+                border: s ? "none" : k,
                 overflow: "visible",
                 children: o
             })
         })
     })));
-}), U = (param)=>{
+}), de = (param)=>{
     let { minHeight: e } = param;
-    return /* @__PURE__ */ i("div", {
+    return /* @__PURE__ */ t("div", {
         style: {
             flexGrow: 1,
             flexShrink: 0,
             minHeight: e
         }
     });
-}, ee = (param)=>{
+}, se = (param)=>{
     let { size: e, absolute: o, asset: a, type: r } = param;
     if (!a) return null;
-    const n = /* @__PURE__ */ i("div", {
+    const d = /* @__PURE__ */ t("div", {
         "data-testid": "asset",
         "aria-hidden": !0,
-        style: _({
-            [te.mediaBorderRadius]: g.borderRadii.mediaSmall
+        style: U({
+            [ce.mediaBorderRadius]: f.borderRadii.mediaSmall
         }),
         children: a
     });
-    return o ? /* @__PURE__ */ i("div", {
+    return o ? /* @__PURE__ */ t("div", {
         style: {
             position: "absolute",
             top: 0,
             left: 0
         },
-        className: w(Z[e], ge[e]),
-        children: n
-    }) : /* @__PURE__ */ i("div", {
-        className: w({
-            [Z[e]]: r !== "naked"
+        className: R(le[e], Re[e]),
+        children: d
+    }) : /* @__PURE__ */ t("div", {
+        className: R({
+            [le[e]]: r !== "naked"
         }),
-        children: n
+        children: d
     });
-}, Kt = (param)=>{
+}, Ut = (param)=>{
     let { video: e, src: o, srcSet: a, backgroundVariant: r } = param;
-    return /* @__PURE__ */ i(fe, {
+    return /* @__PURE__ */ t(ze, {
         variant: r,
-        children: /* @__PURE__ */ i("div", {
-            className: Ht,
-            style: _({
-                [te.mediaBorderRadius]: "0px",
-                borderRadius: g.borderRadii.container,
+        children: /* @__PURE__ */ t("div", {
+            className: Ct,
+            style: U({
+                [ce.mediaBorderRadius]: "0px",
+                borderRadius: f.borderRadii.container,
                 overflow: "hidden"
             }),
-            children: e || /* @__PURE__ */ i(_e, {
+            children: e || /* @__PURE__ */ t(et, {
                 dataAttributes: {
                     testid: "image"
                 },
@@ -206,7 +206,7 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
             })
         })
     });
-}, Wt = {
+}, Zt = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -226,51 +226,51 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
     error: {
         reset: "loading"
     }
-}, Yt = (e, o)=>Wt[e][o] || e, qt = (param)=>{
+}, ei = (e, o)=>Zt[e][o] || e, ti = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ i(It, {
+    return /* @__PURE__ */ t(Mt, {
         color: e,
         size: 16,
         delay: "0"
     });
-}, Jt = (param)=>{
+}, ii = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ i(Pt, {
+    return /* @__PURE__ */ t($t, {
         color: e,
         size: 12
     });
-}, Qt = (param)=>{
+}, oi = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ i(Nt, {
+    return /* @__PURE__ */ t(Et, {
         color: e,
         size: 12
     });
-}, Ut = (param)=>{
-    let { src: e, poster: o, ref: a, autoHeight: r, loop: n, autoPlay: s, dataAttributes: u } = param;
-    const { texts: h, t: m } = ie(), d = I.useRef(null), b = I.useRef(!1), [v, p] = I.useReducer(Yt, process.env.NODE_ENV === "test" ? "playing" : "loading");
-    I.useEffect(()=>{
-        var _d_current;
-        return b.current = !1, (_d_current = d.current) === null || _d_current === void 0 ? void 0 : _d_current.load(), ()=>{
+}, ri = (param)=>{
+    let { src: e, poster: o, ref: a, autoHeight: r, loop: d, autoPlay: u, dataAttributes: h } = param;
+    const { texts: l, t: c } = pe(), n = N.useRef(null), v = N.useRef(!1), [m, p] = N.useReducer(ei, process.env.NODE_ENV === "test" ? "playing" : "loading");
+    N.useEffect(()=>{
+        var _n_current;
+        return v.current = !1, (_n_current = n.current) === null || _n_current === void 0 ? void 0 : _n_current.load(), ()=>{
             p("reset");
         };
     }, [
         e
     ]);
-    const x = I.useMemo(()=>{
+    const b = N.useMemo(()=>{
         if (e === void 0) return;
-        const t = ()=>{
-            s === !1 && !b.current && (b.current = !0, p("pause"));
+        const S = ()=>{
+            u === !1 && !v.current && (v.current = !0, p("pause"));
         };
-        return /* @__PURE__ */ i(Dt, {
-            ref: jt(d, a),
+        return /* @__PURE__ */ t(Pt, {
+            ref: Yt(n, a),
             src: e,
             poster: o,
             width: "100%",
             height: r ? void 0 : "100%",
-            loop: n,
-            autoPlay: s,
-            dataAttributes: u,
-            onLoad: t,
+            loop: d,
+            autoPlay: u,
+            dataAttributes: h,
+            onLoad: S,
             onError: ()=>p("fail"),
             onPause: ()=>p("pause"),
             onPlay: ()=>p("play")
@@ -280,58 +280,58 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
         e,
         o,
         r,
-        n,
-        s,
-        u
-    ]), f = ()=>{
-        const t = d.current;
-        t && (v === "playing" ? t.pause() : t.play().then(()=>p("play"), ()=>{}));
+        d,
+        u,
+        h
+    ]), x = ()=>{
+        const S = n.current;
+        S && (m === "playing" ? S.pause() : S.play().then(()=>p("play"), ()=>{}));
     };
-    if (v === "error") return {
-        video: x
+    if (m === "error") return {
+        video: b
     };
-    const k = v === "loading", l = x ? {
+    const k = m === "loading", s = b ? {
         uncheckedProps: {
-            Icon: k && !Ee() ? qt : Jt,
-            label: k ? "" : h.pauseIconButtonLabel || m(Tt)
+            Icon: k && !Je() ? ti : ii,
+            label: k ? "" : l.pauseIconButtonLabel || c(Ot)
         },
         checkedProps: {
-            Icon: Qt,
-            label: h.playIconButtonLabel || m(Ct)
+            Icon: oi,
+            label: l.playIconButtonLabel || c(At)
         },
-        onChange: f,
-        disabled: Ee() ? !1 : k,
-        checked: v === "paused"
+        onChange: x,
+        disabled: Je() ? !1 : k,
+        checked: m === "paused"
     } : void 0;
     return {
-        video: x,
-        videoAction: l
+        video: b,
+        videoAction: s
     };
-}, Zt = (param)=>{
+}, ai = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: a, buttonLink: r } = param;
-    return /* @__PURE__ */ i("div", {
-        className: wt[e],
-        children: /* @__PURE__ */ i(Gt, {
+    return /* @__PURE__ */ t("div", {
+        className: Dt[e],
+        children: /* @__PURE__ */ t(qt, {
             primaryButton: o,
             secondaryButton: a,
             link: r
         })
     });
-}, ei = (e)=>{
-    const o = be();
-    if (e.Icon) return /* @__PURE__ */ i(Et, _object_spread_props(_object_spread({}, e), {
+}, ni = (e)=>{
+    const o = Le();
+    if (e.Icon) return /* @__PURE__ */ t(Kt, _object_spread_props(_object_spread({}, e), {
         small: !0,
         "aria-label": e.label,
         type: "neutral",
         backgroundType: "transparent"
     }));
-    const { checkedProps: a, uncheckedProps: r } = e, n = _object_without_properties(e, [
+    const { checkedProps: a, uncheckedProps: r } = e, d = _object_without_properties(e, [
         "checkedProps",
         "uncheckedProps"
     ]);
-    return /* @__PURE__ */ i($t, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ t(Wt, _object_spread_props(_object_spread({
         small: !0
-    }, n), {
+    }, d), {
         checkedProps: _object_spread_props(_object_spread({}, a), {
             "aria-label": e.checkedProps.label,
             type: o === "media" ? "neutral" : "brand",
@@ -343,83 +343,83 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
             backgroundType: "transparent"
         })
     }));
-}, $e = (param)=>{
-    let { testid: e = "topActions", onClose: o, closeButtonLabel: a, actions: r, variant: n, containerStyles: s = {} } = param;
-    const { texts: u, t: h } = ie(), m = r ? [
+}, Qe = (param)=>{
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: a, actions: r, variant: d, containerStyles: u = {} } = param;
+    const { texts: h, t: l } = pe(), c = r ? [
         ...r
     ] : [];
-    return o && m.push({
-        label: a || u.closeButtonLabel || h(Lt),
+    return o && c.push({
+        label: a || h.closeButtonLabel || l(Vt),
         onPress: o,
-        Icon: Vt
-    }), m.length === 0 ? /* @__PURE__ */ i(Q, {}) : /* @__PURE__ */ i(fe, {
-        variant: n,
-        children: /* @__PURE__ */ i("div", {
-            className: yt,
-            style: s,
+        Icon: jt
+    }), c.length === 0 ? /* @__PURE__ */ t(ne, {}) : /* @__PURE__ */ t(ze, {
+        variant: d,
+        children: /* @__PURE__ */ t("div", {
+            className: Ht,
+            style: u,
             "data-testid": e,
-            children: m.map((d, b)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ i(ei, _object_spread({}, d), b) : d)
+            children: c.map((n, v)=>"Icon" in n || "checkedProps" in n ? /* @__PURE__ */ t(ni, _object_spread({}, n), v) : n)
         })
     });
-}, ti = (param)=>{
-    let { type: e, size: o, asset: a, imageSrc: r, imageSrcSet: n, imageFit: s, imageAlt: u = "", video: h, mediaAspectRatio: m, mediaPosition: d, mediaWidth: b, circledImage: v } = param;
-    const p = ve(m), x = e === "naked" && v ? {
+}, di = (param)=>{
+    let { type: e, size: o, asset: a, imageSrc: r, imageSrcSet: d, imageFit: u, imageAlt: h = "", video: l, mediaAspectRatio: c, mediaPosition: n, mediaWidth: v, circledImage: m } = param;
+    const p = Ce(c), b = e === "naked" && m ? {
         circular: !0
     } : {
         width: "100%",
-        height: d === "top" && p === 0 ? void 0 : "100%"
+        height: n === "top" && p === 0 ? void 0 : "100%"
     }, k = (()=>{
-        if (h) return h;
-        if (r !== void 0 || n !== void 0) {
-            const t = d === "left" || d === "right", c = {
+        if (l) return l;
+        if (r !== void 0 || d !== void 0) {
+            const S = n === "left" || n === "right", D = {
                 fit: {
                     objectFit: "contain",
-                    objectPosition: `bottom ${d}`
+                    objectPosition: `bottom ${n}`
                 },
                 fill: {
                     objectFit: "cover",
-                    objectPosition: d
+                    objectPosition: n
                 },
                 "fill-center": {
                     objectFit: "cover",
                     objectPosition: "center"
                 }
             };
-            return /* @__PURE__ */ i(_e, _object_spread(_object_spread_props(_object_spread({
+            return /* @__PURE__ */ t(et, _object_spread(_object_spread_props(_object_spread({
                 src: r || "",
-                srcSet: n
-            }, x), {
+                srcSet: d
+            }, b), {
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: u
-            }), t ? c[s] : {}));
+                alt: h
+            }), S ? D[u] : {}));
         }
         return null;
     })();
-    if (!k) return /* @__PURE__ */ i(Q, {});
-    const l = _object_spread({}, e === "naked" ? void 0 : _({
-        [te.mediaBorderRadius]: "0px"
+    if (!k) return /* @__PURE__ */ t(ne, {});
+    const s = _object_spread({}, e === "naked" ? void 0 : U({
+        [ce.mediaBorderRadius]: "0px"
     }));
-    return d === "top" ? /* @__PURE__ */ y(Q, {
+    return n === "top" ? /* @__PURE__ */ y(ne, {
         children: [
-            /* @__PURE__ */ i(Mt, {
+            /* @__PURE__ */ t(Xt, {
                 aspectRatio: p,
-                style: l,
+                style: s,
                 children: k
             }),
-            /* @__PURE__ */ i(ee, {
+            /* @__PURE__ */ t(se, {
                 absolute: !0,
                 size: o,
                 asset: a,
                 type: e
             })
         ]
-    }) : /* @__PURE__ */ y(Q, {
+    }) : /* @__PURE__ */ y(ne, {
         children: [
-            /* @__PURE__ */ i("div", {
-                style: _object_spread_props(_object_spread({}, l), {
-                    width: b,
+            /* @__PURE__ */ t("div", {
+                style: _object_spread_props(_object_spread({}, s), {
+                    width: v,
                     flexShrink: 0,
                     flexGrow: 0,
                     height: "100%",
@@ -427,7 +427,7 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
                 }),
                 children: k
             }),
-            d !== "right" && /* @__PURE__ */ i(ee, {
+            n !== "right" && /* @__PURE__ */ t(se, {
                 absolute: !0,
                 size: o,
                 asset: a,
@@ -435,77 +435,77 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
             })
         ]
     });
-}, ii = (param)=>{
-    let { type: e, size: o, variant: a, footerSlot: r, buttonPrimary: n, buttonSecondary: s, buttonLink: u, hasBackgroundImageOrVideo: h, footerVariant: m, footerBackgroundColor: d, footerDivider: b, externalVariant: v, overlayColor: p } = param;
-    const x = !!(n || s || u), f = !!(n && s && u), k = {
-        default: g.colors.divider,
-        brand: g.colors.dividerBrand,
-        negative: g.colors.dividerNegative,
-        media: g.colors.dividerBrand,
-        alternative: g.colors.divider
-    }[a], l = e === "naked", t = d || (m && m !== a ? m === "default" ? g.colors.backgroundContainer : v === "brand" || v === "media" || v === "negative" ? g.colors.backgroundContainerBrandOverBrand : g.colors.backgroundContainerBrand : void 0), c = b !== null && b !== void 0 ? b : !t;
-    return /* @__PURE__ */ y(fe, {
-        variant: m || a,
+}, li = (param)=>{
+    let { type: e, size: o, variant: a, footerSlot: r, buttonPrimary: d, buttonSecondary: u, buttonLink: h, hasBackgroundImageOrVideo: l, footerVariant: c, footerBackgroundColor: n, footerDivider: v, externalVariant: m, overlayColor: p } = param;
+    const b = !!(d || u || h), x = !!(d && u && h), k = {
+        default: f.colors.divider,
+        brand: f.colors.dividerBrand,
+        negative: f.colors.dividerNegative,
+        media: f.colors.dividerBrand,
+        alternative: f.colors.divider
+    }[a], s = e === "naked", S = n || (c && c !== a ? c === "default" ? f.colors.backgroundContainer : m === "brand" || m === "media" || m === "negative" ? f.colors.backgroundContainerBrandOverBrand : f.colors.backgroundContainerBrand : void 0), D = v !== null && v !== void 0 ? v : !S;
+    return /* @__PURE__ */ y(ze, {
+        variant: c || a,
         children: [
-            /* @__PURE__ */ i(U, {}),
+            /* @__PURE__ */ t(de, {}),
             /* @__PURE__ */ y("div", {
                 style: {
-                    background: t || (h ? p : void 0),
+                    background: S || (l ? p : void 0),
                     position: "relative",
-                    backdropFilter: h ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: l ? 0 : g.borderRadii.container,
-                    borderBottomRightRadius: l ? 0 : g.borderRadii.container
+                    backdropFilter: l ? "blur(12px)" : void 0,
+                    borderBottomLeftRadius: s ? 0 : f.borderRadii.container,
+                    borderBottomRightRadius: s ? 0 : f.borderRadii.container
                 },
                 children: [
-                    /* @__PURE__ */ i("div", {
+                    /* @__PURE__ */ t("div", {
                         style: {
-                            borderTop: c ? `1px solid ${k}` : void 0,
-                            marginRight: l ? 16 : 0
+                            borderTop: D ? `1px solid ${k}` : void 0,
+                            marginRight: s ? 16 : 0
                         }
                     }),
-                    /* @__PURE__ */ i("div", {
+                    /* @__PURE__ */ t("div", {
                         "data-testid": "footer",
-                        className: w({
-                            [Z[o]]: !l,
-                            [Ge[o]]: !l
+                        className: R({
+                            [le[o]]: !s,
+                            [Ze[o]]: !s
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: l ? 0 : void 0,
-                            paddingRight: l ? 16 : void 0
+                            paddingBottom: s ? 0 : void 0,
+                            paddingRight: s ? 16 : void 0
                         },
-                        children: /* @__PURE__ */ y(Oe, {
+                        children: /* @__PURE__ */ y(Ye, {
                             space: 16,
                             children: [
                                 r,
-                                x && // @FIXME: We should use the ButtonGroup component
+                                b && // @FIXME: We should use the ButtonGroup component
                                 // https://jira.tid.es/browse/WEB-2278
                                 // https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/%F0%9F%94%B8-Buttons-Specs?node-id=4337-1606&t=HtImvar8DMbivDqC-0
-                                (f ? /* @__PURE__ */ y(Oe, {
+                                (x ? /* @__PURE__ */ y(Ye, {
                                     space: 16,
                                     children: [
-                                        /* @__PURE__ */ y(Me, {
+                                        /* @__PURE__ */ y(qe, {
                                             space: "between",
                                             alignItems: "center",
                                             children: [
-                                                n,
-                                                s
+                                                d,
+                                                u
                                             ]
                                         }),
-                                        /* @__PURE__ */ i("div", {
+                                        /* @__PURE__ */ t("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: u
+                                            children: h
                                         })
                                     ]
-                                }) : /* @__PURE__ */ y(Me, {
+                                }) : /* @__PURE__ */ y(qe, {
                                     space: "between",
                                     alignItems: "center",
                                     children: [
-                                        n,
-                                        s,
-                                        u
+                                        d,
+                                        u,
+                                        h
                                     ]
                                 }))
                             ]
@@ -515,200 +515,210 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
             })
         ]
     });
-}, oi = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: a, size: r, variant: n, headline: s, title: u, titleAs: h = "h3", titleLinesMax: m, pretitle: d, pretitleAs: b, pretitleLinesMax: v, subtitle: p, subtitleLinesMax: x, description: f, descriptionLinesMax: k, withTextShadow: l } = param;
-    const { textPresets: t, colorValues: c } = ie(), M = be(), C = {
+}, si = (param)=>{
+    let { type: e, hasCustomBackground: o, headlineRef: a, touchableRef: r, touchableProps: d, size: u, variant: h, headline: l, title: c, titleAs: n = "h3", titleLinesMax: v, pretitle: m, pretitleAs: p, pretitleLinesMax: b, subtitle: x, subtitleLinesMax: k, description: s, descriptionLinesMax: S, withTextShadow: D } = param;
+    const { textPresets: i, colorValues: g } = pe(), ue = Le(), H = typeof c == "string" ? {
+        text: c
+    } : c, T = typeof m == "string" ? {
+        text: m
+    } : m, L = {
         hyphens: "auto"
-    }, E = {
+    }, X = {
         default: {
-            pretitle: c.textPrimary,
-            title: c.textPrimary,
-            subtitle: c.textPrimary,
-            description: c.textSecondary
+            pretitle: g.textPrimary,
+            title: g.textPrimary,
+            subtitle: g.textPrimary,
+            description: g.textSecondary
         },
         brand: {
-            pretitle: c.textPrimaryBrand,
-            title: c.textPrimaryBrand,
-            subtitle: c.textPrimaryBrand,
-            description: c.textSecondaryBrand
+            pretitle: g.textPrimaryBrand,
+            title: g.textPrimaryBrand,
+            subtitle: g.textPrimaryBrand,
+            description: g.textSecondaryBrand
         },
         negative: {
-            pretitle: c.textPrimaryNegative,
-            title: c.textPrimaryNegative,
-            subtitle: c.textPrimaryNegative,
-            description: c.textSecondaryNegative
+            pretitle: g.textPrimaryNegative,
+            title: g.textPrimaryNegative,
+            subtitle: g.textPrimaryNegative,
+            description: g.textSecondaryNegative
         },
         media: {
-            pretitle: c.textPrimaryMedia,
-            title: c.textPrimaryMedia,
-            subtitle: c.textPrimaryMedia,
-            description: e === "cover" && o ? c.textPrimaryMedia : c.textSecondaryMedia
+            pretitle: g.textPrimaryMedia,
+            title: g.textPrimaryMedia,
+            subtitle: g.textPrimaryMedia,
+            description: e === "cover" && o ? g.textPrimaryMedia : g.textSecondaryMedia
         }
-    }, N = {
+    }, Z = {
         snap: {
             pretitle: {
-                mobileSize: t.cardPretitleSnap.size.mobile,
-                desktopSize: t.cardPretitleSnap.size.desktop,
-                mobileLineHeight: t.cardPretitleSnap.lineHeight.mobile,
-                desktopLineHeight: t.cardPretitleSnap.lineHeight.desktop,
+                mobileSize: i.cardPretitleSnap.size.mobile,
+                desktopSize: i.cardPretitleSnap.size.desktop,
+                mobileLineHeight: i.cardPretitleSnap.lineHeight.mobile,
+                desktopLineHeight: i.cardPretitleSnap.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: t.cardTitleSnap.size.mobile,
-                desktopSize: t.cardTitleSnap.size.desktop,
-                mobileLineHeight: t.cardTitleSnap.lineHeight.mobile,
-                desktopLineHeight: t.cardTitleSnap.lineHeight.desktop,
-                weight: t.cardTitle.weight
+                mobileSize: i.cardTitleSnap.size.mobile,
+                desktopSize: i.cardTitleSnap.size.desktop,
+                mobileLineHeight: i.cardTitleSnap.lineHeight.mobile,
+                desktopLineHeight: i.cardTitleSnap.lineHeight.desktop,
+                weight: i.cardTitle.weight
             },
             subtitle: {
-                mobileSize: t.cardSubtitleSnap.size.mobile,
-                desktopSize: t.cardSubtitleSnap.size.desktop,
-                mobileLineHeight: t.cardSubtitleSnap.lineHeight.mobile,
-                desktopLineHeight: t.cardSubtitleSnap.lineHeight.desktop,
+                mobileSize: i.cardSubtitleSnap.size.mobile,
+                desktopSize: i.cardSubtitleSnap.size.desktop,
+                mobileLineHeight: i.cardSubtitleSnap.lineHeight.mobile,
+                desktopLineHeight: i.cardSubtitleSnap.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: t.cardDescriptionSnap.size.mobile,
-                desktopSize: t.cardDescriptionSnap.size.desktop,
-                mobileLineHeight: t.cardDescriptionSnap.lineHeight.mobile,
-                desktopLineHeight: t.cardDescriptionSnap.lineHeight.desktop,
+                mobileSize: i.cardDescriptionSnap.size.mobile,
+                desktopSize: i.cardDescriptionSnap.size.desktop,
+                mobileLineHeight: i.cardDescriptionSnap.lineHeight.mobile,
+                desktopLineHeight: i.cardDescriptionSnap.lineHeight.desktop,
                 weight: "regular"
             }
         },
         default: {
             pretitle: {
-                mobileSize: t.cardPretitleDefault.size.mobile,
-                desktopSize: t.cardPretitleDefault.size.desktop,
-                mobileLineHeight: t.cardPretitleDefault.lineHeight.mobile,
-                desktopLineHeight: t.cardPretitleDefault.lineHeight.desktop,
+                mobileSize: i.cardPretitleDefault.size.mobile,
+                desktopSize: i.cardPretitleDefault.size.desktop,
+                mobileLineHeight: i.cardPretitleDefault.lineHeight.mobile,
+                desktopLineHeight: i.cardPretitleDefault.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: t.cardTitleDefault.size.mobile,
-                desktopSize: t.cardTitleDefault.size.desktop,
-                mobileLineHeight: t.cardTitleDefault.lineHeight.mobile,
-                desktopLineHeight: t.cardTitleDefault.lineHeight.desktop,
-                weight: t.cardTitle.weight
+                mobileSize: i.cardTitleDefault.size.mobile,
+                desktopSize: i.cardTitleDefault.size.desktop,
+                mobileLineHeight: i.cardTitleDefault.lineHeight.mobile,
+                desktopLineHeight: i.cardTitleDefault.lineHeight.desktop,
+                weight: i.cardTitle.weight
             },
             subtitle: {
-                mobileSize: t.cardSubtitleDefault.size.mobile,
-                desktopSize: t.cardSubtitleDefault.size.desktop,
-                mobileLineHeight: t.cardSubtitleDefault.lineHeight.mobile,
-                desktopLineHeight: t.cardSubtitleDefault.lineHeight.desktop,
+                mobileSize: i.cardSubtitleDefault.size.mobile,
+                desktopSize: i.cardSubtitleDefault.size.desktop,
+                mobileLineHeight: i.cardSubtitleDefault.lineHeight.mobile,
+                desktopLineHeight: i.cardSubtitleDefault.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: t.cardDescriptionDefault.size.mobile,
-                desktopSize: t.cardDescriptionDefault.size.desktop,
-                mobileLineHeight: t.cardDescriptionDefault.lineHeight.mobile,
-                desktopLineHeight: t.cardDescriptionDefault.lineHeight.desktop,
+                mobileSize: i.cardDescriptionDefault.size.mobile,
+                desktopSize: i.cardDescriptionDefault.size.desktop,
+                mobileLineHeight: i.cardDescriptionDefault.lineHeight.mobile,
+                desktopLineHeight: i.cardDescriptionDefault.lineHeight.desktop,
                 weight: "regular"
             }
         },
         display: {
             pretitle: {
-                mobileSize: t.text2.size.mobile,
-                desktopSize: t.text2.size.desktop,
-                mobileLineHeight: t.text2.lineHeight.mobile,
-                desktopLineHeight: t.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: t.text6.size.mobile,
-                desktopSize: t.text6.size.desktop,
-                mobileLineHeight: t.text6.lineHeight.mobile,
-                desktopLineHeight: t.text6.lineHeight.desktop,
-                weight: t.text6.weight
+                mobileSize: i.text6.size.mobile,
+                desktopSize: i.text6.size.desktop,
+                mobileLineHeight: i.text6.lineHeight.mobile,
+                desktopLineHeight: i.text6.lineHeight.desktop,
+                weight: i.text6.weight
             },
             subtitle: {
-                mobileSize: t.text2.size.mobile,
-                desktopSize: t.text2.size.desktop,
-                mobileLineHeight: t.text2.lineHeight.mobile,
-                desktopLineHeight: t.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: t.text3.size.mobile,
-                desktopSize: t.text3.size.desktop,
-                mobileLineHeight: t.text3.lineHeight.mobile,
-                desktopLineHeight: t.text3.lineHeight.desktop,
+                mobileSize: i.text3.size.mobile,
+                desktopSize: i.text3.size.desktop,
+                mobileLineHeight: i.text3.lineHeight.mobile,
+                desktopLineHeight: i.text3.lineHeight.desktop,
                 weight: "regular"
             }
         }
-    }, P = E[n] || E[M] || E.default, L = N[r] || N.default, V = l ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, oe = s && // Read order 2. Visual order 1
-    /* @__PURE__ */ i("div", {
+    }, z = X[h] || X[ue] || X.default, P = Z[u] || Z.default, M = D ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, V = d ? (H === null || H === void 0 ? void 0 : H.text) && (T === null || T === void 0 ? void 0 : T.text) ? we(n, p) ? "title" : "pretitle" : (H === null || H === void 0 ? void 0 : H.text) ? "title" : (T === null || T === void 0 ? void 0 : T.text) ? "pretitle" : l ? "headline" : x ? "subtitle" : s ? "description" : null : null, I = (j, ee, te)=>j ? te ? /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, ee), {
+            children: /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
+                maybe: !0
+            }, d), {
+                ref: r,
+                className: R(Q, Tt),
+                children: j
+            }))
+        })) : /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, ee), {
+            children: j
+        })) : null, K = I(l && typeof l == "string" ? /* @__PURE__ */ t(Ft, {
+        type: "promo",
+        children: l
+    }) : l, // Read order 2. Visual order 1
+    {
         style: {
-            paddingBottom: 8,
-            order: 1
+            order: 1,
+            paddingBottom: 8
         },
         "data-testid": "headline",
-        ref: a,
-        children: typeof s == "string" ? /* @__PURE__ */ i(zt, {
-            type: "promo",
-            children: s
-        }) : s
-    }), T = d && // Read order: 3 or 1. Visual order 2
-    /* @__PURE__ */ i("div", {
+        ref: a
+    }, V === "headline"), E = I((T === null || T === void 0 ? void 0 : T.text) && /* @__PURE__ */ t(ae, _object_spread_props(_object_spread({}, L, P.pretitle), {
+        as: p || "p",
+        truncate: b,
+        color: z.pretitle,
+        textShadow: M,
+        "aria-label": T === null || T === void 0 ? void 0 : T["aria-label"],
+        children: T.text
+    })), {
         style: {
             paddingBottom: 4,
             order: 2
         },
-        "data-testid": "pretitle",
-        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, C, L.pretitle), {
-            as: b || "p",
-            truncate: v,
-            color: P.pretitle,
-            textShadow: V,
-            children: d
-        }))
-    }), X = u && // Read order: 1 or 3. Visual order 3
-    /* @__PURE__ */ i("div", {
+        "data-testid": "pretitle"
+    }, V === "pretitle"), $ = I((H === null || H === void 0 ? void 0 : H.text) && /* @__PURE__ */ t(ae, _object_spread_props(_object_spread({}, L, P.title), {
+        as: n,
+        truncate: v,
+        color: z.title,
+        textShadow: M,
+        "aria-label": H === null || H === void 0 ? void 0 : H["aria-label"],
+        children: H.text
+    })), // Read order: 1 or 3. Visual order 3
+    {
         style: {
             paddingBottom: 4,
             order: 3
         },
-        "data-testid": "title",
-        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, C, L.title), {
-            as: h,
-            truncate: m,
-            color: P.title,
-            textShadow: V,
-            children: u
-        }))
-    }), re = p && // Read order: 4. Visual order 4
-    /* @__PURE__ */ i("div", {
+        "data-testid": "title"
+    }, V === "title"), W = I(x && /* @__PURE__ */ t(ae, _object_spread_props(_object_spread({}, L, P.subtitle), {
+        as: "p",
+        truncate: k,
+        color: z.subtitle,
+        textShadow: M,
+        children: x
+    })), // Read order: 4. Visual order 4
+    {
         style: {
             paddingBottom: 0,
             order: 4
         },
-        "data-testid": "subtitle",
-        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, C, L.subtitle), {
-            as: "p",
-            truncate: x,
-            color: P.subtitle,
-            textShadow: V,
-            children: p
-        }))
-    }), ae = f && // Read order: 5. Visual order 5
-    /* @__PURE__ */ i("div", {
+        "data-testid": "subtitle"
+    }, V === "subtitle"), he = I(s && /* @__PURE__ */ t(ae, _object_spread_props(_object_spread({}, L, P.description), {
+        as: "p",
+        truncate: S,
+        color: z.description,
+        textShadow: M,
+        children: s
+    })), // Read order: 5. Visual order 5
+    {
         style: {
             paddingTop: 4,
             order: 5
         },
-        "data-testid": "description",
-        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, C, L.description), {
-            as: "p",
-            truncate: k,
-            color: P.description,
-            textShadow: V,
-            children: f
-        }))
-    }), [K, $] = u && Xe(h, b) ? [
-        X,
-        T
+        "data-testid": "description"
+    }, V === "description"), [me, ge] = H && we(n, p) ? [
+        $,
+        E
     ] : [
-        T,
-        X
+        E,
+        $
     ];
     return /* @__PURE__ */ y("div", {
         style: {
@@ -716,18 +726,66 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
             flexDirection: "column"
         },
         children: [
+            me,
             K,
-            oe,
-            $,
-            re,
-            ae
+            ge,
+            W,
+            he
         ]
     });
-}, ri = [
-    g.colors.cardContentOverlay,
-    g.colors.cardFooterOverlay
-], ai = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, je = (e, o)=>e.replace(ai, (a, r)=>_t(o, parseFloat(r))), Vi = /*#__PURE__*/ I.forwardRef((_param, et)=>{
-    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: n, imageAlt: s = "", 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: l, titleAs: t = "h3", titleLinesMax: c, pretitle: M, pretitleAs: C, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: P, description: L, descriptionLinesMax: V, dataAttributes: oe, variant: T, width: X, height: re, aspectRatio: ae, slot: K, slotAlignment: $ = "content", buttonPrimary: ne, buttonSecondary: de, buttonLink: se, showFooter: Ke, footerBackgroundColor: We, footerVariant: Ye, footerSlot: ke, footerDivider: qe, topActions: xe, onClose: ye, closeButtonLabel: Je, "aria-label": Se, "aria-labelledby": le, "aria-description": Be, "aria-describedby": Re, gradientOverlayColor: W, videoLoop: Qe, videoAutoPlay: Ue, videoDataAttributes: Ze } = _param, A = _object_without_properties(_param, [
+}, ci = (param)=>{
+    let { children: e, isTouchable: o, touchableAriaLabel: a, ariaLabeledByProp: r, ariaDescriptionProp: d, ariaDescribedByProp: u, touchableProps: h, segregateTouchableContent: l, hasTouchableInContent: c, overlayClassname: n, contentStyle: v, contentRadiusStyle: m } = param;
+    const p = o && (!l || c), b = /**
+     * role="text" makes VoiceOver read the whole div as a single text block. This is needed
+     * for VoiceOver rectangle to cover the whole card when using aria-label in <a> elements,
+     * otherwise it only renders a small rectangle in the begining of the <a> element.
+     * This workaround is only needed for <a> not for <button> (ask safari developers why)
+     */ /* @__PURE__ */ y("div", {
+        role: !l && (h.href || h.to) ? "text" : void 0,
+        className: It,
+        style: _object_spread({}, v, m),
+        children: [
+            p && /* @__PURE__ */ t("div", {
+                className: n
+            }),
+            e
+        ]
+    });
+    return o && l ? c ? /* @__PURE__ */ t("div", {
+        className: R(Q, Be),
+        children: b
+    }) : /* @__PURE__ */ y("div", {
+        style: {
+            position: "relative"
+        },
+        children: [
+            /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
+                "aria-label": a,
+                maybe: !0
+            }, h), {
+                className: R(Q, Be, Nt),
+                children: /* @__PURE__ */ t("div", {
+                    className: R(n),
+                    style: m
+                })
+            })),
+            b
+        ]
+    }) : /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
+        maybe: !0,
+        "aria-label": o ? a : void 0,
+        "aria-labelledby": o ? r : void 0,
+        "aria-description": o ? d : void 0,
+        "aria-describedby": o ? u : void 0,
+        className: R(Q, Be)
+    }, h), {
+        children: b
+    }));
+}, pi = [
+    f.colors.cardContentOverlay,
+    f.colors.cardFooterOverlay
+], ui = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, Ue = (e, o)=>e.replace(ui, (a, r)=>Jt(o, parseFloat(r))), ji = /*#__PURE__*/ N.forwardRef((_param, at)=>{
+    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: d, imageAlt: u = "", imageFit: h = "fill-center", videoSrc: l, videoRef: c, media: n, mediaAspectRatio: v = "auto", mediaPosition: m = "top", mediaWidth: p = 150, circledImage: b, asset: x, headline: k, title: s, titleAs: S = "h3", titleLinesMax: D, pretitle: i, pretitleAs: g, pretitleLinesMax: ue, subtitle: H, subtitleLinesMax: T, description: L, descriptionLinesMax: X, dataAttributes: Z, variant: z, width: P, height: M, aspectRatio: V, slot: I, slotAlignment: K = "content", buttonPrimary: E, buttonSecondary: $, buttonLink: W, showFooter: he, footerBackgroundColor: me, footerVariant: ge, footerSlot: j, footerDivider: ee, topActions: te, onClose: Ie, closeButtonLabel: tt, "aria-label": Ne, "aria-labelledby": be, "aria-description": De, "aria-describedby": Te, gradientOverlayColor: ie, videoLoop: it, videoAutoPlay: ot, videoDataAttributes: rt, segregateTouchableContent: fe = !1, touchableAriaLabel: Ve } = _param, Y = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -779,239 +837,241 @@ const Xt = /*#__PURE__*/ I.forwardRef((param, p)=>{
         "gradientOverlayColor",
         "videoLoop",
         "videoAutoPlay",
-        "videoDataAttributes"
+        "videoDataAttributes",
+        "segregateTouchableContent",
+        "touchableAriaLabel"
     ]);
-    const { text: He, ref: tt } = Ae(), { text: we, ref: it } = Ae(), B = !!(A.href || A.to || A.onPress), ce = !!(ne || de || se), { colorValues: Le } = ie(), pe = e === "media" || e === "naked", ot = pe && (r !== void 0 || n !== void 0), Ce = pe && h !== void 0, Te = ot || Ce, ue = pe && !!d && !Te, R = Te || ue, H = e === "naked", S = R ? v : "top", ze = 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 = Ce || Y, { video: Ie, videoAction: me } = Ut({
-        src: rt ? h : void 0,
+    const { text: Ae, ref: nt } = Ke(), { text: Oe, ref: dt } = Ke(), lt = N.useRef(null), A = !!(Y.href || Y.to || Y.onPress), Fe = !!(fe && !Ve && (s || i || k || H || L)), ve = !!(E || $ || W), { colorValues: Pe } = pe(), xe = e === "media" || e === "naked", st = xe && (r !== void 0 || d !== void 0), Me = xe && l !== void 0, Ee = st || Me, ke = xe && !!n && !Ee, w = Ee || ke, C = e === "naked", B = w ? m : "top", $e = e === "naked" && b ? 1 : v, ye = e === "cover" && (r !== void 0 || d !== void 0), oe = e === "cover" && l !== void 0, je = !!a || ye || oe, G = ye || oe, ct = Me || oe, { video: Ge, videoAction: Se } = ri({
+        src: ct ? l : void 0,
         poster: r,
-        ref: m,
-        autoHeight: e === "cover" || S !== "top" ? !1 : ve(ze) === 0,
-        loop: Qe,
-        autoPlay: Ue,
-        dataAttributes: Ze
-    }), j = be(), at = T ? Fe(T) : j, z = T && Fe(T) || (e === "cover" && De ? "media" : "default"), nt = z === "brand" ? gt : bt, 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"), st = e !== "cover" && Pe > 0 && !dt && !k, G = e === "cover" || e === "data" && o === "display", O = g.borderRadii.container, lt = he || Y ? "transparent" : a || (z === "media" ? j === "brand" || j === "media" || j === "negative" ? g.colors.backgroundContainerBrandOverBrand : g.colors.backgroundBrand : z === "alternative" ? g.colors.backgroundAlternative : void 0), ct = Se || (le ? void 0 : (l && Xe(t, C) ? [
-        l,
+        ref: c,
+        autoHeight: e === "cover" || B !== "top" ? !1 : Ce($e) === 0,
+        loop: it,
+        autoPlay: ot,
+        dataAttributes: rt
+    }), q = Le(), pt = z ? We(z) : q, O = z && We(z) || (e === "cover" && je ? "media" : "default"), ut = O === "brand" ? kt : yt, F = he && (ve || !!j) || ve && A, _e = !F && ve, re = ((te === null || te === void 0 ? void 0 : te.length) || 0) + (Ie ? 1 : 0), Xe = Se ? re + 1 : re, ht = x && !(w && B === "left"), mt = e !== "cover" && Xe > 0 && !ht && !k, J = e === "cover" || e === "data" && o === "display", _ = f.borderRadii.container, gt = ye || oe ? "transparent" : a || (O === "media" ? q === "brand" || q === "media" || q === "negative" ? f.colors.backgroundContainerBrandOverBrand : f.colors.backgroundBrand : O === "alternative" ? f.colors.backgroundAlternative : void 0), bt = Ve || Ne || (be ? void 0 : (s && we(S, g) ? [
         s,
-        we,
-        M,
-        N,
+        u,
+        Oe,
+        i,
+        H,
         L,
-        He
+        Ae
     ] : [
-        M,
-        we,
-        l,
+        i,
+        Oe,
         s,
-        N,
+        u,
+        H,
         L,
-        He
-    ]).filter(Boolean).join(" ")), pt = ()=>W === "transparent" ? [
+        Ae
+    ]).filter(Boolean).join(" ")), ft = ()=>ie === "transparent" ? [
             "transparent",
             "transparent"
-        ] : W ? [
-            je(Le.cardContentOverlay, W),
-            je(Le.cardFooterOverlay, W)
-        ] : ri, [ut, ht] = pt();
-    return /* @__PURE__ */ y(Xt, {
-        "aria-label": B ? void 0 : Se,
-        "aria-labelledby": B ? void 0 : le,
-        "aria-description": B ? void 0 : Be,
-        "aria-describedby": B ? void 0 : Re,
+        ] : ie ? [
+            Ue(Pe.cardContentOverlay, ie),
+            Ue(Pe.cardFooterOverlay, ie)
+        ] : pi, [vt, xt] = ft();
+    return /* @__PURE__ */ y(Qt, {
+        "aria-label": A ? void 0 : Ne,
+        "aria-labelledby": A ? void 0 : be,
+        "aria-description": A ? void 0 : De,
+        "aria-describedby": A ? void 0 : Te,
         type: e,
         size: o,
-        dataAttributes: oe,
-        ref: et,
-        variant: z,
-        width: X,
-        height: re,
-        aspectRatio: ae,
-        backgroundColor: lt,
+        dataAttributes: Z,
+        ref: at,
+        variant: O,
+        width: P,
+        height: M,
+        aspectRatio: V,
+        backgroundColor: gt,
         children: [
-            F && /* @__PURE__ */ i(Kt, {
-                video: Ie,
+            G && /* @__PURE__ */ t(Ut, {
+                video: Ge,
                 src: r,
-                srcSet: n,
-                backgroundVariant: at
+                srcSet: d,
+                backgroundVariant: pt
             }),
-            me && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
-            /* @__PURE__ */ i("div", {
+            Se && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
+            /* @__PURE__ */ t("div", {
                 "data-testid": "videoAction",
-                children: /* @__PURE__ */ i($e, {
+                children: /* @__PURE__ */ t(Qe, {
                     testid: "videoAction",
                     variant: "media",
                     actions: [
-                        me
+                        Se
                     ],
                     containerStyles: {
                         position: "absolute",
                         top: 16,
-                        left: S === "left" ? typeof p == "number" ? `calc(${p}px - 48px)` : `calc(${p} - 48px)` : "auto",
-                        right: S !== "left" ? q * 48 + 16 : "auto"
+                        left: B === "left" ? typeof p == "number" ? `calc(${p}px - 48px)` : `calc(${p} - 48px)` : "auto",
+                        right: B !== "left" ? re * 48 + 16 : "auto"
                     }
                 })
             }),
-            /* @__PURE__ */ i(Ot, _object_spread_props(_object_spread({
-                maybe: !0,
-                "aria-label": B ? ct : void 0,
-                "aria-labelledby": B ? le : void 0,
-                "aria-description": B ? Be : void 0,
-                "aria-describedby": B ? Re : void 0,
-                className: w(Ve, xt)
-            }, A), {
-                children: /* @__PURE__ */ y("div", {
-                    role: A.href || A.to ? "text" : void 0,
-                    className: mt,
-                    style: {
-                        flexDirection: S === "top" ? "column" : S === "left" ? "row" : "row-reverse",
-                        borderTopLeftRadius: H && !R ? 0 : `calc(${O} - 1px)`,
-                        borderTopRightRadius: H && !R ? 0 : `calc(${O} - 1px)`,
-                        borderBottomLeftRadius: D || H ? 0 : `calc(${O} - 1px)`,
-                        borderBottomRightRadius: D || H ? 0 : `calc(${O} - 1px)`
-                    },
-                    children: [
-                        B && /* @__PURE__ */ i("div", {
-                            className: nt
-                        }),
-                        ue && /* @__PURE__ */ i("div", {
-                            style: _object_spread({
-                                // for some reason, this width is required to pass headless screenshot tests
-                                // otherwise, it gets 0px width and the media is not visible
-                                width: "100%"
-                            }, e === "naked" ? void 0 : _({
-                                [te.mediaBorderRadius]: "0px"
-                            })),
-                            children: d
-                        }),
-                        ue && /* @__PURE__ */ i(ee, {
-                            absolute: !0,
-                            size: o,
-                            asset: f,
-                            type: e
-                        }),
-                        R && /* @__PURE__ */ i(ti, {
-                            type: e,
-                            size: o,
-                            mediaAspectRatio: ze,
-                            mediaPosition: S,
-                            asset: f,
-                            video: Ie,
-                            imageFit: u,
-                            imageSrc: r,
-                            imageSrcSet: n,
-                            imageAlt: s,
-                            mediaWidth: p,
-                            circledImage: x
+            /* @__PURE__ */ y(ci, {
+                isTouchable: A,
+                touchableAriaLabel: bt,
+                ariaLabeledByProp: be,
+                ariaDescriptionProp: De,
+                ariaDescribedByProp: Te,
+                touchableProps: Y,
+                segregateTouchableContent: fe,
+                hasTouchableInContent: Fe,
+                overlayClassname: ut,
+                contentStyle: {
+                    flexDirection: B === "top" ? "column" : B === "left" ? "row" : "row-reverse"
+                },
+                contentRadiusStyle: {
+                    borderTopLeftRadius: C && !w ? 0 : `calc(${_} - 1px)`,
+                    borderTopRightRadius: C && !w ? 0 : `calc(${_} - 1px)`,
+                    borderBottomLeftRadius: F || C ? 0 : `calc(${_} - 1px)`,
+                    borderBottomRightRadius: F || C ? 0 : `calc(${_} - 1px)`
+                },
+                children: [
+                    ke && /* @__PURE__ */ t("div", {
+                        style: _object_spread({
+                            // for some reason, this width is required to pass headless screenshot tests
+                            // otherwise, it gets 0px width and the media is not visible
+                            width: "100%"
+                        }, e === "naked" ? void 0 : U({
+                            [ce.mediaBorderRadius]: "0px"
+                        })),
+                        children: n
+                    }),
+                    ke && /* @__PURE__ */ t(se, {
+                        absolute: !0,
+                        size: o,
+                        asset: x,
+                        type: e
+                    }),
+                    w && /* @__PURE__ */ t(di, {
+                        type: e,
+                        size: o,
+                        mediaAspectRatio: $e,
+                        mediaPosition: B,
+                        asset: x,
+                        video: Ge,
+                        imageFit: h,
+                        imageSrc: r,
+                        imageSrcSet: d,
+                        imageAlt: u,
+                        mediaWidth: p,
+                        circledImage: b
+                    }),
+                    /* @__PURE__ */ y("div", {
+                        "aria-hidden": A && !fe,
+                        "data-testid": "body",
+                        className: R(Q, {
+                            [Re[o]]: !!x && e !== "naked" && (!w || B === "right")
                         }),
-                        /* @__PURE__ */ y("div", {
-                            "aria-hidden": B,
-                            "data-testid": "body",
-                            className: w(Ve, {
-                                [ge[o]]: !!f && e !== "naked" && (!R || S === "right")
+                        children: [
+                            (!w || B === "right") && /* @__PURE__ */ t(se, {
+                                size: o,
+                                asset: x,
+                                type: e
                             }),
-                            children: [
-                                (!R || S === "right") && /* @__PURE__ */ i(ee, {
-                                    size: o,
-                                    asset: f,
-                                    type: e
-                                }),
-                                G && /* @__PURE__ */ i(U, {
-                                    minHeight: e === "cover" && Pe > 0 && !f ? 56 : 0
-                                }),
-                                /* @__PURE__ */ y("div", {
-                                    className: w(Z[o], Ge[o], ge[o]),
-                                    style: {
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        height: G ? void 0 : "100%",
-                                        background: F ? ut : void 0,
-                                        // padding overrides for specific cases
-                                        paddingTop: G && F ? 40 : f || H && S !== "top" ? 16 : H && !R ? 0 : void 0,
-                                        paddingLeft: H && (S !== "left" || !R) ? 0 : void 0,
-                                        paddingRight: H && S !== "right" ? 16 : void 0,
-                                        paddingBottom: D ? 16 : H ? 0 : void 0,
-                                        borderBottomLeftRadius: D ? 0 : O,
-                                        borderBottomRightRadius: D ? 0 : O
-                                    },
-                                    children: [
-                                        /* @__PURE__ */ y("div", {
-                                            className: ft,
-                                            children: [
-                                                /* @__PURE__ */ i("div", {
-                                                    className: vt,
-                                                    children: /* @__PURE__ */ i(oi, {
-                                                        type: e,
-                                                        hasCustomBackground: De,
-                                                        headlineRef: it,
-                                                        variant: z,
-                                                        size: o,
-                                                        headline: k,
-                                                        pretitle: M,
-                                                        pretitleAs: C,
-                                                        pretitleLinesMax: E,
-                                                        title: l,
-                                                        titleAs: t,
-                                                        titleLinesMax: c,
-                                                        subtitle: N,
-                                                        subtitleLinesMax: P,
-                                                        description: L,
-                                                        descriptionLinesMax: V,
-                                                        withTextShadow: F
-                                                    })
-                                                }),
-                                                st && /* @__PURE__ */ i("div", {
-                                                    style: {
-                                                        flexShrink: 0,
-                                                        flexGrow: 0,
-                                                        width: q * 48 - // required space depends on the card padding
-                                                        (e === "naked" ? 0 : o === "display" ? 24 : 16) - //
-                                                        8
-                                                    }
-                                                })
-                                            ]
-                                        }),
-                                        !G && $ === "bottom" && /* @__PURE__ */ i(U, {}),
-                                        K && /* @__PURE__ */ i("div", {
-                                            ref: tt,
-                                            "data-testid": "slot",
-                                            className: w($ === "space-between" && kt),
-                                            children: K
-                                        }),
-                                        !G && $ === "content" && Ne && /* @__PURE__ */ i(U, {}),
-                                        Ne && /* @__PURE__ */ i(Zt, {
-                                            size: o,
-                                            buttonPrimary: ne,
-                                            buttonSecondary: de,
-                                            buttonLink: se
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })),
-            D && /* @__PURE__ */ i(ii, {
+                            J && /* @__PURE__ */ t(de, {
+                                minHeight: e === "cover" && Xe > 0 && !x ? 56 : 0
+                            }),
+                            /* @__PURE__ */ y("div", {
+                                className: R(le[o], Ze[o], Re[o]),
+                                style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    height: J ? void 0 : "100%",
+                                    background: G ? vt : void 0,
+                                    // padding overrides for specific cases
+                                    paddingTop: J && G ? 40 : x || C && B !== "top" ? 16 : C && !w ? 0 : void 0,
+                                    paddingLeft: C && (B !== "left" || !w) ? 0 : void 0,
+                                    paddingRight: C && B !== "right" ? 16 : void 0,
+                                    paddingBottom: F ? 16 : C ? 0 : void 0,
+                                    borderBottomLeftRadius: F ? 0 : _,
+                                    borderBottomRightRadius: F ? 0 : _
+                                },
+                                children: [
+                                    /* @__PURE__ */ y("div", {
+                                        className: St,
+                                        children: [
+                                            /* @__PURE__ */ t("div", {
+                                                className: Bt,
+                                                children: /* @__PURE__ */ t(si, _object_spread({
+                                                    type: e,
+                                                    hasCustomBackground: je,
+                                                    headlineRef: dt,
+                                                    variant: O,
+                                                    size: o,
+                                                    headline: k,
+                                                    pretitle: i,
+                                                    pretitleAs: g,
+                                                    pretitleLinesMax: ue,
+                                                    title: s,
+                                                    titleAs: S,
+                                                    titleLinesMax: D,
+                                                    subtitle: H,
+                                                    subtitleLinesMax: T,
+                                                    description: L,
+                                                    descriptionLinesMax: X,
+                                                    withTextShadow: G
+                                                }, Fe ? {
+                                                    touchableRef: lt,
+                                                    touchableProps: Y
+                                                } : {}))
+                                            }),
+                                            mt && /* @__PURE__ */ t("div", {
+                                                style: {
+                                                    flexShrink: 0,
+                                                    flexGrow: 0,
+                                                    width: re * 48 - // required space depends on the card padding
+                                                    (e === "naked" ? 0 : o === "display" ? 24 : 16) - //
+                                                    8
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    !J && K === "bottom" && /* @__PURE__ */ t(de, {}),
+                                    I && /* @__PURE__ */ t("div", {
+                                        ref: nt,
+                                        "data-testid": "slot",
+                                        className: R(K === "space-between" && Rt),
+                                        children: I
+                                    }),
+                                    !J && K === "content" && _e && /* @__PURE__ */ t(de, {}),
+                                    _e && /* @__PURE__ */ t(ai, {
+                                        size: o,
+                                        buttonPrimary: E,
+                                        buttonSecondary: $,
+                                        buttonLink: W
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            F && /* @__PURE__ */ t(li, {
                 type: e,
-                variant: z,
-                footerVariant: Ye,
-                footerBackgroundColor: We,
-                footerDivider: qe,
+                variant: O,
+                footerVariant: ge,
+                footerBackgroundColor: me,
+                footerDivider: ee,
                 size: o,
-                footerSlot: ke,
-                buttonPrimary: ne,
-                buttonSecondary: de,
-                buttonLink: se,
-                hasBackgroundImageOrVideo: F,
-                externalVariant: j,
-                overlayColor: ht
+                footerSlot: j,
+                buttonPrimary: E,
+                buttonSecondary: $,
+                buttonLink: W,
+                hasBackgroundImageOrVideo: G,
+                externalVariant: q,
+                overlayColor: xt
             }),
-            /* @__PURE__ */ i($e, {
-                onClose: ye,
-                closeButtonLabel: Je,
-                actions: xe,
-                variant: F || R && S !== "left" ? "media" : z
+            /* @__PURE__ */ t(Qe, {
+                onClose: Ie,
+                closeButtonLabel: tt,
+                actions: te,
+                variant: G || w && B !== "left" ? "media" : O
             })
         ]
     });
 });
-export { ei as CardActionIconButton, qt as CardActionSpinner, Vi as InternalCard, $e as TopActions, Ut as useVideoWithControls };
+export { ni as CardActionIconButton, ti as CardActionSpinner, ji as InternalCard, Qe as TopActions, ri as useVideoWithControls };