@telefonica/mistica 14.45.0 → 14.46.0

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

@@ -78,26 +78,26 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as t, Fragment as P } from "react/jsx-runtime";
-import * as M from "react";
-import { Boxed as U } from "../boxed.js";
-import { sprinkles as C } from "../sprinkles.css-mistica.js";
-import j from "../stack.js";
-import { dataCard as X, touchableContainer as Y, touchableCardOverlay as Z, cardContentStyle as q, minHeight as J, zindex as K, paddingX as Q, touchableArea as $, divider as ee, actions as re, actionsVariants as te, marginRightButton as ae, buttonMobile as O, footerDirection as ie, marginRightAuto as oe, footerText as se, adjustButtonLink as ne, button as de } from "./advanced-data-card.css-mistica.js";
-import { vars as le } from "../image.css-mistica.js";
-import k from "../divider.js";
-import { Text2 as v, Text as ce } from "../text.js";
-import { vars as y } from "../skins/skin-contract.css-mistica.js";
-import N from "../box.js";
-import me from "../touchable.js";
+import { jsx as e, jsxs as t, Fragment as k } from "react/jsx-runtime";
+import * as X from "react";
+import { Boxed as Y } from "../boxed.js";
+import { sprinkles as b } from "../sprinkles.css-mistica.js";
+import z from "../stack.js";
+import { dataCard as $, touchableContainer as q, touchableCardOverlay as J, cardContentStyle as K, minHeight as Q, topActionsWithoutIcon as U, zindex as Z, paddingX as _, touchableArea as ee, divider as re, actions as te, actionsVariants as ae, marginRightButton as ie, buttonMobile as j, footerDirection as oe, marginRightAuto as se, footerText as ne, adjustButtonLink as de, button as ce, vars as le } from "./advanced-data-card.css-mistica.js";
+import { vars as me } from "../image.css-mistica.js";
+import H from "../divider.js";
+import { Text2 as v, Text as he } from "../text.js";
+import { vars as N } from "../skins/skin-contract.css-mistica.js";
+import y from "../box.js";
+import pe from "../touchable.js";
 import h from "classnames";
-import { CardActionsGroup as he, TOP_ACTION_BUTTON_SIZE as pe } from "../card.js";
-import { useTheme as ue } from "../hooks.js";
-import { getPrefixedDataAttributes as ge } from "../utils/dom.js";
-import fe from "../inline.js";
-import { applyCssVars as ve } from "../utils/css.js";
-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, [
+import { CardActionsGroup as ue } from "../card.js";
+import { useTheme as ge } from "../hooks.js";
+import { getPrefixedDataAttributes as fe } from "../utils/dom.js";
+import ve from "../inline.js";
+import { applyCssVars as P } from "../utils/css.js";
+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",
@@ -111,40 +111,40 @@ const ye = (_param)=>{
         "descriptionLinesMax",
         "ariaLabel"
     ]);
-    const { textPresets: T } = ue();
-    return /* @__PURE__ */ t(j, {
+    const { textPresets: C } = ge();
+    return /* @__PURE__ */ t(z, {
         space: 4,
         children: [
             a,
-            /* @__PURE__ */ e(me, _object_spread_props(_object_spread({
+            /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({
                 tabIndex: 0,
                 maybe: !0,
-                className: h($)
+                className: h(ee)
             }, s), {
                 "aria-label": x,
-                children: /* @__PURE__ */ e(P, {})
+                children: /* @__PURE__ */ e(k, {})
             })),
             i && /* @__PURE__ */ e(v, {
-                color: y.colors.textPrimary,
+                color: N.colors.textPrimary,
                 truncate: p,
                 as: n,
                 regular: !0,
                 hyphens: "auto",
                 children: i
             }),
-            /* @__PURE__ */ e(ce, {
+            /* @__PURE__ */ e(he, {
                 mobileSize: 18,
                 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
             }),
             /* @__PURE__ */ e(v, {
-                color: y.colors.textPrimary,
+                color: N.colors.textPrimary,
                 truncate: o,
                 as: "p",
                 regular: !0,
@@ -155,42 +155,42 @@ const ye = (_param)=>{
                 truncate: u,
                 as: "p",
                 regular: !0,
-                color: y.colors.textSecondary,
+                color: N.colors.textSecondary,
                 hyphens: "auto",
                 children: r
             })
         ]
     });
-}, 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" : "";
-    return /* @__PURE__ */ t(P, {
+    const c = !!a, l = !!i, m = !!n, o = !!d, r = c && (l || m) && o, u = o && !r ? "178px" : "";
+    return /* @__PURE__ */ t(k, {
         children: [
             /* @__PURE__ */ e("div", {
-                className: ee,
-                children: /* @__PURE__ */ e(k, {})
+                className: re,
+                children: /* @__PURE__ */ e(H, {})
             }),
             /* @__PURE__ */ t("div", {
-                className: h(re, te[r ? "mobile" : "default"]),
+                className: h(te, ae[r ? "mobile" : "default"]),
                 children: [
-                    l && /* @__PURE__ */ e("div", {
-                        className: h(ae, O),
+                    c && /* @__PURE__ */ e("div", {
+                        className: h(ie, j),
                         children: a
                     }),
                     /* @__PURE__ */ t("div", {
-                        className: h(ie, r ? oe : C({
+                        className: h(oe, r ? se : b({
                             paddingTop: 16
                         })),
                         children: [
-                            c && /* @__PURE__ */ e(N, {
+                            l && /* @__PURE__ */ e(y, {
                                 paddingRight: 16,
-                                className: C({
+                                className: b({
                                     alignItems: "center",
                                     display: "flex"
                                 }),
                                 children: /* @__PURE__ */ e("div", {
-                                    style: ve({
-                                        [le.mediaBorderRadius]: y.borderRadii.mediaSmall
+                                    style: P({
+                                        [me.mediaBorderRadius]: N.borderRadii.mediaSmall
                                     }),
                                     children: i
                                 })
@@ -199,7 +199,7 @@ const ye = (_param)=>{
                                 style: {
                                     maxWidth: u
                                 },
-                                className: se,
+                                className: ne,
                                 children: /* @__PURE__ */ e(v, {
                                     truncate: p,
                                     regular: !0,
@@ -209,15 +209,15 @@ const ye = (_param)=>{
                         ]
                     }),
                     o && /* @__PURE__ */ e("div", {
-                        className: h(ne, r ? de : O),
+                        className: h(de, r ? ce : j),
                         children: d
                     })
                 ]
             })
         ]
     });
-}, xe = /*#__PURE__*/ M.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__*/ X.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",
@@ -242,52 +242,48 @@ 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: pe * W
-    };
+    }, w = !!A || !!T || !!B || !!R, F = !!(s != null && s.length), M = ((g == null ? void 0 : g.length) || 0) + (D ? 1 : 0);
     return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
-        className: C({
+        className: b({
             position: "relative",
             height: "100%"
         })
-    }, ge(H, "AdvancedDataCard")), {
-        ref: _,
+    }, fe(W, "AdvancedDataCard")), {
+        ref: E,
         "aria-label": S,
-        children: /* @__PURE__ */ t(U, {
-            className: X,
+        children: /* @__PURE__ */ t(Y, {
+            className: $,
             children: [
                 /* @__PURE__ */ t("div", {
-                    className: Y,
+                    className: q,
                     children: [
-                        E && /* @__PURE__ */ e("div", {
-                            className: Z
+                        G && /* @__PURE__ */ e("div", {
+                            className: J
                         }),
                         /* @__PURE__ */ e("div", {
-                            className: h(q, !D && !I ? J : ""),
-                            children: /* @__PURE__ */ e(N, {
+                            className: h(K, !w && !F ? Q : ""),
+                            children: /* @__PURE__ */ e(y, {
                                 paddingTop: 8,
-                                children: /* @__PURE__ */ t(fe, {
+                                children: /* @__PURE__ */ t(ve, {
                                     space: 0,
                                     children: [
-                                        /* @__PURE__ */ t(j, {
+                                        /* @__PURE__ */ t(z, {
                                             space: 8,
                                             children: [
                                                 a,
-                                                /* @__PURE__ */ e(ye, _object_spread({
+                                                /* @__PURE__ */ e(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,
@@ -298,7 +294,10 @@ const ye = (_param)=>{
                                             ]
                                         }),
                                         !a && /* @__PURE__ */ e("div", {
-                                            style: G
+                                            style: P({
+                                                [le.topActionsCount]: String(M)
+                                            }),
+                                            className: U
                                         })
                                     ]
                                 })
@@ -309,34 +308,34 @@ const ye = (_param)=>{
                                 flexGrow: 1
                             }
                         }),
-                        I && /* @__PURE__ */ e(N, {
+                        F && /* @__PURE__ */ e(y, {
                             paddingTop: 16,
                             paddingBottom: 24,
                             width: "100%",
-                            className: K,
-                            children: s.map((L, F)=>/* @__PURE__ */ t("div", {
+                            className: Z,
+                            children: s.map((O, I)=>/* @__PURE__ */ t("div", {
                                     children: [
                                         /* @__PURE__ */ e("div", {
-                                            className: Q,
-                                            children: L
+                                            className: _,
+                                            children: O
                                         }),
-                                        F + 1 !== s.length && /* @__PURE__ */ e(N, {
-                                            paddingY: T,
-                                            children: /* @__PURE__ */ e(k, {})
+                                        I + 1 !== s.length && /* @__PURE__ */ e(y, {
+                                            paddingY: C,
+                                            children: /* @__PURE__ */ e(H, {})
                                         })
                                     ]
-                                }, F))
+                                }, I))
                         }),
-                        /* @__PURE__ */ e(he, {
+                        /* @__PURE__ */ e(ue, {
                             actions: g,
-                            onClose: w,
-                            padding: 7
+                            onClose: D,
+                            padding: 15
                         })
                     ]
                 }),
-                D && /* @__PURE__ */ e(Ne, _object_spread({}, V))
+                w && /* @__PURE__ */ e(ye, _object_spread({}, L))
             ]
         })
     }));
-}), _e = xe;
-export { xe as AdvancedDataCard, _e as default };
+}), We = xe;
+export { xe as AdvancedDataCard, We as default };

package/dist-es/counter.js

@@ -54,9 +54,9 @@ function _object_spread_props(target, source) {
 import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import * as V from "react";
 import { getPrefixedDataAttributes as L } from "./utils/dom.js";
-import { counter as R, disabled as g, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
+import { counter as R, disabled as b, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
 import { useThemeVariant as _, ThemeVariant as q } from "./theme-variant-context.js";
-import { vars as c } from "./skins/skin-contract.css-mistica.js";
+import { vars as n } from "./skins/skin-contract.css-mistica.js";
 import w from "./inline.js";
 import { Text3 as F } from "./text.js";
 import { BaseTouchable as P } from "./touchable.js";
@@ -64,46 +64,46 @@ import G from "./generated/mistica-icons/icon-subtract-regular.js";
 import H from "./generated/mistica-icons/icon-add-more-regular.js";
 import J from "./generated/mistica-icons/icon-trash-can-regular.js";
 import { useTheme as K } from "./hooks.js";
-import N from "classnames";
+import g from "classnames";
 import U from "./screen-reader-only.js";
 const x = 20, W = (param)=>{
-    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, f = V.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 = V.useCallback((c)=>c === void 0 ? m : Math.max(m, Math.min(s, c)), [
         m,
         s
-    ]), [e, p] = V.useState(f(b)), v = (n)=>{
-        i || p(n), a == null || a(n);
+    ]), [e, p] = V.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 = _(), { texts: u } = K(), 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__ */ r("div", _object_spread_props(_object_spread({
-        className: N(R, {
-            [g]: e
+        className: g(R, {
+            [b]: e
         })
     }, L(f, "Counter")), {
         style: {
-            border: `1px solid ${A === "inverse" ? c.colors.backgroundContainer : c.colors.border}`
+            border: `1px solid ${A === "inverse" ? n.colors.backgroundContainer : n.colors.border}`
         },
         children: /* @__PURE__ */ I(w, {
             space: 8,
             alignItems: "center",
             children: [
                 /* @__PURE__ */ r("div", {
-                    className: N(B, {
+                    className: g(B, {
                         [j]: o,
                         [M]: e || !o && t === l,
-                        [g]: !e && !o && t === l
+                        [b]: !e && !o && t === l
                     }),
                     children: /* @__PURE__ */ I(P, {
                         className: y,
@@ -119,7 +119,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": o,
                                 children: /* @__PURE__ */ r(G, {
                                     size: x,
-                                    color: t === l && !o || e ? c.colors.control : c.colors.controlActivated
+                                    color: t === l && !o || e ? n.colors.control : n.colors.controlActivated
                                 })
                             }),
                             /* @__PURE__ */ r("div", {
@@ -127,7 +127,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": !o,
                                 children: /* @__PURE__ */ r(J, {
                                     size: x,
-                                    color: c.colors.controlError
+                                    color: n.colors.controlError
                                 })
                             })
                         ]
@@ -145,7 +145,7 @@ const x = 20, W = (param)=>{
                                 "aria-hidden": !0,
                                 children: /* @__PURE__ */ r(F, {
                                     regular: !0,
-                                    color: c.colors.textPrimary,
+                                    color: n.colors.textPrimary,
                                     children: t
                                 })
                             }),
@@ -158,9 +158,9 @@ const x = 20, W = (param)=>{
                     })
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: N(B, {
+                    className: g(B, {
                         [M]: e || t === d,
-                        [g]: !e && t === d
+                        [b]: !e && t === d
                     }),
                     children: /* @__PURE__ */ I(P, {
                         className: y,
@@ -175,7 +175,7 @@ const x = 20, W = (param)=>{
                                 className: Z,
                                 children: /* @__PURE__ */ r(H, {
                                     size: x,
-                                    color: t === d || e ? c.colors.control : c.colors.controlActivated
+                                    color: t === d || e ? n.colors.control : n.colors.controlActivated
                                 })
                             })
                         ]

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

@@ -93,7 +93,7 @@ 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 { iconSize as p } from "./text-field-base.css-mistica.js";
+import { iconSize as p } from "./icon-button.css-mistica.js";
 const Y = (r)=>{
     var t;
     const n = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
@@ -126,15 +126,15 @@ const Y = (r)=>{
         ref: H(r, m)
     }));
 }, v = (r)=>b(r) ? /* @__PURE__ */ o(_, {
-        size: p
+        size: p.default
     }) : x(r) ? /* @__PURE__ */ o(P, {
-        size: p
+        size: p.default
     }) : I(r) ? /* @__PURE__ */ o($, {
-        size: p
+        size: p.default
     }) : null, rr = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ o(w, {
-        size: p
+        size: p.default
     }),
     isAnimating: !1
 }, er = (r, param)=>{
@@ -179,7 +179,7 @@ const Y = (r)=>{
                 /* @__PURE__ */ o("div", {
                     className: Q,
                     children: /* @__PURE__ */ o(w, {
-                        size: p,
+                        size: p.default,
                         color: X.colors.neutralMedium
                     })
                 }),

package/dist-es/cvv-field.js

@@ -84,7 +84,7 @@ 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 "./icon-button.js";
+import { IconButton as N } from "./icon-button.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";

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

@@ -1,5 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./date-field.css.ts.vanilla.css-mistica.js";
-var i = "_1pntndu0";
-export { i as iconContainer };
+var p = "_1pntndu0";
+export { p as iconContainer };

package/dist-es/date-field.js

@@ -89,7 +89,7 @@ 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 "./text-field-base.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, [
         "disabled",
@@ -107,7 +107,7 @@ 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)), p = z({
+    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,
@@ -122,23 +122,23 @@ const E = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         onChangeValue: (e, m)=>{
             a(e) && (n == null || n(e, m));
         }
-    }), l = /* @__PURE__ */ t(O, _object_spread_props(_object_spread({}, u, p), {
+    }), p = /* @__PURE__ */ t(O, _object_spread_props(_object_spread({}, u, l), {
         min: i ? r(i) : void 0,
         max: o ? r(o) : void 0,
         type: "date",
         endIconOverlay: /* @__PURE__ */ t("div", {
             className: B,
             children: /* @__PURE__ */ t(N, {
-                size: C
+                size: C.default
             })
         }),
         dataAttributes: _object_spread({
             "component-name": "DateField"
         }, d)
     }));
-    return h || A() ? l : /* @__PURE__ */ t(c.Suspense, {
-        fallback: l,
-        children: /* @__PURE__ */ t(E, _object_spread_props(_object_spread({}, u, p), {
+    return h || A() ? p : /* @__PURE__ */ t(c.Suspense, {
+        fallback: p,
+        children: /* @__PURE__ */ t(E, _object_spread_props(_object_spread({}, u, l), {
             optional: f,
             isValidDate: (e)=>a(r(e.toDate())),
             dataAttributes: _object_spread({

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

@@ -88,10 +88,10 @@ 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 { useTheme as N } from "./hooks.js";
-import { iconSize as V } from "./text-field-base.css-mistica.js";
-import { iconContainer as j } from "./date-field.css-mistica.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: 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.
@@ -111,7 +111,7 @@ 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(), a = (e)=>{
+    const d = c.useMemo(()=>A() ? !1 : O("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v } = N(), m = (e)=>{
         const t = p(e);
         return !(o && t && t < i(o) || s && t && t > i(s));
     }, D = x({
@@ -124,19 +124,19 @@ const B = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         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__ */ r(z, _object_spread_props(_object_spread({}, u, D), {
         min: o ? i(o) : void 0,
         max: s ? i(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ r("div", {
-            className: j,
+            className: V,
             children: /* @__PURE__ */ r(w, {
-                size: V
+                size: j.default
             })
         }),
         dataAttributes: _object_spread({
@@ -148,7 +148,7 @@ const B = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         children: /* @__PURE__ */ r(B, _object_spread_props(_object_spread({}, u, D), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>a(i(e.toDate())),
+            isValidDate: (e)=>m(i(e.toDate())),
             dataAttributes: _object_spread({
                 "component-name": "DateTimeField"
             }, l)