@telefonica/mistica 15.20.0 → 16.0.0

package/dist/button.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return ze;
+        return Vt;
     },
     ButtonLink: function() {
-        return Pe;
+        return Nt;
     },
     ButtonLinkDanger: function() {
-        return Ne;
+        return Pt;
     },
     ButtonPrimary: function() {
-        return Se;
+        return Rt;
     },
     ButtonSecondary: function() {
-        return Ve;
+        return St;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -167,36 +167,57 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const A = (param)=>{
-    let { small: e, content: i, defaultIconSize: n, TextContentRenderer: r } = param;
-    const f = (0, _utils.flattenChildren)(i), g = f.length, l = [];
+const dt = (param)=>{
+    let { element: t, small: i } = param;
+    const { textPresets: n } = (0, _hooks.useTheme)();
+    return i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        size: 14,
+        lineHeight: 20,
+        weight: n.button.weight,
+        truncate: 1,
+        color: "inherit",
+        as: "div",
+        children: t
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+        weight: n.button.weight,
+        truncate: 1,
+        color: "inherit",
+        as: "div",
+        children: t
+    });
+}, A = (param)=>{
+    let { small: t, content: i, defaultIconSize: n } = param;
+    const a = (0, _utils.flattenChildren)(i), g = a.length, l = [];
     let c = [];
     const m = ()=>{
         l.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: r(c, e)
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(dt, {
+                element: c,
+                small: t
+            })
         }, l.length)), c = [];
     };
-    return f.forEach((s, d)=>{
-        const u = d === 0, o = d === g - 1;
-        if (/*#__PURE__*/ _react.isValidElement(s)) {
+    return a.forEach((o, d)=>{
+        const u = d === 0, f = d === g - 1;
+        if (/*#__PURE__*/ _react.isValidElement(o)) {
             c.length && m();
-            const y = s.props.size !== void 0 ? (0, _css.pxToRem)(s.props.size) : n;
+            const x = o.props.size !== void 0 ? (0, _css.pxToRem)(o.props.size) : n;
             l.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
                     marginLeft: u ? 0 : _buttoncssmistica.iconMargin,
-                    marginRight: o ? 0 : _buttoncssmistica.iconMargin
+                    marginRight: f ? 0 : _buttoncssmistica.iconMargin
                 },
-                children: /*#__PURE__*/ _react.cloneElement(s, {
-                    size: y
+                children: /*#__PURE__*/ _react.cloneElement(o, {
+                    size: x
                 })
             }, l.length));
-        } else c.push(s), o && m();
+        } else c.push(o), f && m();
     }), l;
-}, me = ()=>{
-    const { skinName: e } = (0, _hooks.useTheme)();
-    return e === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+}, ut = ()=>{
+    const { skinName: t } = (0, _hooks.useTheme)();
+    return t === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
         height: "0.5em",
         viewBox: "0 0 8 8",
@@ -214,23 +235,21 @@ const A = (param)=>{
             fill: "currentColor"
         })
     });
-}, fe = (param)=>{
-    let { showSpinner: e, children: i, small: n, loadingText: r, shouldRenderSpinner: f, setShouldRenderSpinner: g, TextContentRenderer: l, StartIcon: c, EndIcon: m, withChevron: s } = param;
-    const d = n ? _buttoncssmistica.iconSize.small : _buttoncssmistica.iconSize.default, u = n ? _buttoncssmistica.spinnerSize.small : _buttoncssmistica.spinnerSize.default, o = A({
+}, mt = (param)=>{
+    let { showSpinner: t, children: i, small: n, loadingText: a, shouldRenderSpinner: g, setShouldRenderSpinner: l, StartIcon: c, EndIcon: m, withChevron: o } = param;
+    const d = n ? _buttoncssmistica.iconSize.small : _buttoncssmistica.iconSize.default, u = n ? _buttoncssmistica.spinnerSize.small : _buttoncssmistica.spinnerSize.default, f = A({
         small: n,
         content: i,
-        defaultIconSize: d,
-        TextContentRenderer: l
-    }), C = A({
+        defaultIconSize: d
+    }), s = A({
         small: n,
-        content: r,
-        defaultIconSize: d,
-        TextContentRenderer: l
+        content: a,
+        defaultIconSize: d
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                "aria-hidden": e ? !0 : void 0,
+                "aria-hidden": t ? !0 : void 0,
                 className: _buttoncssmistica.textContent,
                 children: [
                     c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -250,18 +269,18 @@ const A = (param)=>{
                             alignItems: "baseline"
                         },
                         children: [
-                            o,
-                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            f,
+                            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
                                     display: "flex",
                                     alignItems: "center",
                                     marginLeft: _buttoncssmistica.chevronMarginLeft
                                 },
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {})
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ut, {})
                             })
                         ]
                     }),
-                    m && !s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    m && !o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
@@ -277,21 +296,21 @@ const A = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: r ? {
+                style: a ? {
                     paddingLeft: u,
                     paddingRight: `calc(${_buttoncssmistica.iconMargin} + 2 * ${n ? _buttoncssmistica.buttonPaddingX.small : _buttoncssmistica.buttonPaddingX.default})`
                 } : void 0,
-                children: C
+                children: s
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                "aria-hidden": e ? void 0 : !0,
+                "aria-hidden": t ? void 0 : !0,
                 className: _buttoncssmistica.loadingContent,
                 onTransitionEnd: ()=>{
-                    e !== f && g(e);
+                    t !== g && l(t);
                 },
                 children: [
-                    f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        rolePresentation: !!r,
+                    g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        rolePresentation: !!a,
                         color: "currentcolor",
                         delay: "0s",
                         size: u
@@ -302,28 +321,28 @@ const A = (param)=>{
                             height: u
                         }
                     }),
-                    r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
-                        children: C
+                        children: s
                     }) : null
                 ]
             })
         ]
     });
-}, x = /*#__PURE__*/ _react.forwardRef((e, i)=>{
-    var _e_withChevron;
-    const { eventFormat: n } = (0, _analytics.useTrackingConfig)(), { formStatus: r, formId: f } = (0, _formcontext.useForm)(), g = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: l } = e, c = !!e.submit, m = r === "sending", { isDarkMode: s } = (0, _hooks.useTheme)(), [d, u] = _react.useState(!1), o = e.showSpinner || m && c || d, C = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : e.buttonType.startsWith("link") && (!!e.href || !!e.to), [y, P] = _react.useState(!!o);
+}, k = /*#__PURE__*/ _react.forwardRef((t, i)=>{
+    var _t_withChevron;
+    const { eventFormat: n } = (0, _analytics.useTrackingConfig)(), { formStatus: a, formId: g } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { loadingText: c } = t, m = !!t.submit, o = a === "sending", { isDarkMode: d } = (0, _hooks.useTheme)(), [u, f] = _react.useState(!1), s = t.showSpinner || o && m || u, x = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : t.buttonType.startsWith("link") && (!!t.href || !!t.to), [E, P] = _react.useState(!!s);
     _react.useEffect(()=>{
-        o && !y && P(!0);
+        s && !E && P(!0);
     }, [
-        o,
-        y,
-        r
+        s,
+        E,
+        a
     ]);
-    var _e_trackingEvent;
-    const W = ()=>{
+    var _t_trackingEvent;
+    const _ = ()=>{
         let b, h;
-        switch(e.buttonType){
+        switch(t.buttonType){
             case "link":
                 b = "link", h = _analytics.eventActions.linkTapped;
                 break;
@@ -331,183 +350,156 @@ const A = (param)=>{
                 b = "danger_link", h = _analytics.eventActions.linkTapped;
                 break;
             default:
-                b = `${e.buttonType}_button`, h = `${e.buttonType}_button_tapped`;
+                b = `${t.buttonType}_button`, h = `${t.buttonType}_button_tapped`;
                 break;
         }
         return n === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: b,
-            component_copy: (0, _common.getTextFromChildren)(e.children)
+            component_copy: (0, _common.getTextFromChildren)(t.children)
         } : {
             category: _analytics.eventCategories.userInteraction,
             action: h,
-            label: (0, _common.getTextFromChildren)(e.children)
+            label: (0, _common.getTextFromChildren)(t.children)
         };
-    }, N = e.buttonType.startsWith("link") ? _buttoncssmistica.linkMinWidth : _buttoncssmistica.buttonMinWidth, S = e.buttonType === "linkDanger" && s && g ? "linkDangerDark" : e.buttonType, T = {
+    }, R = t.buttonType.startsWith("link") ? _buttoncssmistica.linkMinWidth : _buttoncssmistica.buttonMinWidth, S = t.buttonType === "linkDanger" && d && l ? "linkDangerDark" : t.buttonType, y = {
         ref: i,
-        className: (0, _classnames.default)(g ? _buttoncssmistica.inverseButtonVariants[S] : _buttoncssmistica.buttonVariants[S], e.className, {
-            [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: o
+        className: (0, _classnames.default)(l ? _buttoncssmistica.inverseButtonVariants[S] : _buttoncssmistica.buttonVariants[S], t.className, {
+            [_buttoncssmistica.small]: t.small,
+            [_buttoncssmistica.isLoading]: s
         }),
         style: _object_spread(_object_spread_props(_object_spread({}, (0, _css.applyCssVars)({
-            [_buttoncssmistica.buttonVars.minWidth]: e.small ? N.small : N.default
-        }), e.bleedLeft ? {
-            marginLeft: `calc(-1 * (${_buttoncssmistica.borderSize} + ${e.small ? _buttoncssmistica.buttonPaddingX.small : _buttoncssmistica.buttonPaddingX.default}))`
-        } : void 0, e.bleedRight ? {
-            marginRight: `calc(-1 * (${_buttoncssmistica.borderSize} + ${e.small ? _buttoncssmistica.buttonPaddingX.small : _buttoncssmistica.buttonPaddingX.default}))`
-        } : void 0, e.bleedY ? {
-            marginTop: `calc(-1 * (${_buttoncssmistica.borderSize} + ${e.small ? _buttoncssmistica.buttonPaddingY.small : _buttoncssmistica.buttonPaddingY.default}))`,
-            marginBottom: `calc(-1 * (${_buttoncssmistica.borderSize} + ${e.small ? _buttoncssmistica.buttonPaddingY.small : _buttoncssmistica.buttonPaddingY.default}))`
+            [_buttoncssmistica.buttonVars.minWidth]: t.small ? R.small : R.default
+        }), t.bleedLeft ? {
+            marginLeft: `calc(-1 * (${_buttoncssmistica.borderSize} + ${t.small ? _buttoncssmistica.buttonPaddingX.small : _buttoncssmistica.buttonPaddingX.default}))`
+        } : void 0, t.bleedRight ? {
+            marginRight: `calc(-1 * (${_buttoncssmistica.borderSize} + ${t.small ? _buttoncssmistica.buttonPaddingX.small : _buttoncssmistica.buttonPaddingX.default}))`
+        } : void 0, t.bleedY ? {
+            marginTop: `calc(-1 * (${_buttoncssmistica.borderSize} + ${t.small ? _buttoncssmistica.buttonPaddingY.small : _buttoncssmistica.buttonPaddingY.default}))`,
+            marginBottom: `calc(-1 * (${_buttoncssmistica.borderSize} + ${t.small ? _buttoncssmistica.buttonPaddingY.small : _buttoncssmistica.buttonPaddingY.default}))`
         } : void 0), {
-            cursor: e.fake ? "pointer" : void 0
-        }), e.style),
-        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? W() : void 0,
-        dataAttributes: e.dataAttributes,
-        "aria-label": e["aria-label"],
-        "aria-controls": e["aria-controls"],
-        "aria-expanded": e["aria-expanded"],
-        "aria-haspopup": e["aria-haspopup"],
-        tabIndex: e.tabIndex,
-        children: fe({
-            showSpinner: o,
-            shouldRenderSpinner: y,
+            cursor: t.fake ? "pointer" : void 0
+        }), t.style),
+        trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : t.trackEvent ? _() : void 0,
+        dataAttributes: t.dataAttributes,
+        "aria-label": t["aria-label"],
+        "aria-controls": t["aria-controls"],
+        "aria-expanded": t["aria-expanded"],
+        "aria-haspopup": t["aria-haspopup"],
+        tabIndex: t.tabIndex,
+        children: mt({
+            showSpinner: s,
+            shouldRenderSpinner: E,
             setShouldRenderSpinner: P,
-            children: e.children,
-            loadingText: l,
-            small: e.small,
-            TextContentRenderer: e.TextContentRenderer,
-            StartIcon: e.StartIcon,
-            EndIcon: e.EndIcon,
-            withChevron: C
+            children: t.children,
+            loadingText: c,
+            small: t.small,
+            StartIcon: t.StartIcon,
+            EndIcon: t.EndIcon,
+            withChevron: x
         }),
-        disabled: e.disabled || o || m,
-        role: e.role
+        disabled: t.disabled || s || o,
+        role: t.role
     };
-    if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
-    if (e.fake) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (process.env.NODE_ENV !== "production" && (t.to === "" || t.href === "")) throw Error("to or href props are empty strings");
+    if (t.fake) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         maybe: !0
-    }, T), {
+    }, y), {
         role: "presentation",
         "aria-hidden": "true"
     }));
-    if (e.submit) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
+    if (t.submit) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
         type: "submit",
-        formId: f,
+        formId: g,
         onPress: ()=>{}
-    }, T));
-    if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, T), {
+    }, y));
+    if (t.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, y), {
         onPress: (b)=>{
-            const h = e.onPress(b);
-            h && (u(!0), h.finally(()=>u(!1)));
+            const h = t.onPress(b);
+            h && (f(!0), h.finally(()=>f(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, T), {
-        to: e.to,
-        newTab: e.newTab,
-        fullPageOnWebView: e.fullPageOnWebView,
-        onNavigate: e.onNavigate
+    if (t.to || t.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, y), {
+        to: t.to,
+        newTab: t.newTab,
+        fullPageOnWebView: t.fullPageOnWebView,
+        onNavigate: t.onNavigate
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, T), {
-        href: e.href,
-        newTab: e.newTab,
-        loadOnTop: e.loadOnTop,
-        onNavigate: e.onNavigate
+    if (t.href || t.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, y), {
+        href: t.href,
+        newTab: t.newTab,
+        loadOnTop: t.loadOnTop,
+        onNavigate: t.onNavigate
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), I = (e, i)=>{
-    const { textPresets: n } = (0, _hooks.useTheme)();
-    return i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-        size: 14,
-        lineHeight: 20,
-        weight: n.button.weight,
-        truncate: 1,
-        color: "inherit",
-        as: "div",
-        children: e
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-        weight: n.button.weight,
-        truncate: 1,
-        color: "inherit",
-        as: "div",
-        children: e
-    });
-}, O = (e, i)=>{
-    const { textPresets: n } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(i ? _text.Text2 : _text.Text3, {
-        weight: n.button.weight,
-        truncate: 1,
-        color: "inherit",
-        children: e
-    });
-}, Pe = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
-    var { dataAttributes: e, small: i } = _param, n = _object_without_properties(_param, [
+}), Nt = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
+    var { dataAttributes: t, className: i } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
-        "small"
+        "className"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonLink"
-        }, e)
+        }, t),
+        className: (0, _classnames.default)(i, {
+            [_buttoncssmistica.smallLink]: n.small
+        })
     }, n), {
-        small: !0,
-        ref: r,
-        buttonType: "link",
-        TextContentRenderer: O
+        ref: a,
+        buttonType: "link"
     }));
-}), Ne = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
-    var { dataAttributes: e, small: i } = _param, n = _object_without_properties(_param, [
+}), Pt = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
+    var { dataAttributes: t, className: i } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
-        "small"
+        "className"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonLinkDanger"
-        }, e)
+        }, t),
+        className: (0, _classnames.default)(i, {
+            [_buttoncssmistica.smallLink]: n.small
+        })
     }, n), {
         withChevron: !1,
-        small: !0,
-        ref: r,
-        buttonType: "linkDanger",
-        TextContentRenderer: O
+        ref: a,
+        buttonType: "linkDanger"
     }));
-}), Se = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: e } = _param, i = _object_without_properties(_param, [
+}), Rt = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
+    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
-        }, e)
+        }, t)
     }, i), {
         ref: n,
-        buttonType: "primary",
-        TextContentRenderer: I
+        buttonType: "primary"
     }));
-}), Ve = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: e } = _param, i = _object_without_properties(_param, [
+}), St = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
+    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
-        }, e)
+        }, t)
     }, i), {
         ref: n,
-        buttonType: "secondary",
-        TextContentRenderer: I
+        buttonType: "secondary"
     }));
-}), ze = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: e } = _param, i = _object_without_properties(_param, [
+}), Vt = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
+    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
-        }, e)
+        }, t)
     }, i), {
         ref: n,
-        buttonType: "danger",
-        TextContentRenderer: I
+        buttonType: "danger"
     }));
 });

package/dist/callout.d.ts

@@ -7,7 +7,7 @@ type Props = {
     description: string;
     onClose?: () => void;
     closeButtonLabel?: string;
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
@@ -16,5 +16,5 @@ type Props = {
     dataAttributes?: DataAttributes;
     role?: string;
 };
-declare const Callout: React.FC<Props>;
+declare const Callout: ({ title, titleAs, description, asset, onClose, closeButtonLabel, button, secondaryButton, buttonLink, "aria-label": ariaLabel, dataAttributes, role, }: Props) => JSX.Element;
 export default Callout;

package/dist/callout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return er;
+        return ar;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,6 +26,7 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _css = require("./utils/css.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -83,21 +84,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const G = (param)=>{
-    let { title: a, titleAs: c = "h2", description: d, icon: i, onClose: t, closeButtonLabel: p, button: l, secondaryButton: s, buttonLink: n, "aria-label": u, dataAttributes: f, role: h } = param;
-    const g = (0, _themevariantcontext.useThemeVariant)(), { texts: b } = (0, _hooks.useTheme)();
+const W = (param)=>{
+    let { title: a, titleAs: c = "h2", description: d, asset: i, onClose: t, closeButtonLabel: u, button: l, secondaryButton: n, buttonLink: s, "aria-label": p, dataAttributes: f, role: h } = param;
+    const b = (0, _themevariantcontext.useThemeVariant)(), { texts: g, t: v } = (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
-            }[g]
+                default: _skincontractcssmistica.vars.colors.backgroundContainerAlternative,
+                media: _skincontractcssmistica.vars.colors.backgroundContainer
+            }[b]
         })),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": u !== null && u !== void 0 ? u : a,
+        "aria-label": p !== null && p !== void 0 ? p : a,
         role: h
     }, (0, _dom.getPrefixedDataAttributes)(f, "Callout")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
@@ -141,10 +143,10 @@ const G = (param)=>{
                                         })
                                     ]
                                 }),
-                                (l || s || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                (l || n || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                     primaryButton: l,
-                                    secondaryButton: s,
-                                    link: n
+                                    secondaryButton: n,
+                                    link: s
                                 })
                             ]
                         }),
@@ -156,7 +158,7 @@ const G = (param)=>{
                                 bleedRight: !0,
                                 Icon: _iconcloseregular.default,
                                 onPress: t,
-                                "aria-label": p !== null && p !== void 0 ? p : b.closeButtonLabel
+                                "aria-label": u || g.closeButtonLabel || v(_texttokens.closeButtonLabel)
                             })
                         })
                     ]
@@ -164,4 +166,4 @@ const G = (param)=>{
             ]
         })
     }));
-}, er = G;
+}, ar = W;

package/dist/card.css-mistica.js

@@ -34,10 +34,10 @@ _export(exports, {
         return d;
     },
     displayCardContent: function() {
-        return o;
+        return t;
     },
     displayCardGradient: function() {
-        return t;
+        return o;
     },
     flexColumn: function() {
         return h;
@@ -45,10 +45,10 @@ _export(exports, {
     mediaCard: function() {
         return C;
     },
-    mediaCardContent: function() {
+    mediaCardAsset: function() {
         return l;
     },
-    mediaCardIcon: function() {
+    mediaCardContent: function() {
         return c;
     },
     nakedCardContent: function() {
@@ -85,7 +85,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 n = "_15e54s91 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", e = "_15e54s93 _1y2v1nfhk _1y2v1nfhe", r = "_15e54s9v", y = "_15e54s98", f = "_15e54s9k _1y2v1nfaa _1y2v1nfbj _1y2v1nf7y _1y2v1nf97 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfi7", s = "_15e54s9w", i = "_15e54s9r", d = "_1y2v1nfi7 _1y2v1nfio _1y2v1nfhk _1y2v1nfhe", o = "_15e54s9q", t = "_15e54s9s", h = "_15e54s9x", C = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfio _1y2v1nfi7 _1y2v1nfi6", l = "_15e54s9f _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nf7s _1y2v1nf97 _1y2v1nfhq _1y2v1nfhw", c = "_15e54s9g", b = "_15e54s9i _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfhw _1y2v1nf7s _1y2v1nfbj", u = "_15e54s9m _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhe _1y2v1nfio _1y2v1nfhq _1y2v1nfhw _1y2v1nfi7 _1y2v1nfi6", k = "_15e54s95", p = "_15e54s9a _15e54s96", m = "_15e54s9b _15e54s96", q = "_15e54s9c _15e54s96", O = "_15e54s94", j = "_15e54s97 _15e54s96", w = "_15e54s99 _15e54s96", x = {
+var n = "_15e54s91 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", e = "_15e54s93 _1y2v1nfhk _1y2v1nfhe", r = "_15e54s9v", y = "_15e54s98", f = "_15e54s9k _1y2v1nfaa _1y2v1nfbj _1y2v1nf7y _1y2v1nf97 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfi7", s = "_15e54s9w", i = "_15e54s9r", d = "_1y2v1nfi7 _1y2v1nfio _1y2v1nfhk _1y2v1nfhe", t = "_15e54s9q", o = "_15e54s9s", h = "_15e54s9x", C = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfio _1y2v1nfi7 _1y2v1nfi6", l = "_15e54s9g", c = "_15e54s9f _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nf7s _1y2v1nf97 _1y2v1nfhq _1y2v1nfhw", b = "_15e54s9i _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfhw _1y2v1nf7s _1y2v1nfbj", u = "_15e54s9m _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhe _1y2v1nfio _1y2v1nfhq _1y2v1nfhw _1y2v1nfi7 _1y2v1nfi6", k = "_15e54s95", p = "_15e54s9a _15e54s96", m = "_15e54s9b _15e54s96", q = "_15e54s9c _15e54s96", O = "_15e54s94", j = "_15e54s97 _15e54s96", w = "_15e54s99 _15e54s96", x = {
     aspectRatio: "var(--_15e54s9t)",
     topActionsCount: "var(--_15e54s9u)"
 };

package/dist/card.css.d.ts

@@ -10,7 +10,7 @@ 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 mediaCardAsset: string;
 export declare const nakedCardContent: string;
 export declare const dataCard: string;
 export declare const snapCard: string;