@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/chip.js

@@ -11,69 +11,112 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-import h from "classnames";
-import { useTheme as g } from "./hooks.js";
-import o from "./box.js";
-import { Text2 as p } from "./text.js";
-import v from "./icon-button.js";
-import x from "./generated/mistica-icons/icon-close-regular.js";
-import { pxToRem as C } from "./utils/css.js";
-import { iconActive as I, icon as y, chipVariants as c, chipInteractiveVariants as R } from "./chip.css-mistica.js";
-import { jsxs as a, Fragment as b, jsx as e } from "./_virtual/jsx-runtime.js";
-var A = function(t) {
-    var ref = g(), l = ref.texts, s = ref.isDarkMode, m = ref.colors, i = t.Icon, d = t.children, f = t.id, r = /* @__PURE__ */ a(b, {
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import x from "classnames";
+import { useTheme as C } from "./hooks.js";
+import r from "./box.js";
+import { Text2 as y } from "./text.js";
+import R from "./icon-button.js";
+import b from "./generated/mistica-icons/icon-close-regular.js";
+import { pxToRem as j } from "./utils/css.js";
+import { iconActive as v, icon as z, chipVariants as c, chipInteractiveVariants as B } from "./chip.css-mistica.js";
+import { getPrefixedDataAttributes as l } from "./utils/dom.js";
+import { jsxs as m, Fragment as I, jsx as e } from "./_virtual/jsx-runtime.js";
+var q = function(param) {
+    var t = param.Icon, d = param.children, p = param.id, i = param.dataAttributes, o = param.active, n = param.onClose;
+    var ref = C(), f = ref.texts, u = ref.isDarkMode, h = ref.colors, s = /* @__PURE__ */ m(I, {
         children: [
-            i && /* @__PURE__ */ e(o, {
+            t && /* @__PURE__ */ e(r, {
                 paddingRight: 4,
-                className: t.active ? I : y,
-                children: /* @__PURE__ */ e(i, {
+                className: o ? v : z,
+                children: /* @__PURE__ */ e(t, {
                     color: "currentColor",
-                    size: C(16)
+                    size: j(16)
                 })
             }),
-            /* @__PURE__ */ e(p, {
-                id: f,
+            /* @__PURE__ */ e(y, {
+                id: p,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
                 children: d
             })
         ]
-    }), n = i ? 8 : 12;
-    if (t.onClose) return /* @__PURE__ */ a(o, {
+    }), a = t ? 8 : 12;
+    if (n) return /* @__PURE__ */ m(r, _objectSpreadProps(_objectSpread({
         className: c.default,
-        paddingLeft: n,
+        paddingLeft: a
+    }, l(i, "Chip")), {
         children: [
-            r,
-            /* @__PURE__ */ e(o, {
+            s,
+            /* @__PURE__ */ e(r, {
                 paddingLeft: 4,
-                children: /* @__PURE__ */ e(v, {
+                children: /* @__PURE__ */ e(R, {
                     size: 24,
                     style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": l.closeButtonLabel,
+                    "aria-label": f.closeButtonLabel,
                     onPress: function() {
-                        return t.onClose();
+                        return n();
                     },
-                    children: /* @__PURE__ */ e(x, {
+                    children: /* @__PURE__ */ e(b, {
                         size: 16,
-                        color: m.neutralMedium
+                        color: h.neutralMedium
                     })
                 })
             })
         ]
-    });
+    }));
     {
-        var u = t.active !== void 0;
-        return /* @__PURE__ */ e(o, {
-            className: h(c[t.active ? "active" : "default"], _defineProperty({}, R[s ? "dark" : "light"], u)),
-            paddingLeft: n,
-            paddingRight: 12,
-            children: r
-        });
+        var g = o !== void 0;
+        return /* @__PURE__ */ e(r, _objectSpreadProps(_objectSpread({
+            className: x(c[o ? "active" : "default"], _defineProperty({}, B[u ? "dark" : "light"], g)),
+            paddingLeft: a,
+            paddingRight: 12
+        }, l(i, "Chip")), {
+            children: s
+        }));
     }
 };
-export { A as default };
+export { q as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./circle.css.ts.vanilla.js";
-var r = "_1wpwyyp1 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfba";
+var r = "_1wpwyyp1 _1y2v1nf4y _1y2v1nf5d _1y2v1nf57 _1y2v1nf8x";
 export { r as circle };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./credit-card-number-field.css.ts.vanilla.js";
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf77", f = {
-    default: "yvyo3q4 _1y2v1nf76 yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf76 yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf4u", f = {
+    default: "yvyo3q4 _1y2v1nf4t yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf4t yvyo3q6"
 };
 export { a as flip, o as flipBack, r as flipFront, f as variants };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./cvv-field.css.ts.vanilla.js";
-var v = "_10ijton2 _1y2v1nf1i", i = "_1y2v1nf7b _1y2v1nf7q";
+var v = "_10ijton2 _1y2v1nf1i", i = "_1y2v1nf4y _1y2v1nf5d";
 export { v as cvvText, i as tooltipContainer };

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

@@ -128,7 +128,7 @@ import { TextFieldBaseAutosuggest as M } from "./text-field-base.js";
 import R from "./generated/mistica-icons/icon-calendar-regular.js";
 import H from "react-datetime";
 import S from "./overlay.js";
-import { DEFAULT_WIDTH as I } from "./text-field-components.js";
+import { DEFAULT_WIDTH as I } from "./text-field-components.css-mistica.js";
 import g from "./icon-button.js";
 import { cancelEvent as B, createChangeEvent as E } from "./utils/dom.js";
 import { useTheme as F, useElementDimensions as L } from "./hooks.js";

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./dialog.css.ts.vanilla.js";
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf84", l = "_3dl29lj _1y2v1nf7x _1y2v1nfas", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf83 _1y2v1nf8h _1y2v1nf8v _1y2v1nf99 _1y2v1nf77 _1y2v1nfbj _1y2v1nfcb", o = "_3dl29la _1y2v1nf2f _1y2v1nfbd", r = "_3dl29l5 _1y2v1nf78 _1y2v1nf7b _1y2v1nf7k _1y2v1nf7q _1y2v1nf7h _1y2v1nfbj _1y2v1nfcb _1y2v1nfcp _1y2v1nfbx _1y2v1nf2i", t = {
-    dialog: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf8w _1y2v1nf9a _1y2v1nf86 _1y2v1nf8i",
-    default: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf84 _1y2v1nf8i _1y2v1nf8w _1y2v1nf9a"
-}, i = "_3dl29l3 _1y2v1nf76";
-export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, l as dialogContent, a as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, i as wrapper };
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf5r", l = "_3dl29lj _1y2v1nf5k _1y2v1nf8f", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf5q _1y2v1nf64 _1y2v1nf6i _1y2v1nf6w _1y2v1nf4u _1y2v1nf96 _1y2v1nf9y", r = "_3dl29la _1y2v1nf2f _1y2v1nf90", o = "_3dl29l5 _1y2v1nf4v _1y2v1nf4y _1y2v1nf57 _1y2v1nf5d _1y2v1nf54 _1y2v1nf96 _1y2v1nf9y _1y2v1nfac _1y2v1nf9k _1y2v1nf2i", t = {
+    dialog: "_3dl29ld _1y2v1nf4y _1y2v1nf54 _1y2v1nf5a _1y2v1nf6j _1y2v1nf6x _1y2v1nf5t _1y2v1nf65",
+    default: "_3dl29ld _1y2v1nf4y _1y2v1nf54 _1y2v1nf5a _1y2v1nf5r _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x"
+}, i = "_3dl29l3 _1y2v1nf4t";
+export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, l as dialogContent, a as iconContainer, d as modalCloseButtonContainer, r as modalContent, o as modalOpacityLayer, t as variants, i as wrapper };

package/dist-es/dialog.js

@@ -371,6 +371,7 @@ var A = function(e) {
                     onClick: B,
                     className: T($, _defineProperty({}, ee, a)),
                     role: "dialog",
+                    "data-component-name": "Dialog",
                     children: /* @__PURE__ */ o("div", {
                         onClick: function(h) {
                             return h.stopPropagation();

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

@@ -1,7 +1,8 @@
 import "./sprinkles.css.ts.vanilla.js";
+import "./text-field-components.css.ts.vanilla.js";
 import "./double-field.css.ts.vanilla.js";
-var n = {
-    default: "skrulh1 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9i",
-    fullWidth: "skrulh2 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9i"
+var y = {
+    default: "skrulh1 _1y2v1nf4y _1y2v1nf53 _1y2v1nf75",
+    fullWidth: "skrulh2 _1y2v1nf4y _1y2v1nf53 _1y2v1nf75"
 };
-export { n as variants };
+export { y as variants };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./empty-state-card.css.ts.vanilla.js";
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf9t _1y2v1nfa8", v = "_1azor6p2 _1y2v1nf7d _1y2v1nfaa";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf7g _1y2v1nf7v", v = "_1azor6p2 _1y2v1nf50 _1y2v1nf7x";
 export { n as container, o as iconContainer, v as image };

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

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./empty-state.css.ts.vanilla.js";
-var n = "_13fzrua2 _1y2v1nf7b _1y2v1nf74", v = {
+var n = "_13fzrua2 _1y2v1nf4y _1y2v1nf4s", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf9v _1y2v1nfaa", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf9y", o = "_13fzrua5", u = "_13fzruab _1y2v1nf7d", t = {
+}, e = "_13fzrua9 _1y2v1nf7i _1y2v1nf7x", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf7l", o = "_13fzrua5", u = "_13fzruab _1y2v1nf50", t = {
     backgroundColor: "var(--_13fzrua0)"
 };
 export { n as container, v as contentVariants, e as iconContainer, f as inverseBorder, _ as largeImage, o as largeImageContainer, u as smallImage, t as vars };

package/dist-es/empty-state.js

@@ -55,21 +55,21 @@ import k from "classnames";
 import { useIsInverseVariant as I } from "./theme-variant-context.js";
 import { ButtonPrimary as B } from "./button.js";
 import { useTheme as N } from "./hooks.js";
-import m from "./stack.js";
+import l from "./stack.js";
 import { Text6 as C, Text3 as S } from "./text.js";
-import T from "./button-group.js";
-import { container as V, inverseBorder as b, vars as j, contentVariants as c, iconContainer as A, largeImageContainer as D, largeImage as E, smallImage as P } from "./empty-state.css-mistica.js";
+import E from "./button-group.js";
+import { container as T, inverseBorder as V, vars as b, contentVariants as c, iconContainer as j, largeImageContainer as A, largeImage as D, smallImage as P } from "./empty-state.css-mistica.js";
 import { vars as d } from "./skins/skin-contract.css-mistica.js";
 import { AspectRatioElement as R } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
 import { sprinkles as G } from "./sprinkles.css-mistica.js";
-import { jsxs as i, jsx as r } from "./_virtual/jsx-runtime.js";
+import { jsxs as t, jsx as r } from "./_virtual/jsx-runtime.js";
 var Z = function(param) {
-    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, t = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
-    var ref = N(), l = ref.colors, u = ref.isDarkMode, o = I(), s = t ? /* @__PURE__ */ r("img", {
+    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, i = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
+    var ref = N(), m = ref.colors, u = ref.isDarkMode, o = I(), s = i ? /* @__PURE__ */ r("img", {
         className: P,
         alt: "",
-        src: t
+        src: i
     }) : void 0, y = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === B ? {
         primaryButton: e
     } : {
@@ -77,28 +77,28 @@ var Z = function(param) {
     }), {
         link: v
     });
-    return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
-        className: k(V, o ? b : G({
+    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
+        className: k(T, o ? V : G({
             border: "regular"
         })),
-        style: x(_defineProperty({}, j.backgroundColor, o && !u ? d.colors.backgroundBrand : d.colors.backgroundContainer)),
+        style: x(_defineProperty({}, b.backgroundColor, o && !u ? d.colors.backgroundBrand : d.colors.backgroundContainer)),
         "aria-label": g,
         role: "region"
-    }, $(h)), {
+    }, $(h, "EmptyState")), {
         children: [
             /* @__PURE__ */ r("div", {
                 style: {
                     flex: 1
                 },
-                children: /* @__PURE__ */ i(m, {
+                children: /* @__PURE__ */ t(l, {
                     space: 24,
                     className: a ? c.largeImage : c.default,
                     children: [
                         s != null ? s : n && /* @__PURE__ */ r("div", {
-                            className: A,
+                            className: j,
                             children: n
                         }),
-                        /* @__PURE__ */ i(m, {
+                        /* @__PURE__ */ t(l, {
                             space: 16,
                             children: [
                                 /* @__PURE__ */ r(C, {
@@ -108,12 +108,12 @@ var Z = function(param) {
                                 /* @__PURE__ */ r(S, {
                                     regular: !0,
                                     as: "p",
-                                    color: o ? l.inverse : l.textSecondary,
+                                    color: o ? m.inverse : m.textSecondary,
                                     children: f
                                 })
                             ]
                         }),
-                        e && /* @__PURE__ */ r(T, _objectSpread({}, y))
+                        e && /* @__PURE__ */ r(E, _objectSpread({}, y))
                     ]
                 })
             }),
@@ -124,10 +124,10 @@ var Z = function(param) {
                 },
                 children: a && /* @__PURE__ */ r(R, {
                     aspectRatio: 16 / 9,
-                    className: D,
+                    className: A,
                     height: "100%",
                     children: /* @__PURE__ */ r("div", {
-                        className: E,
+                        className: D,
                         style: {
                             backgroundImage: "url(".concat(a, ")")
                         }

package/dist-es/fade-in.js

@@ -1,9 +1,62 @@
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 import { wrapper as o } from "./fade-in.css-mistica.js";
-import { jsx as e } from "./_virtual/jsx-runtime.js";
-var r = "0.3s", l = function(param) {
-    var i = param.children, tmp = param.className, n = tmp === void 0 ? "" : tmp, tmp1 = param.duration, t = tmp1 === void 0 ? r : tmp1, tmp2 = param.delay, a = tmp2 === void 0 ? "0" : tmp2;
-    return /* @__PURE__ */ e("div", {
-        className: "".concat(o, " ").concat(n),
+import { getPrefixedDataAttributes as r } from "./utils/dom.js";
+import { jsx as m } from "./_virtual/jsx-runtime.js";
+var s = "0.3s", D = function(param) {
+    var i = param.children, tmp = param.className, e = tmp === void 0 ? "" : tmp, tmp1 = param.duration, t = tmp1 === void 0 ? s : tmp1, tmp2 = param.delay, a = tmp2 === void 0 ? "0" : tmp2, n = param.dataAttributes;
+    return /* @__PURE__ */ m("div", _objectSpreadProps(_objectSpread({}, r(n, "FadeIn")), {
+        className: "".concat(o, " ").concat(e),
         style: {
             animationDelay: a,
             WebkitAnimationDelay: a,
@@ -11,6 +64,6 @@ var r = "0.3s", l = function(param) {
             WebkitAnimationDuration: t
         },
         children: i
-    });
+    }));
 };
-export { l as default };
+export { D as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./feedback.css.ts.vanilla.js";
-var n = "gx6h6a3 _1y2v1nf7b _1y2v1nf9y _1y2v1nf9i", r = "_1y2v1nfbe _1y2v1nf7b _1y2v1nf7n", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf4y _1y2v1nf7l _1y2v1nf75", r = "_1y2v1nf91 _1y2v1nf4y _1y2v1nf5a", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
 export { n as container, r as desktopContainer, t as desktopContent, v as feedbackData, f as feedbackDataAppear, o as feedbackDataAppearActive, p as innerContainer };