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