@telefonica/mistica 14.45.0 → 14.46.0

package/dist/callout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return X;
+        return U;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -17,7 +17,7 @@ const _hooks = require("./hooks.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _text = require("./text.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
+const _iconbutton = require("./icon-button.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
 const _calloutcssmistica = require("./callout.css-mistica.js");
@@ -83,22 +83,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const N = (param)=>{
-    let { title: t, description: c, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: n, "aria-label": p, dataAttributes: d } = param;
-    const f = (0, _themevariantcontext.useThemeVariant)(), { texts: u } = (0, _hooks.useTheme)();
+const P = (param)=>{
+    let { title: t, description: c, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: m, "aria-label": d, dataAttributes: p } = param;
+    const u = (0, _themevariantcontext.useThemeVariant)(), { texts: f } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_calloutcssmistica.container, (0, _sprinklescssmistica.sprinkles)({
             background: {
                 inverse: _skincontractcssmistica.vars.colors.backgroundContainer,
                 alternative: _skincontractcssmistica.vars.colors.backgroundContainer,
                 default: _skincontractcssmistica.vars.colors.backgroundContainerAlternative
-            }[f]
+            }[u]
         })),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": p !== null && p !== void 0 ? p : t
-    }, (0, _dom.getPrefixedDataAttributes)(d, "Callout")), {
+        "aria-label": d !== null && d !== void 0 ? d : t
+    }, (0, _dom.getPrefixedDataAttributes)(p, "Callout")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             isInverse: !1,
             children: [
@@ -132,27 +132,26 @@ const N = (param)=>{
                                             })
                                         ]
                                     }),
-                                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                                        size: 40,
+                                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         style: {
-                                            display: "flex",
-                                            margin: "-8px -12px",
-                                            alignItems: "center",
-                                            justifyContent: "center"
+                                            // Align the X with the text content
+                                            marginTop: "0.125rem"
                                         },
-                                        onPress: i,
-                                        "aria-label": u.closeButtonLabel,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
-                                            size: 24,
-                                            color: _skincontractcssmistica.vars.colors.neutralHigh
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+                                            small: !0,
+                                            bleedY: !0,
+                                            bleedRight: !0,
+                                            Icon: _iconcloseregular.default,
+                                            onPress: i,
+                                            "aria-label": f.closeButtonLabel
                                         })
                                     })
                                 ]
                             }),
-                            (l || s || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                            (l || s || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                 primaryButton: l,
                                 secondaryButton: s,
-                                link: n
+                                link: m
                             })
                         ]
                     })
@@ -160,4 +159,4 @@ const N = (param)=>{
             ]
         })
     }));
-}, X = N;
+}, U = P;

package/dist/card.css-mistica.js

@@ -13,70 +13,61 @@ _export(exports, {
         return n;
     },
     boxed: function() {
-        return a;
-    },
-    cardAction: function() {
-        return y;
-    },
-    cardActionIconButton: function() {
-        return f;
-    },
-    cardActionInverse: function() {
-        return r;
-    },
-    cardActionMedia: function() {
         return e;
     },
     cardContainer: function() {
-        return s;
+        return r;
     },
     circularMediaOverlay: function() {
-        return i;
+        return y;
     },
     dataCard: function() {
-        return d;
+        return f;
+    },
+    dataCardTopActionsWithoutIcon: function() {
+        return s;
     },
     displayCardBackground: function() {
-        return g;
+        return d;
     },
     displayCardContainer: function() {
-        return h;
+        return o;
     },
     displayCardContent: function() {
-        return o;
+        return i;
     },
     displayCardGradient: function() {
-        return c;
+        return t;
     },
     mediaCard: function() {
-        return t;
+        return g;
     },
     mediaCardContent: function() {
-        return C;
+        return h;
     },
     mediaCardIcon: function() {
-        return l;
+        return c;
     },
     nakedCardContent: function() {
-        return u;
+        return C;
     },
     snapCard: function() {
-        return b;
+        return l;
     },
     touchable: function() {
-        return m;
+        return u;
     },
     touchableCardOverlay: function() {
         return p;
     },
     touchableCardOverlayInverse: function() {
-        return x;
+        return m;
     },
     touchableCardOverlayMedia: function() {
-        return O;
+        return b;
     },
     touchableContainer: function() {
-        return M;
+        return O;
     },
     touchableMediaCardOverlay: function() {
         return k;
@@ -85,11 +76,13 @@ _export(exports, {
         return q;
     },
     vars: function() {
-        return A;
+        return M;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./card.css.ts.vanilla.css-mistica.js");
-var n = "_15e54s91 _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgy", a = "_15e54s93 _1y2v1nfgi _1y2v1nfgc", y = "_15e54s9v _1y2v1nfhf _1y2v1nfhv _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfj1", f = "_1y2v1nfgi _1y2v1nfhh _1y2v1nfhx _1y2v1nfgx _1y2v1nfgr", r = "_15e54s9w _1y2v1nfhf _1y2v1nfhv _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfj1", e = "_15e54s9x _1y2v1nfhf _1y2v1nfhv _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfj1", s = "_15e54s9z", i = "_15e54s98", d = "_15e54s9k _1y2v1nf98 _1y2v1nfah _1y2v1nf6w _1y2v1nf85 _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nfgo _1y2v1nfh5", g = "_15e54s9r", h = "_1y2v1nfh5 _1y2v1nfhm _1y2v1nfgi _1y2v1nfgc", o = "_15e54s9q", c = "_15e54s9s", t = "_1y2v1nfgi _1y2v1nfgo _1y2v1nfhm _1y2v1nfh5 _1y2v1nfh4", C = "_15e54s9f _1y2v1nf98 _1y2v1nfah _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nf6q _1y2v1nf85 _1y2v1nfgo _1y2v1nfgu", l = "_15e54s9g", u = "_15e54s9i _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nfgo _1y2v1nfgu _1y2v1nf6q", b = "_15e54s9m _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgi _1y2v1nfgc _1y2v1nfhm _1y2v1nfgo _1y2v1nfgu _1y2v1nfh5 _1y2v1nfh4", m = "_15e54s95", p = "_15e54s9a _15e54s96", x = "_15e54s9b _15e54s96", O = "_15e54s9c _15e54s96", M = "_15e54s94", k = "_15e54s97 _15e54s96", q = "_15e54s99 _15e54s96", A = {
-    aspectRatio: "var(--_15e54s9y)"
+var n = "_15e54s91 _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgy", e = "_15e54s93 _1y2v1nfgi _1y2v1nfgc", r = "_15e54s9v", y = "_15e54s98", f = "_15e54s9k _1y2v1nf98 _1y2v1nfah _1y2v1nf6w _1y2v1nf85 _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nfgo _1y2v1nfh5", s = "_15e54s9w", d = "_15e54s9r", o = "_1y2v1nfh5 _1y2v1nfhm _1y2v1nfgi _1y2v1nfgc", i = "_15e54s9q", t = "_15e54s9s", g = "_1y2v1nfgi _1y2v1nfgo _1y2v1nfhm _1y2v1nfh5 _1y2v1nfh4", h = "_15e54s9f _1y2v1nf98 _1y2v1nfah _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nf6q _1y2v1nf85 _1y2v1nfgo _1y2v1nfgu", c = "_15e54s9g", C = "_15e54s9i _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgc _1y2v1nfgo _1y2v1nfgu _1y2v1nf6q _1y2v1nfah", l = "_15e54s9m _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgi _1y2v1nfgc _1y2v1nfhm _1y2v1nfgo _1y2v1nfgu _1y2v1nfh5 _1y2v1nfh4", u = "_15e54s95", p = "_15e54s9a _15e54s96", m = "_15e54s9b _15e54s96", b = "_15e54s9c _15e54s96", O = "_15e54s94", k = "_15e54s97 _15e54s96", q = "_15e54s99 _15e54s96", M = {
+    aspectRatio: "var(--_15e54s9t)",
+    topActionsCount: "var(--_15e54s9u)"
 };

package/dist/card.css.d.ts

@@ -19,11 +19,9 @@ export declare const displayCardContainer: string;
 export declare const displayCardContent: string;
 export declare const displayCardBackground: string;
 export declare const displayCardGradient: string;
-export declare const cardActionIconButton: string;
-export declare const cardAction: string;
-export declare const cardActionInverse: string;
-export declare const cardActionMedia: string;
 export declare const vars: {
     aspectRatio: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    topActionsCount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const cardContainer: string;
+export declare const dataCardTopActionsWithoutIcon: string;

package/dist/card.d.ts

@@ -8,12 +8,11 @@ import type { VideoElement, VideoSource } from './video';
 import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { ExclusifyUnion } from './utils/utility-types';
 import type { DataAttributes, IconProps, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
-export type CardAction = {
-    label: string;
+type BaseIconButtonAction = {
     Icon: React.FC<IconProps>;
-    disabled?: boolean;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-} & ExclusifyUnion<{
+    label: string;
+};
+type IconButtonAction = BaseIconButtonAction & ExclusifyUnion<{
     href: string;
     newTab?: boolean;
 } | {
@@ -23,14 +22,24 @@ export type CardAction = {
 } | {
     onPress: () => void;
 }>;
+type ToggleIconButtonAction = {
+    checkedProps: BaseIconButtonAction;
+    uncheckedProps: BaseIconButtonAction;
+    onChange?: (checked: boolean) => void | undefined | Promise<void>;
+    checked?: boolean;
+    defaultChecked?: boolean;
+};
+export type CardAction = {
+    disabled?: boolean;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+} & ExclusifyUnion<IconButtonAction | ToggleIconButtonAction>;
 type CardActionsGroupProps = {
     actions?: Array<CardAction | React.ReactElement>;
     onClose?: () => void;
     padding?: number;
     type?: 'default' | 'inverse' | 'media';
 };
-export declare const TOP_ACTION_BUTTON_SIZE = 48;
-export declare const CardActionIconButton: ({ Icon, label, ...restProps }: CardAction) => JSX.Element;
+export declare const CardActionIconButton: (props: CardAction) => JSX.Element;
 export declare const CardActionsGroup: ({ actions, padding, onClose, type, }: CardActionsGroupProps) => JSX.Element;
 export type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
 export declare const CardActionSpinner: ({ color }: IconProps) => React.ReactElement;