@telefonica/mistica 14.21.0 → 14.22.0

package/dist/card.js

@@ -202,46 +202,46 @@ const Ne = (r, a)=>{
         Icon: _iconcloseregular.default
     }), l;
 }, Ce = 48, W = (param)=>{
-    let { actions: r , onClose: a , type: i = "default"  } = param;
-    const l = Ne(r, a), p = l.length > 0, s = {
+    let { actions: r , padding: a = 8 , onClose: i , type: l = "default"  } = param;
+    const m = Ne(r, i), s = m.length > 0, o = {
         default: _skincontractcssmistica.vars.colors.neutralHigh,
         inverse: _skincontractcssmistica.vars.colors.inverse,
         media: "#000000"
-    }, o = {
+    }, d = {
         default: _cardcssmistica.cardAction,
         inverse: _cardcssmistica.cardActionInverse,
         media: _cardcssmistica.cardActionMedia
     };
-    return p ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    return s ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             position: "absolute",
-            right: 8,
-            top: 8,
+            right: a,
+            top: a,
             zIndex: 3
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: (0, _sprinklescssmistica.sprinkles)({
                 display: "flex"
             }),
-            children: l.map((param, h)=>/* @__PURE__ */ {
-                let { onPress: d , label: m , Icon: c , disabled: t = !1  } = param;
+            children: m.map((param, u)=>/* @__PURE__ */ {
+                let { onPress: p , label: c , Icon: t , disabled: h = !1  } = param;
                 return (0, _jsxruntime.jsx)(_iconbutton.default, {
-                    disabled: t,
+                    disabled: h,
                     size: Ce,
-                    onPress: d,
-                    "aria-label": m,
+                    onPress: p,
+                    "aria-label": c,
                     className: _cardcssmistica.cardActionIconButton,
                     style: {
                         display: "flex"
                     },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: o[i],
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
-                            color: s[i],
+                        className: d[l],
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
+                            color: o[l],
                             size: 20
                         })
                     })
-                }, h);
+                }, u);
             })
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
@@ -252,17 +252,17 @@ const Ne = (r, a)=>{
         "9:10": 9 / 10,
         auto: 0
     })[r] : 0, E = /*#__PURE__*/ _react.forwardRef((param, d)=>{
-    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: l , dataAttributes: p , className: s , "aria-label": o  } = param;
-    const m = Qe(l);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(p)), {
+    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: l , dataAttributes: m , className: s , "aria-label": o  } = param;
+    const p = Qe(l);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m)), {
         ref: d,
         "aria-label": o,
         className: (0, _classnames.default)(s, _cardcssmistica.cardContainer),
         style: _object_spread({
             width: a,
             height: i
-        }, m ? (0, _dynamic.assignInlineVars)({
-            [_cardcssmistica.vars.aspectRatio]: String(m)
+        }, p ? (0, _dynamic.assignInlineVars)({
+            [_cardcssmistica.vars.aspectRatio]: String(p)
         }) : {}),
         children: r
     }));
@@ -314,18 +314,18 @@ const Ne = (r, a)=>{
         size: 12
     });
 }, be = (r, a, i)=>{
-    const { texts: l  } = (0, _hooks.useTheme)(), p = _react.useRef(null), [s, o] = _react.useReducer($e, "loading");
+    const { texts: l  } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer($e, "loading");
     _react.useEffect(()=>{
         var h;
         const t = setTimeout(()=>o("showSpinner"), 2e3);
-        return (h = p.current) == null || h.load(), ()=>{
+        return (h = m.current) == null || h.load(), ()=>{
             clearTimeout(t), o("reset");
         };
     }, [
         r
     ]);
     const d = _react.useMemo(()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(p, i),
+            ref: (0, _common.combineRefs)(m, i),
             src: r,
             width: "100%",
             height: "100%",
@@ -337,8 +337,8 @@ const Ne = (r, a)=>{
         i,
         r,
         a
-    ]), m = ()=>{
-        const t = p.current;
+    ]), p = ()=>{
+        const t = m.current;
         t && (s === "loading" ? o("showSpinner") : s === "paused" ? t.play() : s === "playing" && t.pause());
     };
     if (s === "error") return {
@@ -351,7 +351,7 @@ const Ne = (r, a)=>{
             paused: er,
             loadingTimeout: Ve
         }[s],
-        onPress: m,
+        onPress: p,
         label: {
             playing: l.pauseIconButtonLabel,
             loading: l.pauseIconButtonLabel,
@@ -365,8 +365,8 @@ const Ne = (r, a)=>{
         videoAction: c
     };
 }, ae = (param)=>{
-    let { headline: r , pretitle: a , pretitleLinesMax: i , title: l , titleLinesMax: p , subtitle: s , subtitleLinesMax: o , description: d , descriptionLinesMax: m , extra: c , button: t , buttonLink: h  } = param;
-    const { textPresets: f  } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+    let { headline: r , pretitle: a , pretitleLinesMax: i , title: l , titleLinesMax: m , subtitle: s , subtitleLinesMax: o , description: d , descriptionLinesMax: p , extra: c , button: t , buttonLink: h  } = param;
+    const { textPresets: u  } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
             children: r
         }) : r : null;
@@ -403,8 +403,8 @@ const Ne = (r, a)=>{
                                                     mobileLineHeight: "24px",
                                                     desktopSize: 20,
                                                     desktopLineHeight: "28px",
-                                                    truncate: p,
-                                                    weight: f.cardTitle.weight,
+                                                    truncate: m,
+                                                    weight: u.cardTitle.weight,
                                                     as: "h3",
                                                     hyphens: "auto",
                                                     children: l
@@ -422,7 +422,7 @@ const Ne = (r, a)=>{
                                 })
                             }),
                             d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                truncate: m,
+                                truncate: p,
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -446,7 +446,7 @@ const Ne = (r, a)=>{
         ]
     });
 }, Br = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: p , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: m , description: c , descriptionLinesMax: t , extra: h , actions: f , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, u = _object_without_properties(_param, [
+    var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -466,7 +466,7 @@ const Ne = (r, a)=>{
         "aria-label",
         "onClose"
     ]);
-    const x = u.href || u.to || u.onPress;
+    const x = f.href || f.to || f.onPress;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
         dataAttributes: _object_spread({
             "component-name": "MediaCard"
@@ -481,7 +481,7 @@ const Ne = (r, a)=>{
                 height: "100%",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, u), {
+                }, f), {
                     className: _cardcssmistica.touchable,
                     "aria-label": T,
                     children: [
@@ -500,9 +500,9 @@ const Ne = (r, a)=>{
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
                                         headline: i,
                                         pretitle: l,
-                                        pretitleLinesMax: p,
+                                        pretitleLinesMax: m,
                                         title: d,
-                                        titleLinesMax: m,
+                                        titleLinesMax: p,
                                         subtitle: s,
                                         subtitleLinesMax: o,
                                         description: c,
@@ -531,13 +531,13 @@ const Ne = (r, a)=>{
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
                 onClose: g,
-                actions: f,
+                actions: u,
                 type: "media"
             })
         ]
     });
 }), Sr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: p , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: m , description: c , descriptionLinesMax: t , extra: h , actions: f , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, u = _object_without_properties(_param, [
+    var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -557,7 +557,7 @@ const Ne = (r, a)=>{
         "aria-label",
         "onClose"
     ]);
-    const x = u.href || u.to || u.onPress, M = r && r.type === _image.default && r.props.circular;
+    const x = f.href || f.to || f.onPress, M = r && r.type === _image.default && r.props.circular;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
         ref: I,
         dataAttributes: _object_spread({
@@ -568,7 +568,7 @@ const Ne = (r, a)=>{
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, u), {
+            }, f), {
                 className: _cardcssmistica.touchable,
                 "aria-label": T,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -592,9 +592,9 @@ const Ne = (r, a)=>{
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
                                 headline: i,
                                 pretitle: l,
-                                pretitleLinesMax: p,
+                                pretitleLinesMax: m,
                                 title: d,
-                                titleLinesMax: m,
+                                titleLinesMax: p,
                                 subtitle: s,
                                 subtitleLinesMax: o,
                                 description: c,
@@ -621,13 +621,13 @@ const Ne = (r, a)=>{
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
                 onClose: g,
-                actions: f,
+                actions: u,
                 type: "media"
             })
         ]
     });
 }), Ir = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { media: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: p , description: s , descriptionLinesMax: o , extra: d , dataAttributes: m , "aria-label": c  } = _param, t = _object_without_properties(_param, [
+    var { media: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , description: s , descriptionLinesMax: o , extra: d , dataAttributes: p , "aria-label": c  } = _param, t = _object_without_properties(_param, [
         "media",
         "title",
         "titleLinesMax",
@@ -639,14 +639,14 @@ const Ne = (r, a)=>{
         "dataAttributes",
         "aria-label"
     ]);
-    const f = t.href || t.to || t.onPress, v = r && r.type === _image.default && r.props.circular;
+    const u = t.href || t.to || t.onPress, v = r && r.type === _image.default && r.props.circular;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(E, {
         ref: h,
         dataAttributes: _object_spread({
             "component-name": "SmallNakedCard"
-        }, m),
+        }, p),
         "aria-label": c,
-        className: f ? _cardcssmistica.touchableContainer : void 0,
+        className: u ? _cardcssmistica.touchableContainer : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
             maybe: !0
         }, t), {
@@ -660,7 +660,7 @@ const Ne = (r, a)=>{
                             position: "relative"
                         },
                         children: [
-                            f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
                                     [_cardcssmistica.circularMediaOverlay]: v
                                 })
@@ -684,7 +684,7 @@ const Ne = (r, a)=>{
                                                 children: a
                                             }),
                                             l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                truncate: p,
+                                                truncate: m,
                                                 regular: !0,
                                                 as: "p",
                                                 hyphens: "auto",
@@ -712,7 +712,7 @@ const Ne = (r, a)=>{
         }))
     });
 }), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { icon: r , headline: a , pretitle: i , pretitleLinesMax: l , title: p , titleLinesMax: s , subtitle: o , subtitleLinesMax: d , description: m , descriptionLinesMax: c , extra: t , actions: h , button: f , buttonLink: v , dataAttributes: w , "aria-label": b , onClose: T , aspectRatio: g  } = _param, u = _object_without_properties(_param, [
+    var { icon: r , headline: a , pretitle: i , pretitleLinesMax: l , title: m , titleLinesMax: s , subtitle: o , subtitleLinesMax: d , description: p , descriptionLinesMax: c , extra: t , actions: h , button: u , buttonLink: v , dataAttributes: w , "aria-label": b , onClose: T , aspectRatio: g  } = _param, f = _object_without_properties(_param, [
         "icon",
         "headline",
         "pretitle",
@@ -732,7 +732,7 @@ const Ne = (r, a)=>{
         "onClose",
         "aspectRatio"
     ]);
-    const x = !!r, M = u.href || u.to || u.onPress, z = Ne(h, T), G = {
+    const x = !!r, M = f.href || f.to || f.onPress, z = Ne(h, T), G = {
         marginRight: -16,
         marginTop: -24,
         width: Ce * z.length
@@ -752,7 +752,7 @@ const Ne = (r, a)=>{
                 minHeight: "100%",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, u), {
+                }, f), {
                     className: _cardcssmistica.touchable,
                     "aria-label": b,
                     children: [
@@ -773,11 +773,11 @@ const Ne = (r, a)=>{
                                                     headline: a,
                                                     pretitle: i,
                                                     pretitleLinesMax: l,
-                                                    title: p,
+                                                    title: m,
                                                     titleLinesMax: s,
                                                     subtitle: o,
                                                     subtitleLinesMax: d,
-                                                    description: m,
+                                                    description: p,
                                                     descriptionLinesMax: c
                                                 })
                                             ]
@@ -790,10 +790,10 @@ const Ne = (r, a)=>{
                                 t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     children: t
                                 }),
-                                (f || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                (u || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.actions,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                        primaryButton: f,
+                                        primaryButton: u,
                                         link: v
                                     })
                                 })
@@ -810,7 +810,7 @@ const Ne = (r, a)=>{
         ]
     });
 }), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { icon: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: p , dataAttributes: s , "aria-label": o , extra: d , isInverse: m = !1 , aspectRatio: c  } = _param, t = _object_without_properties(_param, [
+    var { icon: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , dataAttributes: s , "aria-label": o , extra: d , isInverse: p = !1 , aspectRatio: c  } = _param, t = _object_without_properties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -822,7 +822,7 @@ const Ne = (r, a)=>{
         "isInverse",
         "aspectRatio"
     ]);
-    const f = t.href || t.to || t.onPress, v = m ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
+    const u = t.href || t.to || t.onPress, v = p ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(E, {
         dataAttributes: _object_spread({
             "component-name": "SnapCard"
@@ -832,7 +832,7 @@ const Ne = (r, a)=>{
         aspectRatio: c,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
             className: _cardcssmistica.boxed,
-            isInverse: m,
+            isInverse: p,
             width: "100%",
             minHeight: "100%",
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
@@ -841,7 +841,7 @@ const Ne = (r, a)=>{
                 className: _cardcssmistica.touchable,
                 "aria-label": o,
                 children: [
-                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: v
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
@@ -864,7 +864,7 @@ const Ne = (r, a)=>{
                                                 children: a
                                             }),
                                             l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                truncate: p,
+                                                truncate: m,
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textSecondary,
                                                 as: "p",
@@ -885,7 +885,7 @@ const Ne = (r, a)=>{
         })
     });
 }), xe = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
-    var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: l , poster: p , icon: s , headline: o , pretitle: d , pretitleLinesMax: m , title: c , titleLinesMax: t , description: h , descriptionLinesMax: f , extra: v , button: w , secondaryButton: b , onClose: T , actions: g , buttonLink: u , dataAttributes: I , width: x , height: M , aspectRatio: z , "aria-label": G  } = _param, k = _object_without_properties(_param, [
+    var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: l , poster: m , icon: s , headline: o , pretitle: d , pretitleLinesMax: p , title: c , titleLinesMax: t , description: h , descriptionLinesMax: u , extra: v , button: w , secondaryButton: b , onClose: T , actions: g , buttonLink: f , dataAttributes: I , width: x , height: M , aspectRatio: z , "aria-label": G  } = _param, k = _object_without_properties(_param, [
         "isInverse",
         "backgroundImage",
         "backgroundVideo",
@@ -911,7 +911,7 @@ const Ne = (r, a)=>{
         "aspectRatio",
         "aria-label"
     ]);
-    const L = Te(a), { video: j , videoAction: R  } = be(i, p, l);
+    const L = Te(a), { video: j , videoAction: R  } = be(i, m, l);
     i && (g = R ? [
         R
     ] : []);
@@ -987,7 +987,7 @@ const Ne = (r, a)=>{
                                                                                     children: [
                                                                                         d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                                                             forceMobileSizes: !0,
-                                                                                            truncate: m,
+                                                                                            truncate: p,
                                                                                             as: "div",
                                                                                             regular: !0,
                                                                                             textShadow: P,
@@ -1008,7 +1008,7 @@ const Ne = (r, a)=>{
                                                                     }),
                                                                     h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                                                         forceMobileSizes: !0,
-                                                                        truncate: f,
+                                                                        truncate: u,
                                                                         as: "p",
                                                                         regular: !0,
                                                                         color: B ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
@@ -1021,10 +1021,10 @@ const Ne = (r, a)=>{
                                                             v
                                                         ]
                                                     }),
-                                                    (w || b || u) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                                    (w || b || f) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                                         primaryButton: w,
                                                         secondaryButton: b,
-                                                        link: u
+                                                        link: f
                                                     })
                                                 ]
                                             })
@@ -1065,7 +1065,7 @@ const Ne = (r, a)=>{
         })
     }));
 }), Or = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
-    var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: l , backgroundVideoRef: p , width: s , height: o , aspectRatio: d = "7:10" , ariaLabel: m , actions: c , onClose: t , icon: h , headline: f , pretitle: v , pretitleLinesMax: w , title: b , titleLinesMax: T , description: g , descriptionLinesMax: u , variant: I , isInverse: x , backgroundColor: M  } = _param, z = _object_without_properties(_param, [
+    var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: l , backgroundVideoRef: m , width: s , height: o , aspectRatio: d = "7:10" , ariaLabel: p , actions: c , onClose: t , icon: h , headline: u , pretitle: v , pretitleLinesMax: w , title: b , titleLinesMax: T , description: g , descriptionLinesMax: f , variant: I , isInverse: x , backgroundColor: M  } = _param, z = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",
         "backgroundVideo",
@@ -1089,7 +1089,7 @@ const Ne = (r, a)=>{
         "isInverse",
         "backgroundColor"
     ]);
-    const k = Te(a), { video: J , videoAction: L  } = be(i, l, p);
+    const k = Te(a), { video: J , videoAction: L  } = be(i, l, m);
     i && (c = L ? [
         L
     ] : []);
@@ -1106,7 +1106,7 @@ const Ne = (r, a)=>{
         }),
         ref: G,
         aspectRatio: d,
-        "aria-label": m,
+        "aria-label": p,
         className: _cardcssmistica.touchableContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -1120,7 +1120,7 @@ const Ne = (r, a)=>{
                     maybe: !0
                 }, z), {
                     className: _cardcssmistica.touchable,
-                    "aria-label": m,
+                    "aria-label": p,
                     children: [
                         U && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: Ae
@@ -1166,11 +1166,11 @@ const Ne = (r, a)=>{
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                         space: 8,
                                                         children: [
-                                                            (f || v || b) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                                                            (u || v || b) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
                                                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                     space: 16,
                                                                     children: [
-                                                                        f,
+                                                                        u,
                                                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                             space: 4,
                                                                             children: [
@@ -1201,7 +1201,7 @@ const Ne = (r, a)=>{
                                                             }),
                                                             g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                                 forceMobileSizes: !0,
-                                                                truncate: u,
+                                                                truncate: f,
                                                                 as: "p",
                                                                 regular: !0,
                                                                 textShadow: F,

package/dist/community/advanced-data-card.css-mistica.js

@@ -16,19 +16,19 @@ _export(exports, {
         return _;
     },
     adjustButtonLink: function() {
-        return n;
+        return a;
     },
     button: function() {
-        return a;
+        return n;
     },
     buttonMobile: function() {
         return t;
     },
     cardContentStyle: function() {
-        return y;
+        return u;
     },
     dataCard: function() {
-        return u;
+        return y;
     },
     divider: function() {
         return o;
@@ -37,25 +37,28 @@ _export(exports, {
         return i;
     },
     footerText: function() {
-        return b;
-    },
-    hoverEffect: function() {
         return x;
     },
     marginRightAuto: function() {
-        return e;
+        return b;
     },
     marginRightButton: function() {
-        return d;
+        return e;
     },
     minHeight: function() {
-        return c;
+        return d;
     },
     paddingX: function() {
+        return l;
+    },
+    touchable: function() {
+        return c;
+    },
+    touchableCardOverlay: function() {
         return g;
     },
     touchableContainer: function() {
-        return l;
+        return h;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
@@ -63,4 +66,4 @@ require("./advanced-data-card.css.ts.vanilla.css-mistica.js");
 var v = "_1x00fru3 _1x00fru1 _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbh _1y2v1nf7t", _ = {
     default: "_1x00frui",
     mobile: "_1x00fruj"
-}, n = "_1x00frup", a = "_1x00frul", t = "_1x00frum _1x00frul", y = "_1x00fru8 _1x00fru1 _1y2v1nf8w _1y2v1nfa5 _1y2v1nf68 _1y2v1nf7t", u = "_1y2v1nfaz _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbb _1y2v1nfbs _1y2v1nfc9 _1x00fru9", o = "_1x00frug", i = "_1x00fruo _1y2v1nfb5 _1y2v1nfba", b = "_1y2v1nfb5 _1y2v1nfbr _1y2v1nfbk _1y2v1nfde", x = "_1x00fru6", e = "_1x00fruk", d = "_1y2v1nffa", c = "_1x00fru9", g = "_1x00fru1 _1y2v1nf8w _1y2v1nfa5", l = "_1x00fru5 _1y2v1nfc9 _1y2v1nfbb";
+}, a = "_1x00frup", n = "_1x00frul", t = "_1x00frum _1x00frul", u = "_1x00fru8 _1x00fru1 _1y2v1nf8w _1y2v1nfa5 _1y2v1nf68 _1y2v1nf7t _1y2v1nfaz", y = "_1y2v1nfaz _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbb _1y2v1nfbs _1y2v1nfc9 _1x00fru9", o = "_1x00frug", i = "_1x00fruo _1y2v1nfb5 _1y2v1nfba", x = "_1y2v1nfb5 _1y2v1nfbr _1y2v1nfbk _1y2v1nfde", b = "_1x00fruk", e = "_1y2v1nffa", d = "_1x00fru9", l = "_1x00fru1 _1y2v1nf8w _1y2v1nfa5", c = "_1x00fru5", g = "_1x00fru6", h = "_1x00fru4";

package/dist/community/advanced-data-card.css.d.ts

@@ -1,7 +1,8 @@
 export declare const paddingX: string;
 export declare const actions: string;
 export declare const touchableContainer: string;
-export declare const hoverEffect: string;
+export declare const touchable: string;
+export declare const touchableCardOverlay: string;
 export declare const cardContentStyle: string;
 export declare const minHeight: string;
 export declare const dataCard: string;