@telefonica/mistica 14.36.1 → 14.37.0

package/dist/button.css.d.ts

@@ -1,3 +1,4 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
 export declare const BUTTON_MIN_WIDTH = 104;
 export declare const ICON_MARGIN_PX = 8;
 export declare const X_PADDING_PX: number;
@@ -14,8 +15,10 @@ export declare const loadingFiller: string;
 export declare const small: string;
 export declare const loadingContent: string;
 export declare const textContent: string;
-export declare const link: string;
-export declare const inverseLink: string;
 export declare const textContentLink: string;
-export declare const variants: Record<"primary" | "secondary" | "danger", string>;
-export declare const inverseVariants: Record<"primary" | "secondary" | "danger", string>;
+export declare const defaultLink: ComplexStyleRule;
+export declare const defaultLinkInverse: ComplexStyleRule;
+export declare const buttonVariants: Record<"primary" | "secondary" | "danger", string>;
+export declare const inverseButtonVariants: Record<"primary" | "secondary" | "danger", string>;
+export declare const linkVariants: Record<"default" | "danger" | "dangerDark", string>;
+export declare const inverseLinkVariants: Record<"default" | "danger" | "dangerDark", string>;

package/dist/button.d.ts

@@ -76,7 +76,6 @@ interface ButtonLinkCommonProps {
     loadingText?: string;
     StartIcon?: React.FC<IconProps>;
     EndIcon?: React.FC<IconProps>;
-    withChevron?: boolean;
     bleedLeft?: boolean;
     bleedRight?: boolean;
     bleedY?: boolean;
@@ -103,7 +102,10 @@ interface ButtonLinkToProps extends ButtonLinkCommonProps {
     href?: undefined;
 }
 export type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
-export declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<TouchableElement>>;
+export declare const ButtonLink: React.ForwardRefExoticComponent<(ButtonLinkProps & {
+    withChevron?: boolean | undefined;
+}) & React.RefAttributes<TouchableElement>>;
+export declare const ButtonLinkDanger: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<TouchableElement>>;
 export declare const ButtonPrimary: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;
 export declare const ButtonSecondary: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;
 export declare const ButtonDanger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;

package/dist/button.js

@@ -11,16 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return xe;
+        return Ae;
     },
     ButtonLink: function() {
-        return Ne;
+        return Re;
+    },
+    ButtonLinkDanger: function() {
+        return ke;
     },
     ButtonPrimary: function() {
-        return _e;
+        return xe;
     },
     ButtonSecondary: function() {
-        return we;
+        return Be;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -163,35 +166,35 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const N = (param)=>{
-    let { content: e, defaultIconSize: r, renderText: n } = param;
-    const l = (0, _utils.flattenChildren)(e), f = l.length, d = [];
-    let c = [];
-    const g = ()=>{
-        d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: n(c)
-        }, d.length)), c = [];
+const _ = (param)=>{
+    let { content: e, defaultIconSize: t, renderText: r } = param;
+    const s = (0, _utils.flattenChildren)(e), u = s.length, c = [];
+    let l = [];
+    const f = ()=>{
+        c.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
+            children: r(l)
+        }, c.length)), l = [];
     };
-    return l.forEach((u, m)=>{
-        const o = m === 0, s = m === f - 1;
-        if (/*#__PURE__*/ _react.isValidElement(u)) {
-            c.length && g();
-            var _u_props_size;
-            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : r;
-            d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    return s.forEach((d, m)=>{
+        const h = m === 0, o = m === u - 1;
+        if (/*#__PURE__*/ _react.isValidElement(d)) {
+            l.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", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: o ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
-                    marginRight: s ? 0 : _buttoncssmistica.ICON_MARGIN_PX
+                    marginLeft: h ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
+                    marginRight: o ? 0 : _buttoncssmistica.ICON_MARGIN_PX
                 },
-                children: /*#__PURE__*/ _react.cloneElement(u, {
+                children: /*#__PURE__*/ _react.cloneElement(d, {
                     size: (0, _css.pxToRem)(v)
                 })
-            }, d.length));
-        } else c.push(u), s && g();
-    }), d;
-}, de = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+            }, c.length));
+        } else l.push(d), o && f();
+    }), c;
+}, fe = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
         height: "1.25em",
         viewBox: "0 0 8 20",
@@ -199,74 +202,74 @@ const N = (param)=>{
             d: "M6.32595 11.0107L3.03801 7.7086L3.03292 7.70375L3.032 7.70291L3.02931 7.70047L3.02848 7.69974L3.02248 7.69436C2.88533 7.57121 2.71386 7.53733 2.56343 7.55395C2.41648 7.57018 2.27272 7.63567 2.16886 7.73711C2.06893 7.83185 2.01209 7.97816 2.00175 8.11707C1.99083 8.26377 2.02925 8.43959 2.16869 8.57393L5.24446 11.5515L2.15859 14.512L2.15375 14.5171L2.1529 14.518L2.15046 14.5207L2.14974 14.5215L2.14435 14.5275C2.02121 14.6647 1.98733 14.8361 2.00394 14.9866C2.02017 15.1335 2.08567 15.2773 2.18711 15.3811C2.28184 15.4811 2.42816 15.5379 2.56706 15.5483C2.71377 15.5592 2.88958 15.5208 3.02392 15.3813L6.32595 12.0922C6.6246 11.7936 6.6246 11.3094 6.32595 11.0107Z",
             fill: "currentColor"
         })
-    }), z = (param)=>{
-    let { showSpinner: e, children: r, small: n, loadingText: l, shouldRenderSpinner: f, setShouldRenderSpinner: d, renderText: c, textContentStyle: g, StartIcon: u, EndIcon: m, withChevron: o } = param;
-    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    }), 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);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 "aria-hidden": e ? !0 : void 0,
-                className: g,
+                className: f,
                 children: [
-                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
                             marginRight: _buttoncssmistica.ICON_MARGIN_PX
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, {
-                            size: s,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
+                            size: o,
                             color: "currentColor"
                         })
                     }),
-                    N({
-                        content: r,
-                        defaultIconSize: s,
-                        renderText: c
+                    _({
+                        content: t,
+                        defaultIconSize: o,
+                        renderText: l
                     }),
-                    m && !o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    m && !h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.ICON_MARGIN_PX
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
-                            size: s,
+                            size: o,
                             color: "currentColor"
                         })
                     }),
-                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.CHEVRON_MARGIN_LEFT_LINK
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {})
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(fe, {})
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: l ? {
+                style: s ? {
                     paddingLeft: i,
-                    paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
+                    paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (r ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
-                children: N({
-                    content: l,
-                    defaultIconSize: s,
-                    renderText: c
+                children: _({
+                    content: s,
+                    defaultIconSize: o,
+                    renderText: l
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 "aria-hidden": e ? void 0 : !0,
                 className: _buttoncssmistica.loadingContent,
                 onTransitionEnd: ()=>{
-                    e !== f && d(e);
+                    e !== u && c(e);
                 },
                 children: [
-                    f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        rolePresentation: !!l,
+                    u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        rolePresentation: !!s,
                         color: "currentcolor",
                         delay: "0s",
                         size: i
@@ -277,29 +280,29 @@ const N = (param)=>{
                             height: i
                         }
                     }),
-                    l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
-                        children: N({
-                            content: l,
-                            defaultIconSize: s,
-                            renderText: c
+                        children: _({
+                            content: s,
+                            defaultIconSize: o,
+                            renderText: l
                         })
                     }) : null
                 ]
             })
         ]
     });
-}, _ = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    const { textPresets: n } = (0, _hooks.useTheme)(), { eventFormat: l } = (0, _analytics.useTrackingConfig)(), { formStatus: f, formId: d } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g } = e, u = !!e.submit, m = f === "sending", [o, s] = _react.useState(!1), i = e.showSpinner || m && u || o, [v, L] = _react.useState(!!i);
+}, 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);
     _react.useEffect(()=>{
-        i && !v && L(!0);
+        i && !v && I(!0);
     }, [
         i,
         v,
-        f
+        u
     ]);
     var _e_trackingEvent;
-    const S = ()=>l === "google-analytics-4" ? {
+    const P = ()=>s === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: (0, _common.getTextFromChildren)(e.children)
@@ -307,44 +310,44 @@ const N = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, I = (y)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, C = (y)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
-            weight: n.button.weight,
+            weight: r.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
             children: y
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-            weight: n.button.weight,
+            weight: r.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
             children: y
-        }), h = {
-        ref: r,
-        className: (0, _classnames.default)(c ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
+        }), b = {
+        ref: t,
+        className: (0, _classnames.default)(l ? _buttoncssmistica.inverseButtonVariants[e.type] : _buttoncssmistica.buttonVariants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
             [_buttoncssmistica.isLoading]: i
         }),
         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 ? S() : void 0,
+        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? P() : 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: z({
+        children: X({
             showSpinner: i,
             shouldRenderSpinner: v,
-            setShouldRenderSpinner: L,
+            setShouldRenderSpinner: I,
             children: e.children,
-            loadingText: g,
+            loadingText: f,
             small: e.small,
-            renderText: I,
+            renderText: C,
             textContentStyle: _buttoncssmistica.textContent,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
@@ -355,152 +358,177 @@ const N = (param)=>{
     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({
         maybe: !0
-    }, h), {
+    }, b), {
         role: "presentation",
         "aria-hidden": "true"
     }));
     if (e.submit) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
         type: "submit",
-        formId: d,
+        formId: c,
         onPress: ()=>{}
-    }, h));
-    if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
+    }, b));
+    if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
         onPress: (y)=>{
-            const w = e.onPress(y);
-            w && (s(!0), w.finally(()=>s(!1)));
+            const L = e.onPress(y);
+            L && (o(!0), L.finally(()=>o(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
+    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
+    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
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    var _e_withChevron;
-    const { formStatus: n } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f, textPresets: d } = (0, _hooks.useTheme)(), { loadingText: c } = e, g = n === "sending", [u, m] = _react.useState(!1), o = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!o);
+}), Z = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+    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);
     _react.useEffect(()=>{
-        o && !i && v(!0);
+        i && !I && P(!0);
     }, [
-        o,
         i,
-        n
+        I,
+        s
     ]);
-    var _e_trackingEvent;
-    const L = ()=>f.eventFormat === "google-analytics-4" ? {
+    var _t_trackingEvent;
+    const C = ()=>l === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
-            component_type: "link",
-            component_copy: (0, _common.getTextFromChildren)(e.children)
+            component_type: e === "danger" ? "danger_link" : "link",
+            component_copy: (0, _common.getTextFromChildren)(t.children)
         } : {
             category: _analytics.eventCategories.userInteraction,
             action: _analytics.eventActions.linkTapped,
-            label: (0, _common.getTextFromChildren)(e.children)
-        }, S = (h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-            weight: d.button.weight,
+            label: (0, _common.getTextFromChildren)(t.children)
+        }, b = (w)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            weight: c.button.weight,
             truncate: 1,
             color: "inherit",
-            children: h
-        }), I = {
-        className: (0, _classnames.default)(_buttoncssmistica.link, {
-            [_buttoncssmistica.inverseLink]: l,
-            [_buttoncssmistica.isLoading]: o
+            children: w
+        }), y = e === "danger" && f && u ? "dangerDark" : e, L = {
+        className: (0, _classnames.default)(u ? _buttoncssmistica.inverseLinkVariants[y] : _buttoncssmistica.linkVariants[y], {
+            [_buttoncssmistica.isLoading]: i
         }),
         /**
      * Setting bleed classes with style to override the margin:0 set by the Touchable component.
      * If we set it using className, it may not work depending on the order in which the styles are applied.
-     */ style: _object_spread({}, e.bleedLeft || e.aligned ? {
+     */ style: _object_spread({}, t.bleedLeft || t.aligned ? {
             marginLeft: -_buttoncssmistica.PADDING_X_LINK
-        } : void 0, e.bleedRight ? {
+        } : void 0, t.bleedRight ? {
             marginRight: -_buttoncssmistica.PADDING_X_LINK
-        } : void 0, e.bleedY ? {
+        } : void 0, t.bleedY ? {
             marginTop: -_buttoncssmistica.PADDING_Y_LINK,
             marginBottom: -_buttoncssmistica.PADDING_Y_LINK
         } : void 0),
-        trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? L() : void 0,
-        dataAttributes: _object_spread({
-            "component-name": "ButtonLink"
-        }, e.dataAttributes),
-        "aria-label": e["aria-label"],
-        "aria-controls": e["aria-controls"],
-        "aria-expanded": e["aria-expanded"],
-        "aria-haspopup": e["aria-haspopup"],
-        children: z({
-            showSpinner: o,
-            shouldRenderSpinner: i,
-            setShouldRenderSpinner: v,
-            children: e.children,
-            loadingText: c,
+        trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : t.trackEvent ? C() : 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"],
+        children: X({
+            showSpinner: i,
+            shouldRenderSpinner: I,
+            setShouldRenderSpinner: P,
+            children: t.children,
+            loadingText: d,
             small: !0,
-            renderText: S,
+            renderText: b,
             textContentStyle: _buttoncssmistica.textContentLink,
-            StartIcon: e.StartIcon,
-            EndIcon: e.EndIcon,
-            withChevron: s
+            StartIcon: t.StartIcon,
+            EndIcon: t.EndIcon,
+            withChevron: v
         }),
-        disabled: e.disabled || o || g
+        disabled: t.disabled || i || m
     };
-    if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
-    if (e.onPress) 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.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: r
-    }, I), {
-        onPress: (h)=>{
-            const y = e.onPress(h);
-            y && (m(!0), y.finally(()=>m(!1)));
+    }, L), {
+        onPress: (w)=>{
+            const x = t.onPress(w);
+            x && (o(!0), x.finally(()=>o(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (t.to || t.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: r
-    }, I), {
-        to: e.to,
-        fullPageOnWebView: e.fullPageOnWebView
+    }, L), {
+        to: t.to,
+        fullPageOnWebView: t.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (t.href || t.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: r
-    }, I), {
-        href: e.href,
-        newTab: e.newTab
+    }, L), {
+        href: t.href,
+        newTab: t.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxruntime.jsx)(Z, _object_spread_props(_object_spread({
+        dataAttributes: _object_spread({
+            "component-name": "ButtonLink"
+        }, e)
+    }, t), {
+        ref: r,
+        type: "default"
+    }));
+}), ke = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(Z, _object_spread_props(_object_spread({
+        dataAttributes: _object_spread({
+            "component-name": "ButtonLinkDanger"
+        }, e)
+    }, t), {
+        withChevron: !1,
+        ref: r,
+        type: "danger"
+    }));
+}), xe = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, r), {
-        ref: n,
+    }, t), {
+        ref: r,
         type: "primary"
     }));
-}), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
+}), Be = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, r), {
-        ref: n,
+    }, t), {
+        ref: r,
         type: "secondary"
     }));
-}), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
+}), Ae = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, r), {
-        ref: n,
+    }, t), {
+        ref: r,
         type: "danger"
     }));
 });

package/dist/callout.css-mistica.js

@@ -18,4 +18,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./callout.css.ts.vanilla.css-mistica.js");
-var y = "_14g0jmy1 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfe1 _1y2v1nfeb", _ = "_14g0jmy3 _1y2v1nfbw";
+var y = "_14g0jmy1 _1y2v1nf6o _1y2v1nf7x _1y2v1nf96 _1y2v1nfaf _1y2v1nfgg _1y2v1nfj7 _1y2v1nfjh", _ = "_14g0jmy3 _1y2v1nfh2";