@telefonica/mistica 14.45.0 → 14.46.0

package/dist/community/advanced-data-card.js

@@ -14,7 +14,7 @@ _export(exports, {
         return xe;
     },
     default: function() {
-        return _e;
+        return We;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,8 +160,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const ye = (_param)=>{
-    var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: l = "h3", titleLinesMax: c, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
+const Ne = (_param)=>{
+    var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: c = "h3", titleLinesMax: l, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
         "headline",
         "pretitle",
         "pretitleAs",
@@ -175,7 +175,7 @@ const ye = (_param)=>{
         "descriptionLinesMax",
         "ariaLabel"
     ]);
-    const { textPresets: T } = (0, _hooks.useTheme)();
+    const { textPresets: C } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 4,
         children: [
@@ -201,9 +201,9 @@ const ye = (_param)=>{
                 mobileLineHeight: "24px",
                 desktopSize: 20,
                 desktopLineHeight: "28px",
-                truncate: c,
-                weight: T.cardTitle.weight,
-                as: l,
+                truncate: l,
+                weight: C.cardTitle.weight,
+                as: c,
                 hyphens: "auto",
                 children: d
             }),
@@ -225,9 +225,9 @@ const ye = (_param)=>{
             })
         ]
     });
-}, Ne = (param)=>{
+}, ye = (param)=>{
     let { button: a, footerImage: i, footerText: n, footerTextLinesMax: p, buttonLink: d } = param;
-    const l = !!a, c = !!i, m = !!n, o = !!d, r = l && (c || m) && o, u = o && !r ? "178px" : "";
+    const c = !!a, l = !!i, m = !!n, o = !!d, r = c && (l || m) && o, u = o && !r ? "178px" : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -237,7 +237,7 @@ const ye = (_param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[r ? "mobile" : "default"]),
                 children: [
-                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_advanceddatacardcssmistica.marginRightButton, _advanceddatacardcssmistica.buttonMobile),
                         children: a
                     }),
@@ -246,7 +246,7 @@ const ye = (_param)=>{
                             paddingTop: 16
                         })),
                         children: [
-                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingRight: 16,
                                 className: (0, _sprinklescssmistica.sprinkles)({
                                     alignItems: "center",
@@ -280,8 +280,8 @@ const ye = (_param)=>{
             })
         ]
     });
-}, xe = /*#__PURE__*/ _react.forwardRef((_param, _)=>{
-    var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: l, titleAs: c, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: T = 24, button: b, footerImage: A, footerText: B, footerTextLinesMax: z, buttonLink: R, dataAttributes: H, actions: g, "aria-label": S, onClose: w } = _param, f = _object_without_properties(_param, [
+}, xe = /*#__PURE__*/ _react.forwardRef((_param, E)=>{
+    var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: c, titleAs: l, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: C = 24, button: A, footerImage: T, footerText: B, footerTextLinesMax: V, buttonLink: R, dataAttributes: W, actions: g, "aria-label": S, onClose: D } = _param, f = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -306,24 +306,20 @@ const ye = (_param)=>{
         "aria-label",
         "onClose"
     ]);
-    const E = !!f.href || !!f.onPress || !!f.to, V = {
-        button: b,
-        footerImage: A,
+    const G = !!f.href || !!f.onPress || !!f.to, L = {
+        button: A,
+        footerImage: T,
         footerText: B,
-        footerTextLinesMax: z,
+        footerTextLinesMax: V,
         buttonLink: R
-    }, D = !!b || !!A || !!B || !!R, I = !!(s != null && s.length), W = ((g == null ? void 0 : g.length) || 0) + (w ? 1 : 0), G = {
-        marginRight: -16,
-        marginTop: -24,
-        width: _card.TOP_ACTION_BUTTON_SIZE * W
-    };
+    }, w = !!A || !!T || !!B || !!R, F = !!(s != null && s.length), M = ((g == null ? void 0 : g.length) || 0) + (D ? 1 : 0);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _sprinklescssmistica.sprinkles)({
             position: "relative",
             height: "100%"
         })
-    }, (0, _dom.getPrefixedDataAttributes)(H, "AdvancedDataCard")), {
-        ref: _,
+    }, (0, _dom.getPrefixedDataAttributes)(W, "AdvancedDataCard")), {
+        ref: E,
         "aria-label": S,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
             className: _advanceddatacardcssmistica.dataCard,
@@ -331,11 +327,11 @@ const ye = (_param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _advanceddatacardcssmistica.touchableContainer,
                     children: [
-                        E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        G && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _advanceddatacardcssmistica.touchableCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !D && !I ? _advanceddatacardcssmistica.minHeight : ""),
+                            className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !w && !F ? _advanceddatacardcssmistica.minHeight : ""),
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 8,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -345,13 +341,13 @@ const ye = (_param)=>{
                                             space: 8,
                                             children: [
                                                 a,
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(ye, _object_spread({
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, _object_spread({
                                                     headline: i,
                                                     pretitle: n,
                                                     pretitleAs: p,
                                                     pretitleLinesMax: d,
-                                                    title: l,
-                                                    titleAs: c,
+                                                    title: c,
+                                                    titleAs: l,
                                                     titleLinesMax: m,
                                                     subtitle: o,
                                                     subtitleLinesMax: r,
@@ -362,7 +358,10 @@ const ye = (_param)=>{
                                             ]
                                         }),
                                         !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                            style: G
+                                            style: (0, _css.applyCssVars)({
+                                                [_advanceddatacardcssmistica.vars.topActionsCount]: String(M)
+                                            }),
+                                            className: _advanceddatacardcssmistica.topActionsWithoutIcon
                                         })
                                     ]
                                 })
@@ -373,33 +372,33 @@ const ye = (_param)=>{
                                 flexGrow: 1
                             }
                         }),
-                        I && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        F && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingTop: 16,
                             paddingBottom: 24,
                             width: "100%",
                             className: _advanceddatacardcssmistica.zindex,
-                            children: s.map((L, F)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                            children: s.map((O, I)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _advanceddatacardcssmistica.paddingX,
-                                            children: L
+                                            children: O
                                         }),
-                                        F + 1 !== s.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingY: T,
+                                        I + 1 !== s.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                            paddingY: C,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                                         })
                                     ]
-                                }, F))
+                                }, I))
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
                             actions: g,
-                            onClose: w,
-                            padding: 7
+                            onClose: D,
+                            padding: 15
                         })
                     ]
                 }),
-                D && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne, _object_spread({}, V))
+                w && /* @__PURE__ */ (0, _jsxruntime.jsx)(ye, _object_spread({}, L))
             ]
         })
     }));
-}), _e = xe;
+}), We = xe;

package/dist/counter.js

@@ -123,26 +123,26 @@ function _object_spread_props(target, source) {
     return target;
 }
 const x = 20, W = (param)=>{
-    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, f = _react.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
+    let { value: h, defaultValue: N, min: m, max: s, onChangeValue: a } = param;
+    const i = h !== void 0, f = _react.useCallback((c)=>c === void 0 ? m : Math.max(m, Math.min(s, c)), [
         m,
         s
-    ]), [e, p] = _react.useState(f(b)), v = (n)=>{
-        i || p(n), a == null || a(n);
+    ]), [e, p] = _react.useState(f(N)), v = (c)=>{
+        i || p(c), a == null || a(c);
     };
     return [
         i ? f(h) : e,
         v
     ];
 }, X = (param)=>{
-    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: n, valueLabel: C } = param;
+    let { value: h, defaultValue: N, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: c, valueLabel: C } = param;
     const A = (0, _themevariantcontext.useThemeVariant)(), { texts: u } = (0, _hooks.useTheme)(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
         value: h,
-        defaultValue: b,
+        defaultValue: N,
         min: l,
         max: d,
         onChangeValue: m
-    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>n === void 0 ? u.counterDecreaseLabel : n, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
+    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>c === void 0 ? u.counterDecreaseLabel : c, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_countercssmistica.counter, {
             [_countercssmistica.disabled]: e

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

@@ -24,7 +24,7 @@ const _dom = require("./utils/dom.js");
 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 _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
+const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -182,15 +182,15 @@ const Y = (r)=>{
         ref: (0, _common.combineRefs)(r, m)
     }));
 }, v = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
-        size: _textfieldbasecssmistica.iconSize
+        size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {
-        size: _textfieldbasecssmistica.iconSize
+        size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {
-        size: _textfieldbasecssmistica.iconSize
+        size: _iconbuttoncssmistica.iconSize.default
     }) : null, rr = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
-        size: _textfieldbasecssmistica.iconSize
+        size: _iconbuttoncssmistica.iconSize.default
     }),
     isAnimating: !1
 }, er = (r, param)=>{
@@ -235,7 +235,7 @@ const Y = (r)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipFront,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
-                        size: _textfieldbasecssmistica.iconSize,
+                        size: _iconbuttoncssmistica.iconSize.default,
                         color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 }),

package/dist/cvv-field.js

@@ -15,7 +15,7 @@ const _hooks = require("./hooks.js");
 const _iconcvvvisamc = /*#__PURE__*/ _interop_require_default(require("./icons/icon-cvv-visa-mc.js"));
 const _iconcvvamex = /*#__PURE__*/ _interop_require_default(require("./icons/icon-cvv-amex.js"));
 const _popover = /*#__PURE__*/ _interop_require_default(require("./popover.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
+const _iconbutton = require("./icon-button.js");
 const _iconinformationregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-information-regular.js"));
 const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
@@ -254,7 +254,7 @@ const Z = (param)=>{
                     width: t,
                     height: t
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                     size: _textfieldbasecssmistica.iconButtonSize,
                     style: {
                         display: "flex",

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "iconContainer", {
     enumerable: true,
     get: function() {
-        return i;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./icon-button.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";
+var p = "_1pntndu0";

package/dist/date-field.js

@@ -20,7 +20,7 @@ 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");
+const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -163,7 +163,7 @@ 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)), p = (0, _formcontext.useFieldProps)({
+    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,
         value: y,
         defaultValue: I,
@@ -178,23 +178,23 @@ const E = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         onChangeValue: (e, m)=>{
             a(e) && (n == null || n(e, m));
         }
-    }), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, p), {
+    }), 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,
         type: "date",
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _datefieldcssmistica.iconContainer,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {
-                size: _textfieldbasecssmistica.iconSize
+                size: _iconbuttoncssmistica.iconSize.default
             })
         }),
         dataAttributes: _object_spread({
             "component-name": "DateField"
         }, d)
     }));
-    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), {
+    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,
             isValidDate: (e)=>a((0, _time.getLocalDateString)(e.toDate())),
             dataAttributes: _object_spread({

package/dist/date-time-field.js

@@ -19,8 +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");
+const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -147,7 +147,7 @@ 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: m, onBlur: k, value: y, defaultValue: I, min: o, /**
+    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, /**
    * 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.
@@ -167,7 +167,7 @@ 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)(), a = (e)=>{
+    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 t = p(e);
         return !(o && t && t < (0, _time.getLocalDateTimeString)(o) || s && t && t > (0, _time.getLocalDateTimeString)(s));
     }, D = (0, _formcontext.useFieldProps)({
@@ -180,10 +180,10 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         error: g,
         disabled: F,
         onBlur: k,
-        validate: (e, t)=>a(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
+        validate: (e, t)=>m(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
         onChange: h,
         onChangeValue: (e, t)=>{
-            a(e) && (m == null || m(e, t));
+            m(e) && (a == null || a(e, t));
         }
     }), T = /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, D), {
         min: o ? (0, _time.getLocalDateTimeString)(o) : void 0,
@@ -192,7 +192,7 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         endIconOverlay: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _datefieldcssmistica.iconContainer,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {
-                size: _textfieldbasecssmistica.iconSize
+                size: _iconbuttoncssmistica.iconSize.default
             })
         }),
         dataAttributes: _object_spread({
@@ -204,7 +204,7 @@ const B = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, u, D), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>a((0, _time.getLocalDateTimeString)(e.toDate())),
+            isValidDate: (e)=>m((0, _time.getLocalDateTimeString)(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateTimeField"
             }, l)

package/dist/date-time-picker.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ae;
+        return ne;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,7 +25,6 @@ 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
@@ -165,25 +164,25 @@ const O = {
     pt: "pt-br",
     // portuguese
     en: "en-gb"
-}, q = (a)=>{
-    const i = a.toLocaleLowerCase().split("-")[0];
-    return O[i] || "en-gb";
-}, ae = (_param)=>{
-    var { withTime: a, mode: i, isValidDate: y, optional: m } = _param, o = _object_without_properties(_param, [
+}, q = (i)=>{
+    const a = i.toLocaleLowerCase().split("-")[0];
+    return O[a] || "en-gb";
+}, ne = (_param)=>{
+    var { withTime: i, mode: a, isValidDate: h, optional: u } = _param, o = _object_without_properties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    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 = ()=>{
+    const [m, y] = _react.useState(!1), { texts: x, i18n: { locale: b } } = (0, _hooks.useTheme)(), r = _react.useRef(null), { height: k, ref: C } = (0, _hooks.useElementDimensions)(), l = (e)=>{
+        o.disabled || y(e);
+    }, v = ()=>{
         var f;
-        const { top: e = 0, bottom: t = 0, left: l = 0 } = ((f = r.current) == null ? void 0 : f.getBoundingClientRect()) || {}, P = 260 + t < window.innerHeight;
+        const { top: e = 0, bottom: t = 0, left: c = 0 } = ((f = r.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + t < window.innerHeight;
         return {
             width: _textfieldcomponentscssmistica.DEFAULT_WIDTH,
-            top: P ? t : e - v,
-            left: l,
+            top: M ? t : e - k,
+            left: c,
             position: "absolute",
             borderRadius: _skincontractcssmistica.vars.borderRadii.input,
             overflow: "hidden",
@@ -193,21 +192,21 @@ const O = {
         var t;
         const e = (t = r.current) == null ? void 0 : t.value;
         return e ? new Date(e) : void 0;
-    }, 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, {
+    }, D = (e)=>i ? e.format("yyyy-MM-DD HH:mm") : a === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), p = (e)=>{
+        var c;
+        const t = typeof e == "string" ? e : D(e);
+        r.current && (r.current.focus(), (c = o.onChange) == null || c.call(o, (0, _dom.createChangeEvent)(r.current, t)));
+    }, w = ()=>s() && u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcloseregular.default,
-            "aria-label": b.clearButton,
-            className: _textfieldbasecssmistica.endIcon,
+            "aria-label": x.clearButton,
+            hasBackgroundColor: !1,
             onPress: ()=>p("")
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcalendarregular.default,
             "aria-label": "",
             disabled: o.disabled,
-            className: _textfieldbasecssmistica.endIcon,
-            onPress: ()=>c(!u)
+            hasBackgroundColor: !1,
+            onPress: ()=>l(!m)
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -215,39 +214,39 @@ const O = {
                 style: {
                     cursor: "pointer"
                 },
-                required: !m,
+                required: !u,
                 type: "text",
                 autoComplete: "off",
                 shrinkLabel: !!s(),
-                endIcon: M(),
+                endIcon: w(),
                 inputRef: (e)=>{
                     var t;
                     (t = o == null ? void 0 : o.inputRef) == null || t.call(o, e), r.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>c(!0),
+                onKeyDown: ()=>l(!0),
                 onClick: ()=>{
-                    c(!0);
+                    l(!0);
                 }
             })),
-            u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+            m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                 onPress: (e)=>{
-                    (0, _dom.cancelEvent)(e), c(!1);
+                    (0, _dom.cancelEvent)(e), l(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     ref: C,
-                    style: D(),
+                    style: v(),
                     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,
+                        initialViewMode: a === "year-month" ? "months" : void 0,
+                        dateFormat: a === "year-month" ? "YYYY-MM" : void 0,
+                        timeFormat: i ? "HH:mm" : !1,
                         initialValue: s(),
-                        locale: q(k),
+                        locale: q(b),
                         input: !1,
                         onChange: p,
-                        isValidDate: y
+                        isValidDate: h
                     })
                 })
             })