@telefonica/mistica 15.20.1 → 16.1.0

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Tr;
+        return Ir;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +25,7 @@ const _common = require("./utils/common.js");
 const _creditcardnumberfieldcssmistica = require("./credit-card-number-field.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -150,59 +151,59 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Y = (r)=>{
-    var t;
+const rr = (r)=>{
+    var i;
     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)=>{
-    var { inputRef: r, value: n, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
+    return (_ref = (i = n.match(/.{1,4}/g)) == null ? void 0 : i.join(" ")) !== null && _ref !== void 0 ? _ref : n;
+}, er = (_param)=>{
+    var { inputRef: r, value: n, defaultValue: i, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    const [c, T] = _react.useState(t !== null && t !== void 0 ? t : ""), m = _react.useRef(null), f = typeof n < "u", u = f ? n : c, g = _react.useCallback((C)=>{
-        f || T(C), m.current && (e == null || e((0, _dom.createChangeEvent)(m.current, C)));
+    const [N, m] = _react.useState(i !== null && i !== void 0 ? i : ""), f = _react.useRef(null), u = typeof n < "u", T = u ? n : N, d = _react.useCallback((g)=>{
+        u || m(g), f.current && (e == null || e((0, _dom.createChangeEvent)(f.current, g)));
     }, [
-        f,
+        u,
         e
-    ]), d = (0, _rifm.useRifm)({
-        format: Y,
-        value: u,
-        onChange: g,
+    ]), c = (0, _rifm.useRifm)({
+        format: rr,
+        value: T,
+        onChange: d,
         accept: /[\d]+/g
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, a), {
         type: "text",
         inputMode: "decimal",
-        maxLength: (0, _creditcard.getCreditCardNumberLength)(d.value) + 3,
-        onChange: d.onChange,
-        value: d.value,
-        ref: (0, _common.combineRefs)(r, m)
+        maxLength: (0, _creditcard.getCreditCardNumberLength)(c.value) + 3,
+        onChange: c.onChange,
+        value: c.value,
+        ref: (0, _common.combineRefs)(r, f)
     }));
-}, v = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
+}, tr = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {
         size: _iconbuttoncssmistica.iconSize.default
-    }) : null, rr = {
+    }) : null, ir = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }),
     isAnimating: !1
-}, er = (r, param)=>{
-    let { type: n, value: t } = param;
+}, nr = (r, param)=>{
+    let { type: n, value: i } = param;
     if (n === "INPUT") {
-        const e = v(t);
+        const e = tr(i);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
             isAnimating: !0
         };
-        if (!(0, _creditcard.isVisa)(t) && !(0, _creditcard.isMasterCard)(t) && !(0, _creditcard.isAmericanExpress)(t) && r.showBackface) return {
+        if (!(0, _creditcard.isVisa)(i) && !(0, _creditcard.isMasterCard)(i) && !(0, _creditcard.isAmericanExpress)(i) && r.showBackface) return {
             animationTarget: r.animationTarget,
             showBackface: !1,
             isAnimating: !0
@@ -214,9 +215,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] = _react.useReducer(er, rr);
+    const [{ showBackface: n, animationTarget: i, isAnimating: e }, a] = _react.useReducer(nr, ir);
     return _react.useEffect(()=>{
         a({
             type: "INPUT",
@@ -241,21 +242,22 @@ const Y = (r)=>{
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipBack,
-                    children: t
+                    children: i
                 })
             ]
         })
     });
-}, ir = (_param)=>{
-    var { disabled: r, error: n, helperText: t, name: e, optional: a, validate: c, onChange: T, onChangeValue: m, onBlur: f, acceptedCards: u = {
+}, sr = (_param)=>{
+    var { disabled: r, error: n, helperText: i, name: e, label: a, optional: N, validate: m, onChange: f, onChangeValue: u, onBlur: T, acceptedCards: d = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: F } = _param, R = _object_without_properties(_param, [
+    }, value: c, autoComplete: g = "cc-number", defaultValue: w, dataAttributes: R } = _param, z = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -267,43 +269,44 @@ const Y = (r)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: E } = (0, _hooks.useTheme)(), { jumpToNext: z, rawValues: S, setFormError: y } = (0, _formcontext.useForm)(), h = (i, N)=>{
-        const s = E.formCreditCardNumberError;
-        return i ? (0, _creditcard.isAmericanExpress)(i) && !u.americanExpress || (0, _creditcard.isVisa)(i) && !u.visa || (0, _creditcard.isMasterCard)(i) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(i) || (0, _creditcard.getCreditCardNumberLength)(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : E.formFieldErrorIsMandatory;
-    }, k = (i)=>i.replace(/\s/g, ""), B = (0, _formcontext.useFieldProps)({
+    const { texts: F, t: S } = (0, _hooks.useTheme)(), { jumpToNext: j, rawValues: y, setFormError: M } = (0, _formcontext.useForm)(), C = (t, h)=>{
+        const s = F.formCreditCardNumberError || S(_texttokens.formCreditCardNumberError);
+        return (0, _creditcard.isAmericanExpress)(t) && !d.americanExpress || (0, _creditcard.isVisa)(t) && !d.visa || (0, _creditcard.isMasterCard)(t) && !d.masterCard || !(0, _creditcard.isValidCreditCardNumber)(t) || (0, _creditcard.getCreditCardNumberLength)(t) !== (t == null ? void 0 : t.length) ? s : m == null ? void 0 : m(t, h);
+    }, E = (t)=>t.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({
         name: e,
-        value: g,
-        defaultValue: C,
-        processValue: k,
-        helperText: t,
-        optional: a,
+        label: a,
+        value: c,
+        defaultValue: w,
+        processValue: E,
+        helperText: i,
+        optional: N,
         error: n,
         disabled: r,
-        onBlur: f,
-        validate: h,
-        onChange: T,
-        onChangeValue: m
+        onBlur: T,
+        validate: C,
+        onChange: f,
+        onChangeValue: u
     });
     var _ref;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, R, B), {
-        onChange: (i)=>{
-            B.onChange(i);
-            const N = i.currentTarget.value, s = k(N);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, z, k), {
+        onChange: (t)=>{
+            k.onChange(t);
+            const h = t.currentTarget.value, s = E(h);
             if (s.length >= (0, _creditcard.getCreditCardNumberLength)(s)) {
-                const V = h == null ? void 0 : h(s, N);
-                V ? y({
+                const B = C == null ? void 0 : C(s, h);
+                B ? M({
                     name: e,
-                    error: V
-                }) : z(e);
+                    error: B
+                }) : j(e);
             }
         },
-        inputComponent: Z,
-        autoComplete: d,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, {
-            value: (_ref = g !== null && g !== void 0 ? g : S[e]) !== null && _ref !== void 0 ? _ref : ""
+        inputComponent: er,
+        autoComplete: g,
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(or, {
+            value: (_ref = c !== null && c !== void 0 ? c : y[e]) !== null && _ref !== void 0 ? _ref : ""
         }),
         dataAttributes: _object_spread({
             "component-name": "CreditCardNumberField"
-        }, F)
+        }, R)
     }));
-}, Tr = ir;
+}, Ir = sr;

package/dist/cvv-field.d.ts

@@ -5,5 +5,5 @@ export interface CvvFieldProps extends CommonFormFieldProps {
     acceptedCards?: CardOptions;
     onChangeValue?: (value: string, rawValue: string) => void;
 }
-declare const CvvField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue, onBlur, acceptedCards, maxLength, value, autoComplete, defaultValue, dataAttributes, ...rest }: CvvFieldProps) => JSX.Element;
+declare const CvvField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue, onBlur, acceptedCards, maxLength, value, autoComplete, defaultValue, dataAttributes, ...rest }: CvvFieldProps) => JSX.Element;
 export default CvvField;

package/dist/cvv-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return hr;
+        return zo;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -28,6 +28,7 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _css = require("./utils/css.js");
 const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -153,9 +154,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Z = (param)=>{
-    let { acceptedCards: e } = param;
-    const { texts: i } = (0, _hooks.useTheme)();
+const io = (param)=>{
+    let { acceptedCards: t } = param;
+    const { texts: i, t: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             padding: 8,
@@ -171,12 +172,12 @@ const Z = (param)=>{
                                 role: "img"
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
-                                children: i.formCreditCardCvvTooltipVisaMc
+                                children: i.formCreditCardCvvTooltipVisaMc || n(_texttokens.formCreditCardCvvTooltipVisaMc)
                             })
                         ]
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
-                    (e == null ? void 0 : e.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 16,
                         alignItems: "center",
                         children: [
@@ -185,7 +186,7 @@ const Z = (param)=>{
                                 role: "img"
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
-                                children: i.formCreditCardCvvTooltipAmex
+                                children: i.formCreditCardCvvTooltipAmex || n(_texttokens.formCreditCardCvvTooltipAmex)
                             })
                         ]
                     })
@@ -193,16 +194,17 @@ const Z = (param)=>{
             })
         })
     });
-}, _ = (_param)=>{
-    var { disabled: e, error: i, helperText: M, name: l, optional: d, validate: c, onChange: V, onChangeValue: y, onBlur: z, acceptedCards: B = {
+}, no = (_param)=>{
+    var { disabled: t, error: i, helperText: n, name: l, label: M, optional: B, validate: c, onChange: z, onChangeValue: A, onBlur: E, acceptedCards: $ = {
         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: p = 4, value: j, autoComplete: y = "cc-csc", defaultValue: O, dataAttributes: S } = _param, b = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -215,44 +217,45 @@ const Z = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: n } = (0, _hooks.useTheme)(), { setFormError: b, jumpToNext: w } = (0, _formcontext.useForm)(), [a, u] = _react.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 = (0, _formcontext.useFieldProps)({
+    const { texts: a, t: C } = (0, _hooks.useTheme)(), { setFormError: w, jumpToNext: R } = (0, _formcontext.useForm)(), [f, v] = _react.useState(!1), u = (r, s)=>r.length !== p ? a.formCreditCardCvvError || C(_texttokens.formCreditCardCvvError) : c == null ? void 0 : c(r, s), h = (r)=>r, g = (0, _formcontext.useFieldProps)({
         name: l,
-        value: E,
-        defaultValue: j,
-        processValue: C,
-        helperText: M,
-        optional: d,
+        label: M,
+        value: j,
+        defaultValue: O,
+        processValue: h,
+        helperText: n,
+        optional: B,
         error: i,
-        disabled: e,
-        onBlur: z,
-        validate: v,
-        onChange: V,
-        onChangeValue: y
-    }), t = (0, _css.pxToRem)(16);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, S, h), {
+        disabled: t,
+        onBlur: E,
+        validate: u,
+        onChange: z,
+        onChangeValue: A
+    }), e = (0, _css.pxToRem)(16);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, b, g), {
         maxLength: p,
-        onChange: (o)=>{
-            h.onChange(o);
-            const s = o.currentTarget.value, g = C(s);
-            if (g.length === p) {
-                const x = v(g, s);
-                x ? b({
+        onChange: (r)=>{
+            g.onChange(r);
+            const s = r.currentTarget.value, T = h(s);
+            if (T.length === p) {
+                const x = u(T, s);
+                x ? w({
                     name: l,
                     error: x
-                }) : w(l);
+                }) : R(l);
             }
         },
         endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_popover.default, {
             position: "top",
-            open: a,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
-                acceptedCards: B
+            open: f,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(io, {
+                acceptedCards: $
             }),
-            onClose: ()=>u(!1),
+            onClose: ()=>v(!1),
             target: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    width: t,
-                    height: t
+                    width: e,
+                    height: e
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                     style: {
@@ -262,22 +265,22 @@ const Z = (param)=>{
                         width: _textfieldbasecssmistica.iconButtonSize,
                         height: _textfieldbasecssmistica.iconButtonSize,
                         position: "relative",
-                        left: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${t}) / 2)`,
-                        top: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${t}) / 2)`
+                        left: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`,
+                        top: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`
                     },
-                    onPress: ()=>u(!a),
-                    "aria-label": a ? n.formCreditCardCvvTooltipVisaMcButtonClose : n.formCreditCardCvvTooltipVisaMcButtonOpen,
+                    onPress: ()=>v(!f),
+                    "aria-label": f ? a.formCreditCardCvvTooltipVisaMcButtonClose || C(_texttokens.formCreditCardCvvTooltipVisaMcButtonClose) : a.formCreditCardCvvTooltipVisaMcButtonOpen || C(_texttokens.formCreditCardCvvTooltipVisaMcButtonOpen),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinformationregular.default, {
-                        size: t,
+                        size: e,
                         color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 })
             })
         }),
-        autoComplete: $,
+        autoComplete: y,
         inputComponent: _integerfield.IntegerInput,
         dataAttributes: _object_spread({
             "component-name": "CvvField"
-        }, A)
+        }, S)
     }));
-}, hr = _;
+}, zo = no;

package/dist/date-field.d.ts

@@ -5,5 +5,5 @@ export interface DateFieldProps extends CommonFormFieldProps {
     min?: Date;
     max?: Date;
 }
-declare const DateField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
+declare const DateField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
 export default DateField;

package/dist/date-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,7 @@ const _hooks = require("./hooks.js");
 const _platform = require("./utils/platform.js");
 const _datefieldcssmistica = require("./date-field.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -146,12 +147,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const E = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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, [
+const V = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), $ = (_param)=>{
+    var { disabled: D, error: g, helperText: F, name: R, label: S, optional: c, validate: n, onChange: O, onChangeValue: s, onBlur: k, value: y, defaultValue: I, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -163,24 +165,25 @@ const E = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "max",
         "dataAttributes"
     ]);
-    const T = (e)=>e, h = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("date"), []), { texts: x } = (0, _hooks.useTheme)(), a = (e)=>!(i && e && e < (0, _time.getLocalDateString)(i) || o && e && e > (0, _time.getLocalDateString)(o)), l = (0, _formcontext.useFieldProps)({
-        name: S,
+    const T = (e)=>e, h = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("date"), []), { texts: x, t: z } = (0, _hooks.useTheme)(), a = (e)=>!(o && e && e < (0, _time.getLocalDateString)(o) || i && e && e > (0, _time.getLocalDateString)(i)), p = (0, _formcontext.useFieldProps)({
+        name: R,
+        label: S,
         value: y,
         defaultValue: I,
         processValue: T,
-        helperText: g,
-        optional: f,
-        error: F,
+        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,
+        validate: (e, m)=>a(e) ? n == null ? void 0 : n(e, m) : x.formDateOutOfRangeError || z(_texttokens.formDateOutOfRangeError),
+        onChange: O,
         onChangeValue: (e, m)=>{
-            a(e) && (n == null || n(e, m));
+            a(e) && (s == null || s(e, m));
         }
-    }), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, l), {
-        min: i ? (0, _time.getLocalDateString)(i) : void 0,
-        max: o ? (0, _time.getLocalDateString)(o) : void 0,
+    }), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, p), {
+        min: o ? (0, _time.getLocalDateString)(o) : void 0,
+        max: i ? (0, _time.getLocalDateString)(i) : void 0,
         type: "date",
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _datefieldcssmistica.iconContainer,
@@ -192,14 +195,14 @@ const E = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
             "component-name": "DateField"
         }, d)
     }));
-    return h || (0, _environment.isServerSide)() ? p : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: p,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(E, _object_spread_props(_object_spread({}, u, l), {
-            optional: f,
+    return h || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, u, p), {
+            optional: c,
             isValidDate: (e)=>a((0, _time.getLocalDateString)(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateField"
             }, d)
         }))
     });
-}, Y = L;
+}, ee = $;

package/dist/date-time-field.d.ts

@@ -5,5 +5,5 @@ export interface DateFieldProps extends CommonFormFieldProps {
     min?: Date;
     max?: Date;
 }
-declare const FormDateField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
+declare const FormDateField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
 export default FormDateField;

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,7 @@ const _platform = require("./utils/platform.js");
 const _hooks = require("./hooks.js");
 const _datefieldcssmistica = require("./date-field.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -146,8 +147,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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, /**
+const L = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), M = (_param)=>{
+    var { disabled: F, error: g, helperText: R, name: S, label: O, optional: f, validate: m, onChange: h, onChangeValue: n, onBlur: k, value: y, defaultValue: I, 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.
@@ -156,6 +157,7 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -167,26 +169,27 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "max",
         "dataAttributes"
     ]);
-    const d = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v } = (0, _hooks.useTheme)(), m = (e)=>{
+    const d = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v, t: x } = (0, _hooks.useTheme)(), a = (e)=>{
         const t = p(e);
-        return !(o && t && t < (0, _time.getLocalDateTimeString)(o) || s && t && t > (0, _time.getLocalDateTimeString)(s));
+        return !(i && t && t < (0, _time.getLocalDateTimeString)(i) || s && t && t > (0, _time.getLocalDateTimeString)(s));
     }, D = (0, _formcontext.useFieldProps)({
-        name: R,
+        name: S,
+        label: O,
         value: y,
         defaultValue: I,
         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,
+        validate: (e, t)=>a(e) ? m == null ? void 0 : m(e, t) : v.formDateOutOfRangeError || x(_texttokens.formDateOutOfRangeError),
         onChange: h,
         onChangeValue: (e, t)=>{
-            m(e) && (a == null || a(e, t));
+            a(e) && (n == null || n(e, t));
         }
     }), T = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, D), {
-        min: o ? (0, _time.getLocalDateTimeString)(o) : void 0,
+        min: i ? (0, _time.getLocalDateTimeString)(i) : void 0,
         max: s ? (0, _time.getLocalDateTimeString)(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -201,13 +204,13 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
     }));
     return d || (0, _environment.isServerSide)() ? T : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: T,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, u, D), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _object_spread_props(_object_spread({}, u, D), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>m((0, _time.getLocalDateTimeString)(e.toDate())),
+            isValidDate: (e)=>a((0, _time.getLocalDateTimeString)(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateTimeField"
             }, l)
         }))
     });
-}, Y = C;
+}, ee = M;