@telefonica/mistica 14.18.2 → 14.20.0

package/dist/button.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return _e;
+        return xe;
     },
     ButtonLink: function() {
-        return Ce;
+        return Ne;
     },
     ButtonPrimary: function() {
-        return we;
+        return _e;
     },
     ButtonSecondary: function() {
-        return Ne;
+        return Re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -161,7 +161,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const w = (param)=>{
-    let { content: e , defaultIconSize: i , renderText: n  } = param;
+    let { content: e , defaultIconSize: r , renderText: n  } = param;
     const c = (0, _utils.flattenChildren)(e), f = c.length, d = [];
     let l = [];
     const g = ()=>{
@@ -174,7 +174,7 @@ const w = (param)=>{
         if (/*#__PURE__*/ _react.isValidElement(u)) {
             l.length && g();
             var _u_props_size;
-            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : i;
+            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : r;
             d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
@@ -188,17 +188,17 @@ const w = (param)=>{
             }, d.length));
         } else l.push(u), s && g();
     }), d;
-}, le = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
-        width: "8",
-        height: "20",
+}, ue = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        width: "0.5em",
+        height: "1.25em",
         viewBox: "0 0 8 20",
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             d: "M6.32595 11.0107L3.03801 7.7086L3.03292 7.70375L3.032 7.70291L3.02931 7.70047L3.02848 7.69974L3.02248 7.69436C2.88533 7.57121 2.71386 7.53733 2.56343 7.55395C2.41648 7.57018 2.27272 7.63567 2.16886 7.73711C2.06893 7.83185 2.01209 7.97816 2.00175 8.11707C1.99083 8.26377 2.02925 8.43959 2.16869 8.57393L5.24446 11.5515L2.15859 14.512L2.15375 14.5171L2.1529 14.518L2.15046 14.5207L2.14974 14.5215L2.14435 14.5275C2.02121 14.6647 1.98733 14.8361 2.00394 14.9866C2.02017 15.1335 2.08567 15.2773 2.18711 15.3811C2.28184 15.4811 2.42816 15.5379 2.56706 15.5483C2.71377 15.5592 2.88958 15.5208 3.02392 15.3813L6.32595 12.0922C6.6246 11.7936 6.6246 11.3094 6.32595 11.0107Z",
             fill: "currentColor"
         })
-    }), V = (param)=>{
-    let { showSpinner: e , children: i , small: n , loadingText: c , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: l , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: a  } = param;
-    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, r = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    }), D = (param)=>{
+    let { showSpinner: e , children: r , small: n , loadingText: c , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: l , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: a  } = param;
+    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -217,7 +217,7 @@ const w = (param)=>{
                         })
                     }),
                     w({
-                        content: i,
+                        content: r,
                         defaultIconSize: s,
                         renderText: l
                     }),
@@ -238,7 +238,7 @@ const w = (param)=>{
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.CHEVRON_MARGIN_LEFT_LINK
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, {})
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ue, {})
                     })
                 ]
             }),
@@ -246,7 +246,7 @@ const w = (param)=>{
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
                 style: c ? {
-                    paddingLeft: r,
+                    paddingLeft: i,
                     paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
                 children: w({
@@ -266,12 +266,12 @@ const w = (param)=>{
                         rolePresentation: !!c,
                         color: "currentcolor",
                         delay: "0s",
-                        size: r
+                        size: i
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: r,
-                            height: r
+                            width: i,
+                            height: i
                         }
                     }),
                     c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -286,12 +286,12 @@ const w = (param)=>{
             })
         ]
     });
-}, N = /*#__PURE__*/ _react.forwardRef((e, i)=>{
-    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: c  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = _react.useState(!1), r = e.showSpinner || m && u || a, [v, L] = _react.useState(!!r);
+}, N = /*#__PURE__*/ _react.forwardRef((e, r)=>{
+    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: c  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = _react.useState(!1), i = e.showSpinner || m && u || a, [v, L] = _react.useState(!!i);
     _react.useEffect(()=>{
-        r && !v && L(!0);
+        i && !v && L(!0);
     }, [
-        r,
+        i,
         v,
         f
     ]);
@@ -304,25 +304,25 @@ const w = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, E = (I)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, I = (b)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: b
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: b
         }), h = {
-        ref: i,
+        ref: r,
         className: (0, _classnames.default)(l ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: r
+            [_buttoncssmistica.isLoading]: i
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
@@ -332,19 +332,19 @@ const w = (param)=>{
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
         tabIndex: e.tabIndex,
-        children: V({
-            showSpinner: r,
+        children: D({
+            showSpinner: i,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: L,
             children: e.children,
             loadingText: g,
             small: e.small,
-            renderText: E,
+            renderText: I,
             textContentStyle: _buttoncssmistica.textContent,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || r || m,
+        disabled: e.disabled || i || m,
         role: "button"
     };
     if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
@@ -360,8 +360,8 @@ const w = (param)=>{
         onPress: ()=>{}
     }, h));
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
-        onPress: (I)=>{
-            const _ = e.onPress(I);
+        onPress: (b)=>{
+            const _ = e.onPress(b);
             _ && (s(!0), _.finally(()=>s(!1)));
         }
     }));
@@ -376,14 +376,14 @@ const w = (param)=>{
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ce = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+}), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
     var _e_withChevron;
-    const { formStatus: n  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: l  } = e, g = n === "sending", [u, m] = _react.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [r, v] = _react.useState(!!a);
+    const { formStatus: n  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: l  } = e, g = n === "sending", [u, m] = _react.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!a);
     _react.useEffect(()=>{
-        a && !r && v(!0);
+        a && !i && v(!0);
     }, [
         a,
-        r,
+        i,
         n
     ]);
     var _e_trackingEvent;
@@ -400,19 +400,21 @@ const w = (param)=>{
             truncate: 1,
             color: "inherit",
             children: h
-        }), E = {
+        }), I = {
         className: (0, _classnames.default)(_buttoncssmistica.link, {
             [_buttoncssmistica.inverseLink]: c,
-            [_buttoncssmistica.alignedLink]: e.aligned,
+            [_buttoncssmistica.alignedLeftLink]: !!e.bleedLeft || !!e.aligned,
+            [_buttoncssmistica.alignedRightLink]: !!e.bleedRight,
+            [_buttoncssmistica.alignedVerticalLink]: !!e.bleedY,
             [_buttoncssmistica.isLoading]: a
         }),
         trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? L() : void 0,
         dataAttributes: _object_spread({
             "component-name": "ButtonLink"
         }, e.dataAttributes),
-        children: V({
+        children: D({
             showSpinner: a,
-            shouldRenderSpinner: r,
+            shouldRenderSpinner: i,
             setShouldRenderSpinner: v,
             children: e.children,
             loadingText: l,
@@ -427,60 +429,60 @@ const w = (param)=>{
     };
     if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, E), {
+        ref: r
+    }, I), {
         onPress: (h)=>{
-            const I = e.onPress(h);
-            I && (m(!0), I.finally(()=>m(!1)));
+            const b = e.onPress(h);
+            b && (m(!0), b.finally(()=>m(!1)));
         }
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, E), {
+        ref: r
+    }, I), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, E), {
+        ref: r
+    }, I), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "primary"
     }));
-}), Ne = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "secondary"
     }));
-}), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "danger"
     }));

package/dist/card.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: function() {
-        return _;
+        return a;
     },
     boxed: function() {
-        return a;
+        return _;
     },
     cardAction: function() {
         return y;
@@ -49,47 +49,47 @@ _export(exports, {
         return i;
     },
     mediaCard: function() {
-        return l;
+        return C;
     },
     mediaCardContent: function() {
-        return C;
+        return l;
     },
-    nakedCardContent: function() {
+    mediaCardIcon: function() {
         return h;
     },
-    snapCard: function() {
+    nakedCardContent: function() {
         return u;
     },
-    touchable: function() {
+    snapCard: function() {
         return p;
     },
+    touchable: function() {
+        return q;
+    },
     touchableCardOverlay: function() {
-        return j;
+        return z;
     },
     touchableCardOverlayInverse: function() {
-        return q;
+        return k;
     },
     touchableCardOverlayMedia: function() {
-        return z;
+        return m;
     },
     touchableContainer: function() {
         return O;
     },
     touchableMediaCardOverlay: function() {
-        return k;
+        return g;
     },
     touchableNakedMediaOverlay: function() {
-        return A;
+        return j;
     },
     vars: function() {
         return M;
-    },
-    videoAction: function() {
-        return g;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./card.css.ts.vanilla.css-mistica.js");
-var _ = "_15e54s91 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", a = "_15e54s93 _1y2v1nfb4 _1y2v1nfaz", y = "_15e54s9v _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", f = "_1y2v1nfb4 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfbj _1y2v1nfbd", r = "_15e54s9w _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", e = "_15e54s9x _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", b = "_15e54s910", d = "_15e54s98", s = "_15e54s9j _1y2v1nf8w _1y2v1nfa5 _1y2v1nf6k _1y2v1nf7t _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbr", c = "_15e54s9r", t = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfb4 _1y2v1nfaz", o = "_15e54s9q", i = "_15e54s9s", l = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfc8 _1y2v1nfbr _1y2v1nfbq", C = "_15e54s9f _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nf6e _1y2v1nf7t _1y2v1nfba _1y2v1nfbg", h = "_15e54s9h _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbg _1y2v1nf6e", u = "_15e54s9l _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfaz _1y2v1nfc8 _1y2v1nfba _1y2v1nfbg _1y2v1nfbr _1y2v1nfbq", p = "_15e54s95", j = "_15e54s9a _15e54s96", q = "_15e54s9b _15e54s96", z = "_15e54s9c _15e54s96", O = "_15e54s94", k = "_15e54s97 _15e54s96", A = "_15e54s99 _15e54s96", M = {
-    aspectRatio: "var(--_15e54s9z)"
-}, g = "_15e54s9y _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn";
+var a = "_15e54s91 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", _ = "_15e54s93 _1y2v1nfb4 _1y2v1nfaz", y = "_15e54s9v _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", f = "_1y2v1nfb4 _1y2v1nfc3 _1y2v1nfcj _1y2v1nfbj _1y2v1nfbd", r = "_15e54s9w _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", e = "_15e54s9x _1y2v1nfc1 _1y2v1nfch _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd _1y2v1nfdn", b = "_15e54s9z", d = "_15e54s98", s = "_15e54s9k _1y2v1nf8w _1y2v1nfa5 _1y2v1nf6k _1y2v1nf7t _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbr", c = "_15e54s9r", t = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfb4 _1y2v1nfaz", o = "_15e54s9q", i = "_15e54s9s", C = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfc8 _1y2v1nfbr _1y2v1nfbq", l = "_15e54s9f _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nf6e _1y2v1nf7t _1y2v1nfba _1y2v1nfbg", h = "_15e54s9g", u = "_15e54s9i _1y2v1nfb4 _1y2v1nfbq _1y2v1nfaz _1y2v1nfba _1y2v1nfbg _1y2v1nf6e", p = "_15e54s9m _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfaz _1y2v1nfc8 _1y2v1nfba _1y2v1nfbg _1y2v1nfbr _1y2v1nfbq", q = "_15e54s95", z = "_15e54s9a _15e54s96", k = "_15e54s9b _15e54s96", m = "_15e54s9c _15e54s96", O = "_15e54s94", g = "_15e54s97 _15e54s96", j = "_15e54s99 _15e54s96", M = {
+    aspectRatio: "var(--_15e54s9y)"
+};

package/dist/card.css.d.ts

@@ -10,11 +10,11 @@ export declare const touchableCardOverlayInverse: string;
 export declare const touchableCardOverlayMedia: string;
 export declare const mediaCard: string;
 export declare const mediaCardContent: string;
+export declare const mediaCardIcon: string;
 export declare const nakedCardContent: string;
 export declare const dataCard: string;
 export declare const snapCard: string;
 export declare const snapCardTouchableHover: string;
-export declare const snapCardTouchableHoverTransparent: string;
 export declare const displayCardContainer: string;
 export declare const displayCardContent: string;
 export declare const displayCardBackground: string;
@@ -23,7 +23,6 @@ export declare const cardActionIconButton: string;
 export declare const cardAction: string;
 export declare const cardActionInverse: string;
 export declare const cardActionMedia: string;
-export declare const videoAction: string;
 export declare const vars: {
     aspectRatio: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };

package/dist/card.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Tag from './tag';
 import Image from './image';
 import Video from './video';
+import type { Variant } from './theme-variant-context';
 import type { PressHandler } from './touchable';
 import type { VideoElement, VideoSource } from './video';
 import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
@@ -10,11 +11,7 @@ import type { DataAttributes, IconProps, RendersElement, RendersNullableElement,
 export type CardAction = {
     label: string;
     onPress: () => void;
-    Icon?: React.FC<IconProps>;
-    iconSize?: number;
-    iconColor?: string;
-    iconBackground?: string;
-    iconBackgroundInverse?: string;
+    Icon: React.FC<IconProps>;
     disabled?: boolean;
 };
 type CardActionsGroupProps = {
@@ -22,8 +19,10 @@ type CardActionsGroupProps = {
     onClose?: () => void;
     type?: 'default' | 'inverse' | 'media';
 };
+export declare const TOP_ACTION_BUTTON_SIZE = 48;
 export declare const CardActionsGroup: ({ actions, onClose, type, }: CardActionsGroupProps) => JSX.Element;
-type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
+export type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
+export declare const CardActionSpinner: ({ color }: IconProps) => React.ReactElement;
 type TouchableProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 } & ExclusifyUnion<{
@@ -39,6 +38,7 @@ type TouchableCard<T> = T & TouchableProps;
 type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
 interface MediaCardBaseProps {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
+    icon?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
@@ -90,6 +90,7 @@ interface DataCardBaseProps {
     descriptionLinesMax?: number;
     extra?: React.ReactNode;
     actions?: Array<CardAction>;
+    aspectRatio?: AspectRatio | number;
     children?: void;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
@@ -112,6 +113,7 @@ type SnapCardProps = MaybeTouchableCard<{
     'aria-label'?: string;
     extra?: React.ReactNode;
     isInverse?: boolean;
+    aspectRatio?: AspectRatio | number;
     children?: void;
 }>;
 export declare const SnapCard: React.ForwardRefExoticComponent<SnapCardProps & React.RefAttributes<HTMLDivElement>>;
@@ -131,9 +133,9 @@ interface CommonDisplayCardProps {
     description?: string;
     descriptionLinesMax?: number;
     'aria-label'?: string;
+    aspectRatio?: AspectRatio | number;
 }
 type DisplayMediaCardBaseProps = {
-    aspectRatio?: AspectRatio | number;
     width?: number | string;
     height?: number | string;
 };
@@ -185,6 +187,13 @@ type PosterCardWithVideoProps = Omit<PosterCardBaseProps, 'actions' | 'onClose'>
     poster?: string;
     backgroundVideoRef?: React.RefObject<VideoElement>;
 };
-type PosterCardProps = MaybeTouchableCard<ExclusifyUnion<PosterCardWithImageProps | PosterCardWithVideoProps>>;
+type PosterCardWithBackgroundColorProps = PosterCardBaseProps & {
+    backgroundColor?: string;
+} & ExclusifyUnion<{
+    variant: Variant;
+} | {
+    isInverse: boolean;
+}>;
+type PosterCardProps = MaybeTouchableCard<ExclusifyUnion<PosterCardWithImageProps | PosterCardWithVideoProps | PosterCardWithBackgroundColorProps>>;
 export declare const PosterCard: React.ForwardRefExoticComponent<PosterCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};