@telefonica/mistica 15.0.0 → 15.2.0

package/dist/button.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return _;
     },
     ICON_MARGIN_PX: function() {
-        return f;
+        return y;
     },
     ICON_SIZE: function() {
-        return y;
+        return f;
     },
     PADDING_X_LINK: function() {
         return r;
@@ -25,28 +25,28 @@ _export(exports, {
         return a;
     },
     SMALL_ICON_SIZE: function() {
-        return h;
+        return b;
     },
     SMALL_SPINNER_SIZE: function() {
-        return b;
+        return h;
     },
     SPINNER_SIZE: function() {
         return p;
     },
     X_PADDING_PX: function() {
-        return j;
+        return e;
     },
     X_SMALL_PADDING_PX: function() {
-        return t;
+        return j;
     },
     buttonVariants: function() {
-        return e;
+        return t;
     },
     inverseButtonVariants: function() {
-        return i;
+        return g;
     },
     inverseLinkVariants: function() {
-        return g;
+        return i;
     },
     isLoading: function() {
         return k;
@@ -61,31 +61,31 @@ _export(exports, {
         return N;
     },
     small: function() {
-        return x;
+        return l;
     },
     textContent: function() {
-        return c;
+        return o;
     },
     textContentLink: function() {
-        return o;
+        return d;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
-var _ = 2, f = 8, y = 24, r = 12, a = 6, h = 20, b = 16, p = 20, j = 14.5, t = 10.5, e = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf27 _1y2v1nf4e",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf2a _1y2v1nf70",
-    danger: "rrbrpnq rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf27 _1y2v1nf46"
-}, i = {
-    primary: "rrbrpnr rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf28 _1y2v1nf4f",
-    secondary: "rrbrpns rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf2c _1y2v1nf70",
-    danger: "rrbrpnt rrbrpn2 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhc _1y2v1nfh2 _1y2v1nfhw _1y2v1nfjx _1y2v1nfk9 _1y2v1nf27 _1y2v1nf46"
+var _ = 2, y = 8, f = 24, r = 12, a = 6, b = 20, h = 16, p = 20, e = 14.5, j = 10.5, t = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf27 _1y2v1nf4f",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf2a _1y2v1nf72",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf27 _1y2v1nf47"
 }, g = {
-    default: "rrbrpnx rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2f _1y2v1nf70",
-    danger: "rrbrpny rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2g _1y2v1nf4a",
-    dangerDark: "rrbrpnz rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2g _1y2v1nf70"
+    primary: "rrbrpnr rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf28 _1y2v1nf4g",
+    secondary: "rrbrpns rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf2c _1y2v1nf72",
+    danger: "rrbrpnt rrbrpn2 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhe _1y2v1nfh4 _1y2v1nfhy _1y2v1nfjz _1y2v1nfkb _1y2v1nf27 _1y2v1nf47"
+}, i = {
+    default: "rrbrpnx rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2f _1y2v1nf72",
+    danger: "rrbrpny rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2g _1y2v1nf4b",
+    dangerDark: "rrbrpnz rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2g _1y2v1nf72"
 }, k = "rrbrpn0", I = {
-    default: "rrbrpnu rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2e _1y2v1nf70",
-    danger: "rrbrpnv rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2g _1y2v1nf70",
-    dangerDark: "rrbrpnw rrbrpng _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhc _1y2v1nfhw _1y2v1nfh2 _1y2v1nfjx _1y2v1nfjq _1y2v1nfk9 _1y2v1nfj2 _1y2v1nf2g _1y2v1nf70"
-}, s = "rrbrpn7 _1y2v1nfh9 _1y2v1nfh3 _1y2v1nfkf _1y2v1nflo _1y2v1nfhh _1y2v1nfhn", N = "rrbrpn4 _1y2v1nfha _1y2v1nfid _1y2v1nfk9", x = "rrbrpn5", c = "rrbrpn9 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh", o = "rrbrpni _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh";
+    default: "rrbrpnu rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2e _1y2v1nf72",
+    danger: "rrbrpnv rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2g _1y2v1nf72",
+    dangerDark: "rrbrpnw rrbrpng _1y2v1nf9x _1y2v1nfb6 _1y2v1nfhe _1y2v1nfhy _1y2v1nfh4 _1y2v1nfjz _1y2v1nfjs _1y2v1nfkb _1y2v1nfj4 _1y2v1nf2g _1y2v1nf72"
+}, s = "rrbrpn7 _1y2v1nfhb _1y2v1nfh5 _1y2v1nfkh _1y2v1nflq _1y2v1nfhj _1y2v1nfhp", N = "rrbrpn4 _1y2v1nfhc _1y2v1nfif _1y2v1nfkb", l = "rrbrpn5", o = "rrbrpn9 _1y2v1nfha _1y2v1nfhp _1y2v1nfhj", d = "rrbrpni _1y2v1nfha _1y2v1nfhp _1y2v1nfhj";

package/dist/button.d.ts

@@ -21,6 +21,8 @@ interface CommonProps {
     tabIndex?: number;
     StartIcon?: React.FC<IconProps>;
     EndIcon?: React.FC<IconProps>;
+    /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
+    role?: string;
 }
 export interface ToButtonProps extends CommonProps {
     to: string | Location;
@@ -29,6 +31,7 @@ export interface ToButtonProps extends CommonProps {
     fake?: undefined;
     onPress?: undefined;
     href?: undefined;
+    onNavigate?: () => void | Promise<void>;
 }
 export interface OnPressButtonProps extends CommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
@@ -36,6 +39,7 @@ export interface OnPressButtonProps extends CommonProps {
     fake?: undefined;
     to?: undefined;
     href?: undefined;
+    onNavigate?: undefined;
 }
 export interface HrefButtonProps extends CommonProps {
     href: string;
@@ -45,6 +49,7 @@ export interface HrefButtonProps extends CommonProps {
     fake?: undefined;
     onPress?: undefined;
     to?: undefined;
+    onNavigate?: () => void | Promise<void>;
 }
 export interface FakeButtonProps extends CommonProps {
     fake: true;
@@ -52,6 +57,7 @@ export interface FakeButtonProps extends CommonProps {
     onPress?: undefined;
     to?: undefined;
     href?: undefined;
+    onNavigate?: undefined;
 }
 export interface SubmitButtonProps extends CommonProps {
     submit: true;
@@ -59,6 +65,7 @@ export interface SubmitButtonProps extends CommonProps {
     fake?: undefined;
     onPress?: undefined;
     href?: undefined;
+    onNavigate?: undefined;
 }
 export type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps;
 interface ButtonLinkCommonProps {
@@ -79,23 +86,28 @@ interface ButtonLinkCommonProps {
     'aria-controls'?: string;
     'aria-expanded'?: 'true' | 'false' | boolean;
     'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
+    /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
+    role?: string;
 }
 interface ButtonLinkOnPressProps extends ButtonLinkCommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
     to?: undefined;
     href?: undefined;
+    onNavigate?: undefined;
 }
 interface ButtonLinkHrefProps extends ButtonLinkCommonProps {
     href: string;
     newTab?: boolean;
     onPress?: undefined;
     to?: undefined;
+    onNavigate?: () => void | Promise<void>;
 }
 interface ButtonLinkToProps extends ButtonLinkCommonProps {
     to: string;
     fullPageOnWebView?: boolean;
     onPress?: undefined;
     href?: undefined;
+    onNavigate?: () => void | Promise<void>;
 }
 export type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
 export declare const ButtonLink: React.ForwardRefExoticComponent<(ButtonLinkProps & {

package/dist/button.js

@@ -167,18 +167,18 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const x = (param)=>{
-    let { content: e, defaultIconSize: t, renderText: r } = param;
-    const s = (0, _utils.flattenChildren)(e), u = s.length, c = [];
-    let l = [];
+    let { content: e, defaultIconSize: t, renderText: i } = param;
+    const l = (0, _utils.flattenChildren)(e), u = l.length, c = [];
+    let s = [];
     const f = ()=>{
         c.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: r(l)
-        }, c.length)), l = [];
+            children: i(s)
+        }, c.length)), s = [];
     };
-    return s.forEach((d, m)=>{
+    return l.forEach((d, m)=>{
         const h = m === 0, o = m === u - 1;
         if (/*#__PURE__*/ _react.isValidElement(d)) {
-            l.length && f();
+            s.length && f();
             var _d_props_size;
             const v = (_d_props_size = d.props.size) !== null && _d_props_size !== void 0 ? _d_props_size : t;
             c.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -192,7 +192,7 @@ const x = (param)=>{
                     size: (0, _css.pxToRem)(v)
                 })
             }, c.length));
-        } else l.push(d), o && f();
+        } else s.push(d), o && f();
     }), c;
 }, fe = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
@@ -203,8 +203,8 @@ const x = (param)=>{
             fill: "currentColor"
         })
     }), X = (param)=>{
-    let { showSpinner: e, children: t, small: r, loadingText: s, shouldRenderSpinner: u, setShouldRenderSpinner: c, renderText: l, textContentStyle: f, StartIcon: d, EndIcon: m, withChevron: h } = param;
-    const o = r ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(r ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    let { showSpinner: e, children: t, small: i, loadingText: l, shouldRenderSpinner: u, setShouldRenderSpinner: c, renderText: s, textContentStyle: f, StartIcon: d, EndIcon: m, withChevron: h } = param;
+    const o = i ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, r = (0, _css.pxToRem)(i ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -231,7 +231,7 @@ const x = (param)=>{
                             x({
                                 content: t,
                                 defaultIconSize: o,
-                                renderText: l
+                                renderText: s
                             }),
                             h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
@@ -259,14 +259,14 @@ const x = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: s ? {
-                    paddingLeft: i,
-                    paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (r ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
+                style: l ? {
+                    paddingLeft: r,
+                    paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (i ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
                 children: x({
-                    content: s,
+                    content: l,
                     defaultIconSize: o,
-                    renderText: l
+                    renderText: s
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -277,23 +277,23 @@ const x = (param)=>{
                 },
                 children: [
                     u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        rolePresentation: !!s,
+                        rolePresentation: !!l,
                         color: "currentcolor",
                         delay: "0s",
-                        size: i
+                        size: r
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: i,
-                            height: i
+                            width: r,
+                            height: r
                         }
                     }),
-                    s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
                         children: x({
-                            content: s,
+                            content: l,
                             defaultIconSize: o,
-                            renderText: l
+                            renderText: s
                         })
                     }) : null
                 ]
@@ -301,16 +301,16 @@ const x = (param)=>{
         ]
     });
 }, k = /*#__PURE__*/ _react.forwardRef((e, t)=>{
-    const { textPresets: r } = (0, _hooks.useTheme)(), { eventFormat: s } = (0, _analytics.useTrackingConfig)(), { formStatus: u, formId: c } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: f } = e, d = !!e.submit, m = u === "sending", [h, o] = _react.useState(!1), i = e.showSpinner || m && d || h, [v, I] = _react.useState(!!i);
+    const { textPresets: i } = (0, _hooks.useTheme)(), { eventFormat: l } = (0, _analytics.useTrackingConfig)(), { formStatus: u, formId: c } = (0, _formcontext.useForm)(), s = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: f } = e, d = !!e.submit, m = u === "sending", [h, o] = _react.useState(!1), r = e.showSpinner || m && d || h, [v, I] = _react.useState(!!r);
     _react.useEffect(()=>{
-        i && !v && I(!0);
+        r && !v && I(!0);
     }, [
-        i,
+        r,
         v,
         u
     ]);
     var _e_trackingEvent;
-    const P = ()=>s === "google-analytics-4" ? {
+    const E = ()=>l === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: (0, _common.getTextFromChildren)(e.children)
@@ -321,27 +321,27 @@ const x = (param)=>{
         }, w = (y)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
-            weight: r.button.weight,
+            weight: i.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
             children: y
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-            weight: r.button.weight,
+            weight: i.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
             children: y
         }), b = {
         ref: t,
-        className: (0, _classnames.default)(l ? _buttoncssmistica.inverseButtonVariants[e.type] : _buttoncssmistica.buttonVariants[e.type], e.className, {
+        className: (0, _classnames.default)(s ? _buttoncssmistica.inverseButtonVariants[e.type] : _buttoncssmistica.buttonVariants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: i
+            [_buttoncssmistica.isLoading]: r
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
         }, e.style),
-        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? P() : void 0,
+        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? E() : void 0,
         dataAttributes: e.dataAttributes,
         "aria-label": e["aria-label"],
         "aria-controls": e["aria-controls"],
@@ -349,7 +349,7 @@ const x = (param)=>{
         "aria-haspopup": e["aria-haspopup"],
         tabIndex: e.tabIndex,
         children: X({
-            showSpinner: i,
+            showSpinner: r,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: I,
             children: e.children,
@@ -360,8 +360,8 @@ const x = (param)=>{
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || i || m,
-        role: "button"
+        disabled: e.disabled || r || m,
+        role: e.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({
@@ -383,30 +383,32 @@ const x = (param)=>{
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
         to: e.to,
-        fullPageOnWebView: e.fullPageOnWebView
+        fullPageOnWebView: e.fullPageOnWebView,
+        onNavigate: e.onNavigate
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
         href: e.href,
         newTab: e.newTab,
-        loadOnTop: e.loadOnTop
+        loadOnTop: e.loadOnTop,
+        onNavigate: e.onNavigate
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Z = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), Z = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { type: e } = _param, t = _object_without_properties(_param, [
         "type"
     ]);
     var _t_withChevron;
-    const { formStatus: s } = (0, _formcontext.useForm)(), u = (0, _themevariantcontext.useIsInverseVariant)(), { textPresets: c } = (0, _hooks.useTheme)(), { eventFormat: l } = (0, _analytics.useTrackingConfig)(), { isDarkMode: f } = (0, _hooks.useTheme)(), { loadingText: d } = t, m = s === "sending", [h, o] = _react.useState(!1), i = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [I, P] = _react.useState(!!i);
+    const { formStatus: l } = (0, _formcontext.useForm)(), u = (0, _themevariantcontext.useIsInverseVariant)(), { textPresets: c } = (0, _hooks.useTheme)(), { eventFormat: s } = (0, _analytics.useTrackingConfig)(), { isDarkMode: f } = (0, _hooks.useTheme)(), { loadingText: d } = t, m = l === "sending", [h, o] = _react.useState(!1), r = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [I, E] = _react.useState(!!r);
     _react.useEffect(()=>{
-        i && !I && P(!0);
+        r && !I && E(!0);
     }, [
-        i,
+        r,
         I,
-        s
+        l
     ]);
     var _t_trackingEvent;
-    const w = ()=>l === "google-analytics-4" ? {
+    const w = ()=>s === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: e === "danger" ? "danger_link" : "link",
             component_copy: (0, _common.getTextFromChildren)(t.children)
@@ -421,7 +423,7 @@ const x = (param)=>{
             children: _
         }), y = e === "danger" && f && u ? "dangerDark" : e, L = {
         className: (0, _classnames.default)(u ? _buttoncssmistica.inverseLinkVariants[y] : _buttoncssmistica.linkVariants[y], {
-            [_buttoncssmistica.isLoading]: i
+            [_buttoncssmistica.isLoading]: r
         }),
         /**
      * Setting bleed classes with style to override the margin:0 set by the Touchable component.
@@ -441,9 +443,9 @@ const x = (param)=>{
         "aria-expanded": t["aria-expanded"],
         "aria-haspopup": t["aria-haspopup"],
         children: X({
-            showSpinner: i,
+            showSpinner: r,
             shouldRenderSpinner: I,
-            setShouldRenderSpinner: P,
+            setShouldRenderSpinner: E,
             children: t.children,
             loadingText: d,
             small: !0,
@@ -453,11 +455,12 @@ const x = (param)=>{
             EndIcon: t.EndIcon,
             withChevron: v
         }),
-        disabled: t.disabled || i || m
+        disabled: t.disabled || r || m,
+        role: t.role
     };
     if (process.env.NODE_ENV !== "production" && (t.to === "" || t.href === "")) throw Error("to or href props are empty strings");
     if (t.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
+        ref: i
     }, L), {
         onPress: (_)=>{
             const B = t.onPress(_);
@@ -465,20 +468,22 @@ const x = (param)=>{
         }
     }));
     if (t.to || t.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
+        ref: i
     }, L), {
         to: t.to,
-        fullPageOnWebView: t.fullPageOnWebView
+        fullPageOnWebView: t.fullPageOnWebView,
+        onNavigate: t.onNavigate
     }));
     if (t.href || t.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
+        ref: i
     }, L), {
         href: t.href,
-        newTab: t.newTab
+        newTab: t.newTab,
+        onNavigate: t.onNavigate
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), xe = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), xe = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -487,10 +492,10 @@ const x = (param)=>{
             "component-name": "ButtonLink"
         }, e)
     }, t), {
-        ref: r,
+        ref: i,
         type: "default"
     }));
-}), Re = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -500,10 +505,10 @@ const x = (param)=>{
         }, e)
     }, t), {
         withChevron: !1,
-        ref: r,
+        ref: i,
         type: "danger"
     }));
-}), ke = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), ke = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -512,10 +517,10 @@ const x = (param)=>{
             "component-name": "ButtonPrimary"
         }, e)
     }, t), {
-        ref: r,
+        ref: i,
         type: "primary"
     }));
-}), Be = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), Be = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -524,10 +529,10 @@ const x = (param)=>{
             "component-name": "ButtonSecondary"
         }, e)
     }, t), {
-        ref: r,
+        ref: i,
         type: "secondary"
     }));
-}), Ae = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}), Ae = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -536,7 +541,7 @@ const x = (param)=>{
             "component-name": "ButtonDanger"
         }, e)
     }, t), {
-        ref: r,
+        ref: i,
         type: "danger"
     }));
 });

package/dist/callout.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return v;
+        return y;
     },
     content: function() {
         return _;
@@ -18,4 +18,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./callout.css.ts.vanilla.css-mistica.js");
-var v = "_14g0jmy1 _1y2v1nf7g _1y2v1nf8p _1y2v1nf9y _1y2v1nfb7 _1y2v1nfh8 _1y2v1nfjz _1y2v1nfk9", _ = "_14g0jmy3 _1y2v1nfhu";
+var y = "_14g0jmy1 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfb9 _1y2v1nfha _1y2v1nfk1 _1y2v1nfkb", _ = "_14g0jmy3 _1y2v1nfhw";

package/dist/callout.d.ts

@@ -3,6 +3,7 @@ import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
 type Props = {
     title?: string;
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     description: string;
     onClose?: () => void;
     icon?: React.ReactElement;

package/dist/callout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return U;
+        return X;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -83,22 +83,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-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)();
+const $ = (param)=>{
+    let { title: t, titleAs: c = "h2", description: d, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: m, "aria-label": p, dataAttributes: u } = param;
+    const f = (0, _themevariantcontext.useThemeVariant)(), { texts: h } = (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
-            }[u]
+            }[f]
         })),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": d !== null && d !== void 0 ? d : t
-    }, (0, _dom.getPrefixedDataAttributes)(p, "Callout")), {
+        "aria-label": p !== null && p !== void 0 ? p : t
+    }, (0, _dom.getPrefixedDataAttributes)(u, "Callout")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             isInverse: !1,
             children: [
@@ -120,7 +120,7 @@ const P = (param)=>{
                                         space: 4,
                                         children: [
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                as: "h2",
+                                                as: c,
                                                 regular: !0,
                                                 children: t
                                             }),
@@ -128,7 +128,7 @@ const P = (param)=>{
                                                 as: "p",
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                                children: c
+                                                children: d
                                             })
                                         ]
                                     }),
@@ -143,7 +143,7 @@ const P = (param)=>{
                                             bleedRight: !0,
                                             Icon: _iconcloseregular.default,
                                             onPress: i,
-                                            "aria-label": f.closeButtonLabel
+                                            "aria-label": h.closeButtonLabel
                                         })
                                     })
                                 ]
@@ -159,4 +159,4 @@ const P = (param)=>{
             ]
         })
     }));
-}, U = P;
+}, X = $;