@telefonica/mistica 16.5.0 → 16.6.0

package/dist/callout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return or;
+        return at;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -84,22 +84,25 @@ function _object_spread_props(target, source) {
     return target;
 }
 const W = (param)=>{
-    let { title: o, titleAs: c = "h2", description: d, asset: a, onClose: t, closeButtonLabel: p, button: i, secondaryButton: l, buttonLink: m, "aria-label": u, dataAttributes: f, role: h } = param;
-    const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t: g } = (0, _hooks.useTheme)();
+    let { title: a, titleAs: c = "h2", description: d, asset: o, onClose: r, closeButtonLabel: u, button: i, secondaryButton: s, buttonLink: l, "aria-label": p, dataAttributes: f, role: h } = param;
+    const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t: B } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_calloutcssmistica.container, _calloutcssmistica.background[b]),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": u !== null && u !== void 0 ? u : o,
+        "aria-label": p !== null && p !== void 0 ? p : a,
         role: h
     }, (0, _dom.getPrefixedDataAttributes)(f, "Callout")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             isInverse: !1,
             children: [
-                a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingRight: 16,
-                    children: a
+                    dataAttributes: {
+                        testid: "asset"
+                    },
+                    children: o
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _calloutcssmistica.content,
@@ -118,39 +121,48 @@ const W = (param)=>{
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                                     as: c,
                                                     regular: !0,
-                                                    children: o
+                                                    dataAttributes: {
+                                                        testid: "title"
+                                                    },
+                                                    children: a
                                                 }),
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     as: "p",
                                                     regular: !0,
                                                     color: _skincontractcssmistica.vars.colors.textSecondary,
+                                                    dataAttributes: {
+                                                        testid: "description"
+                                                    },
                                                     children: d
                                                 })
                                             ]
                                         }),
-                                        t && // Create empty div in order to fill space that iconButton occupies.
+                                        r && // Create empty div in order to fill space that iconButton occupies.
                                         // Without this, the content's vertical alignment can be affected
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _calloutcssmistica.closeButtonContainerSize
                                         })
                                     ]
                                 }),
-                                (i || l || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                (i || s || l) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                     primaryButton: i,
-                                    secondaryButton: l,
-                                    link: m
+                                    secondaryButton: s,
+                                    link: l
                                 })
                             ]
                         }),
-                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _calloutcssmistica.closeButtonContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+                                dataAttributes: {
+                                    testid: "closeButton"
+                                },
                                 small: !0,
                                 bleedY: !0,
                                 bleedRight: !0,
                                 Icon: _iconcloseregular.default,
-                                onPress: t,
-                                "aria-label": p || x.closeButtonLabel || g(_texttokens.closeButtonLabel)
+                                onPress: r,
+                                "aria-label": u || x.closeButtonLabel || B(_texttokens.closeButtonLabel)
                             })
                         })
                     ]
@@ -158,4 +170,4 @@ const W = (param)=>{
             ]
         })
     }));
-}, or = W;
+}, at = W;

package/dist/card.css-mistica.js

@@ -28,10 +28,10 @@ _export(exports, {
         return i;
     },
     dataCardTopActionsWithoutIcon: function() {
-        return s;
+        return t;
     },
     displayCardBackground: function() {
-        return t;
+        return s;
     },
     displayCardContainer: function() {
         return o;
@@ -55,10 +55,10 @@ _export(exports, {
         return p;
     },
     mediaCard: function() {
-        return c;
+        return u;
     },
     mediaCardAsset: function() {
-        return u;
+        return c;
     },
     mediaCardContent: function() {
         return m;
@@ -100,7 +100,7 @@ _export(exports, {
 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 _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", s = "_15e54s913", t = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_15e54s914", c = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", u = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
+var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", t = "_15e54s913", s = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_1y2v1nfho _1y2v1nfhu", u = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", c = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
     aspectRatio: "var(--_15e54s910)",
     topActionsCount: "var(--_15e54s911)"
 };

package/dist/card.d.ts

@@ -2,12 +2,16 @@ import * as React from 'react';
 import Tag from './tag';
 import Image from './image';
 import Video from './video';
+import { type DataAttributes, type HeadingType, type IconProps, type RendersElement, type RendersNullableElement, type TrackingEvent } from './utils/types';
 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';
 import type { ExclusifyUnion } from './utils/utility-types';
-import type { DataAttributes, HeadingType, IconProps, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
+export declare const useInnerText: () => {
+    text: string;
+    ref: (instance: HTMLElement | null) => void;
+};
 type BaseIconButtonAction = {
     Icon: (props: IconProps) => JSX.Element;
     label: string;
@@ -73,6 +77,7 @@ interface MediaCardBaseProps {
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -116,6 +121,7 @@ interface DataCardBaseProps {
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -168,6 +174,7 @@ interface CommonDisplayCardProps {
     dataAttributes?: DataAttributes;
     headline?: React.ReactComponentElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title: string;
     titleAs?: HeadingType;
@@ -222,6 +229,7 @@ interface PosterCardBaseProps {
     dataAttributes?: DataAttributes;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;