@telefonica/mistica 14.40.0 → 14.42.0

package/dist/cvv-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return lr;
+        return dr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +25,8 @@ const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
 const _text = /*#__PURE__*/ _interop_require_default(require("./text.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _css = require("./utils/css.js");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -109,9 +111,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const O = (param)=>{
+const X = (param)=>{
     let { acceptedCards: t } = param;
-    const { texts: e } = (0, _hooks.useTheme)();
+    const { texts: i } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             padding: 8,
@@ -127,7 +129,7 @@ const O = (param)=>{
                                 role: "img"
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
-                                children: e.formCreditCardCvvTooltipVisaMc
+                                children: i.formCreditCardCvvTooltipVisaMc
                             })
                         ]
                     }),
@@ -141,7 +143,7 @@ const O = (param)=>{
                                 role: "img"
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
-                                children: e.formCreditCardCvvTooltipAmex
+                                children: i.formCreditCardCvvTooltipAmex
                             })
                         ]
                     })
@@ -149,12 +151,12 @@ const O = (param)=>{
             })
         })
     });
-}, Q = (_param)=>{
-    var { disabled: t, error: e, helperText: I, name: n, optional: f, validate: s, onChange: x, onChangeValue: T, onBlur: F, acceptedCards: y = {
+}, Y = (_param)=>{
+    var { disabled: t, error: i, helperText: T, name: m, optional: a, validate: s, onChange: F, onChangeValue: z, onBlur: y, acceptedCards: B = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, maxLength: m = 4, value: E, autoComplete: M = "cc-csc", defaultValue: V } = _param, j = _object_without_properties(_param, [
+    }, maxLength: c = 4, value: E, autoComplete: M = "cc-csc", defaultValue: V, dataAttributes: $ } = _param, j = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -168,65 +170,68 @@ const O = (param)=>{
         "maxLength",
         "value",
         "autoComplete",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const { texts: l } = (0, _hooks.useTheme)(), { setFormError: z, jumpToNext: B } = (0, _formcontext.useForm)(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = (0, _formcontext.useFieldProps)({
-        name: n,
+    const { texts: l } = (0, _hooks.useTheme)(), { setFormError: A, jumpToNext: S } = (0, _formcontext.useForm)(), u = (o, n)=>o ? o.length !== c ? l.formCreditCardCvvError : s == null ? void 0 : s(o, n) : a ? "" : l.formFieldErrorIsMandatory, d = (o)=>o, v = (0, _formcontext.useFieldProps)({
+        name: m,
         value: E,
         defaultValue: V,
-        processValue: a,
-        helperText: I,
-        optional: f,
-        error: e,
+        processValue: d,
+        helperText: T,
+        optional: a,
+        error: i,
         disabled: t,
-        onBlur: F,
-        validate: p,
-        onChange: x,
-        onChangeValue: T
-    });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, j, u), {
-        maxLength: m,
+        onBlur: y,
+        validate: u,
+        onChange: F,
+        onChangeValue: z
+    }), e = (0, _css.pxToRem)(16);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, j, v), {
+        maxLength: c,
         onChange: (o)=>{
-            u.onChange(o);
-            const i = o.currentTarget.value, d = a(i);
-            if (d.length === m) {
-                const v = p(d, i);
-                v ? z({
-                    name: n,
-                    error: v
-                }) : B(n);
+            v.onChange(o);
+            const n = o.currentTarget.value, C = d(n);
+            if (C.length === c) {
+                const g = u(C, n);
+                g ? A({
+                    name: m,
+                    error: g
+                }) : S(m);
             }
         },
         endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
             position: "top",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                acceptedCards: y
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+                acceptedCards: B
             }),
             target: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    width: 16,
-                    height: 16
+                    width: e,
+                    height: e
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                    size: 40,
+                    size: _textfieldbasecssmistica.iconButtonSize,
                     style: {
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
                         position: "relative",
-                        left: -12,
-                        // (40 - 16) / 2
-                        top: -12
+                        left: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`,
+                        top: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`
                     },
                     "aria-label": l.formCreditCardCvvTooltipVisaMcButton,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinformationregular.default, {
-                        size: 16,
+                        size: e,
                         color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 })
             })
         }),
         autoComplete: M,
-        inputComponent: _integerfield.IntegerInput
+        inputComponent: _integerfield.IntegerInput,
+        dataAttributes: _object_spread({
+            "component-name": "CvvField"
+        }, $)
     }));
-}, lr = Q;
+}, dr = Y;

package/dist/date-field.css-mistica.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "iconContainer", {
+    enumerable: true,
+    get: function() {
+        return i;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./text-field-base.css.ts.vanilla.css-mistica.js");
+require("./date-field.css.ts.vanilla.css-mistica.js");
+var i = "_1pntndu0";

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

@@ -0,0 +1 @@
+export declare const iconContainer: string;

package/dist/date-field.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+const a = "";

package/dist/date-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return K;
+        return Y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,8 @@ const _iconcalendarregular = /*#__PURE__*/ _interop_require_default(require("./g
 const _time = require("./utils/time.js");
 const _hooks = require("./hooks.js");
 const _platform = require("./utils/platform.js");
+const _datefieldcssmistica = require("./date-field.css-mistica.js");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -144,8 +146,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const A = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), B = (_param)=>{
-    var { disabled: l, error: g, helperText: D, name: y, optional: m, validate: s, onChange: F, onChangeValue: n, onBlur: R, value: S, defaultValue: h, min: o, max: i } = _param, d = _object_without_properties(_param, [
+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, [
         "disabled",
         "error",
         "helperText",
@@ -158,42 +160,46 @@ const A = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "value",
         "defaultValue",
         "min",
-        "max"
+        "max",
+        "dataAttributes"
     ]);
-    const k = (e)=>e, I = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("date"), []), { texts: T } = (0, _hooks.useTheme)(), f = (e)=>!(o && e && e < (0, _time.getLocalDateString)(o) || i && e && e > (0, _time.getLocalDateString)(i)), u = (0, _formcontext.useFieldProps)({
-        name: y,
-        value: S,
-        defaultValue: h,
-        processValue: k,
-        helperText: D,
-        optional: m,
-        error: g,
-        disabled: l,
-        onBlur: R,
-        validate: (e, c)=>f(e) ? s == null ? void 0 : s(e, c) : T.formDateOutOfRangeError,
-        onChange: F,
-        onChangeValue: (e, c)=>{
-            f(e) && (n == null || n(e, c));
+    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)), p = (0, _formcontext.useFieldProps)({
+        name: S,
+        value: y,
+        defaultValue: I,
+        processValue: T,
+        helperText: g,
+        optional: f,
+        error: F,
+        disabled: D,
+        onBlur: k,
+        validate: (e, m)=>a(e) ? s == null ? void 0 : s(e, m) : x.formDateOutOfRangeError,
+        onChange: R,
+        onChangeValue: (e, m)=>{
+            a(e) && (n == null || n(e, m));
         }
-    }), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, d, u), {
-        min: o ? (0, _time.getLocalDateString)(o) : void 0,
-        max: i ? (0, _time.getLocalDateString)(i) : void 0,
+    }), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, p), {
+        min: i ? (0, _time.getLocalDateString)(i) : void 0,
+        max: o ? (0, _time.getLocalDateString)(o) : void 0,
         type: "date",
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            style: {
-                position: "absolute",
-                top: 16,
-                right: 16,
-                pointerEvents: "none"
-            },
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {})
-        })
+            className: _datefieldcssmistica.iconContainer,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {
+                size: _textfieldbasecssmistica.iconSize
+            })
+        }),
+        dataAttributes: _object_spread({
+            "component-name": "DateField"
+        }, d)
     }));
-    return I || (0, _environment.isServerSide)() ? p : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: p,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(A, _object_spread_props(_object_spread({}, d, u), {
-            optional: m,
-            isValidDate: (e)=>f((0, _time.getLocalDateString)(e.toDate()))
+    return h || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(E, _object_spread_props(_object_spread({}, u, p), {
+            optional: f,
+            isValidDate: (e)=>a((0, _time.getLocalDateString)(e.toDate())),
+            dataAttributes: _object_spread({
+                "component-name": "DateField"
+            }, d)
         }))
     });
-}, K = B;
+}, Y = L;

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return K;
+        return Y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,8 @@ const _time = require("./utils/time.js");
 const _iconcalendarregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-calendar-regular.js"));
 const _platform = require("./utils/platform.js");
 const _hooks = require("./hooks.js");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
+const _datefieldcssmistica = require("./date-field.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -144,12 +146,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const j = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), z = (_param)=>{
-    var { disabled: T, error: g, helperText: F, name: h, optional: f, validate: n, onChange: y, onChangeValue: a, onBlur: R, value: S, defaultValue: k, min: i, /**
+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: m, onBlur: k, value: y, defaultValue: I, min: o, /**
    * 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.
-   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59") } = _param, l = _object_without_properties(_param, [
+   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59"), dataAttributes: l } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -162,46 +164,50 @@ const j = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "value",
         "defaultValue",
         "min",
-        "max"
+        "max",
+        "dataAttributes"
     ]);
-    const u = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v } = (0, _hooks.useTheme)(), c = (e)=>{
-        const t = d(e);
-        return !(i && t && t < (0, _time.getLocalDateTimeString)(i) || s && t && t > (0, _time.getLocalDateTimeString)(s));
-    }, p = (0, _formcontext.useFieldProps)({
-        name: h,
-        value: S,
-        defaultValue: k,
-        processValue: d,
-        helperText: F,
+    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)(), a = (e)=>{
+        const t = p(e);
+        return !(o && t && t < (0, _time.getLocalDateTimeString)(o) || s && t && t > (0, _time.getLocalDateTimeString)(s));
+    }, D = (0, _formcontext.useFieldProps)({
+        name: R,
+        value: y,
+        defaultValue: I,
+        processValue: p,
+        helperText: S,
         optional: f,
         error: g,
-        disabled: T,
-        onBlur: R,
-        validate: (e, t)=>c(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
-        onChange: y,
+        disabled: F,
+        onBlur: k,
+        validate: (e, t)=>a(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
+        onChange: h,
         onChangeValue: (e, t)=>{
-            c(e) && (a == null || a(e, t));
+            a(e) && (m == null || m(e, t));
         }
-    }), D = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, l, p), {
-        min: i ? (0, _time.getLocalDateTimeString)(i) : void 0,
+    }), T = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, D), {
+        min: o ? (0, _time.getLocalDateTimeString)(o) : void 0,
         max: s ? (0, _time.getLocalDateTimeString)(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            style: {
-                position: "absolute",
-                top: 16,
-                right: 16,
-                pointerEvents: "none"
-            },
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {})
-        })
+            className: _datefieldcssmistica.iconContainer,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {
+                size: _textfieldbasecssmistica.iconSize
+            })
+        }),
+        dataAttributes: _object_spread({
+            "component-name": "DateTimeField"
+        }, l)
     }));
-    return u || (0, _environment.isServerSide)() ? D : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: D,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(j, _object_spread_props(_object_spread({}, l, p), {
+    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), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>c((0, _time.getLocalDateTimeString)(e.toDate()))
+            isValidDate: (e)=>a((0, _time.getLocalDateTimeString)(e.toDate())),
+            dataAttributes: _object_spread({
+                "component-name": "DateTimeField"
+            }, l)
         }))
     });
-}, K = z;
+}, Y = C;

package/dist/date-time-picker.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ie;
+        return ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,7 +16,6 @@ const _iconcalendarregular = /*#__PURE__*/ _interop_require_default(require("./g
 const _reactdatetime = /*#__PURE__*/ _interop_require_default(require("react-datetime"));
 const _overlay = /*#__PURE__*/ _interop_require_default(require("./overlay.js"));
 const _textfieldcomponentscssmistica = require("./text-field-components.css-mistica.js");
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _dom = require("./utils/dom.js");
 const _hooks = require("./hooks.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
@@ -26,6 +25,7 @@ require("moment/locale/es");
 require("moment/locale/de");
 require("moment/locale/pt-br");
 require("moment/locale/en-gb");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -151,7 +151,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const A = {
+const O = {
     es: "es",
     // spanish
     ca: "es",
@@ -165,91 +165,89 @@ const A = {
     pt: "pt-br",
     // portuguese
     en: "en-gb"
-}, O = (a)=>{
+}, q = (a)=>{
     const i = a.toLocaleLowerCase().split("-")[0];
-    return A[i] || "en-gb";
-}, ie = (_param)=>{
-    var { withTime: a, mode: i, isValidDate: h, optional: u } = _param, t = _object_without_properties(_param, [
+    return O[i] || "en-gb";
+}, ae = (_param)=>{
+    var { withTime: a, mode: i, isValidDate: y, optional: m } = _param, o = _object_without_properties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, y] = _react.useState(!1), { texts: x, i18n: { locale: b } } = (0, _hooks.useTheme)(), n = _react.useRef(null), { height: k, ref: v } = (0, _hooks.useElementDimensions)(), l = (e)=>{
-        t.disabled || y(e);
-    }, C = ()=>{
+    const [u, x] = _react.useState(!1), { texts: b, i18n: { locale: k } } = (0, _hooks.useTheme)(), r = _react.useRef(null), { height: v, ref: C } = (0, _hooks.useElementDimensions)(), c = (e)=>{
+        o.disabled || x(e);
+    }, D = ()=>{
         var f;
-        const { top: e = 0, bottom: o = 0, left: c = 0 } = ((f = n.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + o < window.innerHeight;
+        const { top: e = 0, bottom: t = 0, left: l = 0 } = ((f = r.current) == null ? void 0 : f.getBoundingClientRect()) || {}, P = 260 + t < window.innerHeight;
         return {
             width: _textfieldcomponentscssmistica.DEFAULT_WIDTH,
-            top: M ? o : e - k,
-            left: c,
+            top: P ? t : e - v,
+            left: l,
             position: "absolute",
             borderRadius: _skincontractcssmistica.vars.borderRadii.input,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
     }, s = ()=>{
-        var o;
-        const e = (o = n.current) == null ? void 0 : o.value;
+        var t;
+        const e = (t = r.current) == null ? void 0 : t.value;
         return e ? new Date(e) : void 0;
-    }, D = (e)=>a ? e.format("yyyy-MM-DD HH:mm") : i === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), p = (e)=>{
-        var c;
-        const o = typeof e == "string" ? e : D(e);
-        n.current && (n.current.focus(), (c = t.onChange) == null || c.call(t, (0, _dom.createChangeEvent)(n.current, o)));
-    }, w = ()=>s() && u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-            "aria-label": x.clearButton,
-            size: 32,
-            onPress: ()=>{
-                p("");
-            },
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
-        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-            disabled: t.disabled,
+    }, w = (e)=>a ? e.format("yyyy-MM-DD HH:mm") : i === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), p = (e)=>{
+        var l;
+        const t = typeof e == "string" ? e : w(e);
+        r.current && (r.current.focus(), (l = o.onChange) == null || l.call(o, (0, _dom.createChangeEvent)(r.current, t)));
+    }, M = ()=>s() && m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+            Icon: _iconcloseregular.default,
+            "aria-label": b.clearButton,
+            className: _textfieldbasecssmistica.endIcon,
+            onPress: ()=>p("")
+        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+            Icon: _iconcalendarregular.default,
             "aria-label": "",
-            size: 32,
-            onPress: ()=>l(!m),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {})
+            disabled: o.disabled,
+            className: _textfieldbasecssmistica.endIcon,
+            onPress: ()=>c(!u)
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, t), {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, o), {
                 style: {
-                    cursor: "default"
+                    cursor: "pointer"
                 },
-                required: !u,
+                required: !m,
                 type: "text",
                 autoComplete: "off",
                 shrinkLabel: !!s(),
-                endIcon: w(),
+                endIcon: M(),
                 inputRef: (e)=>{
-                    var o;
-                    (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
+                    var t;
+                    (t = o == null ? void 0 : o.inputRef) == null || t.call(o, e), r.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>l(!0),
+                onKeyDown: ()=>c(!0),
                 onClick: ()=>{
-                    l(!0);
+                    c(!0);
                 }
             })),
-            m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+            u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                 onPress: (e)=>{
-                    (0, _dom.cancelEvent)(e), l(!1);
+                    (0, _dom.cancelEvent)(e), c(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    ref: v,
-                    style: C(),
+                    ref: C,
+                    style: D(),
                     className: _datetimepickercssmistica.reactDatePicker,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reactdatetime.default, {
                         initialViewMode: i === "year-month" ? "months" : void 0,
                         dateFormat: i === "year-month" ? "YYYY-MM" : void 0,
                         timeFormat: a ? "HH:mm" : !1,
                         initialValue: s(),
-                        locale: O(b),
+                        locale: q(k),
                         input: !1,
                         onChange: p,
-                        isValidDate: h
+                        isValidDate: y
                     })
                 })
             })