@telefonica/mistica 14.41.0 → 14.42.0

package/dist-es/dialog.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6w", l = "_3dl29lj _1y2v1nfh4 _1y2v1nfii", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgd _1y2v1nfjp _1y2v1nfkj", o = "_3dl29la _1y2v1nf36 _1y2v1nfj9", r = "_3dl29l5 _1y2v1nfge _1y2v1nfgi _1y2v1nfgr _1y2v1nfgx _1y2v1nfgo _1y2v1nfjp _1y2v1nfkj _1y2v1nfky _1y2v1nfk4 _1y2v1nf3h", t = {
+var v = 200, y = "_3dl29lb", f = "_3dl29l6", l = "_3dl29ll _1y2v1nf6w", a = "_3dl29lj _1y2v1nfh4 _1y2v1nfii", d = "_3dl29lm", o = "_3dl29l8 _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgd _1y2v1nfjp _1y2v1nfkj", r = "_3dl29la _1y2v1nf36 _1y2v1nfj9", t = "_3dl29l5 _1y2v1nfge _1y2v1nfgi _1y2v1nfgr _1y2v1nfgx _1y2v1nfgo _1y2v1nfjp _1y2v1nfkj _1y2v1nfky _1y2v1nfk4 _1y2v1nf3h", i = {
     dialog: "_3dl29ld _1y2v1nfgi _1y2v1nfgo _1y2v1nfgu _1y2v1nf9e _1y2v1nfan _1y2v1nf72 _1y2v1nf85",
     default: "_3dl29ld _1y2v1nfgi _1y2v1nfgo _1y2v1nfgu _1y2v1nf6w _1y2v1nf85 _1y2v1nf9e _1y2v1nfan"
-}, i = "_3dl29l3 _1y2v1nfgc";
-export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, l as dialogContent, a as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, i as wrapper };
+}, e = "_3dl29l3 _1y2v1nfgc";
+export { v as ANIMATION_DURATION_MS, y as closedModalContent, f as closedOpactityLayer, l as dialogActions, a as dialogContent, d as iconContainer, o as modalCloseButtonContainer, r as modalContent, t as modalOpacityLayer, i as variants, e as wrapper };

package/dist-es/dialog.js

@@ -78,323 +78,253 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as o, jsxs as w, Fragment as A } from "react/jsx-runtime";
-import * as s from "react";
-import k from "classnames";
-import { ButtonDanger as D, ButtonPrimary as R, ButtonSecondary as S } from "./button.js";
-import { Portal as L } from "./portal.js";
-import W from "./focus-trap.js";
-import I from "./generated/mistica-icons/icon-close-regular.js";
-import O from "./icon-button.js";
-import { isWebViewBridgeAvailable as H, nativeConfirm as M, nativeAlert as F } from "@tef-novum/webview-bridge";
-import V from "./theme-context.js";
-import { useTheme as N } from "./hooks.js";
-import j from "./button-layout.js";
-import { Text5 as K, Text4 as T, Text3 as _ } from "./text.js";
-import { ESC as z } from "./utils/keys.js";
-import B from "./box.js";
-import { isRunningAcceptanceTest as U } from "./utils/platform.js";
-import { useSetModalStateEffect as q } from "./modal-context-provider.js";
-import G from "./stack.js";
-import { wrapper as J, modalOpacityLayer as Q, closedOpactityLayer as X, modalContent as Y, closedModalContent as Z, modalCloseButtonContainer as $, variants as ee, iconContainer as te, dialogContent as oe, dialogActions as ne } from "./dialog.css-mistica.js";
-import { vars as P } from "./skins/skin-contract.css-mistica.js";
-const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
-    const { texts: t } = N(), { className: i, title: n, message: c, icon: l, extra: a, cancelText: r = t.dialogCancelButton, acceptText: d = t.dialogAcceptButton, onCancel: h, onAccept: g, showCancel: b = !1, destructive: u = !1 } = e, v = !!e.forceWeb, m = {
-        onPress: g || (()=>{}),
+import { jsx as e, jsxs as B, Fragment as M } from "react/jsx-runtime";
+import * as t from "react";
+import D from "classnames";
+import { ButtonDanger as W, ButtonPrimary as _, ButtonSecondary as j } from "./button.js";
+import { Portal as F } from "./portal.js";
+import V from "./focus-trap.js";
+import z from "./generated/mistica-icons/icon-close-regular.js";
+import H from "./icon-button.js";
+import { isWebViewBridgeAvailable as K, nativeConfirm as U, nativeAlert as q } from "@tef-novum/webview-bridge";
+import { useTheme as P } from "./hooks.js";
+import G from "./button-layout.js";
+import { Text5 as J, Text4 as S, Text3 as Q } from "./text.js";
+import { ESC as X } from "./utils/keys.js";
+import E from "./box.js";
+import { isRunningAcceptanceTest as Y } from "./utils/platform.js";
+import { useSetModalStateEffect as Z } from "./modal-context-provider.js";
+import $ from "./stack.js";
+import { ANIMATION_DURATION_MS as ee, wrapper as te, modalOpacityLayer as oe, closedOpactityLayer as ne, modalContent as re, closedModalContent as ae, modalCloseButtonContainer as se, variants as ie, iconContainer as le, dialogContent as ce, dialogActions as de } from "./dialog.css-mistica.js";
+import { vars as A } from "./skins/skin-contract.css-mistica.js";
+const ue = ()=>process.env.NODE_ENV !== "test" && !Y(), me = (r)=>{
+    const { texts: s } = P(), { className: u, title: a, message: h, icon: o, extra: i, cancelText: l = s.dialogCancelButton, acceptText: c = s.dialogAcceptButton, onCancel: m, onAccept: f, destructive: y = !1 } = r, d = r.type === "dialog", g = r.type === "confirm" || d && !!m, p = {
+        onPress: f || (()=>{}),
+        children: c,
+        // @deprecated - testid should be removed but many webapp tests depend on this
         dataAttributes: {
             testid: "dialog-accept-button"
-        },
-        children: d
+        }
     };
-    return /* @__PURE__ */ w("div", {
-        className: k(ee[v ? "dialog" : "default"], i),
+    return /* @__PURE__ */ B("div", {
+        className: D(ie[d ? "dialog" : "default"], u),
         children: [
-            l && /* @__PURE__ */ o(B, {
+            o && /* @__PURE__ */ e(E, {
                 paddingBottom: 24,
-                children: /* @__PURE__ */ o("div", {
-                    className: te,
-                    children: /*#__PURE__*/ s.cloneElement(l, {
+                children: /* @__PURE__ */ e("div", {
+                    className: le,
+                    children: /*#__PURE__*/ t.cloneElement(o, {
                         size: "100%"
                     })
                 })
             }),
-            n && /* @__PURE__ */ o(B, {
+            a && /* @__PURE__ */ e(E, {
                 paddingBottom: 16,
-                children: e.forceWeb ? /* @__PURE__ */ o(K, {
+                children: d ? /* @__PURE__ */ e(J, {
                     as: "h2",
-                    children: n
-                }) : /* @__PURE__ */ o(T, {
+                    children: a
+                }) : /* @__PURE__ */ e(S, {
                     regular: !0,
                     as: "h2",
-                    children: n
+                    children: a
                 })
             }),
-            e.subtitle && /* @__PURE__ */ o(B, {
+            r.subtitle && /* @__PURE__ */ e(E, {
                 paddingBottom: 16,
-                children: /* @__PURE__ */ o(T, {
+                children: /* @__PURE__ */ e(S, {
                     regular: !0,
                     as: "h2",
-                    children: e.subtitle
+                    children: r.subtitle
                 })
             }),
-            /* @__PURE__ */ o("div", {
-                className: oe,
-                children: /* @__PURE__ */ w(G, {
+            /* @__PURE__ */ e("div", {
+                className: ce,
+                children: /* @__PURE__ */ B($, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ o(_, {
-                            color: P.colors.textSecondary,
+                        /* @__PURE__ */ e(Q, {
+                            color: A.colors.textSecondary,
                             regular: !0,
-                            children: c
+                            children: h
                         }),
-                        a
+                        i
                     ]
                 })
             }),
-            /* @__PURE__ */ o("div", {
-                className: ne,
-                children: /* @__PURE__ */ w(j, {
-                    link: e.forceWeb ? e.link : void 0,
+            /* @__PURE__ */ e("div", {
+                className: de,
+                children: /* @__PURE__ */ B(G, {
+                    link: d ? r.link : void 0,
                     children: [
-                        u ? /* @__PURE__ */ o(D, _object_spread({
+                        y ? /* @__PURE__ */ e(W, _object_spread({
                             tabIndex: 1
-                        }, m)) : /* @__PURE__ */ o(R, _object_spread({
+                        }, p)) : /* @__PURE__ */ e(_, _object_spread({
                             tabIndex: 1
-                        }, m)),
-                        b && !!h && /* @__PURE__ */ o(S, {
+                        }, p)),
+                        g && /* @__PURE__ */ e(j, {
                             tabIndex: 2,
-                            onPress: h,
+                            onPress: m || (()=>{}),
                             dataAttributes: {
                                 testid: "dialog-cancel-button"
                             },
-                            children: r
+                            children: l
                         })
                     ]
                 })
             })
         ]
     });
-}, ie = (param)=>{
-    let { showCancel: e, message: t, title: i, acceptText: n, cancelText: c, onAccept: l, onCancel: a } = param;
-    return e ? M({
-        message: t,
-        title: i,
-        cancelText: c,
-        acceptText: n
-    }).then((r)=>r ? l == null ? void 0 : l() : a == null ? void 0 : a()) : F({
-        message: t,
-        title: i,
-        buttonText: n
-    }).then(l);
-}, le = (param)=>{
-    let { renderNative: e, onAccept: t, onCancel: i, acceptText: n, cancelText: c, showCancel: l, message: a, title: r } = param;
-    const d = s.useRef(t).current, h = s.useRef(i).current;
-    s.useEffect(()=>{
-        e && ie({
-            acceptText: n,
-            cancelText: c,
-            showCancel: l,
-            message: a,
-            title: r,
-            onAccept: d,
-            onCancel: h
-        });
-    }, [
-        d,
-        h,
-        n,
-        c,
-        l,
-        a,
-        r,
-        e
-    ]);
-}, se = (e)=>(le({
-        renderNative: !0,
-        acceptText: e.acceptText || e.dialogAcceptButton,
-        cancelText: e.cancelText || e.dialogCancelButton,
-        showCancel: e.showCancel,
-        message: e.message,
-        title: e.title,
-        onAccept: e.onAccept,
-        onCancel: e.onCancel
-    }), null), ce = (e)=>{
-    const { platformOverrides: t } = N(), i = s.useContext(V), n = s.useRef(process.env.NODE_ENV === "test");
-    if (!i) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
-    const c = !e.forceWeb && H(), { onAccept: l, isClosing: a, onCancel: r, onCloseTransitionEnd: d } = e, h = _object_without_properties(e, [
+}, fe = (param)=>{
+    let { type: r, message: s, title: u, acceptText: a, cancelText: h, onAccept: o, onCancel: i, onDestroy: l } = param;
+    return r === "confirm" ? U({
+        message: s,
+        title: u,
+        cancelText: h,
+        acceptText: a
+    }).then((c)=>{
+        c ? o == null || o() : i == null || i(), l();
+    }) : q({
+        message: s,
+        title: u,
+        buttonText: a
+    }).then(()=>{
+        o == null || o(), l();
+    });
+}, he = (param)=>{
+    let { type: r, onAccept: s, onCancel: u, onDestroy: a, acceptText: h, cancelText: o, message: i, title: l } = param;
+    const { texts: c } = P(), m = t.useRef({
+        type: r,
+        onAccept: s,
+        onCancel: u,
+        onDestroy: a,
+        acceptText: h || c.dialogAcceptButton,
+        cancelText: o || c.dialogCancelButton,
+        message: i,
+        title: l
+    });
+    return t.useEffect(()=>{
+        fe(m.current);
+    }, []), /* @__PURE__ */ e(M, {});
+}, Ae = (r)=>{
+    Z();
+    const s = t.useRef(null), { texts: u } = P(), [a, h] = t.useState(!1), o = t.useRef(!1), i = t.useRef(!1), [l, c] = t.useState(!1), m = t.useRef(!1), f = t.useRef(!1), y = t.useRef(ue() ? ee : 0), d = r.type !== "dialog" && K(), g = r.type === "dialog", p = r.type === "alert", { onAccept: b, onCancel: R, onDestroy: I } = r, O = _object_without_properties(r, [
         "onAccept",
-        "isClosing",
         "onCancel",
-        "onCloseTransitionEnd"
-    ]), g = s.useCallback(()=>{
-        !a && n.current && l();
+        "onDestroy"
+    ]);
+    t.useEffect(()=>{
+        const n = setTimeout(()=>{
+            o.current || c(!0);
+        }, y.current);
+        return ()=>{
+            clearTimeout(n);
+        };
+    }, []);
+    const k = t.useCallback(()=>{
+        i.current || (i.current = !0, m.current ? b == null || b() : R == null || R(), I());
     }, [
-        a,
+        b,
+        R,
+        I
+    ]), x = t.useCallback(()=>{
+        let n;
+        return !o.current && l && (o.current = !0, c(!1), h(!0), n = setTimeout(k, y.current)), ()=>{
+            n && clearTimeout(n);
+        };
+    }, [
+        k,
         l
-    ]), b = s.useCallback(()=>{
-        !a && n.current && r();
+    ]), N = t.useCallback(()=>{
+        m.current = !0, x();
     }, [
-        a,
-        r
-    ]), u = e.showCancel ? b : g, v = s.useCallback((f)=>{
-        e.showClose && (u(), f.stopPropagation());
+        x
+    ]), v = t.useCallback(()=>{
+        m.current = !1, x();
     }, [
-        u,
-        e.showClose
-    ]), m = s.useCallback((f)=>{
-        f.key === z && (u(), f.stopPropagation(), f.preventDefault());
+        x
+    ]), C = t.useCallback(()=>{
+        p ? N() : v();
     }, [
-        u
-    ]), x = s.useCallback(()=>{
-        document.addEventListener("keydown", m);
+        N,
+        v,
+        p
+    ]), w = t.useCallback(()=>{
+        f.current && (f.current = !1, C());
     }, [
-        m
+        C
     ]);
-    var _i_texts_modalClose;
-    return s.useEffect(()=>(y(t) || x(), (c || !y(t)) && e.isClosing && e.onCloseTransitionEnd && e.onCloseTransitionEnd(), ()=>{
-            document.removeEventListener("keydown", m);
-        }), [
-        x,
-        m,
-        e,
-        c,
-        t
-    ]), q(), c ? /* @__PURE__ */ o(se, _object_spread_props(_object_spread({}, e), {
-        dialogAcceptButton: i.texts.dialogAcceptButton,
-        dialogCancelButton: i.texts.dialogCancelButton
-    })) : /* @__PURE__ */ o(L, {
-        children: /* @__PURE__ */ o("div", {
-            className: J,
-            children: /* @__PURE__ */ o(W, {
-                children: /* @__PURE__ */ o("div", {
-                    onClick: v,
-                    className: k(Q, {
-                        [X]: a
-                    }),
+    t.useEffect(()=>{
+        if (!d) return !f.current && !o.current && (f.current = !0, window.history.pushState(null, document.title, window.location.href)), window.addEventListener("popstate", w), ()=>{
+            window.removeEventListener("popstate", w), o.current && f.current && (f.current = !1, window.history.back());
+        };
+    }, [
+        w,
+        d
+    ]);
+    const T = t.useCallback((n)=>{
+        n.key === X && (n.stopPropagation(), n.preventDefault(), C());
+    }, [
+        C
+    ]);
+    t.useEffect(()=>{
+        if (!d) return document.addEventListener("keydown", T), ()=>{
+            document.removeEventListener("keydown", T);
+        };
+    }, [
+        T,
+        d
+    ]);
+    const L = t.useCallback((n)=>{
+        n.stopPropagation(), g && v();
+    }, [
+        g,
+        v
+    ]);
+    return d ? /* @__PURE__ */ e(he, _object_spread({}, r)) : /* @__PURE__ */ e(F, {
+        className: te,
+        children: /* @__PURE__ */ e(V, {
+            children: /* @__PURE__ */ e("div", {
+                onClick: L,
+                className: D(oe, {
+                    [ne]: a
+                }),
+                "data-testid": "dialog-overlay",
+                "aria-hidden": a || !l,
+                children: /* @__PURE__ */ e("div", {
                     role: "dialog",
+                    onClick: (n)=>n.stopPropagation(),
                     "data-component-name": "Dialog",
-                    children: /* @__PURE__ */ o("div", {
-                        onClick: (f)=>f.stopPropagation(),
-                        children: /* @__PURE__ */ w("div", {
-                            onTransitionEnd: a && d ? d : void 0,
-                            onAnimationEnd: ()=>{
-                                n.current = !0, x();
-                            },
-                            className: k(Y, {
-                                [Z]: a
-                            }),
-                            children: [
-                                e.showClose && /* @__PURE__ */ o("div", {
-                                    className: $,
-                                    children: /* @__PURE__ */ o(O, {
-                                        onPress: u,
-                                        "aria-label": (_i_texts_modalClose = i.texts.modalClose) !== null && _i_texts_modalClose !== void 0 ? _i_texts_modalClose : i.texts.closeButtonLabel,
-                                        children: /* @__PURE__ */ o(I, {
-                                            color: P.colors.neutralHigh
-                                        })
+                    children: /* @__PURE__ */ B("div", {
+                        ref: s,
+                        onAnimationEnd: (n)=>{
+                            n.target === s.current && (o.current || c(!0));
+                        },
+                        onTransitionEnd: (n)=>{
+                            n.target === s.current && o.current && k();
+                        },
+                        className: D(re, {
+                            [ae]: a
+                        }),
+                        children: [
+                            g && /* @__PURE__ */ e("div", {
+                                className: se,
+                                children: /* @__PURE__ */ e(H, {
+                                    onPress: C,
+                                    "aria-label": u.modalClose || u.closeButtonLabel,
+                                    children: /* @__PURE__ */ e(z, {
+                                        color: A.colors.neutralHigh
                                     })
-                                }),
-                                /* @__PURE__ */ o(ae, _object_spread_props(_object_spread({}, h), {
-                                    onCancel: b,
-                                    onAccept: g
-                                }))
-                            ]
-                        })
+                                })
+                            }),
+                            /* @__PURE__ */ e(me, _object_spread_props(_object_spread({}, O), {
+                                onCancel: v,
+                                onAccept: N
+                            }))
+                        ]
                     })
                 })
             })
         })
     });
 };
-let p = null, C = 0;
-class Pe extends s.Component {
-    componentDidMount() {
-        C++, C === 1 && (p = this, window.addEventListener("popstate", this.handleBack));
-    }
-    componentWillUnmount() {
-        C--, C === 0 && (p = null, window.removeEventListener("popstate", this.handleBack));
-    }
-    show(t) {
-        if (this.state.dialogProps) throw Error("Tried to show a dialog on top of another dialog. This functionality is not currently supported.");
-        window.history.pushState(null, document.title, window.location.href), this.setState({
-            dialogProps: t,
-            isClosing: !1
-        });
-    }
-    close() {
-        window.history.back();
-    }
-    createCancelHandler(t) {
-        return ()=>{
-            t && (this.callback = ()=>t()), this.close();
-        };
-    }
-    createAcceptHandler(t) {
-        return ()=>{
-            t && (this.callback = ()=>t()), this.close();
-        };
-    }
-    render() {
-        const { isClosing: t, dialogProps: i } = this.state;
-        let n = null;
-        if (i && this.state.instanceNumber === 1) {
-            const { onCancel: c, onAccept: l } = i, a = _object_without_properties(i, [
-                "onCancel",
-                "onAccept"
-            ]);
-            n = /* @__PURE__ */ o(ce, _object_spread({
-                onCancel: this.createCancelHandler(c),
-                onAccept: this.createAcceptHandler(l),
-                isClosing: t,
-                onCloseTransitionEnd: t ? this.handleCloseFinished : void 0
-            }, a));
-        }
-        return /* @__PURE__ */ w(A, {
-            children: [
-                this.props.children,
-                n
-            ]
-        });
-    }
-    constructor(){
-        super(...arguments), this.state = {
-            dialogProps: null,
-            isClosing: !1,
-            instanceNumber: C + 1
-        }, this.callback = null, this.handleCloseFinished = ()=>{
-            this.setState({
-                dialogProps: null,
-                isClosing: !1
-            });
-        }, this.handleBack = ()=>{
-            var t;
-            this.state.dialogProps && ((t = this.callback) == null || t.call(this), this.callback = null, this.setState({
-                isClosing: !0
-            }));
-        };
-    }
-}
-const E = (param)=>{
-    let { showCancel: e, showClose: t, forceWeb: i } = param;
-    return (n)=>{
-        if (!p) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
-        p.show(_object_spread({
-            showCancel: e,
-            showClose: t,
-            forceWeb: i
-        }, n));
-    };
-}, Ae = E({
-    showCancel: !1,
-    forceWeb: !1,
-    showClose: !1
-}), De = E({
-    showCancel: !0,
-    forceWeb: !1,
-    showClose: !1
-}), Re = E({
-    showCancel: !1,
-    forceWeb: !0,
-    showClose: !0
-});
-export { Ae as alert, De as confirm, Pe as default, Re as dialog };
+export { Ae as default };

package/dist-es/double-field.css-mistica.js

@@ -1,8 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
 import "./double-field.css.ts.vanilla.css-mistica.js";
-var v = {
+var t = {
     default: "skrulh1 _1y2v1nfgi _1y2v1nfgn _1y2v1nfh5",
     fullWidth: "skrulh2 _1y2v1nfgi _1y2v1nfgn _1y2v1nfh5"
 };
-export { v as variants };
+export { t as variants };

package/dist-es/email-field.js

@@ -78,12 +78,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as A } from "react/jsx-runtime";
 import { useFieldProps as M } from "./form-context.js";
 import { useTheme as g } from "./hooks.js";
 import { TextFieldBaseAutosuggest as y } from "./text-field-base.js";
-const A = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, I = (_param)=>{
-    var { disabled: o, error: i, helperText: m, name: n, optional: s, validate: r, onChange: l, onChangeValue: f, onBlur: u, value: c, autoComplete: a = "email", defaultValue: d } = _param, E = _object_without_properties(_param, [
+const I = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, T = (_param)=>{
+    var { disabled: o, error: i, helperText: m, name: n, optional: r, validate: t, onChange: l, onChangeValue: a, onBlur: u, value: c, autoComplete: d = "email", defaultValue: f, dataAttributes: E } = _param, p = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -95,26 +95,30 @@ const A = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, I = (_param)=>{
         "onBlur",
         "value",
         "autoComplete",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const { texts: t } = g(), p = M({
+    const { texts: s } = g(), F = M({
         name: n,
         value: c,
-        defaultValue: d,
+        defaultValue: f,
         processValue: (e)=>e.trim(),
         helperText: m,
-        optional: s,
+        optional: r,
         error: i,
         disabled: o,
         onBlur: u,
-        validate: (e, F)=>e ? A.test(e) ? r == null ? void 0 : r(e, F) : t.formEmailError : s ? "" : t.formFieldErrorIsMandatory,
+        validate: (e, x)=>e ? I.test(e) ? t == null ? void 0 : t(e, x) : s.formEmailError : r ? "" : s.formFieldErrorIsMandatory,
         onChange: l,
-        onChangeValue: f
+        onChangeValue: a
     });
-    return /* @__PURE__ */ x(y, _object_spread_props(_object_spread({}, E, p), {
+    return /* @__PURE__ */ A(y, _object_spread_props(_object_spread({}, p, F), {
         type: "email",
         inputMode: "email",
-        autoComplete: a
+        autoComplete: d,
+        dataAttributes: _object_spread({
+            "component-name": "EmailField"
+        }, E)
     }));
-}, L = I;
+}, L = T;
 export { L as default };

package/dist-es/feedback.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./feedback.css.ts.vanilla.css-mistica.js";
-var r = "gx6h6a3 _1y2v1nfgi _1y2v1nfhm _1y2v1nfh5", n = "_1y2v1nfja _1y2v1nfgi _1y2v1nfgu", v = "gx6h6a1", t = "gx6h6ab", h = "gx6h6a6", g = "gx6h6a8 gx6h6a7", i = "gx6h6a9 gx6h6a7", f = "gx6h6aa gx6h6a7", p = "_1y2v1nfhh _1y2v1nfhx", x = "gx6h6a4";
-export { r as container, n as desktopContainer, v as desktopContent, t as feedbackData, h as feedbackDataAppear, g as feedbackDataAppearActiveFast, i as feedbackDataAppearActiveMedium, f as feedbackDataAppearActiveSlow, p as iconContainer, x as innerContainer };
+var r = "gx6h6ae", n = "gx6h6a4 _1y2v1nfgi _1y2v1nfhm _1y2v1nfh5 _1y2v1nfgo", h = "gx6h6a0", x = "gx6h6a1", g = "gx6h6a2", t = "gx6h6ad", v = "gx6h6aa gx6h6a9", o = "gx6h6ab gx6h6a9", p = "gx6h6ac gx6h6a9", d = "_1y2v1nfhh _1y2v1nfhx", f = "gx6h6a5";
+export { r as backgroundBrand, n as container, h as desktopContainer, x as desktopContent, g as desktopImage, t as feedbackData, v as feedbackTextAppearFast, o as feedbackTextAppearMedium, p as feedbackTextAppearSlow, d as iconContainer, f as innerContainer };