@telefonica/mistica 16.44.1 → 16.45.0

package/dist/card-internal.css-mistica.js

@@ -5,74 +5,74 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    actionsContainerVariants: function() {
-        return n;
+    get actionsContainerVariants () {
+        return y;
     },
-    backgroundImageOrVideoContainer: function() {
-        return a;
+    get backgroundImageOrVideoContainer () {
+        return l;
     },
-    boxed: function() {
-        return f;
+    get boxed () {
+        return r;
     },
-    container: function() {
-        return y;
+    get container () {
+        return a;
     },
-    containerPaddingBottomVariants: function() {
-        return r;
+    get containerPaddingBottomVariants () {
+        return m;
     },
-    containerPaddingTopVariants: function() {
-        return t;
+    get containerPaddingTopVariants () {
+        return f;
     },
-    containerPaddingXVariants: function() {
+    get containerPaddingXVariants () {
         return d;
     },
-    contentContainer: function() {
-        return p;
+    get contentContainer () {
+        return o;
     },
-    textContent: function() {
-        return e;
+    get textContent () {
+        return s;
     },
-    topActionsContainer: function() {
-        return i;
+    get topActionsContainer () {
+        return c;
     },
-    touchable: function() {
-        return o;
+    get touchable () {
+        return t;
     },
-    touchableCardOverlay: function() {
-        return m;
+    get touchableCardOverlay () {
+        return e;
     },
-    touchableCardOverlayInverse: function() {
-        return s;
+    get touchableCardOverlayInverse () {
+        return i;
     },
-    touchableContainer: function() {
-        return c;
+    get touchableContainer () {
+        return p;
     },
-    vars: function() {
-        return l;
+    get vars () {
+        return n;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./card-internal.css.ts.vanilla.css-mistica.js");
 var n = {
-    display: "v16_44_1_1y2v1nfg0",
-    default: "v16_44_1_1499nmdj v16_44_1_1y2v1nffu",
-    snap: "v16_44_1_1y2v1nffu"
-}, a = "v16_44_1_1499nmd15 v16_44_1_1y2v1nfq9 v16_44_1_1y2v1nfqq v16_44_1_1y2v1nfph v16_44_1_1y2v1nfuk", f = "v16_44_1_1499nmdr", y = "v16_44_1_1499nmd2 v16_44_1_1y2v1nfpg v16_44_1_1y2v1nfpm v16_44_1_1y2v1nfpr", r = {
-    display: "v16_44_1_1y2v1nfhc",
-    default: "v16_44_1_1499nmdp v16_44_1_1y2v1nfh9",
-    snap: "v16_44_1_1499nmdq v16_44_1_1y2v1nfh3"
-}, t = {
-    display: "v16_44_1_1y2v1nfg0",
-    default: "v16_44_1_1499nmdd v16_44_1_1y2v1nffu",
-    snap: "v16_44_1_1499nmde v16_44_1_1y2v1nffu"
-}, d = {
-    display: "v16_44_1_1y2v1nfii v16_44_1_1y2v1nfjr",
-    default: "v16_44_1_1499nmd7 v16_44_1_1y2v1nfic v16_44_1_1y2v1nfjl",
-    snap: "v16_44_1_1499nmd8 v16_44_1_1y2v1nfic v16_44_1_1y2v1nfjl"
-}, p = "v16_44_1_1499nmdz v16_44_1_1y2v1nfpg v16_44_1_1y2v1nfpm v16_44_1_1y2v1nfpr v16_44_1_1y2v1nfpy", e = "v16_44_1_1y2v1nfpg v16_44_1_1y2v1nfpm v16_44_1_1y2v1nfps v16_44_1_1y2v1nfqq v16_44_1_1y2v1nfq9", i = "v16_44_1_1499nmd13 v16_44_1_1y2v1nfph v16_44_1_1y2v1nft1 v16_44_1_1y2v1nftv v16_44_1_1y2v1nfpm v16_44_1_1y2v1nfpr", o = "v16_44_1_1499nmdt v16_44_1_1y2v1nfff v16_44_1_1y2v1nfgo v16_44_1_1y2v1nfhx v16_44_1_1y2v1nfj6 v16_44_1_1y2v1nfpm v16_44_1_1y2v1nfps v16_44_1_1y2v1nfpg v16_44_1_1y2v1nfs4 v16_44_1_1y2v1nffe v16_44_1_1y2v1nfq9 v16_44_1_1y2v1nfqq", m = "v16_44_1_1499nmdw v16_44_1_1499nmdv", s = "v16_44_1_1499nmdx v16_44_1_1499nmdv", c = "v16_44_1_1499nmdu", l = {
-    aspectRatio: "var(--v16_44_1_1499nmd0)"
-};
+    aspectRatio: "var(--v16_45_1499nmd0)"
+}, a = "v16_45_1499nmd2 v16_45_1499nmd1 v16_45_1y2v1nfpg v16_45_1y2v1nfpm v16_45_1y2v1nfpr", d = {
+    display: "v16_45_1499nmd6 v16_45_1499nmd3 v16_45_1y2v1nfii v16_45_1y2v1nfjr",
+    default: "v16_45_1499nmd7 v16_45_1499nmd4 v16_45_1y2v1nfic v16_45_1y2v1nfjl",
+    snap: "v16_45_1499nmd8 v16_45_1499nmd5 v16_45_1y2v1nfic v16_45_1y2v1nfjl"
+}, f = {
+    display: "v16_45_1499nmdc v16_45_1499nmd9 v16_45_1y2v1nfg0",
+    default: "v16_45_1499nmdd v16_45_1499nmda v16_45_1y2v1nffu",
+    snap: "v16_45_1499nmde v16_45_1499nmdb v16_45_1y2v1nffu"
+}, y = {
+    display: "v16_45_1499nmdi v16_45_1499nmdf v16_45_1y2v1nfg0",
+    default: "v16_45_1499nmdj v16_45_1499nmdg v16_45_1y2v1nffu",
+    snap: "v16_45_1499nmdk v16_45_1499nmdh v16_45_1y2v1nffu"
+}, m = {
+    display: "v16_45_1499nmdo v16_45_1499nmdl v16_45_1y2v1nfhc",
+    default: "v16_45_1499nmdp v16_45_1499nmdm v16_45_1y2v1nfh9",
+    snap: "v16_45_1499nmdq v16_45_1499nmdn v16_45_1y2v1nfh3"
+}, r = "v16_45_1499nmdr", t = "v16_45_1499nmdt v16_45_1499nmds v16_45_1y2v1nfff v16_45_1y2v1nfgo v16_45_1y2v1nfhx v16_45_1y2v1nfj6 v16_45_1y2v1nfpm v16_45_1y2v1nfps v16_45_1y2v1nfpg v16_45_1y2v1nfs4 v16_45_1y2v1nffe v16_45_1y2v1nfq9 v16_45_1y2v1nfqq", p = "v16_45_1499nmdu", e = "v16_45_1499nmdw v16_45_1499nmdv", i = "v16_45_1499nmdx v16_45_1499nmdv", o = "v16_45_1499nmdz v16_45_1499nmdy v16_45_1y2v1nfpg v16_45_1y2v1nfpm v16_45_1y2v1nfpr v16_45_1y2v1nfpy", s = "v16_45_1499nmd11 v16_45_1499nmd10 v16_45_1y2v1nfpg v16_45_1y2v1nfpm v16_45_1y2v1nfps v16_45_1y2v1nfqq v16_45_1y2v1nfq9", c = "v16_45_1499nmd13 v16_45_1499nmd12 v16_45_1y2v1nfph v16_45_1y2v1nft1 v16_45_1y2v1nftv v16_45_1y2v1nfpm v16_45_1y2v1nfpr", l = "v16_45_1499nmd15 v16_45_1499nmd14 v16_45_1y2v1nfq9 v16_45_1y2v1nfqq v16_45_1y2v1nfph v16_45_1y2v1nfuk";

package/dist/card-internal.css.d.ts

@@ -1,5 +1,5 @@
 export declare const vars: {
-    aspectRatio: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    aspectRatio: `var(--${string})`;
 };
 export declare const container: string;
 export declare const containerPaddingXVariants: Record<"default" | "display" | "snap", string>;

package/dist/card-internal.d.ts

@@ -162,6 +162,6 @@ type PrivateTopActionsProps = {
     variant?: Variant;
     containerStyles?: React.CSSProperties;
 };
-export declare const TopActions: ({ testid, onClose, closeButtonLabel, actions: actionsProp, variant, containerStyles, }: Omit<TopActionsProps, 'topActions'> & PrivateTopActionsProps) => JSX.Element;
+export declare const TopActions: ({ testid, onClose, closeButtonLabel, actions: actionsProp, variant, containerStyles, }: Omit<TopActionsProps, "topActions"> & PrivateTopActionsProps) => JSX.Element;
 export declare const InternalCard: React.ForwardRefExoticComponent<MaybeTouchableCard<CardProps> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/card-internal.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -6,23 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    CardActionIconButton: function() {
+    get CardActionIconButton () {
         return Yt;
     },
-    CardActionSpinner: function() {
+    get CardActionSpinner () {
         return Dt;
     },
-    InternalCard: function() {
+    get InternalCard () {
         return Ci;
     },
-    TopActions: function() {
+    get TopActions () {
         return $e;
     },
-    useVideoWithControls: function() {
+    get useVideoWithControls () {
         return Kt;
     }
 });
@@ -181,16 +181,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
-    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": h, "aria-labelledby": m, "aria-description": s, "aria-describedby": l, dataAttributes: d, backgroundColor: g, variant: B } = param;
+const Et = /*#__PURE__*/ _react.forwardRef((param, m)=>{
+    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": c, "aria-labelledby": p, "aria-description": s, "aria-describedby": l, dataAttributes: d, backgroundColor: g, variant: B } = param;
     const f = n && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(a), x = f ? (0, _css.applyCssVars)({
         [_cardinternalcssmistica.vars.aspectRatio]: String(f)
     }) : {}, b = g ? "none" : void 0, v = e === "naked";
     return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
-        ref: p,
-        "aria-label": h,
-        "aria-labelledby": m,
+        ref: m,
+        "aria-label": c,
+        "aria-labelledby": p,
         "aria-description": s,
         "aria-describedby": l,
         className: (0, _classnames.default)(_cardinternalcssmistica.container)
@@ -324,18 +324,18 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         size: 12
     });
 }, Kt = (e, o, n, r)=>{
-    const { texts: a, t: h } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, l] = _react.useReducer(Gt, process.env.NODE_ENV === "test" ? "playing" : "loading");
+    const { texts: a, t: c } = (0, _hooks.useTheme)(), p = _react.useRef(null), [s, l] = _react.useReducer(Gt, process.env.NODE_ENV === "test" ? "playing" : "loading");
     _react.useEffect(()=>{
         var f;
-        const p = setTimeout(()=>l("showSpinner"), 2e3);
-        return (f = m.current) == null || f.load(), ()=>{
-            clearTimeout(p), l("reset");
+        const m = setTimeout(()=>l("showSpinner"), 2e3);
+        return (f = p.current) == null || f.load(), ()=>{
+            clearTimeout(m), l("reset");
         };
     }, [
         e
     ]);
     const d = _react.useMemo(()=>e !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(m, n),
+            ref: (0, _common.combineRefs)(p, n),
             src: e,
             poster: o,
             width: "100%",
@@ -349,8 +349,8 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         o,
         r
     ]), g = ()=>{
-        const p = m.current;
-        p && (s === "loading" ? l("showSpinner") : s === "paused" ? p.play() : s === "playing" && p.pause());
+        const m = p.current;
+        m && (s === "loading" ? l("showSpinner") : s === "paused" ? m.play() : s === "playing" && m.pause());
     };
     if (s === "error") return {
         video: d
@@ -358,11 +358,11 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     const B = d ? {
         uncheckedProps: {
             Icon: s === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? Dt : _t,
-            label: s === "loadingTimeout" ? "" : a.pauseIconButtonLabel || h(_texttokens.pauseIconButtonLabel)
+            label: s === "loadingTimeout" ? "" : a.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
         },
         checkedProps: {
             Icon: Xt,
-            label: a.playIconButtonLabel || h(_texttokens.playIconButtonLabel)
+            label: a.playIconButtonLabel || c(_texttokens.playIconButtonLabel)
         },
         onChange: g,
         disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : s === "loadingTimeout",
@@ -409,34 +409,34 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         })
     }));
 }, $e = (param)=>{
-    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: h = {} } = param;
-    const { texts: m, t: s } = (0, _hooks.useTheme)(), l = r ? [
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: c = {} } = param;
+    const { texts: p, t: s } = (0, _hooks.useTheme)(), l = r ? [
         ...r
     ] : [];
     return o && l.push({
-        label: n || m.closeButtonLabel || s(_texttokens.closeButtonLabel),
+        label: n || p.closeButtonLabel || s(_texttokens.closeButtonLabel),
         onPress: o,
         Icon: _iconcloseregular.default
     }), l.length === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: a,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _cardinternalcssmistica.topActionsContainer,
-            style: h,
+            style: c,
             "data-testid": e,
             children: l.map((d, g)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Yt, _object_spread({}, d), g) : d)
         })
     });
 }, qt = (param)=>{
-    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: h, imageAlt: m = "", video: s, mediaAspectRatio: l, mediaPosition: d, mediaWidth: g, circledImage: B } = param;
-    const p = (0, _aspectratiosupport.aspectRatioToNumber)(l), f = e === "naked" && B ? {
+    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: c, imageAlt: p = "", video: s, mediaAspectRatio: l, mediaPosition: d, mediaWidth: g, circledImage: B } = param;
+    const m = (0, _aspectratiosupport.aspectRatioToNumber)(l), f = e === "naked" && B ? {
         circular: !0
     } : {
         width: "100%",
-        height: d === "top" && p === 0 ? void 0 : "100%"
+        height: d === "top" && m === 0 ? void 0 : "100%"
     }, b = (()=>{
         if (s) return s;
         if (r !== void 0 || a !== void 0) {
-            const i = d === "left" || d === "right", c = {
+            const i = d === "left" || d === "right", h = {
                 fit: {
                     objectFit: "contain",
                     objectPosition: `bottom ${d}`
@@ -457,8 +457,8 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: m
-            }), i ? c[h] : {}));
+                alt: p
+            }), i ? h[c] : {}));
         }
         return null;
     })();
@@ -469,7 +469,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     return d === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
-                aspectRatio: p,
+                aspectRatio: m,
                 style: v,
                 children: b
             }),
@@ -501,8 +501,8 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         ]
     });
 }, Jt = (param)=>{
-    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: h, buttonLink: m, hasBackgroundImageOrVideo: s, footerVariant: l, footerBackgroundColor: d, externalVariant: g, overlayColor: B } = param;
-    const p = !!(a || h || m), f = !!(a && h && m), x = {
+    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: c, buttonLink: p, hasBackgroundImageOrVideo: s, footerVariant: l, footerBackgroundColor: d, externalVariant: g, overlayColor: B } = param;
+    const m = !!(a || c || p), f = !!(a && c && p), x = {
         default: _skincontractcssmistica.vars.colors.divider,
         brand: _skincontractcssmistica.vars.colors.dividerBrand,
         negative: _skincontractcssmistica.vars.colors.dividerNegative,
@@ -542,7 +542,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                             space: 16,
                             children: [
                                 r,
-                                p && // @FIXME: We should use the ButtonGroup component
+                                m && // @FIXME: We should use the ButtonGroup component
                                 // https://jira.tid.es/browse/WEB-2278
                                 // https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/%F0%9F%94%B8-Buttons-Specs?node-id=4337-1606&t=HtImvar8DMbivDqC-0
                                 (f ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -553,14 +553,14 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                             alignItems: "center",
                                             children: [
                                                 a,
-                                                h
+                                                c
                                             ]
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: m
+                                            children: p
                                         })
                                     ]
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -568,8 +568,8 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                     alignItems: "center",
                                     children: [
                                         a,
-                                        h,
-                                        m
+                                        c,
+                                        p
                                     ]
                                 }))
                             ]
@@ -580,33 +580,33 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         ]
     });
 }, Qt = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: n, size: r, variant: a, headline: h, title: m, titleAs: s = "h3", titleLinesMax: l, pretitle: d, pretitleAs: g, pretitleLinesMax: B, subtitle: p, subtitleLinesMax: f, description: x, descriptionLinesMax: b, withTextShadow: v } = param;
-    const { textPresets: i, colorValues: c } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), S = {
+    let { type: e, hasCustomBackground: o, headlineRef: n, size: r, variant: a, headline: c, title: p, titleAs: s = "h3", titleLinesMax: l, pretitle: d, pretitleAs: g, pretitleLinesMax: B, subtitle: m, subtitleLinesMax: f, description: x, descriptionLinesMax: b, withTextShadow: v } = param;
+    const { textPresets: i, colorValues: h } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), S = {
         hyphens: "auto"
     }, E = {
         default: {
-            pretitle: c.textPrimary,
-            title: c.textPrimary,
-            subtitle: c.textPrimary,
-            description: c.textSecondary
+            pretitle: h.textPrimary,
+            title: h.textPrimary,
+            subtitle: h.textPrimary,
+            description: h.textSecondary
         },
         brand: {
-            pretitle: c.textPrimaryBrand,
-            title: c.textPrimaryBrand,
-            subtitle: c.textPrimaryBrand,
-            description: c.textSecondaryBrand
+            pretitle: h.textPrimaryBrand,
+            title: h.textPrimaryBrand,
+            subtitle: h.textPrimaryBrand,
+            description: h.textSecondaryBrand
         },
         negative: {
-            pretitle: c.textPrimaryNegative,
-            title: c.textPrimaryNegative,
-            subtitle: c.textPrimaryNegative,
-            description: c.textSecondaryNegative
+            pretitle: h.textPrimaryNegative,
+            title: h.textPrimaryNegative,
+            subtitle: h.textPrimaryNegative,
+            description: h.textSecondaryNegative
         },
         media: {
-            pretitle: c.textPrimaryMedia,
-            title: c.textPrimaryMedia,
-            subtitle: c.textPrimaryMedia,
-            description: e === "cover" && o ? c.textPrimaryMedia : c.textSecondaryMedia
+            pretitle: h.textPrimaryMedia,
+            title: h.textPrimaryMedia,
+            subtitle: h.textPrimaryMedia,
+            description: e === "cover" && o ? h.textPrimaryMedia : h.textSecondaryMedia
         }
     }, N = {
         snap: {
@@ -699,7 +699,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 weight: "regular"
             }
         }
-    }, V = E[a] || E[M] || E.default, z = N[r] || N.default, A = v ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, re = h && // Read order 2. Visual order 1
+    }, V = E[a] || E[M] || E.default, z = N[r] || N.default, A = v ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, re = c && // Read order 2. Visual order 1
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 8,
@@ -707,10 +707,10 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         },
         "data-testid": "headline",
         ref: n,
-        children: typeof h == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+        children: typeof c == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
-            children: h
-        }) : h
+            children: c
+        }) : c
     }), C = d && // Read order: 3 or 1. Visual order 2
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -725,7 +725,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             textShadow: A,
             children: d
         }))
-    }), _ = m && // Read order: 1 or 3. Visual order 3
+    }), _ = p && // Read order: 1 or 3. Visual order 3
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 4,
@@ -737,9 +737,9 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             truncate: l,
             color: V.title,
             textShadow: A,
-            children: m
+            children: p
         }))
-    }), ne = p && // Read order: 4. Visual order 4
+    }), ne = m && // Read order: 4. Visual order 4
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 0,
@@ -751,7 +751,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             truncate: f,
             color: V.subtitle,
             textShadow: A,
-            children: p
+            children: m
         }))
     }), ae = x && // Read order: 5. Visual order 5
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -767,7 +767,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             textShadow: A,
             children: x
         }))
-    }), [X, K] = m && (0, _headings.isBiggerHeading)(s, g) ? [
+    }), [X, K] = p && (0, _headings.isBiggerHeading)(s, g) ? [
         _,
         C
     ] : [
@@ -791,7 +791,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
 ], Zt = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, Ge = (e, o)=>e.replace(Zt, (n, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Ci = /*#__PURE__*/ _react.forwardRef((_param, qe)=>{
-    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: h = "", imageFit: m = "fill-center", videoSrc: s, videoRef: l, media: d, mediaAspectRatio: g = "auto", mediaPosition: B = "top", mediaWidth: p = 150, circledImage: f, asset: x, headline: b, title: v, titleAs: i = "h3", titleLinesMax: c, pretitle: M, pretitleAs: S, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: V, description: z, descriptionLinesMax: A, dataAttributes: re, variant: C, width: _, height: ne, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: de, buttonSecondary: se, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, topActions: W, onClose: ye, closeButtonLabel: Ye, "aria-label": Be, "aria-labelledby": ce, "aria-description": Re, "aria-describedby": we, gradientOverlayColor: Y } = _param, j = _object_without_properties(_param, [
+    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: c = "", imageFit: p = "fill-center", videoSrc: s, videoRef: l, media: d, mediaAspectRatio: g = "auto", mediaPosition: B = "top", mediaWidth: m = 150, circledImage: f, asset: x, headline: b, title: v, titleAs: i = "h3", titleLinesMax: h, pretitle: M, pretitleAs: S, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: V, description: z, descriptionLinesMax: A, dataAttributes: re, variant: C, width: _, height: ne, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: de, buttonSecondary: se, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, topActions: W, onClose: ye, closeButtonLabel: Ye, "aria-label": Be, "aria-labelledby": ce, "aria-description": Re, "aria-describedby": we, gradientOverlayColor: Y } = _param, j = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -841,8 +841,9 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         "aria-describedby",
         "gradientOverlayColor"
     ]);
-    const { text: He, ref: Je } = (0, _hooks.useInnerText)(), { text: ze, ref: Qe } = (0, _hooks.useInnerText)(), R = !!(j.href || j.to || j.onPress), he = !!(de || se || le), { colorValues: Te } = (0, _hooks.useTheme)(), me = e === "media" || e === "naked", Ue = me && (r !== void 0 || a !== void 0), Se = me && s !== void 0, Ce = Ue || Se, pe = me && !!d && !Ce, w = Ce || pe, H = e === "naked", y = w ? B : "top", Ie = e === "naked" && f ? 1 : g, ue = e === "cover" && (r !== void 0 || a !== void 0), q = e === "cover" && s !== void 0, Le = !!n || ue || q, P = ue || q, Ze = Se || q, { video: Ne, videoAction: ge } = Kt(Ze ? s : void 0, r, l, e === "cover" || y !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ie) === 0), $ = (0, _themevariantcontext.useThemeVariant)(), et = C ? (0, _themevariantcontext.normalizeVariant)(C) : $, I = C && (0, _themevariantcontext.normalizeVariant)(C) || (e === "cover" && Le ? "media" : "default"), tt = I === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, L = Xe && (he || !!ke) || he && j.onPress, Ve = !L && he, J = ((W == null ? void 0 : W.length) || 0) + (ye ? 1 : 0), Ae = ge ? J + 1 : J, it = x && !(w && y === "left"), ot = e !== "cover" && Ae > 0 && !it && !b, G = e === "cover" || e === "data" && o === "display", F = _skincontractcssmistica.vars.borderRadii.container, rt = ue || q ? "transparent" : n || (I === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : I === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), nt = Be || (ce ? void 0 : (v && (0, _headings.isBiggerHeading)(i, S) ? [
+    const { text: He, ref: Je } = (0, _hooks.useInnerText)(), { text: ze, ref: Qe } = (0, _hooks.useInnerText)(), R = !!(j.href || j.to || j.onPress), he = !!(de || se || le), { colorValues: Te } = (0, _hooks.useTheme)(), pe = e === "media" || e === "naked", Ue = pe && (r !== void 0 || a !== void 0), Se = pe && s !== void 0, Ce = Ue || Se, me = pe && !!d && !Ce, w = Ce || me, H = e === "naked", y = w ? B : "top", Ie = e === "naked" && f ? 1 : g, ue = e === "cover" && (r !== void 0 || a !== void 0), q = e === "cover" && s !== void 0, Le = !!n || ue || q, P = ue || q, Ze = Se || q, { video: Ne, videoAction: ge } = Kt(Ze ? s : void 0, r, l, e === "cover" || y !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ie) === 0), $ = (0, _themevariantcontext.useThemeVariant)(), et = C ? (0, _themevariantcontext.normalizeVariant)(C) : $, I = C && (0, _themevariantcontext.normalizeVariant)(C) || (e === "cover" && Le ? "media" : "default"), tt = I === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, L = Xe && (he || !!ke) || he && j.onPress, Ve = !L && he, J = ((W == null ? void 0 : W.length) || 0) + (ye ? 1 : 0), Ae = ge ? J + 1 : J, it = x && !(w && y === "left"), ot = e !== "cover" && Ae > 0 && !it && !b, G = e === "cover" || e === "data" && o === "display", F = _skincontractcssmistica.vars.borderRadii.container, rt = ue || q ? "transparent" : n || (I === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : I === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), nt = Be || (ce ? void 0 : (v && (0, _headings.isBiggerHeading)(i, S) ? [
         v,
+        c,
         ze,
         M,
         N,
@@ -852,6 +853,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         M,
         ze,
         v,
+        c,
         N,
         z,
         He
@@ -895,7 +897,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     containerStyles: {
                         position: "absolute",
                         top: 16,
-                        left: y === "left" ? typeof p == "number" ? `calc(${p}px - 48px)` : `calc(${p} - 48px)` : "auto",
+                        left: y === "left" ? typeof m == "number" ? `calc(${m}px - 48px)` : `calc(${m} - 48px)` : "auto",
                         right: y !== "left" ? J * 48 + 16 : "auto"
                     }
                 })
@@ -922,7 +924,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: tt
                     }),
-                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    me && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: _object_spread({
                             // for some reason, this width is required to pass headless screenshot tests
                             // otherwise, it gets 0px width and the media is not visible
@@ -932,7 +934,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                         })),
                         children: d
                     }),
-                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
+                    me && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                         absolute: !0,
                         size: o,
                         asset: x,
@@ -945,11 +947,11 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                         mediaPosition: y,
                         asset: x,
                         video: Ne,
-                        imageFit: m,
+                        imageFit: p,
                         imageSrc: r,
                         imageSrcSet: a,
-                        imageAlt: h,
-                        mediaWidth: p,
+                        imageAlt: c,
+                        mediaWidth: m,
                         circledImage: f
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -1000,7 +1002,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                                     pretitleLinesMax: E,
                                                     title: v,
                                                     titleAs: i,
-                                                    titleLinesMax: c,
+                                                    titleLinesMax: h,
                                                     subtitle: N,
                                                     subtitleLinesMax: V,
                                                     description: z,

package/dist/card-media.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    HighlightedCard: function() {
+    get HighlightedCard () {
         return c;
     },
-    MediaCard: function() {
+    get MediaCard () {
         return g;
     }
 });

package/dist/card-naked.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    NakedCard: function() {
+    get NakedCard () {
         return u;
     },
-    SmallNakedCard: function() {
+    get SmallNakedCard () {
         return A;
     }
 });