@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/skeleton-base.js

@@ -1,39 +1,20 @@
-import { useIsInverseVariant as n } from "./theme-variant-context.js";
-import { createUseStyles as i } from "./jss.js";
-import l from "classnames";
-import { jsx as c } from "./_virtual/jsx-runtime.js";
-var d = i(function(param) {
-    var s = param.colors;
-    return {
-        skeletonBase: {
-            borderRadius: function(param) {
-                var e = param.radius;
-                return e;
-            },
-            height: function(param) {
-                var e = param.height;
-                return e;
-            },
-            width: function(param) {
-                var e = param.width;
-                return e;
-            },
-            background: function(param) {
-                var e = param.isInverse;
-                return e ? s.backgroundSkeletonInverse : s.backgroundSkeleton;
-            }
-        }
-    };
-}), f = function(param) {
-    var tmp = param.width, s = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, e = tmp1 === void 0 ? 8 : tmp1, tmp2 = param.radius, t = tmp2 === void 0 ? 8 : tmp2, r = param.className;
-    var o = n(), a = d({
-        isInverse: o,
-        width: s,
-        height: e,
-        radius: t
-    });
-    return /* @__PURE__ */ c("div", {
-        className: l(a.skeletonBase, r),
+import { useIsInverseVariant as t } from "./theme-variant-context.js";
+import i from "classnames";
+import { sprinkles as m } from "./sprinkles.css-mistica.js";
+import { vars as r } from "./skins/skin-contract.css-mistica.js";
+import { jsx as l } from "./_virtual/jsx-runtime.js";
+var f = function(param) {
+    var tmp = param.width, e = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, o = tmp1 === void 0 ? 8 : tmp1, tmp2 = param.radius, s = tmp2 === void 0 ? 8 : tmp2, a = param.className;
+    var n = t();
+    return /* @__PURE__ */ l("div", {
+        className: i(a, m({
+            background: n ? r.colors.backgroundSkeletonInverse : r.colors.backgroundSkeleton
+        })),
+        style: {
+            borderRadius: s,
+            width: e,
+            height: o
+        },
         "aria-hidden": !0
     });
 };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./skeletons.css.ts.vanilla.js";
-var o = "zopolw2 _1y2v1nf9i _1y2v1nf9y", r = "_1y2v1nf7t _1y2v1nf7v", y = "zopolw6 _1y2v1nf7u", f = "_1y2v1nf7b _1y2v1nf7q _1y2v1nf7k";
+var o = "zopolw2 _1y2v1nf75 _1y2v1nf7l", r = "_1y2v1nf5g _1y2v1nf5i", y = "zopolw6 _1y2v1nf5h", f = "_1y2v1nf4y _1y2v1nf5d _1y2v1nf57";
 export { o as animation, r as circle, y as line, f as row };

package/dist-es/skeletons.js

@@ -50,88 +50,98 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import n from "./skeleton-base.js";
+import o from "./skeleton-base.js";
 import c from "./stack.js";
-import { getPrefixedDataAttributes as o } from "./utils/dom.js";
-import { row as d, circle as m, line as h, animation as u } from "./skeletons.css-mistica.js";
-import { jsx as e, jsxs as l } from "./_virtual/jsx-runtime.js";
-var a = function(param) {
-    var r = param.children, t = param.ariaLabel, i = param.dataAttributes;
+import { getPrefixedDataAttributes as s } from "./utils/dom.js";
+import { row as m, circle as d, line as u, animation as h } from "./skeletons.css-mistica.js";
+import { jsx as e, jsxs as a } from "./_virtual/jsx-runtime.js";
+var i = function(param) {
+    var n = param.children, t = param.ariaLabel, r = param.dataAttributes;
     return /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({
-        className: u,
+        className: h,
         role: "status",
         "aria-busy": !0,
         "aria-hidden": t === void 0,
         "aria-label": t
-    }, o(i)), {
-        children: r
+    }, s(r)), {
+        children: n
     }));
-}, x = function(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, i = param.dataAttributes;
-    return /* @__PURE__ */ e(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: t
-    }, o(i)), {
-        children: /* @__PURE__ */ e(n, {
-            width: r
+}, f = function(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, r = param.dataAttributes;
+    return /* @__PURE__ */ e(i, {
+        ariaLabel: t,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonLine"
+        }, r),
+        children: /* @__PURE__ */ e(o, {
+            width: n
         })
-    }));
-}, g = function(param) {
-    var r = param.ariaLabel, t = param.dataAttributes;
-    return /* @__PURE__ */ e(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: r
-    }, o(t)), {
-        children: /* @__PURE__ */ l(c, {
+    });
+}, w = function(param) {
+    var n = param.ariaLabel, t = param.dataAttributes;
+    return /* @__PURE__ */ e(i, {
+        ariaLabel: n,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonText"
+        }, t),
+        children: /* @__PURE__ */ a(c, {
             space: 16,
             children: [
-                /* @__PURE__ */ e(n, {}),
-                /* @__PURE__ */ e(n, {}),
-                /* @__PURE__ */ e(n, {
+                /* @__PURE__ */ e(o, {}),
+                /* @__PURE__ */ e(o, {}),
+                /* @__PURE__ */ e(o, {
                     width: "75%"
                 })
             ]
         })
-    }));
-}, N = function(param) {
-    var r = param.ariaLabel, tmp = param.size, t = tmp === void 0 ? 40 : tmp, i = param.dataAttributes;
-    return /* @__PURE__ */ e(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: r
-    }, o(i)), {
-        children: /* @__PURE__ */ e(n, {
+    });
+}, x = function(param) {
+    var n = param.ariaLabel, tmp = param.size, t = tmp === void 0 ? 40 : tmp, r = param.dataAttributes;
+    return /* @__PURE__ */ e(i, {
+        ariaLabel: n,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonCircle"
+        }, r),
+        children: /* @__PURE__ */ e(o, {
             height: t,
             width: t,
             radius: "50%"
         })
-    }));
-}, v = function(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, i = param.dataAttributes;
-    return /* @__PURE__ */ e(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: t
-    }, o(i)), {
-        children: /* @__PURE__ */ l("div", {
-            className: d,
+    });
+}, g = function(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, r = param.dataAttributes;
+    return /* @__PURE__ */ e(i, {
+        ariaLabel: t,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonRow"
+        }, r),
+        children: /* @__PURE__ */ a("div", {
+            className: m,
             children: [
-                /* @__PURE__ */ e(n, {
+                /* @__PURE__ */ e(o, {
                     height: 40,
                     width: 40,
                     radius: "50%",
-                    className: m
+                    className: d
                 }),
-                /* @__PURE__ */ e(n, {
-                    width: r,
-                    className: h
+                /* @__PURE__ */ e(o, {
+                    width: n,
+                    className: u
                 })
             ]
         })
-    }));
-}, b = function(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, t = tmp1 === void 0 ? "100%" : tmp1, i = param.ariaLabel, s = param.dataAttributes;
-    return /* @__PURE__ */ e(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: i
-    }, o(s)), {
-        children: /* @__PURE__ */ e(n, {
+    });
+}, N = function(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, t = tmp1 === void 0 ? "100%" : tmp1, r = param.ariaLabel, l = param.dataAttributes;
+    return /* @__PURE__ */ e(i, {
+        ariaLabel: r,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonRectangle"
+        }, l),
+        children: /* @__PURE__ */ e(o, {
             height: t,
-            width: r
+            width: n
         })
-    }));
+    });
 };
-export { N as SkeletonCircle, x as SkeletonLine, b as SkeletonRectangle, v as SkeletonRow, g as SkeletonText };
+export { x as SkeletonCircle, f as SkeletonLine, N as SkeletonRectangle, g as SkeletonRow, w as SkeletonText };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./snackbar.css.ts.vanilla.js";
-var a = 300, v = "o7bjb09", b = "_1y2v1nf1j", o = "_1y2v1nf1w", t = "_1y2v1nf7b _1y2v1nf7n", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf9i _1y2v1nf7b _1y2v1nf7k", p = "o7bjb02", y = "o7bjb04 _1y2v1nf78 _1y2v1nfbd", e = "_1y2v1nf5x", i = "_1y2v1nf5y", j = "o7bjb07";
-export { a as TRANSITION_TIME_IN_MS, v as button, b as buttonCritical, o as buttonInfo, t as content, _ as longButton, f as snackbar, p as snackbarOpen, y as wrapper, e as wrapperCritical, i as wrapperInfo, j as wrapperOpen };
+var n = 300, v = "o7bjb09", b = "_1y2v1nf1j", o = "_1y2v1nf1w", t = "_1y2v1nf4y _1y2v1nf5a", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf75 _1y2v1nf4y _1y2v1nf57", p = "o7bjb02", y = "o7bjb04 _1y2v1nf4v _1y2v1nf90", e = "_1y2v1nf3j", j = "_1y2v1nf3k", i = "o7bjb07";
+export { n as TRANSITION_TIME_IN_MS, v as button, b as buttonCritical, o as buttonInfo, t as content, _ as longButton, f as snackbar, p as snackbarOpen, y as wrapper, e as wrapperCritical, j as wrapperInfo, i as wrapperOpen };

package/dist-es/snackbar.js

@@ -46,6 +46,45 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+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;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -57,93 +96,101 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import * as c from "react";
-import T from "./touchable.js";
+import * as i from "react";
+import { BaseTouchable as N } from "./touchable.js";
 import l from "classnames";
-import { isWebViewBridgeAvailable as g, nativeMessage as v } from "@tef-novum/webview-bridge";
-import { useElementDimensions as N, useScreenSize as R } from "./hooks.js";
-import { Text2 as b } from "./text.js";
-import { TRANSITION_TIME_IN_MS as C, snackbar as O, snackbarOpen as k, wrapper as w, wrapperCritical as E, wrapperInfo as S, wrapperOpen as A, content as B, button as M, buttonCritical as W, buttonInfo as D, longButton as L } from "./snackbar.css-mistica.js";
-import { sprinkles as V } from "./sprinkles.css-mistica.js";
-import { vars as _ } from "./skins/skin-contract.css-mistica.js";
-import { jsx as i, jsxs as j } from "./_virtual/jsx-runtime.js";
-var F = function(param) {
-    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
-    var ref = _slicedToArray(c.useState(!1), 2), o = ref[0], s = ref[1], ref1 = N(), u = ref1.width, p = ref1.ref, ref2 = R(), h = ref2.isDesktopOrBigger, m = u > (h ? 160 : 128), f = c.useCallback(function() {
-        s(!1), setTimeout(function() {
+import { isWebViewBridgeAvailable as T, nativeMessage as v } from "@tef-novum/webview-bridge";
+import { useElementDimensions as k, useScreenSize as R } from "./hooks.js";
+import { Text2 as B } from "./text.js";
+import { TRANSITION_TIME_IN_MS as C, snackbar as O, snackbarOpen as S, wrapper as w, wrapperCritical as A, wrapperInfo as E, wrapperOpen as M, content as W, button as D, buttonCritical as L, buttonInfo as V, longButton as _ } from "./snackbar.css-mistica.js";
+import { sprinkles as p } from "./sprinkles.css-mistica.js";
+import { vars as j } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as x } from "./utils/dom.js";
+import { jsx as s, jsxs as F } from "./_virtual/jsx-runtime.js";
+var z = function(param) {
+    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2, c = param.dataAttributes;
+    var ref = _slicedToArray(i.useState(!1), 2), o = ref[0], u = ref[1], ref1 = k(), d = ref1.width, h = ref1.ref, ref2 = R(), I = ref2.isDesktopOrBigger, m = d > (I ? 160 : 128), f = i.useCallback(function() {
+        u(!1), setTimeout(function() {
             t();
         }, C);
     }, [
         t
     ]);
-    return c.useEffect(function() {
-        var I = setTimeout(function() {
-            s(!0);
-        }, 50), d = setTimeout(f, r);
+    return i.useEffect(function() {
+        var g = setTimeout(function() {
+            u(!0);
+        }, 50), b = setTimeout(f, r);
         return function() {
-            clearTimeout(I), clearTimeout(d);
+            clearTimeout(g), clearTimeout(b);
         };
     }, [
         f,
         r
-    ]), /* @__PURE__ */ i("div", {
-        className: l(O, _defineProperty({}, k, o)),
-        children: /* @__PURE__ */ i("div", {
+    ]), /* @__PURE__ */ s("div", {
+        className: l(O, _defineProperty({}, S, o)),
+        children: /* @__PURE__ */ s("div", _objectSpreadProps(_objectSpread({
             role: "alert",
-            className: l(w, n === "CRITICAL" ? E : S, _defineProperty({}, A, o)),
-            children: /* @__PURE__ */ j("div", {
-                className: l(B, V({
+            className: l(w, n === "CRITICAL" ? A : E, _defineProperty({}, M, o))
+        }, x(c, "SnackBar")), {
+            children: /* @__PURE__ */ F("div", {
+                className: l(W, p({
                     flexDirection: m ? "column" : "row",
                     alignItems: m ? void 0 : "center"
                 })),
                 children: [
-                    /* @__PURE__ */ i(b, {
+                    /* @__PURE__ */ s(B, {
                         regular: !0,
-                        color: _.colors.textPrimaryInverse,
+                        color: j.colors.textPrimaryInverse,
                         children: a
                     }),
-                    e && /* @__PURE__ */ i("div", {
-                        className: l(M, n === "CRITICAL" ? W : D, _defineProperty({}, L, m)),
-                        children: /* @__PURE__ */ i(T, {
+                    e && /* @__PURE__ */ s("div", {
+                        className: l(D, n === "CRITICAL" ? L : V, _defineProperty({}, _, m)),
+                        children: /* @__PURE__ */ s(N, {
+                            className: p({
+                                border: "none",
+                                padding: 0,
+                                background: "transparent",
+                                color: "inherit"
+                            }),
                             style: {
                                 lineHeight: "inherit",
                                 fontWeight: "inherit"
                             },
-                            ref: p,
+                            ref: h,
                             onPress: f,
                             children: e
                         })
                     })
                 ]
             })
-        })
+        }))
     });
-}, X = function(param) {
+}, $ = function(param) {
     var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
-    var o = g(), s = c.useRef(t);
-    return c.useEffect(function() {
-        s.current = t;
+    var c = T(), o = i.useRef(t);
+    return i.useEffect(function() {
+        o.current = t;
     }, [
         t
-    ]), c.useEffect(function() {
-        o && v({
+    ]), i.useEffect(function() {
+        c && v({
             message: a,
             duration: r,
             buttonText: e,
             type: n
-        }).then(s.current);
+        }).then(o.current);
     }, [
         e,
         r,
         a,
-        o,
+        c,
         n
-    ]), o ? null : /* @__PURE__ */ i(F, {
+    ]), c ? null : /* @__PURE__ */ s(z, {
         message: a,
         duration: r,
         buttonText: e,
         type: n,
-        onClose: s.current
+        onClose: o.current
     });
 };
-export { X as default };
+export { $ as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./spinner.css.ts.vanilla.js";
-var n = "_1fthc594 _1y2v1nf7t", a = "_1fthc595", e = "_1y2v1nf7t", f = "_1fthc597";
-export { n as spinnerDefault, a as spinnerDefaultPath, e as spinnerIos, f as spinnerIosSvgPath };
+var t = "_1fthc594 _1y2v1nf5g", a = "_1fthc595", e = "_1y2v1nf5g", f = "_1fthc597";
+export { t as spinnerDefault, a as spinnerDefaultPath, e as spinnerIos, f as spinnerIosSvgPath };

package/dist-es/spinner.js

@@ -31,18 +31,18 @@ import M from "./fade-in.js";
 import { useTheme as v, useAriaId as g } from "./hooks.js";
 import { spinnerIos as z, spinnerIosSvgPath as t, spinnerDefault as u, spinnerDefaultPath as x } from "./spinner.css-mistica.js";
 import { jsxs as n, jsx as l } from "./_virtual/jsx-runtime.js";
-var k = function(param) {
-    var e = param.color, tmp = param.delay, s = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, a = tmp1 === void 0 ? 24 : tmp1, m = param.style, d = param.rolePresentation;
+var S = function(param) {
+    var e = param.color, tmp = param.delay, a = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, s = tmp1 === void 0 ? 24 : tmp1, m = param.style, h = param.rolePresentation;
     var ref = v(), p = ref.texts, f = ref.platformOverrides, N = ref.colors;
     e = e || N.controlActivated;
-    var i = g(), c = !d, r = p.loading, h = o(f) === "ios" ? /* @__PURE__ */ n("svg", {
+    var i = g(), c = !h, r = p.loading, d = o(f) === "ios" ? /* @__PURE__ */ n("svg", {
         "aria-labelledby": i,
         className: z,
-        height: a,
+        height: s,
         style: _objectSpread({}, m),
         role: "img",
         viewBox: "0 0 28 28",
-        width: a,
+        width: s,
         children: [
             c && /* @__PURE__ */ l("title", {
                 id: i,
@@ -117,11 +117,11 @@ var k = function(param) {
     }) : /* @__PURE__ */ n("svg", {
         "aria-labelledby": c ? i : void 0,
         className: u,
-        height: a,
+        height: s,
         style: _objectSpread({}, m),
         role: "img",
         viewBox: "0 0 66 66",
-        width: a,
+        width: s,
         children: [
             c && /* @__PURE__ */ l("title", {
                 id: i,
@@ -139,9 +139,12 @@ var k = function(param) {
             })
         ]
     });
-    return s === "0" || s === "0s" || s === "0ms" ? h : /* @__PURE__ */ l(M, {
-        delay: s,
-        children: h
+    return a === "0" || a === "0s" || a === "0ms" ? d : /* @__PURE__ */ l(M, {
+        delay: a,
+        dataAttributes: {
+            "component-name": "Spinner"
+        },
+        children: d
     });
 };
-export { k as default };
+export { S as default };