@telefonica/mistica 16.3.0 → 16.4.0

package/dist-es/date-field.js

@@ -92,7 +92,7 @@ import { iconContainer as C } from "./date-field.css-mistica.js";
 import { iconSize as L } from "./icon-button.css-mistica.js";
 import { formDateOutOfRangeError as M } from "./text-tokens.js";
 const V = /*#__PURE__*/ f.lazy(()=>import(/* 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, [
+    var { disabled: D, error: F, helperText: g, name: R, label: S, optional: c, validate: s, onChange: I, onChangeValue: n, onBlur: O, value: k, defaultValue: y, min: i, max: o, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -109,43 +109,46 @@ const V = /*#__PURE__*/ f.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const T = (e)=>e, h = f.useMemo(()=>B() ? !1 : E("date"), []), { texts: x, t: z } = v(), a = (e)=>!(o && e && e < r(o) || i && e && e > r(i)), p = b({
+    const T = (e)=>e, h = f.useMemo(()=>B() ? !1 : E("date"), []), { texts: x, t: z } = v(), a = (e)=>!(i && e && e < r(i) || o && e && e > r(o)), l = b({
         name: R,
         label: S,
-        value: y,
-        defaultValue: I,
+        value: k,
+        defaultValue: y,
         processValue: T,
-        helperText: F,
+        helperText: g,
         optional: c,
-        error: g,
+        error: F,
         disabled: D,
-        onBlur: k,
-        validate: (e, m)=>a(e) ? n == null ? void 0 : n(e, m) : x.formDateOutOfRangeError || z(M),
-        onChange: O,
+        onBlur: O,
+        validate: (e, m)=>a(e) ? s == null ? void 0 : s(e, m) : x.formDateOutOfRangeError || z(M),
+        onChange: I,
         onChangeValue: (e, m)=>{
-            a(e) && (s == null || s(e, m));
+            a(e) && (n == null || n(e, m));
         }
-    }), l = /* @__PURE__ */ t(A, _object_spread_props(_object_spread({}, u, p), {
-        min: o ? r(o) : void 0,
-        max: i ? r(i) : void 0,
+    }), p = /* @__PURE__ */ t(A, _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: C,
+            "data-testid": "endIcon",
             children: /* @__PURE__ */ t(j, {
                 size: L.default
             })
         }),
         dataAttributes: _object_spread({
-            "component-name": "DateField"
+            "component-name": "DateField",
+            testid: "DateField"
         }, d)
     }));
-    return h || N() ? l : /* @__PURE__ */ t(f.Suspense, {
-        fallback: l,
-        children: /* @__PURE__ */ t(V, _object_spread_props(_object_spread({}, u, p), {
+    return h || N() ? p : /* @__PURE__ */ t(f.Suspense, {
+        fallback: p,
+        children: /* @__PURE__ */ t(V, _object_spread_props(_object_spread({}, u, l), {
             optional: c,
             isValidDate: (e)=>a(r(e.toDate())),
             dataAttributes: _object_spread({
-                "component-name": "DateField"
+                "component-name": "DateField",
+                testid: "DateField"
             }, d)
         }))
     });

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

@@ -84,7 +84,7 @@ import { useFieldProps as z } from "./form-context.js";
 import { TextFieldBaseAutosuggest as b } from "./text-field-base.js";
 import { isInputTypeSupported as w } from "./utils/dom.js";
 import { isServerSide as A } from "./utils/environment.js";
-import { getLocalDateTimeString as o } from "./utils/time.js";
+import { getLocalDateTimeString as i } from "./utils/time.js";
 import E from "./generated/mistica-icons/icon-calendar-regular.js";
 import { isFirefox as N } from "./utils/platform.js";
 import { useTheme as V } from "./hooks.js";
@@ -92,11 +92,11 @@ import { iconContainer as j } from "./date-field.css-mistica.js";
 import { iconSize as B } from "./icon-button.css-mistica.js";
 import { formDateOutOfRangeError as C } from "./text-tokens.js";
 const L = /*#__PURE__*/ c.lazy(()=>import(/* 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, /**
+    var { disabled: F, error: g, helperText: R, name: S, label: I, optional: f, validate: a, onChange: O, onChangeValue: m, onBlur: h, value: k, defaultValue: y, 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"), dataAttributes: l } = _param, u = _object_without_properties(_param, [
+   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59"), dataAttributes: d } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -113,48 +113,51 @@ const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const d = c.useMemo(()=>N() ? !1 : w("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v, t: x } = V(), a = (e)=>{
+    const u = c.useMemo(()=>N() ? !1 : w("datetime-local"), []), p = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v, t: x } = V(), n = (e)=>{
         const t = p(e);
-        return !(i && t && t < o(i) || s && t && t > o(s));
+        return !(o && t && t < i(o) || s && t && t > i(s));
     }, D = z({
         name: S,
-        label: O,
-        value: y,
-        defaultValue: I,
+        label: I,
+        value: k,
+        defaultValue: y,
         processValue: p,
         helperText: R,
         optional: f,
         error: g,
         disabled: F,
-        onBlur: k,
-        validate: (e, t)=>a(e) ? m == null ? void 0 : m(e, t) : v.formDateOutOfRangeError || x(C),
-        onChange: h,
+        onBlur: h,
+        validate: (e, t)=>n(e) ? a == null ? void 0 : a(e, t) : v.formDateOutOfRangeError || x(C),
+        onChange: O,
         onChangeValue: (e, t)=>{
-            a(e) && (n == null || n(e, t));
+            n(e) && (m == null || m(e, t));
         }
-    }), T = /* @__PURE__ */ r(b, _object_spread_props(_object_spread({}, u, D), {
-        min: i ? o(i) : void 0,
-        max: s ? o(s) : void 0,
+    }), T = /* @__PURE__ */ r(b, _object_spread_props(_object_spread({}, l, D), {
+        min: o ? i(o) : void 0,
+        max: s ? i(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ r("div", {
             className: j,
+            "data-testid": "endIcon",
             children: /* @__PURE__ */ r(E, {
                 size: B.default
             })
         }),
         dataAttributes: _object_spread({
-            "component-name": "DateTimeField"
-        }, l)
+            "component-name": "DateTimeField",
+            testid: "DateTimeField"
+        }, d)
     }));
-    return d || A() ? T : /* @__PURE__ */ r(c.Suspense, {
+    return u || A() ? T : /* @__PURE__ */ r(c.Suspense, {
         fallback: T,
-        children: /* @__PURE__ */ r(L, _object_spread_props(_object_spread({}, u, D), {
+        children: /* @__PURE__ */ r(L, _object_spread_props(_object_spread({}, l, D), {
             optional: f,
             withTime: !0,
-            isValidDate: (e)=>a(o(e.toDate())),
+            isValidDate: (e)=>n(i(e.toDate())),
             dataAttributes: _object_spread({
-                "component-name": "DateTimeField"
-            }, l)
+                "component-name": "DateTimeField",
+                testid: "DateTimeField"
+            }, d)
         }))
     });
 }, ee = M;

package/dist-es/decimal-field.js

@@ -78,12 +78,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as y } from "react/jsx-runtime";
-import * as S from "react";
-import { useFieldProps as D } from "./form-context.js";
-import { useTheme as V } from "./hooks.js";
-import { TextFieldBaseAutosuggest as x } from "./text-field-base.js";
-import { createChangeEvent as F } from "./utils/dom.js";
+import { jsx as S } from "react/jsx-runtime";
+import * as D from "react";
+import { useFieldProps as C } from "./form-context.js";
+import { useTheme as F } from "./hooks.js";
+import { TextFieldBaseAutosuggest as V } from "./text-field-base.js";
+import { createChangeEvent as x } from "./utils/dom.js";
 import { useRifm as P } from "rifm";
 import { combineRefs as R } from "./utils/common.js";
 const b = (n)=>{
@@ -93,37 +93,37 @@ const b = (n)=>{
         return ".";
     }
 }, v = (n, t)=>{
-    const c = String(n !== null && n !== void 0 ? n : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(c), r = c.split(/[.,]/);
+    const i = String(n !== null && n !== void 0 ? n : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(i), r = i.split(/[.,]/);
     return r.length === 0 ? "" : e && t > 0 ? r.shift() + e[0] + r.join("").slice(0, t) : r[0];
 }, j = (_param)=>{
-    var { inputRef: n, value: t, defaultValue: c, onChange: e, maxDecimals: r } = _param, l = _object_without_properties(_param, [
+    var { inputRef: n, value: t, defaultValue: i, onChange: e, maxDecimals: r } = _param, l = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "maxDecimals"
     ]);
-    const { i18n: a } = V(), u = b(a.locale), p = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, u), [m, f] = S.useState(c !== null && c !== void 0 ? c : ""), s = S.useRef(null), i = typeof t < "u", d = i ? t : m, g = S.useCallback((o)=>{
-        i || f(o), s.current && (e == null || e(F(s.current, o)));
+    const { i18n: a } = F(), u = b(a.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, u), [p, f] = D.useState(i !== null && i !== void 0 ? i : ""), c = D.useRef(null), s = typeof t < "u", d = s ? t : p, g = D.useCallback((o)=>{
+        s || f(o), c.current && (e == null || e(x(c.current, o)));
     }, [
-        i,
+        s,
         e
     ]), h = P({
         format: (o)=>v(o, r),
-        replace: p,
+        replace: m,
         value: d,
         onChange: g,
         accept: /[\d.,]+/g
     });
-    return /* @__PURE__ */ y("input", _object_spread_props(_object_spread({}, l), {
+    return /* @__PURE__ */ S("input", _object_spread_props(_object_spread({}, l), {
         type: "text",
         inputMode: "decimal",
         value: h.value,
         onChange: h.onChange,
-        ref: R(n, s)
+        ref: R(n, c)
     }));
 }, A = (_param)=>{
-    var { disabled: n, error: t, helperText: c, name: e, label: r, optional: l, validate: a, onChange: u, onChangeValue: p, onBlur: m, value: f, defaultValue: s, maxDecimals: i = 1 / 0, dataAttributes: d } = _param, g = _object_without_properties(_param, [
+    var { disabled: n, error: t, helperText: i, name: e, label: r, optional: l, validate: a, onChange: u, onChangeValue: m, onBlur: p, value: f, defaultValue: c, maxDecimals: s = 1 / 0, dataAttributes: d } = _param, g = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -139,28 +139,29 @@ const b = (n)=>{
         "maxDecimals",
         "dataAttributes"
     ]);
-    const o = D({
+    const o = C({
         name: e,
         label: r,
         value: f,
-        defaultValue: s,
-        processValue: (C)=>C.trim(),
-        helperText: c,
+        defaultValue: c,
+        processValue: (y)=>y.trim(),
+        helperText: i,
         optional: l,
         error: t,
         disabled: n,
-        onBlur: m,
+        onBlur: p,
         validate: a,
         onChange: u,
-        onChangeValue: p
+        onChangeValue: m
     });
-    return /* @__PURE__ */ y(x, _object_spread_props(_object_spread({}, g, o), {
+    return /* @__PURE__ */ S(V, _object_spread_props(_object_spread({}, g, o), {
         inputComponent: j,
         inputProps: {
-            maxDecimals: i
+            maxDecimals: s
         },
         dataAttributes: _object_spread({
-            "component-name": "DecimalField"
+            "component-name": "DecimalField",
+            testid: "DecimalField"
         }, d)
     }));
 }, M = A;

package/dist-es/dialog.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var _ = 200, y = "_3dl29lb", f = "_3dl29l6", l = "_3dl29ll _1y2v1nf7y", a = "_3dl29lj _1y2v1nfi6 _1y2v1nfjk", r = "_3dl29lm", d = "_3dl29l8 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhf _1y2v1nfkr _1y2v1nfll", o = "_3dl29la _1y2v1nf3p _1y2v1nfkb", t = "_3dl29l5 _1y2v1nfhg _1y2v1nfhk _1y2v1nfht _1y2v1nfhz _1y2v1nfhq _1y2v1nfkr _1y2v1nfll _1y2v1nfm0 _1y2v1nfl6 _1y2v1nf41", e = {
-    dialog: "_3dl29ld _1y2v1nfhk _1y2v1nfhq _1y2v1nfhw _1y2v1nfag _1y2v1nfbp _1y2v1nf84 _1y2v1nf97",
-    default: "_3dl29ld _1y2v1nfhk _1y2v1nfhq _1y2v1nfhw _1y2v1nf7y _1y2v1nf97 _1y2v1nfag _1y2v1nfbp"
-}, h = "_1y2v1nfhe";
-export { _ as ANIMATION_DURATION_MS, y as closedModalContent, f as closedOpactityLayer, l as dialogActions, a as dialogContent, r as iconContainer, d as modalCloseButtonContainer, o as modalContent, t as modalOpacityLayer, e as variants, h as wrapper };
+var _ = 200, y = "_3dl29lb", f = "_3dl29l6", l = "_3dl29ll _1y2v1nf82", a = "_3dl29lj _1y2v1nfia _1y2v1nfjo", o = "_3dl29lm", d = "_3dl29l8 _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", r = "_3dl29la _1y2v1nf3r _1y2v1nfkf", t = "_3dl29l5 _1y2v1nfhk _1y2v1nfho _1y2v1nfhx _1y2v1nfi3 _1y2v1nfhu _1y2v1nfkv _1y2v1nflp _1y2v1nfm4 _1y2v1nfla _1y2v1nf43", i = {
+    dialog: "_3dl29ld _1y2v1nfho _1y2v1nfhu _1y2v1nfi0 _1y2v1nfak _1y2v1nfbt _1y2v1nf88 _1y2v1nf9b",
+    default: "_3dl29ld _1y2v1nfho _1y2v1nfhu _1y2v1nfi0 _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt"
+}, e = "_1y2v1nfhi";
+export { _ as ANIMATION_DURATION_MS, y as closedModalContent, f as closedOpactityLayer, l as dialogActions, a as dialogContent, o as iconContainer, d as modalCloseButtonContainer, r as modalContent, t as modalOpacityLayer, i as variants, e as wrapper };

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

@@ -4,7 +4,7 @@ import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
 import "./double-field.css.ts.vanilla.css-mistica.js";
 var v = {
-    default: "skrulh1 _1y2v1nfhk _1y2v1nfhp _1y2v1nfi7",
-    fullWidth: "skrulh2 _1y2v1nfhk _1y2v1nfhp _1y2v1nfi7"
+    default: "skrulh1 _1y2v1nfho _1y2v1nfht _1y2v1nfib",
+    fullWidth: "skrulh2 _1y2v1nfho _1y2v1nfht _1y2v1nfib"
 };
 export { v as variants };

package/dist-es/email-field.js

@@ -84,7 +84,7 @@ import { useTheme as V } from "./hooks.js";
 import { TextFieldBaseAutosuggest as $ } from "./text-field-base.js";
 import { formEmailError as b } from "./text-tokens.js";
 const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
-    var { disabled: r, error: o, helperText: s, name: m, label: i, optional: l, validate: e, onChange: n, onChangeValue: a, onBlur: u, value: c, autoComplete: f = "email", defaultValue: p, dataAttributes: E } = _param, d = _object_without_properties(_param, [
+    var { disabled: r, error: s, helperText: o, name: i, label: m, optional: l, validate: e, onChange: a, onChangeValue: n, onBlur: u, value: c, autoComplete: d = "email", defaultValue: f, dataAttributes: E } = _param, p = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -101,26 +101,27 @@ const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
         "dataAttributes"
     ]);
     const { texts: F, t: x } = V(), A = T({
-        name: m,
-        label: i,
+        name: i,
+        label: m,
         value: c,
-        defaultValue: p,
+        defaultValue: f,
         processValue: (t)=>t.trim(),
-        helperText: s,
+        helperText: o,
         optional: l,
-        error: o,
+        error: s,
         disabled: r,
         onBlur: u,
         validate: (t, g)=>h.test(t !== null && t !== void 0 ? t : "") ? e == null ? void 0 : e(t, g) : F.formEmailError || x(b),
-        onChange: n,
-        onChangeValue: a
+        onChange: a,
+        onChangeValue: n
     });
-    return /* @__PURE__ */ M($, _object_spread_props(_object_spread({}, d, A), {
+    return /* @__PURE__ */ M($, _object_spread_props(_object_spread({}, p, A), {
         type: "email",
         inputMode: "email",
-        autoComplete: f,
+        autoComplete: d,
         dataAttributes: _object_spread({
-            "component-name": "EmailField"
+            "component-name": "EmailField",
+            testid: "EmailField"
         }, E)
     }));
 }, q = j;

package/dist-es/empty-state-card.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./empty-state-card.css.ts.vanilla.css-mistica.js";
-var n = "_1azor6p4 _1y2v1nfij _1y2v1nfiz", o = "_1azor6p0", i = "_1azor6p2 _1y2v1nfhm _1y2v1nfj1";
-export { n as assetContainer, o as container, i as image };
+var n = "_1azor6p4 _1y2v1nfin _1y2v1nfj3", o = "_1azor6p0", v = "_1azor6p2 _1y2v1nfhq _1y2v1nfj5";
+export { n as assetContainer, o as container, v as image };

package/dist-es/empty-state.css-mistica.js

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./empty-state.css.ts.vanilla.css-mistica.js";
-var v = "_13fzrua9 _1y2v1nfil _1y2v1nfj1", e = "_1y2v1nfk1", n = "_13fzrua2 _1y2v1nfhk _1y2v1nf7c", f = {
+var v = "_13fzrua9 _1y2v1nfip _1y2v1nfj5", e = "_1y2v1nfk5", n = "_13fzrua2 _1y2v1nfho _1y2v1nf7g", f = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, _ = "_13fzruad", o = "_13fzrua7 _1y2v1nfio", t = "_13fzrua5", u = "_13fzruab _1y2v1nfhm", i = {
+}, _ = "_13fzruad", o = "_13fzrua7 _1y2v1nfis", t = "_13fzrua5", u = "_13fzruab _1y2v1nfhq", g = {
     backgroundColor: "var(--_13fzrua0)"
 };
-export { v as assetContainer, e as border, n as container, f as contentVariants, _ as inverseBorder, o as largeImage, t as largeImageContainer, u as smallImage, i as vars };
+export { v as assetContainer, e as border, n as container, f as contentVariants, _ as inverseBorder, o as largeImage, t as largeImageContainer, u as smallImage, g as vars };

package/dist-es/feedback.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./feedback.css.ts.vanilla.css-mistica.js";
-var r = "_1y2v1nfij _1y2v1nfiz", n = "gx6h6af", t = "gx6h6a4 _1y2v1nfhk _1y2v1nfio _1y2v1nfi7 _1y2v1nfhq", v = "gx6h6a0", x = "gx6h6a1", h = "gx6h6a2", g = "gx6h6ae", o = "gx6h6ab gx6h6aa", i = "gx6h6ac gx6h6aa", p = "gx6h6ad gx6h6aa", d = "gx6h6a5", f = "gx6h6a6";
+var r = "_1y2v1nfin _1y2v1nfj3", n = "gx6h6af", t = "gx6h6a4 _1y2v1nfho _1y2v1nfis _1y2v1nfib _1y2v1nfhu", v = "gx6h6a0", x = "gx6h6a1", h = "gx6h6a2", g = "gx6h6ae", o = "gx6h6ab gx6h6aa", i = "gx6h6ac gx6h6aa", p = "gx6h6ad gx6h6aa", d = "gx6h6a5", f = "gx6h6a6";
 export { r as assetContainer, n as backgroundBrand, t as container, v as desktopContainer, x as desktopContent, h as desktopImage, g as feedbackData, o as feedbackTextAppearFast, i as feedbackTextAppearMedium, p as feedbackTextAppearSlow, d as innerContainer, f as innerContainerWithButtons };