@telefonica/mistica 17.4.0 → 17.6.0

package/dist-es/card-internal.js

@@ -78,59 +78,118 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t, jsxs as k, Fragment as ae } from "react/jsx-runtime";
-import * as T from "react";
-import { touchableCardOverlayInverse as ft, touchableCardOverlay as vt, contentContainer as xt, textContent as kt, slotContainerSpaceBetween as yt, containerPaddingXVariants as le, containerPaddingBottomVariants as Je, containerPaddingTopVariants as ke, touchable as Z, topActionsContainer as St, vars as Bt, boxed as Rt, container as Ht, backgroundImageOrVideoContainer as wt, touchableContent as Lt, touchableContainer as xe, stretchedTouchable as zt, actionsContainerVariants as Ct, stretchedLink as It } from "./card-internal.css-mistica.js";
-import { vars as Re } from "./image.css-mistica.js";
-import { closeButtonLabel as Nt, playIconButtonLabel as Tt, pauseIconButtonLabel as Dt } from "./text-tokens.js";
-import { Text as ne } from "./text.js";
-import { useInnerText as Ge, useTheme as se } from "./hooks.js";
-import { useThemeVariant as He, normalizeVariant as _e, ThemeVariant as we } from "./theme-variant-context.js";
-import Vt from "./tag.js";
-import Xe from "./stack.js";
-import Qe from "./image.js";
-import At from "./video.js";
-import Ke from "./inline.js";
-import Ot from "./spinner.js";
-import Ft from "./generated/mistica-icons/icon-play-filled.js";
-import Pt from "./generated/mistica-icons/icon-pause-filled.js";
-import Et from "./generated/mistica-icons/icon-close-regular.js";
-import { getPrefixedDataAttributes as Mt } from "./utils/dom.js";
-import { applyCssVars as ce } from "./utils/css.js";
-import { InternalBoxed as $t } from "./boxed.js";
-import { BaseTouchable as ye } from "./touchable.js";
-import { aspectRatioToNumber as Le, AspectRatioContainer as jt } from "./utils/aspect-ratio-support.js";
-import { vars as v } from "./skins/skin-contract.css-mistica.js";
-import { IconButton as Gt, ToggleIconButton as _t } from "./icon-button.js";
-import { combineRefs as Xt } from "./utils/common.js";
-import { isRunningAcceptanceTest as We } from "./utils/platform.js";
-import R from "classnames";
-import Kt from "./button-group.js";
-import { isBiggerHeading as Se } from "./utils/headings.js";
-import { applyAlpha as Wt } from "./utils/color.js";
-const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
-    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": p, "aria-labelledby": m, "aria-description": l, "aria-describedby": s, dataAttributes: d, backgroundColor: x, variant: c } = param;
-    const u = n && r ? void 0 : Le(a), y = u ? ce({
-        [Bt.aspectRatio]: String(u)
-    }) : {}, b = x ? "none" : void 0, h = e === "naked";
+import { jsx as t, jsxs as S, Fragment as te } from "react/jsx-runtime";
+import * as N from "react";
+import { touchableCardOverlayInverse as Nt, touchableCardOverlay as zt, contentContainer as Lt, textContent as It, slotContainerSpaceBetween as Tt, containerPaddingXVariants as he, containerPaddingBottomVariants as it, containerPaddingTopVariants as Be, touchable as K, selectionControlContent as qe, topActionsContainer as ot, vars as Dt, boxed as Vt, selectionOutlineColor as At, selectionOutline as Ot, container as Ft, backgroundImageOrVideoContainer as Et, touchableContent as Mt, touchableContainer as ce, stretchedTouchable as $t, actionsContainerVariants as jt, selectionControl as Gt, stretchedLink as Pt } from "./card-internal.css-mistica.js";
+import { vars as ze } from "./image.css-mistica.js";
+import { closeButtonLabel as _t, playIconButtonLabel as Wt, pauseIconButtonLabel as Xt } from "./text-tokens.js";
+import { Text as ue } from "./text.js";
+import { useInnerText as Je, useTheme as pe } from "./hooks.js";
+import { useThemeVariant as Le, normalizeVariant as Re, ThemeVariant as Ie } from "./theme-variant-context.js";
+import Kt from "./tag.js";
+import Qe from "./stack.js";
+import rt from "./image.js";
+import Yt from "./video.js";
+import Ue from "./inline.js";
+import qt from "./spinner.js";
+import Jt from "./generated/mistica-icons/icon-play-filled.js";
+import Qt from "./generated/mistica-icons/icon-pause-filled.js";
+import Ut from "./generated/mistica-icons/icon-close-regular.js";
+import { getPrefixedDataAttributes as Zt } from "./utils/dom.js";
+import { applyCssVars as ge } from "./utils/css.js";
+import { InternalBoxed as ei } from "./boxed.js";
+import { BaseTouchable as He } from "./touchable.js";
+import ti from "./checkbox.js";
+import ii from "./switch-component.js";
+import oi, { useRadioContext as ri } from "./radio-button.js";
+import { aspectRatioToNumber as Te, AspectRatioContainer as ai } from "./utils/aspect-ratio-support.js";
+import { vars as x } from "./skins/skin-contract.css-mistica.js";
+import { IconButton as ni, ToggleIconButton as di } from "./icon-button.js";
+import { combineRefs as li } from "./utils/common.js";
+import { isRunningAcceptanceTest as Ze } from "./utils/platform.js";
+import C from "classnames";
+import si from "./button-group.js";
+import { isBiggerHeading as we } from "./utils/headings.js";
+import { applyAlpha as ci } from "./utils/color.js";
+const ui = function() {
+    let { value: e, defaultValue: o, onChange: n } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    const r = e !== void 0, [a, l] = N.useState(!!o);
+    return {
+        isChecked: r ? !!e : a,
+        toggleChecked: ()=>{
+            r || l(!a), n === null || n === void 0 ? void 0 : n(r ? !e : !a);
+        }
+    };
+}, mi = (_param)=>{
+    var { checkbox: e, switch: o, radioValue: n, checked: r, onChange: a } = _param, l = _object_without_properties(_param, [
+        "checkbox",
+        "switch",
+        "radioValue",
+        "checked",
+        "onChange"
+    ]);
+    const c = N.useId(), s = (param)=>{
+        let { controlElement: d } = param;
+        return /* @__PURE__ */ S(te, {
+            children: [
+                l.children,
+                /* @__PURE__ */ t("div", {
+                    className: ot,
+                    "data-testid": "cardSelector",
+                    "aria-hidden": !0,
+                    children: d
+                })
+            ]
+        });
+    }, u = (d)=>/* @__PURE__ */ t("div", {
+            className: C(Gt, l.className),
+            style: l.style,
+            children: d
+        });
+    var _o_name, _ref, _o_disabled;
+    return u(o || e ? /* @__PURE__ */ t(o ? ii : ti, {
+        className: qe,
+        name: (_ref = (_o_name = o === null || o === void 0 ? void 0 : o.name) !== null && _o_name !== void 0 ? _o_name : e === null || e === void 0 ? void 0 : e.name) !== null && _ref !== void 0 ? _ref : c,
+        checked: r,
+        onChange: a,
+        disabled: (_o_disabled = o === null || o === void 0 ? void 0 : o.disabled) !== null && _o_disabled !== void 0 ? _o_disabled : e === null || e === void 0 ? void 0 : e.disabled,
+        "aria-label": l["aria-label"],
+        "aria-labelledby": l["aria-labelledby"],
+        render: s
+    }) : /* @__PURE__ */ t(oi, {
+        className: qe,
+        value: n,
+        "aria-label": l["aria-label"],
+        "aria-labelledby": l["aria-labelledby"],
+        render: s
+    }));
+}, hi = /*#__PURE__*/ N.forwardRef((param, g)=>{
+    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": l, "aria-labelledby": c, "aria-description": s, "aria-describedby": u, dataAttributes: d, backgroundColor: v, variant: m, selected: h } = param;
+    const y = n && r ? void 0 : Te(a), b = y ? ge({
+        [Dt.aspectRatio]: String(y)
+    }) : {}, p = v ? "none" : void 0, f = 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__ */ t("section", _object_spread_props(_object_spread({
         ref: g,
-        "aria-label": p,
-        "aria-labelledby": m,
-        "aria-description": l,
-        "aria-describedby": s,
-        className: R(Ht)
-    }, Mt(_object_spread({
+        "aria-label": l,
+        "aria-labelledby": c,
+        "aria-description": s,
+        "aria-describedby": u,
+        className: C(Ft)
+    }, Zt(_object_spread({
         testid: "InternalCard"
     }, d))), {
         style: _object_spread({
             width: n || "100%",
             height: r || "100%",
             position: "relative"
-        }, y),
+        }, b),
         children: /* @__PURE__ */ t("div", {
+            className: C({
+                [Ot]: !!h,
+                [At[Re(m || "default")]]: !!h
+            }),
             style: {
                 display: "flex",
                 flexDirection: "column",
@@ -138,20 +197,20 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
                 position: "relative",
                 minHeight: "100%"
             },
-            children: /* @__PURE__ */ t($t, {
+            children: /* @__PURE__ */ t(ei, {
                 width: "100%",
                 height: "100%",
-                variant: c,
-                className: R(Rt),
-                background: h ? "transparent" : x,
-                borderRadius: h ? "none" : v.borderRadii.container,
-                border: h ? "none" : b,
+                variant: m,
+                className: C(Vt),
+                background: f ? "transparent" : v,
+                borderRadius: f ? "none" : x.borderRadii.container,
+                border: f ? "none" : p,
                 overflow: "visible",
                 children: o
             })
         })
     })));
-}), de = (param)=>{
+}), me = (param)=>{
     let { minHeight: e } = param;
     return /* @__PURE__ */ t("div", {
         style: {
@@ -160,14 +219,14 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             minHeight: e
         }
     });
-}, Be = (param)=>{
+}, Ne = (param)=>{
     let { size: e, absolute: o, asset: n, type: r } = param;
     if (!n) return null;
     const a = /* @__PURE__ */ t("div", {
         "data-testid": "asset",
         "aria-hidden": !0,
-        style: ce({
-            [Re.mediaBorderRadius]: v.borderRadii.mediaSmall
+        style: ge({
+            [ze.mediaBorderRadius]: x.borderRadii.mediaSmall
         }),
         children: n
     });
@@ -177,26 +236,26 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             top: 0,
             left: 0
         },
-        className: R(le[e], ke[e]),
+        className: C(he[e], Be[e]),
         children: a
     }) : /* @__PURE__ */ t("div", {
-        className: R({
-            [le[e]]: r !== "naked"
+        className: C({
+            [he[e]]: r !== "naked"
         }),
         children: a
     });
-}, qt = (param)=>{
+}, pi = (param)=>{
     let { video: e, src: o, srcSet: n, alt: r, backgroundVariant: a } = param;
-    return /* @__PURE__ */ t(we, {
+    return /* @__PURE__ */ t(Ie, {
         variant: a,
         children: /* @__PURE__ */ t("div", {
-            className: wt,
-            style: ce({
-                [Re.mediaBorderRadius]: "0px",
-                borderRadius: v.borderRadii.container,
+            className: Et,
+            style: ge({
+                [ze.mediaBorderRadius]: "0px",
+                borderRadius: x.borderRadii.container,
                 overflow: "hidden"
             }),
-            children: e || /* @__PURE__ */ t(Qe, {
+            children: e || /* @__PURE__ */ t(rt, {
                 dataAttributes: {
                     testid: "image"
                 },
@@ -208,7 +267,7 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             })
         })
     });
-}, Jt = {
+}, gi = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -228,54 +287,54 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
     error: {
         reset: "loading"
     }
-}, Qt = (e, o)=>Jt[e][o] || e, Ut = (param)=>{
+}, bi = (e, o)=>gi[e][o] || e, fi = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ t(Ot, {
+    return /* @__PURE__ */ t(qt, {
         color: e,
         size: 16,
         delay: "0"
     });
-}, Zt = (param)=>{
+}, vi = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ t(Pt, {
+    return /* @__PURE__ */ t(Qt, {
         color: e,
         size: 12
     });
-}, ei = (param)=>{
+}, ki = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ t(Ft, {
+    return /* @__PURE__ */ t(Jt, {
         color: e,
         size: 12
     });
-}, ti = (param)=>{
-    let { src: e, poster: o, ref: n, autoHeight: r, loop: a, autoPlay: p, dataAttributes: m } = param;
-    const { texts: l, t: s } = se(), d = T.useRef(null), x = T.useRef(!1), [c, g] = T.useReducer(Qt, process.env.NODE_ENV === "test" ? "playing" : "loading");
-    T.useEffect(()=>{
+}, xi = (param)=>{
+    let { src: e, poster: o, ref: n, autoHeight: r, loop: a, autoPlay: l, dataAttributes: c } = param;
+    const { texts: s, t: u } = pe(), d = N.useRef(null), v = N.useRef(!1), [m, h] = N.useReducer(bi, process.env.NODE_ENV === "test" ? "playing" : "loading");
+    N.useEffect(()=>{
         var _d_current;
-        return x.current = !1, (_d_current = d.current) === null || _d_current === void 0 ? void 0 : _d_current.load(), ()=>{
-            g("reset");
+        return v.current = !1, (_d_current = d.current) === null || _d_current === void 0 ? void 0 : _d_current.load(), ()=>{
+            h("reset");
         };
     }, [
         e
     ]);
-    const u = T.useMemo(()=>{
+    const g = N.useMemo(()=>{
         if (e === void 0) return;
-        const S = ()=>{
-            p === !1 && !x.current && (x.current = !0, g("pause"));
+        const f = ()=>{
+            l === !1 && !v.current && (v.current = !0, h("pause"));
         };
-        return /* @__PURE__ */ t(At, {
-            ref: Xt(d, n),
+        return /* @__PURE__ */ t(Yt, {
+            ref: li(d, n),
             src: e,
             poster: o,
             width: "100%",
             height: r ? void 0 : "100%",
             loop: a,
-            autoPlay: p,
-            dataAttributes: m,
-            onLoad: S,
-            onError: ()=>g("fail"),
-            onPause: ()=>g("pause"),
-            onPlay: ()=>g("play")
+            autoPlay: l,
+            dataAttributes: c,
+            onLoad: f,
+            onError: ()=>h("fail"),
+            onPause: ()=>h("pause"),
+            onPlay: ()=>h("play")
         });
     }, [
         n,
@@ -283,45 +342,45 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
         o,
         r,
         a,
-        p,
-        m
+        l,
+        c
     ]), y = ()=>{
-        const S = d.current;
-        S && (c === "playing" ? S.pause() : S.play().then(()=>g("play"), ()=>{}));
+        const f = d.current;
+        f && (m === "playing" ? f.pause() : f.play().then(()=>h("play"), ()=>{}));
     };
-    if (c === "error") return {
-        video: u
+    if (m === "error") return {
+        video: g
     };
-    const b = c === "loading", h = u ? {
+    const b = m === "loading", p = g ? {
         uncheckedProps: {
-            Icon: b && !We() ? Ut : Zt,
-            label: b ? "" : l.pauseIconButtonLabel || s(Dt)
+            Icon: b && !Ze() ? fi : vi,
+            label: b ? "" : s.pauseIconButtonLabel || u(Xt)
         },
         checkedProps: {
-            Icon: ei,
-            label: l.playIconButtonLabel || s(Tt)
+            Icon: ki,
+            label: s.playIconButtonLabel || u(Wt)
         },
         onChange: y,
-        disabled: We() ? !1 : b,
-        checked: c === "paused"
+        disabled: Ze() ? !1 : b,
+        checked: m === "paused"
     } : void 0;
     return {
-        video: u,
-        videoAction: h
+        video: g,
+        videoAction: p
     };
-}, ii = (param)=>{
+}, yi = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: n, buttonLink: r } = param;
     return /* @__PURE__ */ t("div", {
-        className: Ct[e],
-        children: /* @__PURE__ */ t(Kt, {
+        className: jt[e],
+        children: /* @__PURE__ */ t(si, {
             primaryButton: o,
             secondaryButton: n,
             link: r
         })
     });
-}, oi = (e)=>{
-    const o = He();
-    if (e.Icon) return /* @__PURE__ */ t(Gt, _object_spread_props(_object_spread({}, e), {
+}, Si = (e)=>{
+    const o = Le();
+    if (e.Icon) return /* @__PURE__ */ t(ni, _object_spread_props(_object_spread({}, e), {
         small: !0,
         "aria-label": e.label,
         type: "neutral",
@@ -331,7 +390,7 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
         "checkedProps",
         "uncheckedProps"
     ]);
-    return /* @__PURE__ */ t(_t, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ t(di, _object_spread_props(_object_spread({
         small: !0
     }, a), {
         checkedProps: _object_spread_props(_object_spread({}, n), {
@@ -345,35 +404,35 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             backgroundType: "transparent"
         })
     }));
-}, Ye = (param)=>{
-    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: p = {} } = param;
-    const { texts: m, t: l } = se(), s = r ? [
+}, et = (param)=>{
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: l = {} } = param;
+    const { texts: c, t: s } = pe(), u = r ? [
         ...r
     ] : [];
-    return o && s.push({
-        label: n || m.closeButtonLabel || l(Nt),
+    return o && u.push({
+        label: n || c.closeButtonLabel || s(_t),
         onPress: o,
-        Icon: Et
-    }), s.length === 0 ? /* @__PURE__ */ t(ae, {}) : /* @__PURE__ */ t(we, {
+        Icon: Ut
+    }), u.length === 0 ? /* @__PURE__ */ t(te, {}) : /* @__PURE__ */ t(Ie, {
         variant: a,
         children: /* @__PURE__ */ t("div", {
-            className: St,
-            style: p,
+            className: ot,
+            style: l,
             "data-testid": e,
-            children: s.map((d, x)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ t(oi, _object_spread({}, d), x) : d)
+            children: u.map((d, v)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ t(Si, _object_spread({}, d), v) : d)
         })
     });
-}, ri = (param)=>{
-    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: p, imageAlt: m = "", video: l, mediaAspectRatio: s, mediaPosition: d, mediaWidth: x, circledImage: c } = param;
-    const g = Le(s), u = e === "naked" && c ? {
+}, Ci = (param)=>{
+    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: l, imageAlt: c = "", video: s, mediaAspectRatio: u, mediaPosition: d, mediaWidth: v, circledImage: m } = param;
+    const h = Te(u), g = e === "naked" && m ? {
         circular: !0
     } : {
         width: "100%",
-        height: d === "top" && g === 0 ? void 0 : "100%"
+        height: d === "top" && h === 0 ? void 0 : "100%"
     }, b = (()=>{
-        if (l) return l;
+        if (s) return s;
         if (r !== void 0 || a !== void 0) {
-            const S = d === "left" || d === "right", H = {
+            const f = d === "left" || d === "right", B = {
                 fit: {
                     objectFit: "contain",
                     objectPosition: `bottom ${d}`
@@ -387,41 +446,41 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
                     objectPosition: "center"
                 }
             };
-            return /* @__PURE__ */ t(Qe, _object_spread(_object_spread_props(_object_spread({
+            return /* @__PURE__ */ t(rt, _object_spread(_object_spread_props(_object_spread({
                 src: r || "",
                 srcSet: a
-            }, u), {
+            }, g), {
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: m
-            }), S ? H[p] : {}));
+                alt: c
+            }), f ? B[l] : {}));
         }
         return null;
     })();
-    if (!b) return /* @__PURE__ */ t(ae, {});
-    const h = _object_spread({}, e === "naked" ? void 0 : ce({
-        [Re.mediaBorderRadius]: "0px"
+    if (!b) return /* @__PURE__ */ t(te, {});
+    const p = _object_spread({}, e === "naked" ? void 0 : ge({
+        [ze.mediaBorderRadius]: "0px"
     }));
-    return d === "top" ? /* @__PURE__ */ k(ae, {
+    return d === "top" ? /* @__PURE__ */ S(te, {
         children: [
-            /* @__PURE__ */ t(jt, {
-                aspectRatio: g,
-                style: h,
+            /* @__PURE__ */ t(ai, {
+                aspectRatio: h,
+                style: p,
                 children: b
             }),
-            /* @__PURE__ */ t(Be, {
+            /* @__PURE__ */ t(Ne, {
                 absolute: !0,
                 size: o,
                 asset: n,
                 type: e
             })
         ]
-    }) : /* @__PURE__ */ k(ae, {
+    }) : /* @__PURE__ */ S(te, {
         children: [
             /* @__PURE__ */ t("div", {
-                style: _object_spread_props(_object_spread({}, h), {
-                    width: x,
+                style: _object_spread_props(_object_spread({}, p), {
+                    width: v,
                     flexShrink: 0,
                     flexGrow: 0,
                     height: "100%",
@@ -429,7 +488,7 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
                 }),
                 children: b
             }),
-            d !== "right" && /* @__PURE__ */ t(Be, {
+            d !== "right" && /* @__PURE__ */ t(Ne, {
                 absolute: !0,
                 size: o,
                 asset: n,
@@ -437,77 +496,77 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             })
         ]
     });
-}, ni = (param)=>{
-    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: p, buttonLink: m, hasBackgroundImageOrVideo: l, footerVariant: s, footerBackgroundColor: d, footerDivider: x, externalVariant: c, overlayColor: g } = param;
-    const u = !!(a || p || m), y = !!(a && p && m), b = {
-        default: v.colors.divider,
-        brand: v.colors.dividerBrand,
-        negative: v.colors.dividerNegative,
-        media: v.colors.dividerBrand,
-        alternative: v.colors.divider
-    }[n], h = e === "naked", S = d || (s && s !== n ? s === "default" ? v.colors.backgroundContainer : c === "brand" || c === "media" || c === "negative" ? v.colors.backgroundContainerBrandOverBrand : v.colors.backgroundContainerBrand : void 0), H = x !== null && x !== void 0 ? x : !S;
-    return /* @__PURE__ */ k(we, {
-        variant: s || n,
+}, Bi = (param)=>{
+    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: l, buttonLink: c, hasBackgroundImageOrVideo: s, footerVariant: u, footerBackgroundColor: d, footerDivider: v, externalVariant: m, overlayColor: h } = param;
+    const g = !!(a || l || c), y = !!(a && l && c), b = {
+        default: x.colors.divider,
+        brand: x.colors.dividerBrand,
+        negative: x.colors.dividerNegative,
+        media: x.colors.dividerBrand,
+        alternative: x.colors.divider
+    }[n], p = e === "naked", f = d || (u && u !== n ? u === "default" ? x.colors.backgroundContainer : m === "brand" || m === "media" || m === "negative" ? x.colors.backgroundContainerBrandOverBrand : x.colors.backgroundContainerBrand : void 0), B = v !== null && v !== void 0 ? v : !f;
+    return /* @__PURE__ */ S(Ie, {
+        variant: u || n,
         children: [
-            /* @__PURE__ */ t(de, {}),
-            /* @__PURE__ */ k("div", {
+            /* @__PURE__ */ t(me, {}),
+            /* @__PURE__ */ S("div", {
                 style: {
-                    background: S || (l ? g : void 0),
+                    background: f || (s ? h : void 0),
                     position: "relative",
-                    backdropFilter: l ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: h ? 0 : v.borderRadii.container,
-                    borderBottomRightRadius: h ? 0 : v.borderRadii.container
+                    backdropFilter: s ? "blur(12px)" : void 0,
+                    borderBottomLeftRadius: p ? 0 : x.borderRadii.container,
+                    borderBottomRightRadius: p ? 0 : x.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ t("div", {
                         style: {
-                            borderTop: H ? `1px solid ${b}` : void 0,
-                            marginRight: h ? 16 : 0
+                            borderTop: B ? `1px solid ${b}` : void 0,
+                            marginRight: p ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ t("div", {
                         "data-testid": "footer",
-                        className: R({
-                            [le[o]]: !h,
-                            [Je[o]]: !h
+                        className: C({
+                            [he[o]]: !p,
+                            [it[o]]: !p
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: h ? 0 : void 0,
-                            paddingRight: h ? 16 : void 0
+                            paddingBottom: p ? 0 : void 0,
+                            paddingRight: p ? 16 : void 0
                         },
-                        children: /* @__PURE__ */ k(Xe, {
+                        children: /* @__PURE__ */ S(Qe, {
                             space: 16,
                             children: [
                                 r,
-                                u && // @FIXME: We should use the ButtonGroup component
+                                g && // @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
-                                (y ? /* @__PURE__ */ k(Xe, {
+                                (y ? /* @__PURE__ */ S(Qe, {
                                     space: 16,
                                     children: [
-                                        /* @__PURE__ */ k(Ke, {
+                                        /* @__PURE__ */ S(Ue, {
                                             space: "between",
                                             alignItems: "center",
                                             children: [
                                                 a,
-                                                p
+                                                l
                                             ]
                                         }),
                                         /* @__PURE__ */ t("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: m
+                                            children: c
                                         })
                                     ]
-                                }) : /* @__PURE__ */ k(Ke, {
+                                }) : /* @__PURE__ */ S(Ue, {
                                     space: "between",
                                     alignItems: "center",
                                     children: [
                                         a,
-                                        p,
-                                        m
+                                        l,
+                                        c
                                     ]
                                 }))
                             ]
@@ -517,38 +576,38 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             })
         ]
     });
-}, ai = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: n, touchableRef: r, touchableProps: a, size: p, variant: m, headline: l, title: s, titleAs: d = "h3", titleLinesMax: x, pretitle: c, pretitleAs: g, pretitleLinesMax: u, subtitle: y, subtitleLinesMax: b, description: h, descriptionLinesMax: S, withTextShadow: H } = param;
-    const { textPresets: i, colorValues: f } = se(), F = He(), I = typeof s == "string" ? {
-        text: s
-    } : s, w = typeof c == "string" ? {
-        text: c
-    } : c, P = {
+}, Ri = (param)=>{
+    let { type: e, hasCustomBackground: o, headlineRef: n, touchableRef: r, touchableProps: a, size: l, variant: c, headline: s, title: u, titleAs: d = "h3", titleLinesMax: v, pretitle: m, pretitleAs: h, pretitleLinesMax: g, subtitle: y, subtitleLinesMax: b, description: p, descriptionLinesMax: f, withTextShadow: B } = param;
+    const { textPresets: i, colorValues: k } = pe(), F = Le(), I = typeof u == "string" ? {
+        text: u
+    } : u, H = typeof m == "string" ? {
+        text: m
+    } : m, E = {
         hyphens: "auto"
-    }, K = {
+    }, Y = {
         default: {
-            pretitle: f.textPrimary,
-            title: f.textPrimary,
-            subtitle: f.textPrimary,
-            description: f.textSecondary
+            pretitle: k.textPrimary,
+            title: k.textPrimary,
+            subtitle: k.textPrimary,
+            description: k.textSecondary
         },
         brand: {
-            pretitle: f.textPrimaryBrand,
-            title: f.textPrimaryBrand,
-            subtitle: f.textPrimaryBrand,
-            description: f.textSecondaryBrand
+            pretitle: k.textPrimaryBrand,
+            title: k.textPrimaryBrand,
+            subtitle: k.textPrimaryBrand,
+            description: k.textSecondaryBrand
         },
         negative: {
-            pretitle: f.textPrimaryNegative,
-            title: f.textPrimaryNegative,
-            subtitle: f.textPrimaryNegative,
-            description: f.textSecondaryNegative
+            pretitle: k.textPrimaryNegative,
+            title: k.textPrimaryNegative,
+            subtitle: k.textPrimaryNegative,
+            description: k.textSecondaryNegative
         },
         media: {
-            pretitle: f.textPrimaryMedia,
-            title: f.textPrimaryMedia,
-            subtitle: f.textPrimaryMedia,
-            description: e === "cover" && o ? f.textPrimaryMedia : f.textSecondaryMedia
+            pretitle: k.textPrimaryMedia,
+            title: k.textPrimaryMedia,
+            subtitle: k.textPrimaryMedia,
+            description: e === "cover" && o ? k.textPrimaryMedia : k.textSecondaryMedia
         }
     }, D = {
         snap: {
@@ -641,20 +700,20 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
                 weight: "regular"
             }
         }
-    }, E = K[m] || K[F] || K.default, M = D[p] || D.default, $ = H ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, N = a ? (I === null || I === void 0 ? void 0 : I.text) && (w === null || w === void 0 ? void 0 : w.text) ? Se(d, g) ? "title" : "pretitle" : (I === null || I === void 0 ? void 0 : I.text) ? "title" : (w === null || w === void 0 ? void 0 : w.text) ? "pretitle" : l ? "headline" : y ? "subtitle" : h ? "description" : null : null, z = (Y, q, te)=>Y ? te ? /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, q), {
-            children: /* @__PURE__ */ t(ye, _object_spread_props(_object_spread({
+    }, M = Y[c] || Y[F] || Y.default, $ = D[l] || D.default, j = B ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, T = a ? (I === null || I === void 0 ? void 0 : I.text) && (H === null || H === void 0 ? void 0 : H.text) ? we(d, h) ? "title" : "pretitle" : (I === null || I === void 0 ? void 0 : I.text) ? "title" : (H === null || H === void 0 ? void 0 : H.text) ? "pretitle" : s ? "headline" : y ? "subtitle" : p ? "description" : null : null, z = (J, Q, oe)=>J ? oe ? /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, Q), {
+            children: /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
                 maybe: !0
             }, a), {
                 ref: r,
-                className: R(Z, It),
-                children: Y
+                className: C(K, Pt),
+                children: J
             }))
-        })) : /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, q), {
-            children: Y
-        })) : null, W = z(l && typeof l == "string" ? /* @__PURE__ */ t(Vt, {
+        })) : /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, Q), {
+            children: J
+        })) : null, q = z(s && typeof s == "string" ? /* @__PURE__ */ t(Kt, {
         type: "promo",
-        children: l
-    }) : l, // Read order 2. Visual order 1
+        children: s
+    }) : s, // Read order 2. Visual order 1
     {
         style: {
             order: 1,
@@ -662,24 +721,24 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
         },
         "data-testid": "headline",
         ref: n
-    }, N === "headline"), j = z((w === null || w === void 0 ? void 0 : w.text) && /* @__PURE__ */ t(ne, _object_spread_props(_object_spread({}, P, M.pretitle), {
-        as: g || "p",
-        truncate: u,
-        color: E.pretitle,
-        textShadow: $,
-        "aria-label": w === null || w === void 0 ? void 0 : w["aria-label"],
-        children: w.text
+    }, T === "headline"), G = z((H === null || H === void 0 ? void 0 : H.text) && /* @__PURE__ */ t(ue, _object_spread_props(_object_spread({}, E, $.pretitle), {
+        as: h || "p",
+        truncate: g,
+        color: M.pretitle,
+        textShadow: j,
+        "aria-label": H === null || H === void 0 ? void 0 : H["aria-label"],
+        children: H.text
     })), {
         style: {
             paddingBottom: 4,
             order: 2
         },
         "data-testid": "pretitle"
-    }, N === "pretitle"), G = z((I === null || I === void 0 ? void 0 : I.text) && /* @__PURE__ */ t(ne, _object_spread_props(_object_spread({}, P, M.title), {
+    }, T === "pretitle"), P = z((I === null || I === void 0 ? void 0 : I.text) && /* @__PURE__ */ t(ue, _object_spread_props(_object_spread({}, E, $.title), {
         as: d,
-        truncate: x,
-        color: E.title,
-        textShadow: $,
+        truncate: v,
+        color: M.title,
+        textShadow: j,
         "aria-label": I === null || I === void 0 ? void 0 : I["aria-label"],
         children: I.text
     })), // Read order: 1 or 3. Visual order 3
@@ -689,11 +748,11 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             order: 3
         },
         "data-testid": "title"
-    }, N === "title"), pe = z(y && /* @__PURE__ */ t(ne, _object_spread_props(_object_spread({}, P, M.subtitle), {
+    }, T === "title"), be = z(y && /* @__PURE__ */ t(ue, _object_spread_props(_object_spread({}, E, $.subtitle), {
         as: "p",
         truncate: b,
-        color: E.subtitle,
-        textShadow: $,
+        color: M.subtitle,
+        textShadow: j,
         children: y
     })), // Read order: 4. Visual order 4
     {
@@ -702,12 +761,12 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             order: 4
         },
         "data-testid": "subtitle"
-    }, N === "subtitle"), ue = z(h && /* @__PURE__ */ t(ne, _object_spread_props(_object_spread({}, P, M.description), {
+    }, T === "subtitle"), fe = z(p && /* @__PURE__ */ t(ue, _object_spread_props(_object_spread({}, E, $.description), {
         as: "p",
-        truncate: S,
-        color: E.description,
-        textShadow: $,
-        children: h
+        truncate: f,
+        color: M.description,
+        textShadow: j,
+        children: p
     })), // Read order: 5. Visual order 5
     {
         style: {
@@ -715,79 +774,97 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
             order: 5
         },
         "data-testid": "description"
-    }, N === "description"), [he, ee] = I && Se(d, g) ? [
-        G,
-        j
-    ] : [
-        j,
+    }, T === "description"), [ve, ie] = I && we(d, h) ? [
+        P,
         G
+    ] : [
+        G,
+        P
     ];
-    return /* @__PURE__ */ k("div", {
+    return /* @__PURE__ */ S("div", {
         style: {
             display: "flex",
             flexDirection: "column"
         },
         children: [
-            he,
-            W,
-            ee,
-            pe,
-            ue
+            ve,
+            q,
+            ie,
+            be,
+            fe
         ]
     });
-}, di = (param)=>{
-    let { children: e, isTouchable: o, touchableAriaLabel: n, ariaLabeledByProp: r, ariaDescriptionProp: a, ariaDescribedByProp: p, touchableProps: m, segregateTouchableContent: l, hasTouchableInContent: s, overlayClassname: d, contentStyle: x, contentRadiusStyle: c } = param;
-    const g = o && (!l || s), u = /**
+}, Hi = (param)=>{
+    let { checkbox: e, switch: o, radioValue: n, checked: r, onChange: a, children: l, isTouchable: c, touchableAriaLabel: s, ariaLabeledByProp: u, ariaDescriptionProp: d, ariaDescribedByProp: v, touchableProps: m, segregateTouchableContent: h, hasTouchableInContent: g, overlayClassname: y, contentStyle: b, contentRadiusStyle: p } = param;
+    const f = c && (!h || g), 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__ */ k("div", {
-        role: !l && (m.href || m.to) ? "text" : void 0,
-        className: Lt,
-        style: _object_spread({}, x, c),
+     */ /* @__PURE__ */ S("div", {
+        role: !h && (m.href || m.to) ? "text" : void 0,
+        className: Mt,
+        style: _object_spread({}, b, p),
         children: [
-            g && /* @__PURE__ */ t("div", {
-                className: d
+            f && /* @__PURE__ */ t("div", {
+                className: y
             }),
-            e
+            l
         ]
     });
-    return o && l ? s ? /* @__PURE__ */ t("div", {
-        className: R(Z, xe),
-        children: u
-    }) : /* @__PURE__ */ k("div", {
+    return e || o || n !== void 0 ? /* @__PURE__ */ t(mi, _object_spread_props(_object_spread({
+        maybe: !0
+    }, e ? {
+        checkbox: e
+    } : o ? {
+        switch: o
+    } : {
+        radioValue: n !== null && n !== void 0 ? n : ""
+    }), {
+        checked: r,
+        onChange: a,
+        "aria-label": s,
+        "aria-labelledby": u,
+        "aria-description": d,
+        "aria-describedby": v,
+        className: C(K, ce),
+        style: p,
+        children: B
+    })) : c && h ? g ? /* @__PURE__ */ t("div", {
+        className: C(K, ce),
+        children: B
+    }) : /* @__PURE__ */ S("div", {
         style: {
             position: "relative"
         },
         children: [
-            /* @__PURE__ */ t(ye, _object_spread_props(_object_spread({
-                "aria-label": n,
+            /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
+                "aria-label": s,
                 maybe: !0
             }, m), {
-                className: R(Z, xe, zt),
+                className: C(K, ce, $t),
                 children: /* @__PURE__ */ t("div", {
-                    className: R(d),
-                    style: c
+                    className: C(y),
+                    style: p
                 })
             })),
-            u
+            B
         ]
-    }) : /* @__PURE__ */ t(ye, _object_spread_props(_object_spread({
+    }) : /* @__PURE__ */ t(He, _object_spread_props(_object_spread({
         maybe: !0,
-        "aria-label": o ? n : void 0,
-        "aria-labelledby": o ? r : void 0,
-        "aria-description": o ? a : void 0,
-        "aria-describedby": o ? p : void 0,
-        className: R(Z, xe)
+        "aria-label": c ? s : void 0,
+        "aria-labelledby": c ? u : void 0,
+        "aria-description": c ? d : void 0,
+        "aria-describedby": c ? v : void 0,
+        className: C(K, ce)
     }, m), {
-        children: u
+        children: B
     }));
-}, li = [
-    v.colors.cardContentOverlay,
-    v.colors.cardFooterOverlay
-], si = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, qe = (e, o)=>e.replace(si, (n, r)=>Wt(o, parseFloat(r))), Ei = /*#__PURE__*/ T.forwardRef((_param, it)=>{
-    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: p = "", imageFit: m = "fill-center", videoSrc: l, videoRef: s, mediaAspectRatio: d = "auto", mediaPosition: x = "top", mediaWidth: c = 150, circledImage: g, asset: u, headline: y, title: b, titleAs: h = "h3", titleLinesMax: S, pretitle: H, pretitleAs: i, pretitleLinesMax: f, subtitle: F, subtitleLinesMax: I, description: w, descriptionLinesMax: P, dataAttributes: K, variant: D, width: E, height: M, aspectRatio: $, slot: N, slotAlignment: z = "content", buttonPrimary: W, buttonSecondary: j, buttonLink: G, showFooter: pe, footerBackgroundColor: ue, footerVariant: he, footerSlot: ee, footerDivider: Y, topActions: q, onClose: te, closeButtonLabel: Ue, "aria-label": ze, "aria-labelledby": me, "aria-description": Ce, "aria-describedby": Ie, gradientOverlayColor: ie, videoLoop: Ze, videoAutoPlay: et, videoDataAttributes: tt, segregateTouchableContent: ge = !1, touchableAriaLabel: Ne } = _param, J = _object_without_properties(_param, [
+}, wi = [
+    x.colors.cardContentOverlay,
+    x.colors.cardFooterOverlay
+], Ni = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, tt = (e, o)=>e.replace(Ni, (n, r)=>ci(o, parseFloat(r))), lo = /*#__PURE__*/ N.forwardRef((_param, ct)=>{
+    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: l = "", imageFit: c = "fill-center", videoSrc: s, videoRef: u, mediaAspectRatio: d = "auto", mediaPosition: v = "top", mediaWidth: m = 150, circledImage: h, asset: g, headline: y, title: b, titleAs: p = "h3", titleLinesMax: f, pretitle: B, pretitleAs: i, pretitleLinesMax: k, subtitle: F, subtitleLinesMax: I, description: H, descriptionLinesMax: E, dataAttributes: Y, variant: D, width: M, height: $, aspectRatio: j, slot: T, slotAlignment: z = "content", buttonPrimary: q, buttonSecondary: G, buttonLink: P, showFooter: be, footerBackgroundColor: fe, footerVariant: ve, footerSlot: ie, footerDivider: J, topActions: Q, onClose: oe, closeButtonLabel: at, "aria-label": De, "aria-labelledby": ke, "aria-description": Ve, "aria-describedby": Ae, gradientOverlayColor: re, videoLoop: nt, videoAutoPlay: dt, videoDataAttributes: lt, selected: st, checkbox: ae, switch: ne, radioValue: de, segregateTouchableContent: xe = !1, touchableAriaLabel: Oe } = _param, U = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -839,196 +916,206 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
         "videoLoop",
         "videoAutoPlay",
         "videoDataAttributes",
+        "selected",
+        "checkbox",
+        "switch",
+        "radioValue",
         "segregateTouchableContent",
         "touchableAriaLabel"
     ]);
-    const { text: Te, ref: ot } = Ge(), { text: De, ref: rt } = Ge(), nt = T.useRef(null), V = !!(J.href || J.to || J.onPress), Ve = !!(ge && !Ne && (b || H || y || F || w)), be = !!(W || j || G), { colorValues: Ae } = se(), Oe = e === "media" || e === "naked", at = Oe && (r !== void 0 || a !== void 0), Fe = Oe && l !== void 0, L = at || Fe, C = e === "naked", B = L ? x : "top", Pe = e === "naked" && g ? 1 : d, fe = e === "cover" && (r !== void 0 || a !== void 0), oe = e === "cover" && l !== void 0, Ee = !!n || fe || oe, _ = fe || oe, dt = Fe || oe, { video: Me, videoAction: ve } = ti({
-        src: dt ? l : void 0,
+    const { isChecked: Fe, toggleChecked: ut } = ui(ne || ae), mt = ri(), _ = !!ne || !!ae || de !== void 0, ht = ne || ae ? Fe : de !== void 0 ? mt.selectedValue === de : st, { text: Ee, ref: pt } = Je(), { text: Me, ref: gt } = Je(), bt = N.useRef(null), V = _ || !!(U.href || U.to || U.onPress), $e = !!(!_ && xe && !Oe && (b || B || y || F || H)), ye = !!(q || G || P), { colorValues: je } = pe(), Ge = e === "media" || e === "naked", ft = Ge && (r !== void 0 || a !== void 0), Pe = Ge && s !== void 0, w = ft || Pe, L = e === "naked", R = w ? v : "top", _e = e === "naked" && h ? 1 : d, Se = e === "cover" && (r !== void 0 || a !== void 0), le = e === "cover" && s !== void 0, We = !!n || Se || le, W = Se || le, vt = Pe || le, { video: Xe, videoAction: Ce } = xi({
+        src: vt && !_ ? s : void 0,
         poster: r,
-        ref: s,
-        autoHeight: e === "cover" || B !== "top" ? !1 : Le(Pe) === 0,
-        loop: Ze,
-        autoPlay: et,
-        dataAttributes: tt
-    }), Q = He(), lt = D ? _e(D) : Q, A = D && _e(D) || (e === "cover" && Ee ? "media" : "default"), st = A === "brand" ? ft : vt, O = pe && (be || !!ee) || be && V, $e = !O && be, re = ((q === null || q === void 0 ? void 0 : q.length) || 0) + (te ? 1 : 0), je = ve ? re + 1 : re, ct = u && !(L && B === "left"), pt = e !== "cover" && je > 0 && !ct && !y, U = e === "cover" || e === "data" && o === "display", X = v.borderRadii.container, ut = fe || oe ? "transparent" : n || (A === "media" ? Q === "brand" || Q === "media" || Q === "negative" ? v.colors.backgroundContainerBrandOverBrand : v.colors.backgroundBrand : A === "alternative" ? v.colors.backgroundAlternative : void 0), ht = Ne || ze || (me ? void 0 : (b && Se(h, i) ? [
+        ref: u,
+        autoHeight: e === "cover" || R !== "top" ? !1 : Te(_e) === 0,
+        loop: nt,
+        autoPlay: dt,
+        dataAttributes: lt
+    }), Z = Le(), kt = D ? Re(D) : Z, A = D && Re(D) || (e === "cover" && We ? "media" : "default"), xt = A === "brand" ? Nt : zt, O = be && (ye || !!ie) || ye && V, Ke = !O && ye, se = _ ? 1 : ((Q === null || Q === void 0 ? void 0 : Q.length) || 0) + (oe ? 1 : 0), Ye = Ce ? se + 1 : se, yt = g && !(w && R === "left"), St = e !== "cover" && Ye > 0 && !yt && !y, ee = e === "cover" || e === "data" && o === "display", X = x.borderRadii.container, Ct = Se || le ? "transparent" : n || (A === "media" ? Z === "brand" || Z === "media" || Z === "negative" ? x.colors.backgroundContainerBrandOverBrand : x.colors.backgroundBrand : A === "alternative" ? x.colors.backgroundAlternative : void 0), Bt = Oe || De || (ke ? void 0 : (b && we(p, i) ? [
         b,
-        p,
-        De,
-        H,
+        l,
+        Me,
+        B,
         F,
-        w,
-        Te
-    ] : [
         H,
-        De,
+        Ee
+    ] : [
+        B,
+        Me,
         b,
-        p,
+        l,
         F,
-        w,
-        Te
-    ]).filter(Boolean).join(" ")), mt = ()=>ie === "transparent" ? [
+        H,
+        Ee
+    ]).filter(Boolean).join(" ")), Rt = ()=>re === "transparent" ? [
             "transparent",
             "transparent"
-        ] : ie ? [
-            qe(Ae.cardContentOverlay, ie),
-            qe(Ae.cardFooterOverlay, ie)
-        ] : li, [gt, bt] = mt();
-    return /* @__PURE__ */ k(Yt, {
-        "aria-label": V ? void 0 : ze,
-        "aria-labelledby": V ? void 0 : me,
-        "aria-description": V ? void 0 : Ce,
-        "aria-describedby": V ? void 0 : Ie,
+        ] : re ? [
+            tt(je.cardContentOverlay, re),
+            tt(je.cardFooterOverlay, re)
+        ] : wi, [Ht, wt] = Rt();
+    return /* @__PURE__ */ S(hi, {
+        "aria-label": V ? void 0 : De,
+        "aria-labelledby": V ? void 0 : ke,
+        "aria-description": V ? void 0 : Ve,
+        "aria-describedby": V ? void 0 : Ae,
         type: e,
         size: o,
-        dataAttributes: K,
-        ref: it,
+        dataAttributes: Y,
+        ref: ct,
         variant: A,
-        width: E,
-        height: M,
-        aspectRatio: $,
-        backgroundColor: ut,
+        selected: ht,
+        width: M,
+        height: $,
+        aspectRatio: j,
+        backgroundColor: Ct,
         children: [
-            _ && /* @__PURE__ */ t(qt, {
-                video: Me,
+            W && /* @__PURE__ */ t(pi, {
+                video: Xe,
                 src: r,
                 srcSet: a,
-                alt: p,
-                backgroundVariant: lt
+                alt: l,
+                backgroundVariant: kt
             }),
-            ve && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
+            Ce && // 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__ */ t(Ye, {
+                children: /* @__PURE__ */ t(et, {
                     testid: "videoAction",
                     variant: "media",
                     actions: [
-                        ve
+                        Ce
                     ],
                     containerStyles: {
                         position: "absolute",
                         top: 16,
-                        left: B === "left" ? typeof c == "number" ? `calc(${c}px - 48px)` : `calc(${c} - 48px)` : "auto",
-                        right: B !== "left" ? re * 48 + 16 : "auto"
+                        left: R === "left" ? typeof m == "number" ? `calc(${m}px - 48px)` : `calc(${m} - 48px)` : "auto",
+                        right: R !== "left" ? se * 48 + 16 : "auto"
                     }
                 })
             }),
-            /* @__PURE__ */ k(di, {
+            /* @__PURE__ */ S(Hi, {
+                checkbox: ae,
+                switch: ne,
+                radioValue: de,
+                checked: Fe,
+                onChange: ut,
                 isTouchable: V,
-                touchableAriaLabel: ht,
-                ariaLabeledByProp: me,
-                ariaDescriptionProp: Ce,
-                ariaDescribedByProp: Ie,
-                touchableProps: J,
-                segregateTouchableContent: ge,
-                hasTouchableInContent: Ve,
-                overlayClassname: st,
+                touchableAriaLabel: Bt,
+                ariaLabeledByProp: ke,
+                ariaDescriptionProp: Ve,
+                ariaDescribedByProp: Ae,
+                touchableProps: U,
+                segregateTouchableContent: _ ? !1 : xe,
+                hasTouchableInContent: $e,
+                overlayClassname: xt,
                 contentStyle: {
-                    flexDirection: B === "top" ? "column" : B === "left" ? "row" : "row-reverse"
+                    flexDirection: R === "top" ? "column" : R === "left" ? "row" : "row-reverse"
                 },
                 contentRadiusStyle: {
-                    borderTopLeftRadius: C && !L ? 0 : `calc(${X} - 1px)`,
-                    borderTopRightRadius: C && !L ? 0 : `calc(${X} - 1px)`,
-                    borderBottomLeftRadius: O || C ? 0 : `calc(${X} - 1px)`,
-                    borderBottomRightRadius: O || C ? 0 : `calc(${X} - 1px)`
+                    borderTopLeftRadius: L && !w ? 0 : `calc(${X} - 1px)`,
+                    borderTopRightRadius: L && !w ? 0 : `calc(${X} - 1px)`,
+                    borderBottomLeftRadius: O || L ? 0 : `calc(${X} - 1px)`,
+                    borderBottomRightRadius: O || L ? 0 : `calc(${X} - 1px)`
                 },
                 children: [
-                    L && /* @__PURE__ */ t(ri, {
+                    w && /* @__PURE__ */ t(Ci, {
                         type: e,
                         size: o,
-                        mediaAspectRatio: Pe,
-                        mediaPosition: B,
-                        asset: u,
-                        video: Me,
-                        imageFit: m,
+                        mediaAspectRatio: _e,
+                        mediaPosition: R,
+                        asset: g,
+                        video: Xe,
+                        imageFit: c,
                         imageSrc: r,
                         imageSrcSet: a,
-                        imageAlt: p,
-                        mediaWidth: c,
-                        circledImage: g
+                        imageAlt: l,
+                        mediaWidth: m,
+                        circledImage: h
                     }),
-                    /* @__PURE__ */ k("div", {
-                        "aria-hidden": V && !ge,
+                    /* @__PURE__ */ S("div", {
+                        "aria-hidden": V && !_ && !xe,
                         "data-testid": "body",
-                        className: R(Z, {
-                            [ke[o]]: !!u && e !== "naked" && (!L || B === "right")
+                        className: C(K, {
+                            [Be[o]]: !!g && e !== "naked" && (!w || R === "right")
                         }),
                         children: [
-                            (!L || B === "right") && /* @__PURE__ */ t(Be, {
+                            (!w || R === "right") && /* @__PURE__ */ t(Ne, {
                                 size: o,
-                                asset: u,
+                                asset: g,
                                 type: e
                             }),
-                            U && /* @__PURE__ */ t(de, {
-                                minHeight: e === "cover" && je > 0 && !u ? 56 : 0
+                            ee && /* @__PURE__ */ t(me, {
+                                minHeight: e === "cover" && Ye > 0 && !g ? 56 : 0
                             }),
-                            /* @__PURE__ */ k("div", {
-                                className: R(le[o], Je[o], ke[o]),
+                            /* @__PURE__ */ S("div", {
+                                className: C(he[o], it[o], Be[o]),
                                 style: {
                                     display: "flex",
                                     flexDirection: "column",
-                                    height: U ? void 0 : "100%",
-                                    background: _ ? gt : void 0,
+                                    height: ee ? void 0 : "100%",
+                                    background: W ? Ht : void 0,
                                     // padding overrides for specific cases
-                                    paddingTop: U && _ ? 40 : u || C && B !== "top" ? 16 : C && !L ? 0 : void 0,
-                                    paddingLeft: C && (B !== "left" || !L) ? 0 : void 0,
-                                    paddingRight: C && B !== "right" ? 16 : void 0,
-                                    paddingBottom: O ? 16 : C ? 0 : void 0,
+                                    paddingTop: ee && W ? 40 : g || L && R !== "top" ? 16 : L && !w ? 0 : void 0,
+                                    paddingLeft: L && (R !== "left" || !w) ? 0 : void 0,
+                                    paddingRight: L && R !== "right" ? 16 : void 0,
+                                    paddingBottom: O ? 16 : L ? 0 : void 0,
                                     borderBottomLeftRadius: O ? 0 : X,
                                     borderBottomRightRadius: O ? 0 : X
                                 },
                                 children: [
-                                    /* @__PURE__ */ k("div", {
-                                        className: xt,
+                                    /* @__PURE__ */ S("div", {
+                                        className: Lt,
                                         children: [
                                             /* @__PURE__ */ t("div", {
-                                                className: kt,
-                                                children: /* @__PURE__ */ t(ai, _object_spread({
+                                                className: It,
+                                                children: /* @__PURE__ */ t(Ri, _object_spread({
                                                     type: e,
-                                                    hasCustomBackground: Ee,
-                                                    headlineRef: rt,
+                                                    hasCustomBackground: We,
+                                                    headlineRef: gt,
                                                     variant: A,
                                                     size: o,
                                                     headline: y,
-                                                    pretitle: H,
+                                                    pretitle: B,
                                                     pretitleAs: i,
-                                                    pretitleLinesMax: f,
+                                                    pretitleLinesMax: k,
                                                     title: b,
-                                                    titleAs: h,
-                                                    titleLinesMax: S,
+                                                    titleAs: p,
+                                                    titleLinesMax: f,
                                                     subtitle: F,
                                                     subtitleLinesMax: I,
-                                                    description: w,
-                                                    descriptionLinesMax: P,
-                                                    withTextShadow: _
-                                                }, Ve ? {
-                                                    touchableRef: nt,
-                                                    touchableProps: J
+                                                    description: H,
+                                                    descriptionLinesMax: E,
+                                                    withTextShadow: W
+                                                }, $e ? {
+                                                    touchableRef: bt,
+                                                    touchableProps: U
                                                 } : {}))
                                             }),
-                                            pt && /* @__PURE__ */ t("div", {
+                                            St && /* @__PURE__ */ t("div", {
                                                 style: {
                                                     flexShrink: 0,
                                                     flexGrow: 0,
-                                                    width: re * 48 - // required space depends on the card padding
+                                                    width: se * 48 - // required space depends on the card padding
                                                     (e === "naked" ? 0 : o === "display" ? 24 : 16) - //
                                                     8
                                                 }
                                             })
                                         ]
                                     }),
-                                    !U && z === "bottom" && /* @__PURE__ */ t(de, {}),
-                                    N && /* @__PURE__ */ t("div", {
-                                        ref: ot,
+                                    !ee && z === "bottom" && /* @__PURE__ */ t(me, {}),
+                                    T && /* @__PURE__ */ t("div", {
+                                        ref: pt,
                                         "data-testid": "slot",
-                                        className: R(z === "space-between" && yt),
-                                        children: N
+                                        className: C(z === "space-between" && Tt),
+                                        children: T
                                     }),
-                                    !U && z === "content" && $e && /* @__PURE__ */ t(de, {}),
-                                    $e && /* @__PURE__ */ t(ii, {
+                                    !ee && z === "content" && Ke && /* @__PURE__ */ t(me, {}),
+                                    Ke && /* @__PURE__ */ t(yi, {
                                         size: o,
-                                        buttonPrimary: W,
-                                        buttonSecondary: j,
-                                        buttonLink: G
+                                        buttonPrimary: q,
+                                        buttonSecondary: G,
+                                        buttonLink: P
                                     })
                                 ]
                             })
@@ -1036,28 +1123,28 @@ const Yt = /*#__PURE__*/ T.forwardRef((param, g)=>{
                     })
                 ]
             }),
-            O && /* @__PURE__ */ t(ni, {
+            O && /* @__PURE__ */ t(Bi, {
                 type: e,
                 variant: A,
-                footerVariant: he,
-                footerBackgroundColor: ue,
-                footerDivider: Y,
+                footerVariant: ve,
+                footerBackgroundColor: fe,
+                footerDivider: J,
                 size: o,
-                footerSlot: ee,
-                buttonPrimary: W,
-                buttonSecondary: j,
-                buttonLink: G,
-                hasBackgroundImageOrVideo: _,
-                externalVariant: Q,
-                overlayColor: bt
+                footerSlot: ie,
+                buttonPrimary: q,
+                buttonSecondary: G,
+                buttonLink: P,
+                hasBackgroundImageOrVideo: W,
+                externalVariant: Z,
+                overlayColor: wt
             }),
-            /* @__PURE__ */ t(Ye, {
-                onClose: te,
-                closeButtonLabel: Ue,
-                actions: q,
-                variant: _ || L && B !== "left" ? "media" : A
+            /* @__PURE__ */ t(et, {
+                onClose: oe,
+                closeButtonLabel: at,
+                actions: Q,
+                variant: W || w && R !== "left" ? "media" : A
             })
         ]
     });
 });
-export { oi as CardActionIconButton, Ut as CardActionSpinner, Ei as InternalCard, Ye as TopActions, ti as useVideoWithControls };
+export { Si as CardActionIconButton, fi as CardActionSpinner, mi as CardWithControl, lo as InternalCard, et as TopActions, ui as useControlState, xi as useVideoWithControls };