@telefonica/mistica 15.20.1 → 16.0.0

package/dist-es/credit-card-number-field.js

@@ -78,28 +78,29 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as o, jsxs as M } from "react/jsx-runtime";
+import { jsx as o, jsxs as j } from "react/jsx-runtime";
 import * as l from "react";
-import { useForm as j, useFieldProps as D } from "./form-context.js";
-import { useTheme as L } from "./hooks.js";
-import { getCreditCardNumberLength as A, isAmericanExpress as I, isVisa as b, isMasterCard as x, isValidCreditCardNumber as O } from "./utils/credit-card.js";
-import { TextFieldBaseAutosuggest as U } from "./text-field-base.js";
+import { useForm as D, useFieldProps as L } from "./form-context.js";
+import { useTheme as O } from "./hooks.js";
+import { getCreditCardNumberLength as I, isAmericanExpress as b, isVisa as A, isMasterCard as E, isValidCreditCardNumber as U } from "./utils/credit-card.js";
+import { TextFieldBaseAutosuggest as _ } from "./text-field-base.js";
 import w from "./generated/mistica-icons/icon-credit-card-visa-regular.js";
-import _ from "./icons/icon-visa.js";
-import P from "./icons/icon-mastercard.js";
-import $ from "./icons/icon-amex.js";
-import { useRifm as q } from "rifm";
-import { createChangeEvent as G } from "./utils/dom.js";
-import { combineRefs as H } from "./utils/common.js";
-import { flip as J, variants as K, flipFront as Q, flipBack as W } from "./credit-card-number-field.css-mistica.js";
-import { vars as X } from "./skins/skin-contract.css-mistica.js";
+import P from "./icons/icon-visa.js";
+import $ from "./icons/icon-mastercard.js";
+import q from "./icons/icon-amex.js";
+import { useRifm as G } from "rifm";
+import { createChangeEvent as H } from "./utils/dom.js";
+import { combineRefs as J } from "./utils/common.js";
+import { flip as K, variants as Q, flipFront as W, flipBack as X } from "./credit-card-number-field.css-mistica.js";
+import { vars as Y } from "./skins/skin-contract.css-mistica.js";
 import { iconSize as p } from "./icon-button.css-mistica.js";
-const Y = (r)=>{
+import { formCreditCardNumberError as Z, formFieldErrorIsMandatory as v } from "./text-tokens.js";
+const rr = (r)=>{
     var t;
     const n = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
     var _ref;
     return (_ref = (t = n.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : n;
-}, Z = (_param)=>{
+}, er = (_param)=>{
     var { inputRef: r, value: n, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
@@ -107,12 +108,12 @@ const Y = (r)=>{
         "onChange"
     ]);
     const [c, T] = l.useState(t !== null && t !== void 0 ? t : ""), m = l.useRef(null), f = typeof n < "u", u = f ? n : c, g = l.useCallback((C)=>{
-        f || T(C), m.current && (e == null || e(G(m.current, C)));
+        f || T(C), m.current && (e == null || e(H(m.current, C)));
     }, [
         f,
         e
-    ]), d = q({
-        format: Y,
+    ]), d = G({
+        format: rr,
         value: u,
         onChange: g,
         accept: /[\d]+/g
@@ -120,33 +121,33 @@ const Y = (r)=>{
     return /* @__PURE__ */ o("input", _object_spread_props(_object_spread({}, a), {
         type: "text",
         inputMode: "decimal",
-        maxLength: A(d.value) + 3,
+        maxLength: I(d.value) + 3,
         onChange: d.onChange,
         value: d.value,
-        ref: H(r, m)
+        ref: J(r, m)
     }));
-}, v = (r)=>b(r) ? /* @__PURE__ */ o(_, {
+}, tr = (r)=>A(r) ? /* @__PURE__ */ o(P, {
         size: p.default
-    }) : x(r) ? /* @__PURE__ */ o(P, {
+    }) : E(r) ? /* @__PURE__ */ o($, {
         size: p.default
-    }) : I(r) ? /* @__PURE__ */ o($, {
+    }) : b(r) ? /* @__PURE__ */ o(q, {
         size: p.default
-    }) : null, rr = {
+    }) : null, ir = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ o(w, {
         size: p.default
     }),
     isAnimating: !1
-}, er = (r, param)=>{
+}, nr = (r, param)=>{
     let { type: n, value: t } = param;
     if (n === "INPUT") {
-        const e = v(t);
+        const e = tr(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
             isAnimating: !0
         };
-        if (!b(t) && !x(t) && !I(t) && r.showBackface) return {
+        if (!A(t) && !E(t) && !b(t) && r.showBackface) return {
             animationTarget: r.animationTarget,
             showBackface: !1,
             isAnimating: !0
@@ -158,9 +159,9 @@ const Y = (r)=>{
     return n === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, tr = (param)=>{
+}, or = (param)=>{
     let { value: r } = param;
-    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = l.useReducer(er, rr);
+    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = l.useReducer(nr, ir);
     return l.useEffect(()=>{
         a({
             type: "INPUT",
@@ -169,33 +170,33 @@ const Y = (r)=>{
     }, [
         r
     ]), /* @__PURE__ */ o("div", {
-        className: J,
-        children: /* @__PURE__ */ M("div", {
-            className: K[n ? "backface" : "default"],
+        className: K,
+        children: /* @__PURE__ */ j("div", {
+            className: Q[n ? "backface" : "default"],
             onTransitionEnd: ()=>e && a({
                     type: "TRANSITION_END"
                 }),
             children: [
                 /* @__PURE__ */ o("div", {
-                    className: Q,
+                    className: W,
                     children: /* @__PURE__ */ o(w, {
                         size: p.default,
-                        color: X.colors.neutralMedium
+                        color: Y.colors.neutralMedium
                     })
                 }),
                 /* @__PURE__ */ o("div", {
-                    className: W,
+                    className: X,
                     children: t
                 })
             ]
         })
     });
-}, ir = (_param)=>{
+}, sr = (_param)=>{
     var { disabled: r, error: n, helperText: t, name: e, optional: a, validate: c, onChange: T, onChangeValue: m, onBlur: f, acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: F } = _param, R = _object_without_properties(_param, [
+    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: R } = _param, z = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -211,14 +212,14 @@ const Y = (r)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: E } = L(), { jumpToNext: z, rawValues: S, setFormError: y } = j(), h = (i, N)=>{
-        const s = E.formCreditCardNumberError;
-        return i ? I(i) && !u.americanExpress || b(i) && !u.visa || x(i) && !u.masterCard || !O(i) || A(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : E.formFieldErrorIsMandatory;
-    }, k = (i)=>i.replace(/\s/g, ""), B = D({
+    const { texts: x, t: k } = O(), { jumpToNext: S, rawValues: y, setFormError: M } = D(), h = (i, N)=>{
+        const s = x.formCreditCardNumberError || k(Z);
+        return i ? b(i) && !u.americanExpress || A(i) && !u.visa || E(i) && !u.masterCard || !U(i) || I(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : x.formFieldErrorIsMandatory || k(v);
+    }, B = (i)=>i.replace(/\s/g, ""), V = L({
         name: e,
         value: g,
         defaultValue: C,
-        processValue: k,
+        processValue: B,
         helperText: t,
         optional: a,
         error: n,
@@ -229,26 +230,26 @@ const Y = (r)=>{
         onChangeValue: m
     });
     var _ref;
-    return /* @__PURE__ */ o(U, _object_spread_props(_object_spread({}, R, B), {
+    return /* @__PURE__ */ o(_, _object_spread_props(_object_spread({}, z, V), {
         onChange: (i)=>{
-            B.onChange(i);
-            const N = i.currentTarget.value, s = k(N);
-            if (s.length >= A(s)) {
-                const V = h == null ? void 0 : h(s, N);
-                V ? y({
+            V.onChange(i);
+            const N = i.currentTarget.value, s = B(N);
+            if (s.length >= I(s)) {
+                const F = h == null ? void 0 : h(s, N);
+                F ? M({
                     name: e,
-                    error: V
-                }) : z(e);
+                    error: F
+                }) : S(e);
             }
         },
-        inputComponent: Z,
+        inputComponent: er,
         autoComplete: d,
-        endIcon: /* @__PURE__ */ o(tr, {
-            value: (_ref = g !== null && g !== void 0 ? g : S[e]) !== null && _ref !== void 0 ? _ref : ""
+        endIcon: /* @__PURE__ */ o(or, {
+            value: (_ref = g !== null && g !== void 0 ? g : y[e]) !== null && _ref !== void 0 ? _ref : ""
         }),
         dataAttributes: _object_spread({
             "component-name": "CreditCardNumberField"
-        }, F)
+        }, R)
     }));
-}, Tr = ir;
-export { Tr as default };
+}, Er = sr;
+export { Er as default };

package/dist-es/cvv-field.js

@@ -78,71 +78,73 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, Fragment as O, jsxs as f } from "react/jsx-runtime";
-import * as R from "react";
-import { useTheme as F } from "./hooks.js";
-import H from "./icons/icon-cvv-visa-mc.js";
-import k from "./icons/icon-cvv-amex.js";
-import D from "./popover.js";
-import N from "./generated/mistica-icons/icon-information-regular.js";
-import { useForm as q, useFieldProps as G } from "./form-context.js";
-import { TextFieldBaseAutosuggest as J } from "./text-field-base.js";
-import { IntegerInput as K } from "./integer-field.js";
-import I from "./inline.js";
-import P from "./stack.js";
-import Q from "./box.js";
-import U from "./divider.js";
-import T from "./text.js";
-import { vars as W } from "./skins/skin-contract.css-mistica.js";
-import { pxToRem as X } from "./utils/css.js";
-import { iconButtonSize as m } from "./text-field-base.css-mistica.js";
-import Y from "./touchable.js";
-const Z = (param)=>{
-    let { acceptedCards: e } = param;
-    const { texts: i } = F();
-    return /* @__PURE__ */ r(O, {
-        children: /* @__PURE__ */ r(Q, {
+import { jsx as r, Fragment as R, jsxs as C } from "react/jsx-runtime";
+import * as H from "react";
+import { useTheme as V } from "./hooks.js";
+import k from "./icons/icon-cvv-visa-mc.js";
+import D from "./icons/icon-cvv-amex.js";
+import N from "./popover.js";
+import q from "./generated/mistica-icons/icon-information-regular.js";
+import { useForm as G, useFieldProps as J } from "./form-context.js";
+import { TextFieldBaseAutosuggest as K } from "./text-field-base.js";
+import { IntegerInput as P } from "./integer-field.js";
+import F from "./inline.js";
+import Q from "./stack.js";
+import U from "./box.js";
+import W from "./divider.js";
+import M from "./text.js";
+import { vars as X } from "./skins/skin-contract.css-mistica.js";
+import { pxToRem as Y } from "./utils/css.js";
+import { iconButtonSize as c } from "./text-field-base.css-mistica.js";
+import Z from "./touchable.js";
+import { formCreditCardCvvTooltipVisaMcButtonClose as _, formCreditCardCvvTooltipVisaMcButtonOpen as L, formCreditCardCvvTooltipVisaMc as rr, formCreditCardCvvTooltipAmex as or, formFieldErrorIsMandatory as tr, formCreditCardCvvError as er } from "./text-tokens.js";
+const ir = (param)=>{
+    let { acceptedCards: t } = param;
+    const { texts: i, t: n } = V();
+    return /* @__PURE__ */ r(R, {
+        children: /* @__PURE__ */ r(U, {
             padding: 8,
-            children: /* @__PURE__ */ f(P, {
+            children: /* @__PURE__ */ C(Q, {
                 space: 8,
                 children: [
-                    /* @__PURE__ */ f(I, {
+                    /* @__PURE__ */ C(F, {
                         space: 16,
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ r(H, {
+                            /* @__PURE__ */ r(k, {
                                 size: 48,
                                 role: "img"
                             }),
-                            /* @__PURE__ */ r(T, {
-                                children: i.formCreditCardCvvTooltipVisaMc
+                            /* @__PURE__ */ r(M, {
+                                children: i.formCreditCardCvvTooltipVisaMc || n(rr)
                             })
                         ]
                     }),
-                    /* @__PURE__ */ r(U, {}),
-                    (e == null ? void 0 : e.americanExpress) && /* @__PURE__ */ f(I, {
+                    /* @__PURE__ */ r(W, {}),
+                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ C(F, {
                         space: 16,
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ r(k, {
+                            /* @__PURE__ */ r(D, {
                                 size: 48,
                                 role: "img"
                             }),
-                            /* @__PURE__ */ r(T, {
-                                children: i.formCreditCardCvvTooltipAmex
-                            })
+                            /* @__PURE__ */ r(M, {
+                                children: i.formCreditCardCvvTooltipAmex || n(or)
+                            }),
+                            ")"
                         ]
                     })
                 ]
             })
         })
     });
-}, _ = (_param)=>{
-    var { disabled: e, error: i, helperText: M, name: l, optional: d, validate: c, onChange: V, onChangeValue: y, onBlur: z, acceptedCards: B = {
+}, nr = (_param)=>{
+    var { disabled: t, error: i, helperText: n, name: a, optional: v, validate: p, onChange: B, onChangeValue: E, onBlur: y, acceptedCards: z = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, maxLength: p = 4, value: E, autoComplete: $ = "cc-csc", defaultValue: j, dataAttributes: A } = _param, S = _object_without_properties(_param, [
+    }, maxLength: f = 4, value: A, autoComplete: $ = "cc-csc", defaultValue: j, dataAttributes: O } = _param, S = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -159,70 +161,70 @@ const Z = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: n } = F(), { setFormError: b, jumpToNext: w } = q(), [a, u] = R.useState(!1), v = (o, s)=>o ? o.length !== p ? n.formCreditCardCvvError : c == null ? void 0 : c(o, s) : d ? "" : n.formFieldErrorIsMandatory, C = (o)=>o, h = G({
-        name: l,
-        value: E,
+    const { texts: s, t: m } = V(), { setFormError: b, jumpToNext: w } = G(), [d, u] = H.useState(!1), h = (o, l)=>o ? o.length !== f ? s.formCreditCardCvvError || m(er) : p == null ? void 0 : p(o, l) : v ? "" : s.formFieldErrorIsMandatory || m(tr), g = (o)=>o, T = J({
+        name: a,
+        value: A,
         defaultValue: j,
-        processValue: C,
-        helperText: M,
-        optional: d,
+        processValue: g,
+        helperText: n,
+        optional: v,
         error: i,
-        disabled: e,
-        onBlur: z,
-        validate: v,
-        onChange: V,
-        onChangeValue: y
-    }), t = X(16);
-    return /* @__PURE__ */ r(J, _object_spread_props(_object_spread({}, S, h), {
-        maxLength: p,
+        disabled: t,
+        onBlur: y,
+        validate: h,
+        onChange: B,
+        onChangeValue: E
+    }), e = Y(16);
+    return /* @__PURE__ */ r(K, _object_spread_props(_object_spread({}, S, T), {
+        maxLength: f,
         onChange: (o)=>{
-            h.onChange(o);
-            const s = o.currentTarget.value, g = C(s);
-            if (g.length === p) {
-                const x = v(g, s);
-                x ? b({
-                    name: l,
-                    error: x
-                }) : w(l);
+            T.onChange(o);
+            const l = o.currentTarget.value, x = g(l);
+            if (x.length === f) {
+                const I = h(x, l);
+                I ? b({
+                    name: a,
+                    error: I
+                }) : w(a);
             }
         },
-        endIcon: /* @__PURE__ */ r(D, {
+        endIcon: /* @__PURE__ */ r(N, {
             position: "top",
-            open: a,
-            children: /* @__PURE__ */ r(Z, {
-                acceptedCards: B
+            open: d,
+            children: /* @__PURE__ */ r(ir, {
+                acceptedCards: z
             }),
             onClose: ()=>u(!1),
             target: /* @__PURE__ */ r("div", {
                 style: {
-                    width: t,
-                    height: t
+                    width: e,
+                    height: e
                 },
-                children: /* @__PURE__ */ r(Y, {
+                children: /* @__PURE__ */ r(Z, {
                     style: {
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
-                        width: m,
-                        height: m,
+                        width: c,
+                        height: c,
                         position: "relative",
-                        left: `calc(-1 * (${m} - ${t}) / 2)`,
-                        top: `calc(-1 * (${m} - ${t}) / 2)`
+                        left: `calc(-1 * (${c} - ${e}) / 2)`,
+                        top: `calc(-1 * (${c} - ${e}) / 2)`
                     },
-                    onPress: ()=>u(!a),
-                    "aria-label": a ? n.formCreditCardCvvTooltipVisaMcButtonClose : n.formCreditCardCvvTooltipVisaMcButtonOpen,
-                    children: /* @__PURE__ */ r(N, {
-                        size: t,
-                        color: W.colors.neutralMedium
+                    onPress: ()=>u(!d),
+                    "aria-label": d ? s.formCreditCardCvvTooltipVisaMcButtonClose || m(_) : s.formCreditCardCvvTooltipVisaMcButtonOpen || m(L),
+                    children: /* @__PURE__ */ r(q, {
+                        size: e,
+                        color: X.colors.neutralMedium
                     })
                 })
             })
         }),
         autoComplete: $,
-        inputComponent: K,
+        inputComponent: P,
         dataAttributes: _object_spread({
             "component-name": "CvvField"
-        }, A)
+        }, O)
     }));
-}, hr = _;
-export { hr as default };
+}, Br = nr;
+export { Br as default };

package/dist-es/date-field.js

@@ -79,19 +79,20 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as t } from "react/jsx-runtime";
-import * as c from "react";
+import * as f from "react";
 import { useFieldProps as z } from "./form-context.js";
-import { TextFieldBaseAutosuggest as O } from "./text-field-base.js";
-import { isInputTypeSupported as b } from "./utils/dom.js";
-import { isServerSide as A } from "./utils/environment.js";
+import { TextFieldBaseAutosuggest as b } from "./text-field-base.js";
+import { isInputTypeSupported as A } from "./utils/dom.js";
+import { isServerSide as E } from "./utils/environment.js";
 import N from "./generated/mistica-icons/icon-calendar-regular.js";
 import { getLocalDateString as r } from "./utils/time.js";
 import { useTheme as j } from "./hooks.js";
 import { isFirefox as v } from "./utils/platform.js";
 import { iconContainer as B } from "./date-field.css-mistica.js";
 import { iconSize as C } from "./icon-button.css-mistica.js";
-const E = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), L = (_param)=>{
-    var { disabled: D, error: F, helperText: g, name: S, optional: f, validate: s, onChange: R, onChangeValue: n, onBlur: k, value: y, defaultValue: I, min: i, max: o, dataAttributes: d } = _param, u = _object_without_properties(_param, [
+import { formDateOutOfRangeError as L } from "./text-tokens.js";
+const M = /*#__PURE__*/ f.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), V = (_param)=>{
+    var { disabled: D, error: g, helperText: F, name: R, optional: c, validate: n, onChange: S, onChangeValue: s, onBlur: O, value: k, defaultValue: y, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -107,24 +108,24 @@ const E = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const T = (e)=>e, h = c.useMemo(()=>v() ? !1 : b("date"), []), { texts: x } = j(), a = (e)=>!(i && e && e < r(i) || o && e && e > r(o)), l = z({
-        name: S,
-        value: y,
-        defaultValue: I,
-        processValue: T,
-        helperText: g,
-        optional: f,
-        error: F,
+    const I = (e)=>e, T = f.useMemo(()=>v() ? !1 : A("date"), []), { texts: h, t: x } = j(), a = (e)=>!(o && e && e < r(o) || i && e && e > r(i)), p = z({
+        name: R,
+        value: k,
+        defaultValue: y,
+        processValue: I,
+        helperText: F,
+        optional: c,
+        error: g,
         disabled: D,
-        onBlur: k,
-        validate: (e, m)=>a(e) ? s == null ? void 0 : s(e, m) : x.formDateOutOfRangeError,
-        onChange: R,
+        onBlur: O,
+        validate: (e, m)=>a(e) ? n == null ? void 0 : n(e, m) : h.formDateOutOfRangeError || x(L),
+        onChange: S,
         onChangeValue: (e, m)=>{
-            a(e) && (n == null || n(e, m));
+            a(e) && (s == null || s(e, m));
         }
-    }), p = /* @__PURE__ */ t(O, _object_spread_props(_object_spread({}, u, l), {
-        min: i ? r(i) : void 0,
-        max: o ? r(o) : void 0,
+    }), l = /* @__PURE__ */ t(b, _object_spread_props(_object_spread({}, u, p), {
+        min: o ? r(o) : void 0,
+        max: i ? r(i) : void 0,
         type: "date",
         endIconOverlay: /* @__PURE__ */ t("div", {
             className: B,
@@ -136,15 +137,15 @@ const E = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
             "component-name": "DateField"
         }, d)
     }));
-    return h || A() ? p : /* @__PURE__ */ t(c.Suspense, {
-        fallback: p,
-        children: /* @__PURE__ */ t(E, _object_spread_props(_object_spread({}, u, l), {
-            optional: f,
+    return T || E() ? l : /* @__PURE__ */ t(f.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ t(M, _object_spread_props(_object_spread({}, u, p), {
+            optional: c,
             isValidDate: (e)=>a(r(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateField"
             }, d)
         }))
     });
-}, Y = L;
-export { Y as default };
+}, P = V;
+export { P as default };

package/dist-es/date-time-field.js

@@ -82,16 +82,17 @@ import { jsx as r } from "react/jsx-runtime";
 import * as c from "react";
 import { useFieldProps as x } from "./form-context.js";
 import { TextFieldBaseAutosuggest as z } from "./text-field-base.js";
-import { isInputTypeSupported as O } from "./utils/dom.js";
-import { isServerSide as b } from "./utils/environment.js";
-import { getLocalDateTimeString as i } from "./utils/time.js";
-import w from "./generated/mistica-icons/icon-calendar-regular.js";
-import { isFirefox as A } from "./utils/platform.js";
+import { isInputTypeSupported as b } from "./utils/dom.js";
+import { isServerSide as w } from "./utils/environment.js";
+import { getLocalDateTimeString as o } from "./utils/time.js";
+import A from "./generated/mistica-icons/icon-calendar-regular.js";
+import { isFirefox as E } from "./utils/platform.js";
 import { useTheme as N } from "./hooks.js";
 import { iconContainer as V } from "./date-field.css-mistica.js";
 import { iconSize as j } from "./icon-button.css-mistica.js";
-const B = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), C = (_param)=>{
-    var { disabled: F, error: g, helperText: S, name: R, optional: f, validate: n, onChange: h, onChangeValue: a, onBlur: k, value: y, defaultValue: I, min: o, /**
+import { formDateOutOfRangeError as B } from "./text-tokens.js";
+const C = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), L = (_param)=>{
+    var { disabled: F, error: g, helperText: R, name: S, optional: f, validate: m, onChange: O, onChangeValue: n, onBlur: h, value: k, defaultValue: y, min: i, /**
    * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
    * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
    * set it so that it only accepts datetime values with years having up to 4 digits.
@@ -111,31 +112,31 @@ const B = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const d = c.useMemo(()=>A() ? !1 : O("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v } = N(), m = (e)=>{
+    const d = c.useMemo(()=>E() ? !1 : b("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: I, t: v } = N(), a = (e)=>{
         const t = p(e);
-        return !(o && t && t < i(o) || s && t && t > i(s));
+        return !(i && t && t < o(i) || s && t && t > o(s));
     }, D = x({
-        name: R,
-        value: y,
-        defaultValue: I,
+        name: S,
+        value: k,
+        defaultValue: y,
         processValue: p,
-        helperText: S,
+        helperText: R,
         optional: f,
         error: g,
         disabled: F,
-        onBlur: k,
-        validate: (e, t)=>m(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
-        onChange: h,
+        onBlur: h,
+        validate: (e, t)=>a(e) ? m == null ? void 0 : m(e, t) : I.formDateOutOfRangeError || v(B),
+        onChange: O,
         onChangeValue: (e, t)=>{
-            m(e) && (a == null || a(e, t));
+            a(e) && (n == null || n(e, t));
         }
     }), T = /* @__PURE__ */ r(z, _object_spread_props(_object_spread({}, u, D), {
-        min: o ? i(o) : void 0,
-        max: s ? i(s) : void 0,
+        min: i ? o(i) : void 0,
+        max: s ? o(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ r("div", {
             className: V,
-            children: /* @__PURE__ */ r(w, {
+            children: /* @__PURE__ */ r(A, {
                 size: j.default
             })
         }),
@@ -143,16 +144,16 @@ const B = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
             "component-name": "DateTimeField"
         }, l)
     }));
-    return d || b() ? T : /* @__PURE__ */ r(c.Suspense, {
+    return d || w() ? T : /* @__PURE__ */ r(c.Suspense, {
         fallback: T,
-        children: /* @__PURE__ */ r(B, _object_spread_props(_object_spread({}, u, D), {
+        children: /* @__PURE__ */ r(C, _object_spread_props(_object_spread({}, u, D), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>m(i(e.toDate())),
+            isValidDate: (e)=>a(o(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateTimeField"
             }, l)
         }))
     });
-}, Y = C;
-export { Y as default };
+}, P = L;
+export { P as default };