@telefonica/mistica 16.30.0 → 16.31.0

package/dist/card.js

@@ -11,43 +11,43 @@ function _export(target, all) {
 }
 _export(exports, {
     CardActionIconButton: function() {
-        return xa;
+        return Ta;
     },
     CardActionSpinner: function() {
-        return ba;
+        return wa;
     },
     CardActionsGroup: function() {
-        return de;
+        return oe;
     },
     DataCard: function() {
-        return ir;
+        return sr;
     },
     DisplayDataCard: function() {
-        return sr;
+        return hr;
     },
     DisplayMediaCard: function() {
-        return or;
+        return cr;
     },
     MediaCard: function() {
-        return rr;
+        return tr;
     },
     NakedCard: function() {
-        return tr;
+        return nr;
     },
     PosterCard: function() {
-        return lr;
+        return vr;
     },
     SmallNakedCard: function() {
-        return dr;
+        return or;
     },
     SnapCard: function() {
-        return nr;
+        return lr;
     },
     useInnerText: function() {
-        return O;
+        return F;
     },
     useVideoWithControls: function() {
-        return He;
+        return $e;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -205,24 +205,24 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const O = ()=>{
-    const [a, r] = _react.useState(""), t = _react.useCallback((n)=>{
+const F = ()=>{
+    const [a, r] = _react.useState(""), d = _react.useCallback((n)=>{
         n && r((process.env.NODE_ENV === "test" ? n.textContent : n.innerText) || "");
     }, []);
     return {
         text: a,
-        ref: t
+        ref: d
     };
-}, Ge = (a, r, t)=>{
-    const { texts: n, t: c } = (0, _hooks.useTheme)(), i = a ? [
+}, Xe = (a, r, d)=>{
+    const { texts: n, t: h } = (0, _hooks.useTheme)(), t = a ? [
         ...a
     ] : [];
-    return r && i.push({
-        label: t || n.closeButtonLabel || c(_texttokens.closeButtonLabel),
+    return r && t.push({
+        label: d || n.closeButtonLabel || h(_texttokens.closeButtonLabel),
         onPress: r,
         Icon: _iconcloseregular.default
-    }), i;
-}, xa = (a)=>{
+    }), t;
+}, Ta = (a)=>{
     const r = (0, _themevariantcontext.useThemeVariant)();
     return a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, a), {
         "aria-label": a.label,
@@ -242,10 +242,10 @@ const O = ()=>{
         }),
         small: !0
     }));
-}, de = (param)=>{
-    let { actions: a, padding: r = 16, onClose: t, variant: n = "default", closeButtonLabel: c } = param;
-    const i = Ge(a, t, c);
-    return i.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+}, oe = (param)=>{
+    let { actions: a, padding: r = 16, onClose: d, variant: n = "default", closeButtonLabel: h } = param;
+    const t = Xe(a, d, h);
+    return t.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: n,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: {
@@ -259,40 +259,44 @@ const O = ()=>{
                 dataAttributes: {
                     testid: "topActions"
                 },
-                children: i.map((s, o)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(xa, _object_spread({}, s), o) : s)
+                children: t.map((s, o)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Ta, _object_spread({}, s), o) : s)
             })
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, Na = (a)=>a ? typeof a == "number" ? a : ({
+}, Ra = (a)=>a ? typeof a == "number" ? a : ({
         "1:1": 1,
         "16:9": 16 / 9,
         "7:10": 7 / 10,
         "9:10": 9 / 10,
         auto: 0
-    })[a] : 0, J = /*#__PURE__*/ _react.forwardRef((param, s)=>{
-    let { children: a, width: r, height: t, aspectRatio: n, dataAttributes: c, className: i, "aria-label": d } = param;
-    const o = r && t ? void 0 : Na(n);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c)), {
-        ref: s,
-        "aria-label": d,
-        className: (0, _classnames.default)(i, _cardcssmistica.cardContainer),
+    })[a] : 0, Z = /*#__PURE__*/ _react.forwardRef((param, v)=>{
+    let { children: a, width: r, height: d, aspectRatio: n, dataAttributes: h, className: t, "aria-label": i, "aria-labelledby": s, "aria-description": o, "aria-describedby": b } = param;
+    const c = r && d ? void 0 : Ra(n);
+    return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(h)), {
+        ref: v,
+        "aria-label": i,
+        "aria-labelledby": s,
+        "aria-description": o,
+        "aria-describedby": b,
+        className: (0, _classnames.default)(t, _cardcssmistica.cardContainer),
         style: _object_spread({
             width: r || "100%",
-            height: t || "100%"
-        }, o ? (0, _css.applyCssVars)({
-            [_cardcssmistica.vars.aspectRatio]: String(o)
+            height: d || "100%"
+        }, c ? (0, _css.applyCssVars)({
+            [_cardcssmistica.vars.aspectRatio]: String(c)
         }) : {}),
         children: a
-    }));
-}), Fe = (a)=>{
-    const r = typeof a == "string" ? a : a == null ? void 0 : a.src, t = typeof a == "string" || a == null ? void 0 : a.srcSet;
+    })));
+}), _e = (a)=>{
+    const r = typeof a == "string" ? a : a == null ? void 0 : a.src, d = typeof a == "string" || a == null ? void 0 : a.srcSet;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
         width: "100%",
         height: "100%",
         src: r || "",
-        srcSet: t
+        srcSet: d
     });
-}, Ta = {
+}, Sa = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -318,38 +322,38 @@ const O = ()=>{
     error: {
         reset: "loading"
     }
-}, Ba = (a, r)=>Ta[a][r] || a, ba = (param)=>{
+}, Ba = (a, r)=>Sa[a][r] || a, wa = (param)=>{
     let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
         color: a,
         size: 16,
         delay: "0"
     });
-}, Ra = (param)=>{
+}, Aa = (param)=>{
     let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconpausefilled.default, {
         color: a,
         size: 12
     });
-}, Sa = (param)=>{
+}, ka = (param)=>{
     let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconplayfilled.default, {
         color: a,
         size: 12
     });
-}, He = (a, r, t)=>{
-    const { texts: n, t: c } = (0, _hooks.useTheme)(), i = _react.useRef(null), [d, s] = _react.useReducer(Ba, "loading");
+}, $e = (a, r, d)=>{
+    const { texts: n, t: h } = (0, _hooks.useTheme)(), t = _react.useRef(null), [i, s] = _react.useReducer(Ba, "loading");
     _react.useEffect(()=>{
         var y;
-        const m = setTimeout(()=>s("showSpinner"), 2e3);
-        return (y = i.current) == null || y.load(), ()=>{
-            clearTimeout(m), s("reset");
+        const c = setTimeout(()=>s("showSpinner"), 2e3);
+        return (y = t.current) == null || y.load(), ()=>{
+            clearTimeout(c), s("reset");
         };
     }, [
         a
     ]);
     const o = _react.useMemo(()=>a !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(i, t),
+            ref: (0, _common.combineRefs)(t, d),
             src: a,
             width: "100%",
             height: "100%",
@@ -358,62 +362,62 @@ const O = ()=>{
             onPause: ()=>s("pause"),
             onPlay: ()=>s("play")
         }) : void 0, [
-        t,
+        d,
         a,
         r
-    ]), u = ()=>{
-        const m = i.current;
-        m && (d === "loading" ? s("showSpinner") : d === "paused" ? m.play() : d === "playing" && m.pause());
+    ]), b = ()=>{
+        const c = t.current;
+        c && (i === "loading" ? s("showSpinner") : i === "paused" ? c.play() : i === "playing" && c.pause());
     };
-    if (d === "error") return {
+    if (i === "error") return {
         video: o
     };
-    const h = o ? {
+    const v = o ? {
         uncheckedProps: {
-            Icon: d === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? ba : Ra,
-            label: d === "loadingTimeout" ? "" : n.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
+            Icon: i === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? wa : Aa,
+            label: i === "loadingTimeout" ? "" : n.pauseIconButtonLabel || h(_texttokens.pauseIconButtonLabel)
         },
         checkedProps: {
-            Icon: Sa,
-            label: n.playIconButtonLabel || c(_texttokens.playIconButtonLabel)
+            Icon: ka,
+            label: n.playIconButtonLabel || h(_texttokens.playIconButtonLabel)
         },
-        onChange: u,
-        disabled: d === "loadingTimeout",
-        checked: d === "paused"
+        onChange: b,
+        disabled: i === "loadingTimeout",
+        checked: i === "paused"
     } : void 0;
     return {
         video: o,
-        videoAction: h
+        videoAction: v
     };
-}, Ne = (param)=>{
-    let { headline: a, headlineRef: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: i, titleAs: d = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: h, descriptionLinesMax: m, extra: y, extraRef: v, button: p, buttonLink: x } = param;
-    const { textPresets: g } = (0, _hooks.useTheme)();
+}, Re = (param)=>{
+    let { headline: a, headlineRef: r, pretitle: d, pretitleAs: n, pretitleLinesMax: h, title: t, titleAs: i = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: b, description: v, descriptionLinesMax: c, extra: y, extraRef: C, button: x, buttonLink: T } = param;
+    const { textPresets: m } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _cardcssmistica.cardContentContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _cardcssmistica.flexColumn,
                 children: [
-                    (0, _headings.isBiggerHeading)(d, n) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    (0, _headings.isBiggerHeading)(i, n) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
-                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingBottom: o || h ? 4 : 0
+                                    paddingBottom: o || v ? 4 : 0
                                 },
                                 "data-testid": "title",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
                                     truncate: s,
-                                    weight: g.cardTitle.weight,
-                                    as: d,
+                                    weight: m.cardTitle.weight,
+                                    as: i,
                                     hyphens: "auto",
-                                    children: i
+                                    children: t
                                 }))
                             }),
                             a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 ref: r,
                                 style: {
                                     order: -2,
-                                    paddingBottom: t || i || o || h ? 8 : 0
+                                    paddingBottom: d || t || o || v ? 8 : 0
                                 },
                                 "data-testid": "headline",
                                 children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
@@ -421,42 +425,42 @@ const O = ()=>{
                                     children: a
                                 }) : a
                             }),
-                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
                                     order: -1,
                                     paddingBottom: 4
                                 },
                                 "data-testid": "pretitle",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                    truncate: c,
+                                    truncate: h,
                                     as: n,
                                     regular: !0,
                                     hyphens: "auto",
-                                    children: t
+                                    children: d
                                 })
                             })
                         ]
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                             children: [
-                                t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     style: {
                                         paddingBottom: 4
                                     },
                                     "data-testid": "pretitle",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                        truncate: c,
+                                        truncate: h,
                                         as: n,
                                         regular: !0,
                                         hyphens: "auto",
-                                        children: t
+                                        children: d
                                     })
                                 }),
                                 a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     ref: r,
                                     style: {
                                         order: -1,
-                                        paddingBottom: t || i || o || h ? 8 : 0
+                                        paddingBottom: d || t || o || v ? 8 : 0
                                     },
                                     "data-testid": "headline",
                                     children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
@@ -464,17 +468,17 @@ const O = ()=>{
                                         children: a
                                     }) : a
                                 }),
-                                i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     style: {
-                                        paddingBottom: o || h ? 4 : 0
+                                        paddingBottom: o || v ? 4 : 0
                                     },
                                     "data-testid": "title",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
                                         truncate: s,
-                                        weight: g.cardTitle.weight,
-                                        as: d,
+                                        weight: m.cardTitle.weight,
+                                        as: i,
                                         hyphens: "auto",
-                                        children: i
+                                        children: t
                                     }))
                                 })
                             ]
@@ -482,51 +486,51 @@ const O = ()=>{
                     }),
                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingBottom: h ? 4 : 0
+                            paddingBottom: v ? 4 : 0
                         },
                         "data-testid": "subtitle",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            truncate: u,
+                            truncate: b,
                             as: "div",
                             regular: !0,
                             hyphens: "auto",
                             children: o
                         })
                     }),
-                    h && // this is tricky, when headline exists, the 8px padding is added by it.
+                    v && // this is tricky, when headline exists, the 8px padding is added by it.
                     // Otherwise, only 4px are added by title|pretitle|subtitle, so we need to add 4px more
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingTop: t || i || o ? 4 : 0
+                            paddingTop: d || t || o ? 4 : 0
                         },
                         "data-testid": "description",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            truncate: m,
+                            truncate: c,
                             as: "p",
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             hyphens: "auto",
-                            children: h
+                            children: v
                         })
                     }),
                     y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: v,
+                        ref: C,
                         "data-testid": "slot",
                         children: y
                     })
                 ]
             }),
-            (p || x) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (x || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _cardcssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: p,
-                    link: x
+                    primaryButton: x,
+                    link: T
                 })
             })
         ]
     });
-}, rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: i, subtitle: d, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: h, description: m, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
+}, tr = /*#__PURE__*/ _react.forwardRef((_param, j)=>{
+    var { media: a, asset: r, headline: d, pretitle: n, pretitleAs: h, pretitleLinesMax: t, subtitle: i, subtitleLinesMax: s, title: o, titleAs: b = "h3", titleLinesMax: v, description: c, descriptionLinesMax: y, extra: C, actions: x, button: T, buttonLink: m, dataAttributes: w, "aria-label": R, "aria-labelledby": f, "aria-description": g, "aria-describedby": B, onClose: H, closeButtonLabel: M } = _param, A = _object_without_properties(_param, [
         "media",
         "asset",
         "headline",
@@ -546,49 +550,58 @@ const O = ()=>{
         "buttonLink",
         "dataAttributes",
         "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
         "onClose",
         "closeButtonLabel"
     ]);
-    const R = !!(T.href || T.to || T.onPress), { text: A, ref: V } = O(), { text: E, ref: w } = O(), D = N || ((0, _headings.isBiggerHeading)(u, c) ? [
+    const u = !!(A.href || A.to || A.onPress), { text: N, ref: V } = F(), { text: X, ref: I } = F(), E = R || (f ? void 0 : ((0, _headings.isBiggerHeading)(b, h) ? [
         o,
-        A,
+        N,
         n,
-        d,
-        m,
-        E
+        i,
+        c,
+        X
     ] : [
         n,
-        A,
+        N,
         o,
-        d,
-        m,
-        E
-    ]).filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
+        i,
+        c,
+        X
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Z, {
         dataAttributes: _object_spread({
             "component-name": "MediaCard",
             testid: "MediaCard"
-        }, B),
-        ref: I,
-        "aria-label": R ? void 0 : N,
+        }, w),
+        ref: j,
+        "aria-label": u ? void 0 : R,
+        "aria-labelledby": u ? void 0 : f,
+        "aria-description": u ? void 0 : g,
+        "aria-describedby": u ? void 0 : B,
         className: _cardcssmistica.touchableContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, T), {
+            }, A), {
                 className: _cardcssmistica.touchable,
-                "aria-label": R ? D : void 0,
+                "aria-label": u ? E : void 0,
+                "aria-labelledby": u ? f : void 0,
+                "aria-description": u ? g : void 0,
+                "aria-describedby": u ? B : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
                     className: _cardcssmistica.boxed,
                     width: "100%",
                     height: "100%",
                     children: [
-                        R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.touchableMediaCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.mediaCard,
-                            "aria-hidden": R,
+                            "aria-hidden": u,
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     style: (0, _css.applyCssVars)({
@@ -598,23 +611,23 @@ const O = ()=>{
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.mediaCardContent,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, {
-                                        headline: t,
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Re, {
+                                        headline: d,
                                         headlineRef: V,
                                         pretitle: n,
-                                        pretitleAs: c,
-                                        pretitleLinesMax: i,
+                                        pretitleAs: h,
+                                        pretitleLinesMax: t,
                                         title: o,
-                                        titleAs: u,
-                                        titleLinesMax: h,
-                                        subtitle: d,
+                                        titleAs: b,
+                                        titleLinesMax: v,
+                                        subtitle: i,
                                         subtitleLinesMax: s,
-                                        description: m,
+                                        description: c,
                                         descriptionLinesMax: y,
-                                        extra: v,
-                                        extraRef: w,
-                                        button: x,
-                                        buttonLink: g
+                                        extra: C,
+                                        extraRef: I,
+                                        button: T,
+                                        buttonLink: m
                                     })
                                 }),
                                 r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -630,16 +643,16 @@ const O = ()=>{
                     ]
                 })
             })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                onClose: j,
-                closeButtonLabel: b,
-                actions: p,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                onClose: H,
+                closeButtonLabel: M,
+                actions: x,
                 variant: "media"
             })
         ]
     });
-}), tr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: i, subtitle: d, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: h, description: m, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
+}), nr = /*#__PURE__*/ _react.forwardRef((_param, j)=>{
+    var { media: a, asset: r, headline: d, pretitle: n, pretitleAs: h, pretitleLinesMax: t, subtitle: i, subtitleLinesMax: s, title: o, titleAs: b = "h3", titleLinesMax: v, description: c, descriptionLinesMax: y, extra: C, actions: x, button: T, buttonLink: m, dataAttributes: w, "aria-label": R, "aria-labelledby": f, "aria-description": g, "aria-describedby": B, onClose: H, closeButtonLabel: M } = _param, A = _object_without_properties(_param, [
         "media",
         "asset",
         "headline",
@@ -659,50 +672,59 @@ const O = ()=>{
         "buttonLink",
         "dataAttributes",
         "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
         "onClose",
         "closeButtonLabel"
     ]);
-    const R = !!(T.href || T.to || T.onPress), A = a && a.type === _image.default && a.props.circular, { text: V, ref: E } = O(), { text: w, ref: D } = O(), M = N || ((0, _headings.isBiggerHeading)(u, c) ? [
+    const u = !!(A.href || A.to || A.onPress), N = a && a.type === _image.default && a.props.circular, { text: V, ref: X } = F(), { text: I, ref: E } = F(), W = R || (f ? void 0 : ((0, _headings.isBiggerHeading)(b, h) ? [
         o,
         V,
         n,
-        d,
-        m,
-        w
+        i,
+        c,
+        I
     ] : [
         n,
         V,
         o,
-        d,
-        m,
-        w
-    ]).filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
-        ref: I,
+        i,
+        c,
+        I
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Z, {
+        ref: j,
         dataAttributes: _object_spread({
             "component-name": "NakedCard",
             testid: "NakedCard"
-        }, B),
-        "aria-label": R ? void 0 : N,
-        className: R ? _cardcssmistica.touchableContainer : void 0,
+        }, w),
+        "aria-label": u ? void 0 : R,
+        "aria-labelledby": u ? void 0 : f,
+        "aria-description": u ? void 0 : g,
+        "aria-describedby": u ? void 0 : B,
+        className: u ? _cardcssmistica.touchableContainer : void 0,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, T), {
+            }, A), {
                 className: _cardcssmistica.touchable,
-                "aria-label": R ? M : void 0,
+                "aria-label": u ? W : void 0,
+                "aria-labelledby": u ? f : void 0,
+                "aria-description": u ? g : void 0,
+                "aria-describedby": u ? B : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _cardcssmistica.mediaCard,
-                    "aria-hidden": R,
+                    "aria-hidden": u,
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             style: {
                                 position: "relative"
                             },
                             children: [
-                                R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
-                                        [_cardcssmistica.circularMediaOverlay]: A
+                                        [_cardcssmistica.circularMediaOverlay]: N
                                     })
                                 }),
                                 a
@@ -713,23 +735,23 @@ const O = ()=>{
                             style: {
                                 paddingTop: a ? 16 : 0
                             },
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, {
-                                headline: t,
-                                headlineRef: E,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Re, {
+                                headline: d,
+                                headlineRef: X,
                                 pretitle: n,
-                                pretitleAs: c,
-                                pretitleLinesMax: i,
+                                pretitleAs: h,
+                                pretitleLinesMax: t,
                                 title: o,
-                                titleAs: u,
-                                titleLinesMax: h,
-                                subtitle: d,
+                                titleAs: b,
+                                titleLinesMax: v,
+                                subtitle: i,
                                 subtitleLinesMax: s,
-                                description: m,
+                                description: c,
                                 descriptionLinesMax: y,
-                                extra: v,
-                                extraRef: D,
-                                button: x,
-                                buttonLink: g
+                                extra: C,
+                                extraRef: E,
+                                button: T,
+                                buttonLink: m
                             })
                         }),
                         r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -743,16 +765,16 @@ const O = ()=>{
                     ]
                 })
             })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                onClose: j,
-                closeButtonLabel: b,
-                actions: p,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                onClose: H,
+                closeButtonLabel: M,
+                actions: x,
                 variant: "media"
             })
         ]
     });
-}), dr = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
-    var { media: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: i, description: d, descriptionLinesMax: s, extra: o, dataAttributes: u, "aria-label": h } = _param, m = _object_without_properties(_param, [
+}), or = /*#__PURE__*/ _react.forwardRef((_param, T)=>{
+    var { media: a, title: r, titleAs: d = "h3", titleLinesMax: n, subtitle: h, subtitleLinesMax: t, description: i, descriptionLinesMax: s, extra: o, dataAttributes: b, "aria-label": v, "aria-labelledby": c, "aria-description": y, "aria-describedby": C } = _param, x = _object_without_properties(_param, [
         "media",
         "title",
         "titleAs",
@@ -763,39 +785,48 @@ const O = ()=>{
         "descriptionLinesMax",
         "extra",
         "dataAttributes",
-        "aria-label"
+        "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby"
     ]);
-    const v = !!(m.href || m.to || m.onPress), p = a && a.type === _image.default && a.props.circular, { textPresets: x } = (0, _hooks.useTheme)(), { text: g, ref: B } = O(), N = h || [
+    const m = !!(x.href || x.to || x.onPress), w = a && a.type === _image.default && a.props.circular, { textPresets: R } = (0, _hooks.useTheme)(), { text: f, ref: g } = F(), B = v || (c ? void 0 : [
         r,
-        c,
-        d,
-        g
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
-        ref: y,
+        h,
+        i,
+        f
+    ].filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+        ref: T,
         dataAttributes: _object_spread({
             "component-name": "SmallNakedCard",
             testid: "SmallNakedCard"
-        }, u),
-        "aria-label": v ? void 0 : h,
-        className: v ? _cardcssmistica.touchableContainer : void 0,
+        }, b),
+        "aria-label": m ? void 0 : v,
+        "aria-labelledby": m ? void 0 : c,
+        "aria-description": m ? void 0 : y,
+        "aria-describedby": m ? void 0 : C,
+        className: m ? _cardcssmistica.touchableContainer : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
             maybe: !0
-        }, m), {
+        }, x), {
             className: _cardcssmistica.touchable,
-            "aria-label": v ? N : void 0,
+            "aria-label": m ? B : void 0,
+            "aria-labelledby": m ? c : void 0,
+            "aria-description": m ? y : void 0,
+            "aria-describedby": m ? C : void 0,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _cardcssmistica.mediaCard,
-                "aria-hidden": v,
+                "aria-hidden": m,
                 children: [
                     a && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         style: {
                             position: "relative"
                         },
                         children: [
-                            v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
-                                    [_cardcssmistica.circularMediaOverlay]: p
+                                    [_cardcssmistica.circularMediaOverlay]: w
                                 })
                             }),
                             a
@@ -813,25 +844,25 @@ const O = ()=>{
                                     children: [
                                         r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text2), {
                                             truncate: n,
-                                            weight: x.cardTitle.weight,
-                                            as: t,
+                                            weight: R.cardTitle.weight,
+                                            as: d,
                                             hyphens: "auto",
                                             dataAttributes: {
                                                 testid: "title"
                                             },
                                             children: r
                                         })),
-                                        c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                            truncate: i,
+                                        h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            truncate: t,
                                             regular: !0,
                                             as: "p",
                                             hyphens: "auto",
                                             dataAttributes: {
                                                 testid: "subtitle"
                                             },
-                                            children: c
+                                            children: h
                                         }),
-                                        d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             truncate: s,
                                             regular: !0,
                                             as: "p",
@@ -840,13 +871,13 @@ const O = ()=>{
                                             dataAttributes: {
                                                 testid: "description"
                                             },
-                                            children: d
+                                            children: i
                                         })
                                     ]
                                 })
                             }),
                             o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                ref: B,
+                                ref: g,
                                 "data-testid": "slot",
                                 children: o
                             })
@@ -856,8 +887,8 @@ const O = ()=>{
             })
         }))
     });
-}), ir = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { asset: a, headline: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: i, titleAs: d = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: h, descriptionLinesMax: m, extra: y, actions: v, button: p, buttonLink: x, dataAttributes: g, "aria-label": B, onClose: N, closeButtonLabel: j, aspectRatio: b } = _param, T = _object_without_properties(_param, [
+}), sr = /*#__PURE__*/ _react.forwardRef((_param, j)=>{
+    var { asset: a, headline: r, pretitle: d, pretitleAs: n, pretitleLinesMax: h, title: t, titleAs: i = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: b, description: v, descriptionLinesMax: c, extra: y, actions: C, button: x, buttonLink: T, dataAttributes: m, "aria-label": w, "aria-labelledby": R, "aria-description": f, "aria-describedby": g, onClose: B, closeButtonLabel: H, aspectRatio: M } = _param, A = _object_without_properties(_param, [
         "asset",
         "headline",
         "pretitle",
@@ -876,51 +907,60 @@ const O = ()=>{
         "buttonLink",
         "dataAttributes",
         "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
         "onClose",
         "closeButtonLabel",
         "aspectRatio"
     ]);
-    const R = !!a || !!r, A = !!(T.href || T.to || T.onPress), { text: V, ref: E } = O(), { text: w, ref: D } = O(), M = Ge(v, N), C = B || ((0, _headings.isBiggerHeading)(d, n) ? [
-        i,
-        V,
+    const u = !!a || !!r, N = !!(A.href || A.to || A.onPress), { text: V, ref: X } = F(), { text: I, ref: E } = F(), W = Xe(C, B), S = w || (R ? void 0 : ((0, _headings.isBiggerHeading)(i, n) ? [
         t,
+        V,
+        d,
         o,
-        h,
-        w
+        v,
+        I
     ] : [
-        t,
+        d,
         V,
-        i,
+        t,
         o,
-        h,
-        w
-    ]).filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
+        v,
+        I
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Z, {
         dataAttributes: _object_spread({
             "component-name": "DataCard",
             testid: "DataCard"
-        }, g),
-        ref: I,
-        "aria-label": A ? void 0 : B,
+        }, m),
+        ref: j,
+        "aria-label": N ? void 0 : w,
+        "aria-labelledby": N ? void 0 : R,
+        "aria-description": N ? void 0 : f,
+        "aria-describedby": N ? void 0 : g,
         className: _cardcssmistica.touchableContainer,
-        aspectRatio: b,
+        aspectRatio: M,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, T), {
+            }, A), {
                 className: _cardcssmistica.touchable,
-                "aria-label": A ? C : void 0,
+                "aria-label": N ? S : void 0,
+                "aria-labelledby": N ? R : void 0,
+                "aria-description": N ? f : void 0,
+                "aria-describedby": N ? g : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
                     className: _cardcssmistica.boxed,
                     width: "100%",
                     height: "100%",
                     children: [
-                        A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.touchableCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.dataCard,
-                            "aria-hidden": A,
+                            "aria-hidden": N,
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                                     space: 0,
@@ -935,40 +975,40 @@ const O = ()=>{
                                                     "data-testid": "asset",
                                                     children: a
                                                 }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(Re, {
                                                     headline: r,
-                                                    headlineRef: E,
-                                                    pretitle: t,
+                                                    headlineRef: X,
+                                                    pretitle: d,
                                                     pretitleAs: n,
-                                                    pretitleLinesMax: c,
-                                                    title: i,
-                                                    titleAs: d,
+                                                    pretitleLinesMax: h,
+                                                    title: t,
+                                                    titleAs: i,
                                                     titleLinesMax: s,
                                                     subtitle: o,
-                                                    subtitleLinesMax: u,
-                                                    description: h,
-                                                    descriptionLinesMax: m
+                                                    subtitleLinesMax: b,
+                                                    description: v,
+                                                    descriptionLinesMax: c
                                                 })
                                             ]
                                         }),
-                                        !R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        !u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
-                                                [_cardcssmistica.vars.topActionsCount]: String(M.length)
+                                                [_cardcssmistica.vars.topActionsCount]: String(W.length)
                                             }),
                                             className: _cardcssmistica.dataCardTopActionsWithoutIcon
                                         })
                                     ]
                                 }),
                                 y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    ref: D,
+                                    ref: E,
                                     "data-testid": "slot",
                                     children: y
                                 }),
-                                (p || x) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                (x || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.actions,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                        primaryButton: p,
-                                        link: x
+                                        primaryButton: x,
+                                        link: T
                                     })
                                 })
                             ]
@@ -976,16 +1016,16 @@ const O = ()=>{
                     ]
                 })
             })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                onClose: N,
-                closeButtonLabel: j,
-                actions: v,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                onClose: B,
+                closeButtonLabel: H,
+                actions: C,
                 variant: "default"
             })
         ]
     });
-}), nr = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
-    var { asset: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: i, description: d, descriptionLinesMax: s, dataAttributes: o, "aria-label": u, extra: h, isInverse: m = !1, aspectRatio: y } = _param, v = _object_without_properties(_param, [
+}), lr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
+    var { asset: a, title: r, titleAs: d = "h3", titleLinesMax: n, subtitle: h, subtitleLinesMax: t, description: i, descriptionLinesMax: s, dataAttributes: o, "aria-label": b, "aria-labelledby": v, "aria-description": c, "aria-describedby": y, extra: C, isInverse: x = !1, aspectRatio: T } = _param, m = _object_without_properties(_param, [
         "asset",
         "title",
         "titleAs",
@@ -996,42 +1036,51 @@ const O = ()=>{
         "descriptionLinesMax",
         "dataAttributes",
         "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
         "extra",
         "isInverse",
         "aspectRatio"
     ]);
-    const { textPresets: x } = (0, _hooks.useTheme)(), g = !!(v.href || v.to || v.onPress), B = m ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, { text: N, ref: j } = O(), b = u || [
+    const { textPresets: R } = (0, _hooks.useTheme)(), f = !!(m.href || m.to || m.onPress), g = x ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, { text: B, ref: H } = F(), M = b || (y ? void 0 : [
         r,
-        c,
-        d,
-        N
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
+        h,
+        i,
+        B
+    ].filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
         dataAttributes: _object_spread({
             "component-name": "SnapCard",
             testid: "SnapCard"
         }, o),
-        ref: p,
+        ref: w,
         className: _cardcssmistica.touchableContainer,
-        aspectRatio: y,
-        "aria-label": g ? void 0 : u,
+        aspectRatio: T,
+        "aria-label": f ? void 0 : b,
+        "aria-labelledby": f ? void 0 : v,
+        "aria-description": f ? void 0 : c,
+        "aria-describedby": f ? void 0 : y,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
             maybe: !0
-        }, v), {
+        }, m), {
             className: _cardcssmistica.touchable,
-            "aria-label": g ? b : void 0,
+            "aria-label": f ? M : void 0,
+            "aria-labelledby": f ? v : void 0,
+            "aria-description": f ? c : void 0,
+            "aria-describedby": f ? y : void 0,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
                 className: _cardcssmistica.boxed,
-                variant: m ? "inverse" : "default",
+                variant: x ? "inverse" : "default",
                 width: "100%",
                 height: "100%",
                 children: [
-                    g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: B
+                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: g
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
                         className: _cardcssmistica.snapCard,
-                        "aria-hidden": g,
+                        "aria-hidden": f,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 children: [
@@ -1050,16 +1099,16 @@ const O = ()=>{
                                         children: [
                                             r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text2), {
                                                 truncate: n,
-                                                weight: x.cardTitle.weight,
-                                                as: t,
+                                                weight: R.cardTitle.weight,
+                                                as: d,
                                                 hyphens: "auto",
                                                 dataAttributes: {
                                                     testid: "title"
                                                 },
                                                 children: r
                                             })),
-                                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                truncate: i,
+                                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                truncate: t,
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textPrimary,
                                                 as: "p",
@@ -1067,9 +1116,9 @@ const O = ()=>{
                                                 dataAttributes: {
                                                     testid: "subtitle"
                                                 },
-                                                children: c
+                                                children: h
                                             }),
-                                            d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                 truncate: s,
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -1078,16 +1127,16 @@ const O = ()=>{
                                                 dataAttributes: {
                                                     testid: "description"
                                                 },
-                                                children: d
+                                                children: i
                                             })
                                         ]
                                     })
                                 ]
                             }),
-                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                ref: j,
+                            C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: H,
                                 "data-testid": "slot",
-                                children: h
+                                children: C
                             })
                         ]
                     })
@@ -1095,28 +1144,28 @@ const O = ()=>{
             })
         }))
     });
-}), Xe = (param)=>{
-    let { title: a, titleAs: r = "h3", headline: t, pretitle: n, pretitleAs: c, subtitle: i, description: d, extra: s, headlineRef: o, extraRef: u } = param;
+}), qe = (param)=>{
+    let { title: a, titleAs: r = "h3", headline: d, pretitle: n, pretitleAs: h, subtitle: t, description: i, extra: s, headlineRef: o, extraRef: b } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _cardcssmistica.flexColumn,
         children: [
-            (0, _headings.isBiggerHeading)(r, c) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            (0, _headings.isBiggerHeading)(r, h) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingBottom: i || d ? 4 : 0
+                            paddingBottom: t || i ? 4 : 0
                         },
                         "data-testid": "title",
                         children: a
                     }),
-                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         ref: o,
                         style: {
                             order: -2,
-                            paddingBottom: n || a || i || d ? 16 : 0
+                            paddingBottom: n || a || t || i ? 16 : 0
                         },
                         "data-testid": "headline",
-                        children: t
+                        children: d
                     }),
                     n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
@@ -1136,49 +1185,49 @@ const O = ()=>{
                         "data-testid": "pretitle",
                         children: n
                     }),
-                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         ref: o,
                         style: {
                             order: -1,
-                            paddingBottom: n || a || i || d ? 16 : 0
+                            paddingBottom: n || a || t || i ? 16 : 0
                         },
                         "data-testid": "headline",
-                        children: t
+                        children: d
                     }),
                     a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingBottom: i || d ? 4 : 0
+                            paddingBottom: t || i ? 4 : 0
                         },
                         "data-testid": "title",
                         children: a
                     })
                 ]
             }),
-            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    paddingBottom: d ? 4 : 0
+                    paddingBottom: i ? 4 : 0
                 },
                 "data-testid": "subtitle",
-                children: i
+                children: t
             }),
-            d && // this is tricky, the padding between a headline and a description is 16px
+            i && // this is tricky, the padding between a headline and a description is 16px
             // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    paddingTop: n || a || i ? 4 : 0
+                    paddingTop: n || a || t ? 4 : 0
                 },
                 "data-testid": "description",
-                children: d
+                children: i
             }),
             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: u,
+                ref: b,
                 "data-testid": "slot",
                 children: s
             })
         ]
     });
-}, Le = /*#__PURE__*/ _react.forwardRef((_param, D)=>{
-    var { isInverse: a, backgroundImage: r, backgroundVideo: t, backgroundVideoRef: n, poster: c, asset: i, headline: d, pretitle: s, pretitleAs: o, pretitleLinesMax: u, title: h, titleAs: m = "h3", titleLinesMax: y, description: v, descriptionLinesMax: p, extra: x, button: g, secondaryButton: B, onClose: N, closeButtonLabel: j, actions: b, buttonLink: T, dataAttributes: I, width: R, height: A, aspectRatio: V, "aria-label": E } = _param, w = _object_without_properties(_param, [
+}, Je = /*#__PURE__*/ _react.forwardRef((_param, E)=>{
+    var { isInverse: a, backgroundImage: r, backgroundVideo: d, backgroundVideoRef: n, poster: h, asset: t, headline: i, pretitle: s, pretitleAs: o, pretitleLinesMax: b, title: v, titleAs: c = "h3", titleLinesMax: y, description: C, descriptionLinesMax: x, extra: T, button: m, secondaryButton: w, onClose: R, closeButtonLabel: f, actions: g, buttonLink: B, dataAttributes: H, width: M, height: A, aspectRatio: j, "aria-label": u, "aria-labelledby": N, "aria-description": V, "aria-describedby": X } = _param, I = _object_without_properties(_param, [
         "isInverse",
         "backgroundImage",
         "backgroundVideo",
@@ -1205,125 +1254,134 @@ const O = ()=>{
         "width",
         "height",
         "aspectRatio",
-        "aria-label"
+        "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby"
     ]);
-    const M = r !== void 0, C = t !== void 0, k = Fe(r), { video: me, videoAction: ie } = He(t, c, n), { text: P, ref: ne } = O(), { text: oe, ref: se } = O();
-    C && (b = ie ? [
-        ie
+    const W = r !== void 0, S = d !== void 0, z = _e(r), { video: ye, videoAction: se } = $e(d, h, n), { text: re, ref: le } = F(), { text: ce, ref: he } = F();
+    S && (g = se ? [
+        se
     ] : []);
-    const le = (0, _themevariantcontext.useIsInverseVariant)(), W = M || C, G = W ? "0 0 16px rgba(0,0,0,0.4)" : void 0, K = (b == null ? void 0 : b.length) || N, H = !!(w.href || w.to || w.onPress), ue = M || C ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Q = E || ((0, _headings.isBiggerHeading)(m, o) ? [
-        h,
-        P,
-        s,
+    const ve = (0, _themevariantcontext.useIsInverseVariant)(), _ = W || S, $ = _ ? "0 0 16px rgba(0,0,0,0.4)" : void 0, L = (g == null ? void 0 : g.length) || R, O = !!(I.href || I.to || I.onPress), fe = W || S ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, G = u || (N ? void 0 : ((0, _headings.isBiggerHeading)(c, o) ? [
         v,
-        oe
+        re,
+        s,
+        C,
+        ce
     ] : [
         s,
-        P,
-        h,
+        re,
         v,
-        oe
-    ]).filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
-        dataAttributes: I,
-        ref: D,
-        width: R,
+        C,
+        ce
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Z, {
+        dataAttributes: H,
+        ref: E,
+        width: M,
         height: A,
-        aspectRatio: V,
-        "aria-label": H ? void 0 : E,
+        aspectRatio: j,
+        "aria-label": O ? void 0 : u,
+        "aria-labelledby": O ? void 0 : N,
+        "aria-description": O ? void 0 : V,
+        "aria-describedby": O ? void 0 : X,
         className: _cardcssmistica.touchableContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, w), {
+            }, I), {
                 className: _cardcssmistica.touchable,
-                "aria-label": H ? Q : void 0,
+                "aria-label": O ? G : void 0,
+                "aria-labelledby": O ? N : void 0,
+                "aria-description": O ? V : void 0,
+                "aria-describedby": O ? X : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.InternalBoxed, {
                     borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
                     className: _cardcssmistica.boxed,
                     width: "100%",
                     height: "100%",
-                    background: M || C ? le ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
-                    variant: M || C ? "media" : a ? "inverse" : "default",
+                    background: W || S ? ve ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
+                    variant: W || S ? "media" : a ? "inverse" : "default",
                     children: [
-                        H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: ue
+                        O && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: fe
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.displayCardContainer,
-                            "aria-hidden": H,
+                            "aria-hidden": O,
                             children: [
-                                (M || C) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                                    variant: le ? "inverse" : "default",
+                                (W || S) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                                    variant: ve ? "inverse" : "default",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _cardcssmistica.displayCardBackground,
-                                        children: C ? me : k
+                                        children: S ? ye : z
                                     })
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _cardcssmistica.displayCardContent,
                                     style: {
-                                        paddingTop: W && !i && !K && !C ? 0 : 24
+                                        paddingTop: _ && !t && !L && !S ? 0 : 24
                                     },
                                     children: [
-                                        i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        t ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
                                                 [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                             }),
                                             "data-testid": "asset",
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingBottom: W ? 0 : 40,
+                                                paddingBottom: _ ? 0 : 40,
                                                 paddingX: 24,
-                                                children: i
+                                                children: t
                                             })
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingBottom: K || C ? W ? 24 : 64 : 0
+                                            paddingBottom: L || S ? _ ? 24 : 64 : 0
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: (0, _classnames.default)(_cardcssmistica.displayCardContentWrapper, {
-                                                [_cardcssmistica.displayCardGradient]: W
+                                                [_cardcssmistica.displayCardGradient]: _
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                 space: 24,
                                                 children: [
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Xe, {
-                                                        title: h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(qe, {
+                                                        title: v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
                                                             forceMobileSizes: !0,
                                                             truncate: y,
-                                                            as: m,
-                                                            textShadow: G,
+                                                            as: c,
+                                                            textShadow: $,
                                                             hyphens: "auto",
-                                                            children: h
+                                                            children: v
                                                         }) : void 0,
-                                                        titleAs: m,
-                                                        headline: d,
+                                                        titleAs: c,
+                                                        headline: i,
                                                         pretitle: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                             forceMobileSizes: !0,
-                                                            truncate: u,
+                                                            truncate: b,
                                                             as: o,
                                                             regular: !0,
-                                                            textShadow: G,
+                                                            textShadow: $,
                                                             children: s
                                                         }) : void 0,
                                                         pretitleAs: o,
-                                                        description: v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                                        description: C ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                                             forceMobileSizes: !0,
-                                                            truncate: p,
+                                                            truncate: x,
                                                             as: "p",
                                                             regular: !0,
-                                                            color: W ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                                                            textShadow: G,
+                                                            color: _ ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                                            textShadow: $,
                                                             hyphens: "auto",
-                                                            children: v
+                                                            children: C
                                                         }) : void 0,
-                                                        extra: x,
-                                                        headlineRef: ne,
-                                                        extraRef: se
+                                                        extra: T,
+                                                        headlineRef: le,
+                                                        extraRef: he
                                                     }),
-                                                    (g || B || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                                        primaryButton: g,
-                                                        secondaryButton: B,
-                                                        link: T
+                                                    (m || w || B) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                                        primaryButton: m,
+                                                        secondaryButton: w,
+                                                        link: B
                                                     })
                                                 ]
                                             })
@@ -1335,39 +1393,39 @@ const O = ()=>{
                     ]
                 })
             })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                onClose: N,
-                closeButtonLabel: j,
-                actions: b,
-                variant: M || C ? "media" : a ? "inverse" : "default"
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                onClose: R,
+                closeButtonLabel: f,
+                actions: g,
+                variant: W || S ? "media" : a ? "inverse" : "default"
             })
         ]
     });
-}), or = /*#__PURE__*/ _react.forwardRef((_param, t)=>{
+}), cr = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
     var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Le, _object_spread_props(_object_spread({}, r), {
-        ref: t,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Je, _object_spread_props(_object_spread({}, r), {
+        ref: d,
         isInverse: !0,
         dataAttributes: _object_spread({
             "component-name": "DisplayMediaCard",
             testid: "DisplayMediaCard"
         }, a)
     }));
-}), sr = /*#__PURE__*/ _react.forwardRef((_param, t)=>{
+}), hr = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
     var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Le, _object_spread_props(_object_spread({}, r), {
-        ref: t,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Je, _object_spread_props(_object_spread({}, r), {
+        ref: d,
         dataAttributes: _object_spread({
             "component-name": "DisplayDataCard",
             testid: "DisplayDataCard"
         }, a)
     }));
-}), lr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
-    var { dataAttributes: a, backgroundImage: r, backgroundVideo: t, poster: n, backgroundVideoRef: c, width: i, height: d, aspectRatio: s = "7:10", "aria-label": o, actions: u, onClose: h, closeButtonLabel: m, asset: y, headline: v, pretitle: p, pretitleAs: x, pretitleLinesMax: g, title: B, titleAs: N = "h3", titleLinesMax: j, subtitle: b, subtitleLinesMax: T, description: I, descriptionLinesMax: R, extra: A, variant: V, isInverse: E, backgroundColor: w } = _param, D = _object_without_properties(_param, [
+}), vr = /*#__PURE__*/ _react.forwardRef((_param, W)=>{
+    var { dataAttributes: a, backgroundImage: r, backgroundVideo: d, poster: n, backgroundVideoRef: h, width: t, height: i, aspectRatio: s = "7:10", "aria-label": o, "aria-labelledby": b, "aria-description": v, "aria-describedby": c, actions: y, onClose: C, closeButtonLabel: x, asset: T, headline: m, pretitle: w, pretitleAs: R, pretitleLinesMax: f, title: g, titleAs: B = "h3", titleLinesMax: H, subtitle: M, subtitleLinesMax: A, description: j, descriptionLinesMax: u, extra: N, variant: V, isInverse: X, backgroundColor: I } = _param, E = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",
         "backgroundVideo",
@@ -1377,6 +1435,9 @@ const O = ()=>{
         "height",
         "aspectRatio",
         "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
         "actions",
         "onClose",
         "closeButtonLabel",
@@ -1397,129 +1458,135 @@ const O = ()=>{
         "isInverse",
         "backgroundColor"
     ]);
-    const C = r !== void 0, k = t !== void 0, me = Fe(r), { video: ie, videoAction: P } = He(t, n, c), { text: ne, ref: oe } = O(), { text: se, ref: le } = O();
-    k && (u = P ? [
-        P
+    const S = r !== void 0, z = d !== void 0, ye = _e(r), { video: se, videoAction: re } = $e(d, n, h), { text: le, ref: ce } = F(), { text: he, ref: ve } = F();
+    z && (y = re ? [
+        re
     ] : []);
-    const W = (0, _themevariantcontext.useIsInverseVariant)(), G = C || k, K = G ? "0 0 16px rgba(0,0,0,0.4)" : void 0, H = (u == null ? void 0 : u.length) || h, { textPresets: ue } = (0, _hooks.useTheme)(), Q = !!(D.href || D.to || D.onPress), ee = V || (E ? "inverse" : "default"), _e = ()=>ee === "media" || C || k ? W ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : w || ({
+    const _ = (0, _themevariantcontext.useIsInverseVariant)(), $ = S || z, L = $ ? "0 0 16px rgba(0,0,0,0.4)" : void 0, O = (y == null ? void 0 : y.length) || C, { textPresets: fe } = (0, _hooks.useTheme)(), G = !!(E.href || E.to || E.onPress), de = V || (X ? "inverse" : "default"), Ke = ()=>de === "media" || S || z ? _ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : I || ({
             default: _skincontractcssmistica.vars.colors.backgroundContainer,
-            inverse: W ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
+            inverse: _ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
             alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
-        })[ee], $e = C || k ? _cardcssmistica.touchableCardOverlayMedia : ee === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, qe = o || ((0, _headings.isBiggerHeading)(N, x) ? [
-        B,
-        ne,
-        p,
-        b,
-        I,
-        se
+        })[de], Qe = S || z ? _cardcssmistica.touchableCardOverlayMedia : de === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Ue = o || (b ? void 0 : ((0, _headings.isBiggerHeading)(B, R) ? [
+        g,
+        le,
+        w,
+        M,
+        j,
+        he
     ] : [
-        p,
-        ne,
-        B,
-        b,
-        I,
-        se
-    ]).filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
-        width: i,
-        height: d,
+        w,
+        le,
+        g,
+        M,
+        j,
+        he
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Z, {
+        width: t,
+        height: i,
         dataAttributes: _object_spread({
             "component-name": "PosterCard",
             testid: "PosterCard"
         }, a),
-        ref: M,
+        ref: W,
         aspectRatio: s,
         className: _cardcssmistica.touchableContainer,
-        "aria-label": Q ? void 0 : o,
+        "aria-label": G ? void 0 : o,
+        "aria-labelledby": G ? void 0 : b,
+        "aria-description": G ? void 0 : v,
+        "aria-describedby": G ? void 0 : c,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, D), {
+            }, E), {
                 className: _cardcssmistica.touchable,
-                "aria-label": Q ? qe : void 0,
+                "aria-label": G ? Ue : void 0,
+                "aria-labelledby": G ? b : void 0,
+                "aria-description": G ? v : void 0,
+                "aria-describedby": G ? c : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.InternalBoxed, {
                     borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
                     className: _cardcssmistica.boxed,
                     width: "100%",
                     height: "100%",
-                    background: _e(),
-                    variant: C || k ? "media" : C || k || ee === "inverse" ? "inverse" : "default",
+                    background: Ke(),
+                    variant: S || z ? "media" : S || z || de === "inverse" ? "inverse" : "default",
                     children: [
-                        Q && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: $e
+                        G && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: Qe
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.displayCardContainer,
-                            "aria-hidden": Q,
+                            "aria-hidden": G,
                             children: [
-                                (C || k) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                                    variant: W ? "inverse" : "default",
+                                (S || z) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                                    variant: _ ? "inverse" : "default",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _cardcssmistica.displayCardBackground,
-                                        children: k ? ie : me
+                                        children: z ? se : ye
                                     })
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                                    className: (0, _classnames.default)(_cardcssmistica.displayCardContent, G && !y && !H && !k ? void 0 : y ? _cardcssmistica.displayCardContentWithAsset : _cardcssmistica.displayCardContentWithTopContent),
+                                    className: (0, _classnames.default)(_cardcssmistica.displayCardContent, $ && !T && !O && !z ? void 0 : T ? _cardcssmistica.displayCardContentWithAsset : _cardcssmistica.displayCardContentWithTopContent),
                                     children: [
-                                        y ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        T ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
                                                 [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                             }),
                                             "data-testid": "asset",
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingBottom: G ? 0 : 40,
+                                                paddingBottom: $ ? 0 : 40,
                                                 paddingX: {
                                                     mobile: 16,
                                                     desktop: 24
                                                 },
-                                                children: y
+                                                children: T
                                             })
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingBottom: H || k ? G ? 24 : 64 : 0
+                                            paddingBottom: O || z ? $ ? 24 : 64 : 0
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: (0, _classnames.default)(_cardcssmistica.posterCardContentWrapper, {
-                                                [_cardcssmistica.displayCardGradient]: G
+                                                [_cardcssmistica.displayCardGradient]: $
                                             }),
-                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Xe, {
-                                                title: B ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
-                                                    truncate: j,
-                                                    weight: ue.cardTitle.weight,
-                                                    as: N,
-                                                    children: B
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(qe, {
+                                                title: g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
+                                                    truncate: H,
+                                                    weight: fe.cardTitle.weight,
+                                                    as: B,
+                                                    children: g
                                                 })) : void 0,
-                                                titleAs: N,
-                                                headline: v,
-                                                pretitle: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                titleAs: B,
+                                                headline: m,
+                                                pretitle: w ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     forceMobileSizes: !0,
-                                                    truncate: g,
-                                                    as: x,
+                                                    truncate: f,
+                                                    as: R,
                                                     regular: !0,
-                                                    textShadow: K,
-                                                    children: p
+                                                    textShadow: L,
+                                                    children: w
                                                 }) : void 0,
-                                                pretitleAs: x,
-                                                subtitle: b ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                pretitleAs: R,
+                                                subtitle: M ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     forceMobileSizes: !0,
-                                                    truncate: T,
+                                                    truncate: A,
                                                     as: "div",
                                                     regular: !0,
-                                                    textShadow: K,
-                                                    children: b
+                                                    textShadow: L,
+                                                    children: M
                                                 }) : void 0,
-                                                description: I ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                description: j ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     forceMobileSizes: !0,
-                                                    truncate: R,
+                                                    truncate: u,
                                                     as: "p",
                                                     regular: !0,
-                                                    textShadow: K,
-                                                    color: G ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                                                    children: I
+                                                    textShadow: L,
+                                                    color: $ ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                                    children: j
                                                 }) : void 0,
-                                                headlineRef: oe,
-                                                extra: A,
-                                                extraRef: le
+                                                headlineRef: ce,
+                                                extra: N,
+                                                extraRef: ve
                                             })
                                         })
                                     ]
@@ -1529,11 +1596,11 @@ const O = ()=>{
                     ]
                 })
             })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                onClose: h,
-                closeButtonLabel: m,
-                actions: u,
-                variant: C || k ? "media" : ee === "inverse" ? "inverse" : "default"
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                onClose: C,
+                closeButtonLabel: x,
+                actions: y,
+                variant: S || z ? "media" : de === "inverse" ? "inverse" : "default"
             })
         ]
     });