@telefonica/mistica 12.10.0 → 12.11.0

package/dist-es/loading-bar.js

@@ -1,100 +1,31 @@
-import { CSSTransition as a } from "react-transition-group";
-import { Portal as n } from "./portal.js";
-import { createUseStyles as o } from "./jss.js";
+import { CSSTransition as t } from "react-transition-group";
+import { Portal as i } from "./portal.js";
+import { TRANSITION_DURATION_MS as n, enter as s, enterActive as o, exit as a, exitActive as m, portal as c, progressContainer as l, progress as d, innerProgress as p } from "./loading-bar.css-mistica.js";
 import { jsx as e } from "./_virtual/jsx-runtime.js";
-var t = 400, i = o(function(s) {
-    return {
-        portal: {
-            zIndex: 9999,
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0
-        },
-        progressContainer: {
-            height: 4,
-            width: "100%",
-            overflow: "hidden",
-            position: "relative",
-            backgroundColor: s.colors.loadingBarBackground
-        },
-        progress: {
-            position: "absolute",
-            left: "-55%",
-            height: "100%",
-            width: "100%",
-            animation: "$progressIndicator 1.2s ease-out infinite",
-            animationDelay: t,
-            backgroundColor: s.colors.loadingBar
-        },
-        innerProgress: {
-            height: "100%",
-            transform: "scaleX(0.1)",
-            animation: "$innerProgressIndicator 1.2s ease-out infinite",
-            animationDelay: t
-        },
-        enter: {
-            transition: "".concat(t, "ms ease-out"),
-            transform: "translateY(-4px)"
-        },
-        enterActive: {
-            transform: "translateY(0)"
-        },
-        exit: {
-            transform: "translateY(0)",
-            transition: "".concat(t, "ms ease-out")
-        },
-        exitActive: {
-            transform: "translateY(-4px)"
-        },
-        "@keyframes progressIndicator": {
-            "0%": {
-                transform: "translateX(0%)"
-            },
-            "100%": {
-                transform: "translateX(150%)"
-            }
-        },
-        "@keyframes innerProgressIndicator": {
-            "0%": {
-                transform: "scaleX(0.1)"
-            },
-            "20%": {
-                transform: "scaleX(0.35)"
-            },
-            "50%": {
-                transform: "scaleX(0.7)"
-            },
-            "100%": {
-                transform: "scaleX(0.8)"
-            }
-        }
-    };
-}), f = function(param) {
-    var s = param.visible;
-    var r = i();
-    return /* @__PURE__ */ e(a, {
-        in: s,
-        timeout: t,
+var A = function(param) {
+    var r = param.visible;
+    return /* @__PURE__ */ e(t, {
+        in: r,
+        timeout: n,
         classNames: {
-            enter: r.enter,
-            enterActive: r.enterActive,
-            exit: r.exit,
-            exitActive: r.exitActive
+            enter: s,
+            enterActive: o,
+            exit: a,
+            exitActive: m
         },
         unmountOnExit: !0,
-        children: /* @__PURE__ */ e(n, {
-            className: r.portal,
+        children: /* @__PURE__ */ e(i, {
+            className: c,
             children: /* @__PURE__ */ e("div", {
-                className: r.progressContainer,
+                className: l,
                 children: /* @__PURE__ */ e("div", {
-                    className: r.progress,
+                    className: d,
                     children: /* @__PURE__ */ e("div", {
-                        className: r.innerProgress
+                        className: p
                     })
                 })
             })
         })
     });
 };
-export { f as default };
+export { A as default };

package/dist-es/negative-box.js

@@ -1,27 +1,12 @@
-import { createUseStyles as i } from "./jss.js";
-import { jsx as o } from "./_virtual/jsx-runtime.js";
-var n = i(function() {
-    return {
-        negativeBox: {
-            marginLeft: function(param) {
-                var e = param.marginLeft;
-                return e;
-            },
-            marginRight: function(param) {
-                var e = param.marginRight;
-                return e;
-            }
-        }
-    };
-}), v = function(param) {
-    var e = param.left, t = param.right, s = param.children;
-    var a = n({
-        marginLeft: e || !e && !t ? -16 : void 0,
-        marginRight: t || !e && !t ? -16 : void 0
-    });
-    return /* @__PURE__ */ o("div", {
-        className: a.negativeBox,
-        children: s
+import { jsx as n } from "./_virtual/jsx-runtime.js";
+var m = function(param) {
+    var i = param.left, o = param.right, t = param.children;
+    return /* @__PURE__ */ n("div", {
+        style: {
+            marginLeft: i || !i && !o ? -16 : void 0,
+            marginRight: o || !i && !o ? -16 : void 0
+        },
+        children: t
     });
 };
-export { v as default };
+export { m as default };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-var o = "12.10.0";
+var o = "12.11.0";
 export { o as PACKAGE_VERSION };

package/dist-es/portal.js

@@ -6,6 +6,12 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -33,9 +39,15 @@ 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 _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
+function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -48,6 +60,7 @@ import * as o from "react";
 import c from "react-dom";
 var f = function(param) {
     var n = param.children, e = param.className;
+    var _classList;
     var ref = _slicedToArray(o.useState(null), 2), t = ref[0], i = ref[1];
     return o.useEffect(function() {
         if (!t) {
@@ -60,8 +73,9 @@ var f = function(param) {
     }, [
         t
     ]), o.useEffect(function() {
-        return t && e && t.classList.add(e), function() {
-            t && e && t.classList.remove(e);
+        return t && e && (_classList = t.classList).add.apply(_classList, _toConsumableArray(e.split(" "))), function() {
+            var _classList;
+            t && e && (_classList = t.classList).remove.apply(_classList, _toConsumableArray(e.split(" ")));
         };
     }, [
         e,

package/dist-es/progress-bar.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./progress-bar.css.ts.vanilla.js";
+var y = "j0y7r93 _1y2v1nf9y _1y2v1nfbb", a = "_1y2v1nfbb _1y2v1nfa1 _1y2v1nf5l";
+export { y as bar, a as barBackground };

package/dist-es/progress-bar.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };

package/dist-es/progress-bar.js

@@ -1,51 +1,25 @@
-import { useTheme as d } from "./hooks.js";
-import { createUseStyles as m } from "./jss.js";
-import { jsx as i } from "./_virtual/jsx-runtime.js";
-var s = "1s cubic-bezier(0.75, 0, 0.27, 1)", c = m(function(param) {
-    var r = param.colors;
-    return {
-        barBackground: {
-            height: 4,
-            backgroundColor: r.control,
-            borderRadius: 2
-        },
-        bar: {
-            height: "100%",
-            backgroundColor: function(param) {
-                var a = param.color;
-                return a != null ? a : r.controlActivated;
-            },
-            transition: "max-width ".concat(s),
-            animation: "$bar ".concat(s),
-            borderRadius: 2,
-            maxWidth: function(param) {
-                var a = param.progressPercent;
-                return "".concat(a, "%");
-            }
-        },
-        "@keyframes bar": {
-            "0%": {
-                maxWidth: "0"
-            }
-        }
-    };
-}), v = function(param) {
-    var r = param.progressPercent, a = param.color, o = param["aria-label"], e = param["aria-labelledby"];
-    var t = c({
-        progressPercent: r,
-        color: a
-    }), ref = d(), l = ref.texts, n = l.loading, b = e ? void 0 : o || n;
-    return /* @__PURE__ */ i("div", {
-        className: t.barBackground,
+import { useTheme as s } from "./hooks.js";
+import { vars as m } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as b, bar as d } from "./progress-bar.css-mistica.js";
+import { jsx as l } from "./_virtual/jsx-runtime.js";
+var p = function(param) {
+    var r = param.progressPercent, a = param.color, i = param["aria-label"], e = param["aria-labelledby"];
+    var ref = s(), o = ref.texts, t = o.loading;
+    return /* @__PURE__ */ l("div", {
+        className: b,
         role: "progressbar",
         "aria-valuenow": r,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": b,
+        "aria-label": e ? void 0 : i || t,
         "aria-labelledby": e,
-        children: /* @__PURE__ */ i("div", {
-            className: t.bar
+        children: /* @__PURE__ */ l("div", {
+            className: d,
+            style: {
+                maxWidth: "".concat(r, "%"),
+                backgroundColor: a != null ? a : m.colors.controlActivated
+            }
         })
     });
 };
-export { v as default };
+export { p as default };

package/dist-es/responsive-layout.css-mistica.js

@@ -1,6 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./responsive-layout.css.ts.vanilla.js";
-var o = "_1y2v1nf9h", v = "_17lofg74 _1y2v1nf9h", i = "_17lofg72", f = {
-    sideMargin: "var(--_17lofg70)"
-};
-export { o as container, v as fullWidth, i as responsiveLayout, f as vars };
+var i = "_1y2v1nf9i", t = "_17lofg74 _1y2v1nf9i", v = "_17lofg72";
+export { i as container, t as fullWidth, v as responsiveLayout };

package/dist-es/responsive-layout.js

@@ -50,25 +50,19 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import a from "classnames";
-import { useScreenSize as l } from "./hooks.js";
-import { getPrefixedDataAttributes as c } from "./utils/dom.js";
-import p from "./container-type-context.js";
-import { container as u, fullWidth as d, responsiveLayout as f } from "./responsive-layout.css-mistica.js";
-import { jsx as e } from "./_virtual/jsx-runtime.js";
-var C = function(param) {
-    var o = param.children, t = param.className, i = param.fullWidth, r = param.dataAttributes;
-    var ref = l(), s = ref.isMobile, n = ref.isTablet, m = s ? "mobile-column" : n ? "tablet-column" : "desktop-wide-column";
-    return /* @__PURE__ */ e(p.Provider, {
-        value: m,
-        children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({
-            className: a(u, t)
-        }, c(r)), {
-            children: /* @__PURE__ */ e("div", {
-                className: i ? d : f,
-                children: o
-            })
-        }))
-    });
+import i from "classnames";
+import { getPrefixedDataAttributes as a } from "./utils/dom.js";
+import { container as m, fullWidth as l, responsiveLayout as f } from "./responsive-layout.css-mistica.js";
+import { jsx as t } from "./_virtual/jsx-runtime.js";
+var c = function(param) {
+    var e = param.children, r = param.className, o = param.fullWidth, s = param.dataAttributes;
+    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
+        className: i(m, r)
+    }, a(s)), {
+        children: /* @__PURE__ */ t("div", {
+            className: o ? l : f,
+            children: e
+        })
+    }));
 };
-export { C as default };
+export { c as default };

package/dist-es/screen-reader-only.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./screen-reader-only.css.ts.vanilla.js";
+var v = "gwdgwo1 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf77 _1y2v1nfbh _1y2v1nfb9";
+export { v as screenReaderOnly };

package/dist-es/screen-reader-only.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var e = "";
+export { e as default };

package/dist-es/screen-reader-only.js

@@ -1,32 +1,17 @@
-import * as s from "react";
-import { createUseStyles as t } from "./jss.js";
-import { jsx as a } from "./_virtual/jsx-runtime.js";
-var l = t(function() {
-    return {
-        screenReaderOnly: {
-            position: "absolute",
-            width: 1,
-            height: 1,
-            padding: 0,
-            margin: -1,
-            overflow: "hidden",
-            clip: "rect(0, 0, 0, 0)",
-            border: 0,
-            userSelect: "none"
-        }
-    };
-}), i = function(param) {
-    var r = param.children;
-    var n = l();
-    if (s.Children.count(r) === 1) {
-        var e = s.Children.only(r);
-        if (/*#__PURE__*/ s.isValidElement(e)) return /*#__PURE__*/ s.cloneElement(e, {
-            className: e.props.className ? e.props.className + " " + n.screenReaderOnly : n.screenReaderOnly
+import * as r from "react";
+import { screenReaderOnly as a } from "./screen-reader-only.css-mistica.js";
+import { jsx as n } from "./_virtual/jsx-runtime.js";
+var l = function(param) {
+    var s = param.children;
+    if (r.Children.count(s) === 1) {
+        var e = r.Children.only(s);
+        if (/*#__PURE__*/ r.isValidElement(e)) return /*#__PURE__*/ r.cloneElement(e, {
+            className: e.props.className ? e.props.className + " " + a : a
         });
     }
-    return /* @__PURE__ */ a("div", {
-        className: n.screenReaderOnly,
-        children: r
+    return /* @__PURE__ */ n("div", {
+        className: a,
+        children: s
     });
 };
-export { i as default };
+export { l as default };

package/dist-es/screen-size-context-provider.js

@@ -46,15 +46,15 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 import * as a from "react";
 import B from "./screen-size-context.js";
-import { useIsomorphicLayoutEffect as d, useTheme as D } from "./hooks.js";
+import { useIsomorphicLayoutEffect as S, useTheme as D } from "./hooks.js";
 import { jsx as I } from "./_virtual/jsx-runtime.js";
 var s = function(i) {
     return i.replace(/^@media /, "");
 }, z = function(param) {
     var i = param.children;
-    var ref = _slicedToArray(a.useState(!0), 2), r = ref[0], S = ref[1];
-    d(function() {
-        S(!1);
+    var ref = _slicedToArray(a.useState(!0), 2), r = ref[0], u = ref[1];
+    S(function() {
+        u(!1);
     }, []);
     var t = D(), e = a.useMemo(function() {
         return {
@@ -62,7 +62,7 @@ var s = function(i) {
             tablet: s(t.mq.tablet),
             tabletOrBigger: s(t.mq.tabletOrBigger),
             tabletOrSmaller: s(t.mq.tabletOrSmaller),
-            largueDesktop: s(t.mq.largeDesktop)
+            largeDesktop: s(t.mq.largeDesktop)
         };
     }, [
         t.mq.mobile,
@@ -79,11 +79,11 @@ var s = function(i) {
     }), 2), g = ref3[0], O = ref3[1], ref4 = _slicedToArray(a.useState(function() {
         return !r && window.matchMedia(e.tabletOrSmaller).matches;
     }), 2), l = ref4[0], w = ref4[1], ref5 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.largueDesktop).matches;
-    }), 2), u = ref5[0], M = ref5[1];
-    d(function() {
+        return !r && window.matchMedia(e.largeDesktop).matches;
+    }), 2), d = ref5[0], M = ref5[1];
+    S(function() {
         if (!window.matchMedia) return;
-        var f = [
+        var q = [
             [
                 e.mobile,
                 p
@@ -101,7 +101,7 @@ var s = function(i) {
                 w
             ],
             [
-                e.largueDesktop,
+                e.largeDesktop,
                 M
             ]
         ].map(function(param) {
@@ -114,7 +114,7 @@ var s = function(i) {
             };
         });
         return function() {
-            return f.forEach(function(o) {
+            return q.forEach(function(o) {
                 return o();
             });
         };
@@ -123,26 +123,27 @@ var s = function(i) {
         e.tablet,
         e.tabletOrBigger,
         e.tabletOrSmaller,
-        e.largueDesktop
+        e.largeDesktop
     ]);
-    var q = a.useMemo(function() {
+    var f = a.useMemo(function() {
         return {
             isMobile: c,
             isTablet: b,
             isTabletOrBigger: g,
             isTabletOrSmaller: l,
-            isDesktopOrBigger: !l,
-            isLargeDesktop: u
+            isDesktopOrBigger: r ? !1 : !l,
+            isLargeDesktop: d
         };
     }, [
         c,
         b,
         g,
         l,
-        u
+        d,
+        r
     ]);
     return /* @__PURE__ */ I(B.Provider, {
-        value: q,
+        value: f,
         children: i
     });
 };

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

@@ -0,0 +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";
+export { o as animation, r as circle, y as line, f as row };

package/dist-es/skeletons.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };