@telefonica/mistica 16.72.0 → 17.1.0

package/dist/button.js

@@ -14,7 +14,7 @@ _export(exports, {
         return qt;
     },
     get ButtonLink () {
-        return Yt;
+        return Et;
     },
     get ButtonLinkDanger () {
         return Zt;
@@ -168,10 +168,10 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Nt = (param)=>{
-    let { element: t, small: i } = param;
+const wt = (param)=>{
+    let { element: t, small: a } = param;
     const { textPresets: n } = (0, _hooks.useTheme)();
-    return i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+    return a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
         size: 14,
         lineHeight: 20,
         weight: n.button.weight,
@@ -187,34 +187,34 @@ const Nt = (param)=>{
         children: t
     });
 }, j = (param)=>{
-    let { small: t, content: i, defaultIconSize: n } = param;
-    const a = (0, _utils.flattenChildren)(i), g = a.length, r = [];
-    let d = [];
-    const f = ()=>{
+    let { small: t, content: a, defaultIconSize: n } = param;
+    const i = (0, _utils.flattenChildren)(a), m = i.length, r = [];
+    let c = [];
+    const g = ()=>{
         r.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Nt, {
-                element: d,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(wt, {
+                element: c,
                 small: t
             })
-        }, r.length)), d = [];
+        }, r.length)), c = [];
     };
-    return a.forEach((o, b)=>{
-        const m = b === 0, c = b === g - 1;
+    return i.forEach((o, b)=>{
+        const f = b === 0, u = b === m - 1;
         if (/*#__PURE__*/ _react.isValidElement(o)) {
-            d.length && f();
+            c.length && g();
             const s = o.props.size !== void 0 ? (0, _css.pxToRem)(o.props.size) : n;
             r.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: m ? 0 : _buttoncssmistica.iconMargin,
-                    marginRight: c ? 0 : _buttoncssmistica.iconMargin
+                    marginLeft: f ? 0 : _buttoncssmistica.iconMargin,
+                    marginRight: u ? 0 : _buttoncssmistica.iconMargin
                 },
                 children: /*#__PURE__*/ _react.cloneElement(o, {
                     size: s
                 })
             }, r.length));
-        } else d.push(o), c && f();
+        } else c.push(o), u && g();
     }), r;
 }, It = ()=>{
     const { skinName: t } = (0, _hooks.useTheme)();
@@ -237,15 +237,15 @@ const Nt = (param)=>{
         })
     });
 }, xt = (param)=>{
-    let { showSpinner: t, children: i, small: n, loadingText: a, shouldRenderSpinner: g, setShouldRenderSpinner: r, StartIcon: d, EndIcon: f, withChevron: o, platformOverrides: b } = param;
-    const m = n ? _buttoncssmistica.iconSize.small : _buttoncssmistica.iconSize.default, c = n ? _buttoncssmistica.spinnerSize.small : _buttoncssmistica.spinnerSize.default, y = j({
+    let { showSpinner: t, children: a, small: n, loadingText: i, shouldRenderSpinner: m, setShouldRenderSpinner: r, StartIcon: c, EndIcon: g, withChevron: o, platformOverrides: b } = param;
+    const f = n ? _buttoncssmistica.iconSize.small : _buttoncssmistica.iconSize.default, u = n ? _buttoncssmistica.spinnerSize.small : _buttoncssmistica.spinnerSize.default, y = j({
         small: n,
-        content: i,
-        defaultIconSize: m
+        content: a,
+        defaultIconSize: f
     }), s = j({
         small: n,
-        content: a,
-        defaultIconSize: m
+        content: i,
+        defaultIconSize: f
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -253,15 +253,15 @@ const Nt = (param)=>{
                 "aria-hidden": t ? !0 : void 0,
                 className: _buttoncssmistica.textContent,
                 children: [
-                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
                             marginRight: _buttoncssmistica.iconMargin
                         },
                         "data-testid": "startIcon",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
-                            size: m,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
+                            size: f,
                             color: "currentColor"
                         })
                     }),
@@ -282,15 +282,15 @@ const Nt = (param)=>{
                             })
                         ]
                     }),
-                    f && !o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    g && !o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.iconMargin
                         },
                         "data-testid": "endIcon",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
-                            size: m,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                            size: f,
                             color: "currentColor"
                         })
                     })
@@ -299,8 +299,8 @@ const Nt = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: a ? {
-                    paddingLeft: c,
+                style: i ? {
+                    paddingLeft: u,
                     paddingRight: `calc(${_buttoncssmistica.iconMargin} + ${n ? _buttoncssmistica.buttonPaddingLeft.small : _buttoncssmistica.buttonPaddingLeft.default} + ${n ? _buttoncssmistica.buttonPaddingRight.small : _buttoncssmistica.buttonPaddingRight.default})`
                 } : void 0,
                 children: s
@@ -309,23 +309,23 @@ const Nt = (param)=>{
                 "aria-hidden": t ? void 0 : !0,
                 className: _buttoncssmistica.loadingContent,
                 onTransitionEnd: ()=>{
-                    t !== g && r(t);
+                    t !== m && r(t);
                 },
                 children: [
-                    g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        "aria-hidden": !!a,
+                    m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        "aria-hidden": !!i,
                         "aria-live": (0, _platform.getPlatform)(b) === "android" ? "polite" : "off",
                         color: "currentcolor",
                         delay: "0s",
-                        size: c
+                        size: u
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: c,
-                            height: c
+                            width: u,
+                            height: u
                         }
                     }),
-                    a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
                         dataAttributes: {
                             testid: "loadingText"
@@ -336,55 +336,58 @@ const Nt = (param)=>{
             })
         ]
     });
-}, B = /*#__PURE__*/ _react.forwardRef((t, i)=>{
+}, V = /*#__PURE__*/ _react.forwardRef((t, a)=>{
     var _t_withChevron;
-    const { eventFormat: n } = (0, _analytics.useTrackingConfig)(), { formStatus: a, formId: g } = (0, _formcontext.useForm)(), r = (0, _themevariantcontext.useThemeVariant)(), { loadingText: d } = t, f = !!t.submit, o = a === "sending", { isDarkMode: b, platformOverrides: m } = (0, _hooks.useTheme)(), [c, y] = _react.useState(!1), s = t.showSpinner || o && f || c, Y = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : t.buttonType.startsWith("link") && (!!t.href || !!t.to), [P, S] = _react.useState(!!s);
+    const { eventFormat: n } = (0, _analytics.useTrackingConfig)(), { formStatus: i, formId: m } = (0, _formcontext.useForm)(), r = (0, _themevariantcontext.useThemeVariant)(), { loadingText: c } = t, g = !!t.submit, o = i === "sending", { isDarkMode: b, platformOverrides: f } = (0, _hooks.useTheme)(), [u, y] = _react.useState(!1), s = t.showSpinner || o && g || u, Y = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : t.buttonType.startsWith("link") && (!!t.href || !!t.to), [P, z] = _react.useState(!!s);
     _react.useEffect(()=>{
-        s && !P && S(!0);
+        s && !P && z(!0);
     }, [
         s,
         P,
-        a
+        i
     ]);
     var _t_trackingEvent;
     const Z = ()=>{
-        let u, h;
+        let d, h;
         switch(t.buttonType){
             case "link":
-                u = "link", h = _analytics.eventActions.linkTapped;
+                d = "link", h = _analytics.eventActions.linkTapped;
                 break;
             case "linkDanger":
-                u = "danger_link", h = _analytics.eventActions.linkTapped;
+                d = "danger_link", h = _analytics.eventActions.linkTapped;
+                break;
+            case "linkNeutral":
+                d = "neutral_link", h = _analytics.eventActions.linkTapped;
                 break;
             default:
-                u = `${t.buttonType}_button`, h = `${t.buttonType}_button_tapped`;
+                d = `${t.buttonType}_button`, h = `${t.buttonType}_button_tapped`;
                 break;
         }
         return n === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
-            component_type: u,
+            component_type: d,
             component_copy: (0, _common.getTextFromChildren)(t.children)
         } : {
             category: _analytics.eventCategories.userInteraction,
             action: h,
             label: (0, _common.getTextFromChildren)(t.children)
         };
-    }, z = t.buttonType.startsWith("link") ? _buttoncssmistica.linkMinWidth : _buttoncssmistica.buttonMinWidth, w = t.buttonType === "linkDanger" && b && r === "brand" ? "linkDangerDark" : t.buttonType, A = r === "media" ? _buttoncssmistica.overMediaButtonVariants[w] : r === "brand" ? _buttoncssmistica.overBrandButtonVariants[w] : r === "negative" ? _buttoncssmistica.overNegativeButtonVariants[w] : _buttoncssmistica.buttonVariants[w], D = {
+    }, A = t.buttonType.startsWith("link") ? _buttoncssmistica.linkMinWidth : _buttoncssmistica.buttonMinWidth, N = t.buttonType === "linkDanger" && b && r === "brand" ? "linkDangerDark" : t.buttonType, D = r === "media" ? _buttoncssmistica.overMediaButtonVariants[N] : r === "brand" ? _buttoncssmistica.overBrandButtonVariants[N] : r === "negative" ? _buttoncssmistica.overNegativeButtonVariants[N] : _buttoncssmistica.buttonVariants[N], O = {
         [_buttoncssmistica.small]: t.small,
         [_buttoncssmistica.isLoading]: s
-    }, O = xt({
+    }, $ = xt({
         showSpinner: s,
         shouldRenderSpinner: P,
-        setShouldRenderSpinner: S,
+        setShouldRenderSpinner: z,
         children: t.children,
-        loadingText: d,
+        loadingText: c,
         small: t.small,
         StartIcon: t.StartIcon,
         EndIcon: t.EndIcon,
         withChevron: Y,
-        platformOverrides: m
-    }), $ = _object_spread(_object_spread_props(_object_spread({}, (0, _css.applyCssVars)({
-        [_buttoncssmistica.buttonVars.minWidth]: t.small ? z.small : z.default
+        platformOverrides: f
+    }), _ = _object_spread(_object_spread_props(_object_spread({}, (0, _css.applyCssVars)({
+        [_buttoncssmistica.buttonVars.minWidth]: t.small ? A.small : A.default
     }), t.bleedLeft ? {
         marginLeft: `calc(-1 * (${_buttoncssmistica.borderSize} + ${t.small ? _buttoncssmistica.buttonPaddingLeft.small : _buttoncssmistica.buttonPaddingLeft.default}))`
     } : void 0, t.bleedRight ? {
@@ -395,11 +398,11 @@ const Nt = (param)=>{
     } : void 0), {
         cursor: t.fake ? "pointer" : void 0
     }), t.style), C = {
-        ref: i,
-        className: t.small ? (0, _classnames.default)(_buttoncssmistica.smallTouchableArea, D) : (0, _classnames.default)(A, t.className, D),
+        ref: a,
+        className: t.small ? (0, _classnames.default)(_buttoncssmistica.smallTouchableArea, O) : (0, _classnames.default)(D, t.className, O),
         style: t.small ? {
             cursor: t.fake ? "pointer" : void 0
-        } : $,
+        } : _,
         trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : t.trackEvent ? Z() : void 0,
         dataAttributes: t.dataAttributes,
         "aria-label": t["aria-label"],
@@ -412,38 +415,38 @@ const Nt = (param)=>{
         "aria-describedby": t["aria-describedby"],
         tabIndex: t.tabIndex,
         children: t.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: (0, _classnames.default)(A, _buttoncssmistica.smallTouchableVisual),
-            children: O
-        }) : O,
+            className: (0, _classnames.default)(D, _buttoncssmistica.smallTouchableVisual),
+            children: $
+        }) : $,
         disabled: t.disabled || s || o,
         role: t.role
-    }, H = (0, _classnames.default)(_buttoncssmistica.smallTouchableContainer, t.className), L = (u)=>t.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    }, H = (0, _classnames.default)(_buttoncssmistica.smallTouchableContainer, t.className), k = (d)=>t.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: H,
-            style: $,
-            children: u
-        }) : u;
+            style: _,
+            children: d
+        }) : d;
     if (process.env.NODE_ENV !== "production" && (t.to === "" || t.href === "")) throw Error("to or href props are empty strings");
-    if (t.fake) return L(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
+    if (t.fake) return k(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
         maybe: !0
     }, C)));
-    if (t.submit) return L(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
+    if (t.submit) return k(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
         type: "submit",
-        formId: g,
+        formId: m,
         onPress: ()=>{}
     }, C)));
-    if (t.onPress) return L(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
-        onPress: (u)=>{
-            const h = t.onPress(u);
+    if (t.onPress) return k(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
+        onPress: (d)=>{
+            const h = t.onPress(d);
             h && (y(!0), h.finally(()=>y(!1)));
         }
     })));
-    if (t.to || t.to === "") return L(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
+    if (t.to || t.to === "") return k(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
         to: t.to,
         newTab: t.newTab,
         fullPageOnWebView: t.fullPageOnWebView,
         onNavigate: t.onNavigate
     })));
-    if (t.href || t.href === "") return L(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
+    if (t.href || t.href === "") return k(/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, C), {
         href: t.href,
         newTab: t.newTab,
         loadOnTop: t.loadOnTop,
@@ -451,72 +454,74 @@ const Nt = (param)=>{
     })));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Yt = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
-    var { dataAttributes: t, className: i } = _param, n = _object_without_properties(_param, [
+}), Et = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+    var { dataAttributes: t, className: a, type: n = "default" } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
-        "className"
+        "className",
+        "type"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({
+    const r = n === "danger" ? "linkDanger" : n === "neutral" ? "linkNeutral" : "link";
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             testid: "ButtonLink"
         }, t),
-        className: (0, _classnames.default)(i, {
-            [_buttoncssmistica.smallLink]: n.small
+        className: (0, _classnames.default)(a, {
+            [_buttoncssmistica.smallLink]: i.small
         })
-    }, n), {
-        ref: a,
-        buttonType: "link"
+    }, i), {
+        ref: m,
+        buttonType: r
     }));
-}), Zt = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
-    var { dataAttributes: t, className: i } = _param, n = _object_without_properties(_param, [
+}), Zt = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { dataAttributes: t, className: a } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "className"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Et, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             testid: "ButtonLinkDanger"
         }, t),
-        className: (0, _classnames.default)(i, {
+        className: (0, _classnames.default)(a, {
             [_buttoncssmistica.smallLink]: n.small
         })
     }, n), {
         withChevron: !1,
-        ref: a,
-        buttonType: "linkDanger"
+        ref: i,
+        type: "danger"
     }));
 }), Ht = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
+    var { dataAttributes: t } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             testid: "ButtonPrimary"
         }, t)
-    }, i), {
+    }, a), {
         ref: n,
         buttonType: "primary"
     }));
 }), Ut = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
+    var { dataAttributes: t } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             testid: "ButtonSecondary"
         }, t)
-    }, i), {
+    }, a), {
         ref: n,
         buttonType: "secondary"
     }));
 }), qt = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
+    var { dataAttributes: t } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             testid: "ButtonDanger"
         }, t)
-    }, i), {
+    }, a), {
         ref: n,
         buttonType: "danger"
     }));

package/dist/callout.css-mistica.js

@@ -10,30 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     get background () {
-        return g;
+        return m;
     },
     get closeButtonContainer () {
-        return a;
+        return e;
     },
     get closeButtonContainerSize () {
-        return m;
+        return a;
     },
     get container () {
         return n;
     },
     get content () {
-        return e;
+        return r;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                   */ var n = "v16_72_14g0jmy1 v16_72_14g0jmy0 v16_72_1y2v1nfgc v16_72_1y2v1nfhl v16_72_1y2v1nfiu v16_72_1y2v1nfk3 v16_72_1y2v1nfq4 v16_72_1y2v1nfsw v16_72_1y2v1nft7", e = "v16_72_14g0jmy3 v16_72_14g0jmy2 v16_72_1y2v1nfqq v16_72_1y2v1nfpy", a = "v16_72_14g0jmy5 v16_72_14g0jmy4 v16_72_1y2v1nfpz v16_72_1y2v1nfu7", m = "v16_72_14g0jmy6", g = {
-    "default-over-brand": "v16_72_14g0jmyh v16_72_14g0jmy7 v16_72_1y2v1nf83",
-    "default-over-negative": "v16_72_14g0jmyi v16_72_14g0jmy8 v16_72_1y2v1nf83",
-    "default-over-alternative": "v16_72_14g0jmyj v16_72_14g0jmy9 v16_72_1y2v1nf83",
-    "default-over-default": "v16_72_14g0jmyk v16_72_14g0jmya v16_72_1y2v1nf8d",
-    "default-over-media": "v16_72_14g0jmyl v16_72_14g0jmyb v16_72_1y2v1nf83",
-    "brand-over-brand": "v16_72_14g0jmym v16_72_14g0jmyc v16_72_1y2v1nf8a",
-    "brand-over-negative": "v16_72_14g0jmyn v16_72_14g0jmyd v16_72_1y2v1nf8a",
-    "brand-over-alternative": "v16_72_14g0jmyo v16_72_14g0jmye v16_72_1y2v1nf87",
-    "brand-over-default": "v16_72_14g0jmyp v16_72_14g0jmyf v16_72_1y2v1nf87",
-    "brand-over-media": "v16_72_14g0jmyq v16_72_14g0jmyg v16_72_1y2v1nf87"
+/* empty css                                     */ /* empty css                                       */ /* empty css                                   */ var n = "v17_1_14g0jmy1 v17_1_14g0jmy0 v17_1_1y2v1nfhi v17_1_1y2v1nfir v17_1_1y2v1nfk0 v17_1_1y2v1nfl9 v17_1_1y2v1nfra v17_1_1y2v1nfu2 v17_1_1y2v1nfud", r = "v17_1_14g0jmy3 v17_1_14g0jmy2 v17_1_1y2v1nfrw v17_1_1y2v1nfr4", e = "v17_1_14g0jmy5 v17_1_14g0jmy4 v17_1_1y2v1nfr5 v17_1_1y2v1nfvd", a = "v17_1_14g0jmy6", m = {
+    "default-over-brand": "v17_1_14g0jmyh v17_1_14g0jmy7 v17_1_1y2v1nf8x",
+    "default-over-negative": "v17_1_14g0jmyi v17_1_14g0jmy8 v17_1_1y2v1nf8x",
+    "default-over-alternative": "v17_1_14g0jmyj v17_1_14g0jmy9 v17_1_1y2v1nf8x",
+    "default-over-default": "v17_1_14g0jmyk v17_1_14g0jmya v17_1_1y2v1nf97",
+    "default-over-media": "v17_1_14g0jmyl v17_1_14g0jmyb v17_1_1y2v1nf8x",
+    "brand-over-brand": "v17_1_14g0jmym v17_1_14g0jmyc v17_1_1y2v1nf94",
+    "brand-over-negative": "v17_1_14g0jmyn v17_1_14g0jmyd v17_1_1y2v1nf94",
+    "brand-over-alternative": "v17_1_14g0jmyo v17_1_14g0jmye v17_1_1y2v1nf91",
+    "brand-over-default": "v17_1_14g0jmyp v17_1_14g0jmyf v17_1_1y2v1nf91",
+    "brand-over-media": "v17_1_14g0jmyq v17_1_14g0jmyg v17_1_1y2v1nf91"
 };

package/dist/callout.d.ts

@@ -9,6 +9,7 @@ type Props = {
     } | string;
     titleAs?: HeadingType;
     description: string;
+    small?: boolean;
     onClose?: () => void;
     closeButtonLabel?: string;
     asset?: React.ReactElement;
@@ -20,5 +21,5 @@ type Props = {
     dataAttributes?: DataAttributes;
     role?: string;
 };
-declare const Callout: ({ title, titleAs, description, asset, onClose, closeButtonLabel, button, secondaryButton, buttonLink, variant, "aria-label": ariaLabel, dataAttributes, role, }: Props) => JSX.Element;
+declare const Callout: ({ title, titleAs, description, small, asset, onClose, closeButtonLabel, button, secondaryButton, buttonLink, variant, "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 nt;
+        return ut;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -83,28 +83,28 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const nt = (param)=>{
-    let { title: e, titleAs: i = "h2", description: p, asset: s, onClose: a, closeButtonLabel: f, button: l, secondaryButton: m, buttonLink: n, variant: c = "default", "aria-label": b, dataAttributes: h, role: x } = param;
-    const B = (0, _themevariantcontext.useThemeVariant)(), { texts: g, t: T } = (0, _hooks.useTheme)(), o = typeof e == "object", v = o && (e === null || e === void 0 ? void 0 : e.as) || i, V = o ? e === null || e === void 0 ? void 0 : e["aria-label"] : void 0, y = o ? e === null || e === void 0 ? void 0 : e.text : e, A = (0, _themevariantcontext.normalizeVariant)(c);
+const ut = (param)=>{
+    let { title: e, titleAs: i = "h2", description: b, small: s = !1, asset: l, onClose: o, closeButtonLabel: h, button: n, secondaryButton: m, buttonLink: c, variant: d = "default", "aria-label": x, dataAttributes: B, role: T } = param;
+    const g = (0, _themevariantcontext.useThemeVariant)(), { texts: v, t: C } = (0, _hooks.useTheme)(), a = typeof e == "object", V = a && (e === null || e === void 0 ? void 0 : e.as) || i, y = a ? e === null || e === void 0 ? void 0 : e["aria-label"] : void 0, A = a ? e === null || e === void 0 ? void 0 : e.text : e, I = (0, _themevariantcontext.normalizeVariant)(d), R = s ? _text.Text2 : _text.Text3, j = s ? _text.Text1 : _text.Text2;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_calloutcssmistica.container, _calloutcssmistica.background[`${A}-over-${B}`]),
+        className: (0, _classnames.default)(_calloutcssmistica.container, _calloutcssmistica.background[`${I}-over-${g}`]),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": b,
-        role: x
+        "aria-label": x,
+        role: T
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         testid: "Callout"
-    }, h))), {
+    }, B))), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-            variant: c,
+            variant: d,
             children: [
-                s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingRight: 16,
                     dataAttributes: {
                         testid: "asset"
                     },
-                    children: s
+                    children: l
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _calloutcssmistica.content,
@@ -120,41 +120,41 @@ const nt = (param)=>{
                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                             space: 4,
                                             children: [
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                    as: v,
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(R, {
+                                                    as: V,
                                                     regular: !0,
                                                     dataAttributes: {
                                                         testid: "title"
                                                     },
-                                                    "aria-label": V,
-                                                    children: y
+                                                    "aria-label": y,
+                                                    children: A
                                                 }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
                                                     as: "p",
                                                     regular: !0,
                                                     color: _skincontractcssmistica.vars.colors.textSecondary,
                                                     dataAttributes: {
                                                         testid: "description"
                                                     },
-                                                    children: p
+                                                    children: b
                                                 })
                                             ]
                                         }),
-                                        a && // Create empty div in order to fill space that iconButton occupies.
+                                        o && // 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
                                         })
                                     ]
                                 }),
-                                (l || m || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                    primaryButton: l,
+                                (n || m || c) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                    primaryButton: n,
                                     secondaryButton: m,
-                                    link: n
+                                    link: c
                                 })
                             ]
                         }),
-                        a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _calloutcssmistica.closeButtonContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                                 dataAttributes: {
@@ -164,8 +164,8 @@ const nt = (param)=>{
                                 bleedY: !0,
                                 bleedRight: !0,
                                 Icon: _iconcloseregular.default,
-                                onPress: a,
-                                "aria-label": f || g.closeButtonLabel || T(_texttokens.closeButtonLabel)
+                                onPress: o,
+                                "aria-label": h || v.closeButtonLabel || C(_texttokens.closeButtonLabel)
                             })
                         })
                     ]

package/dist/card-cover.d.ts

@@ -18,6 +18,7 @@ type CoverCardProps = {
     width?: number | string;
     height?: number | string;
     asset?: React.ReactElement;
+    imageAlt?: string;
     imageSrc?: string;
     imageSrcSet?: string;
     videoSrc?: VideoSource;