@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/popover.js

@@ -72,49 +72,39 @@ 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
-import IconButton from "./icon-button";
-import { useTheme, useScreenSize } from "./hooks";
-import Stack from "./stack";
-import Box from "./box";
-import Inline from "./inline";
-import { Text3, Text2 } from "./text";
-// Zeplin definition:
-// https://app.zeplin.io/project/5c9b6f097168bc065782b5c3/screen/5d15d87e46571573089f2863
-var defaultPositionDesktop = "bottom";
-var defaultPositionMobile = "top";
-var arrowSize = 12;
-var distanceToTarget = 8 + arrowSize;
-var marginLeftRightMobile = 16;
-var maxWidthDesktop = 488;
-var arrowWrapperWidth = arrowSize * 2;
-var arrowWrapperHeight = arrowSize;
-var useStyles = createUseStyles(function(theme) {
-    var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
+import * as h from "react";
+import { createUseStyles as C } from "./jss.js";
+import Y from "./generated/mistica-icons/icon-close-regular.js";
+import z from "./icon-button.js";
+import { useTheme as M, useScreenSize as A } from "./hooks.js";
+import D from "./stack.js";
+import g from "./box.js";
+import E from "./inline.js";
+import { Text3 as $, Text2 as H } from "./text.js";
+import { jsxs as c, jsx as r } from "./_virtual/jsx-runtime.js";
+var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U = d, q = C(function(t) {
+    var o = t.isDarkMode ? 1 : 0.2;
     return {
         arrow: {
             position: "absolute",
-            backgroundColor: theme.colors.backgroundContainer,
-            width: arrowSize,
-            height: arrowSize,
+            backgroundColor: t.colors.backgroundContainer,
+            width: d,
+            height: d,
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.border),
+            border: "1px solid ".concat(t.colors.border),
             borderRadius: 2,
             boxShadow: function(param) {
-                var position = param.position;
-                return position === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")");
+                var e = param.position;
+                return e === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(o, ")");
             }
         },
         arrowWrapper: {
             position: "absolute",
-            color: theme.colors.backgroundContainer,
-            width: arrowWrapperWidth,
-            height: arrowWrapperHeight,
+            color: t.colors.backgroundContainer,
+            width: O,
+            height: U,
             overflow: "hidden"
         },
         wrapper: {
@@ -124,9 +114,9 @@ var useStyles = createUseStyles(function(theme) {
             position: "absolute",
             width: "auto",
             zIndex: 9,
-            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            backgroundColor: theme.colors.backgroundContainer,
-            border: "1px solid ".concat(theme.colors.border),
+            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(o, ")"),
+            backgroundColor: t.colors.backgroundContainer,
+            border: "1px solid ".concat(t.colors.border),
             borderRadius: 8
         },
         textAlign: {
@@ -149,45 +139,38 @@ var useStyles = createUseStyles(function(theme) {
             zIndex: 1
         }
     };
-});
-var getWidthDesktop = function(customWidth) {
-    return customWidth ? customWidth : maxWidthDesktop;
-};
-var getPosition = function() {
-    var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop, isTabletOrSmaller = arguments.length > 1 ? arguments[1] : void 0;
-    return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-};
-var getWidth = function(isTabletOrSmaller, isIos, width) {
-    return(// in iOS, when the webview is rendered offscreen (eg. acccount tab), window.innerWidth value is wrong, it returns strange values like 0 or 80.
-    isTabletOrSmaller ? (isIos ? window.screen.width : window.innerWidth) - marginLeftRightMobile * 2 : getWidthDesktop(width));
-};
-var getPositionStyles = function(position, width, targetPosition, isTabletOrSmaller) {
-    var containerStylesByPos = {
+}), F = function(t) {
+    return t || X;
+}, G = function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : j, o = arguments.length > 1 ? arguments[1] : void 0;
+    return o && (t === "left" || t === "right") ? P : t;
+}, J = function(t, o, e) {
+    return t ? (o ? window.screen.width : window.innerWidth) - m * 2 : F(e);
+}, K = function(t, o, e, s) {
+    var l = {
         right: {
-            left: targetPosition.width + distanceToTarget,
-            top: targetPosition.height / 2,
+            left: e.width + p,
+            top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
         },
         left: {
-            left: targetPosition.left - width - distanceToTarget,
-            top: targetPosition.height / 2,
+            left: e.left - o - p,
+            top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
         },
         top: {
             transform: "translateY(-100%)",
             WebkitTransform: "translateY(-100%)",
-            top: -distanceToTarget,
-            left: isTabletOrSmaller ? marginLeftRightMobile - targetPosition.parentLeft : Math.max(targetPosition.width / 2 - width / 2, 0)
+            top: -p,
+            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
         },
         bottom: {
-            top: targetPosition.height + distanceToTarget,
-            left: isTabletOrSmaller ? marginLeftRightMobile - targetPosition.parentLeft : Math.max(targetPosition.width / 2 - width / 2, 0)
+            top: e.height + p,
+            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
         }
-    };
-    var containerStyles = containerStylesByPos[position];
-    var arrowStylesByPos = {
+    }[t], f = {
         right: {
             right: "100%",
             top: "50%",
@@ -202,100 +185,86 @@ var getPositionStyles = function(position, width, targetPosition, isTabletOrSmal
         },
         top: {
             top: "100%",
-            left: containerStyles.left === 0 ? targetPosition.width / 2 : "50%",
+            left: l.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%)"
         },
         bottom: {
             bottom: "100%",
-            left: containerStyles.left === 0 ? targetPosition.width / 2 : "50%",
+            left: l.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%) rotate(180deg)"
         }
+    }[t];
+    return s && (f.left = e.parentLeft + e.width / 2 - m), {
+        containerStyles: l,
+        arrowStyles: f
     };
-    var arrowStyles = arrowStylesByPos[position];
-    if (isTabletOrSmaller) {
-        arrowStyles.left = targetPosition.parentLeft + targetPosition.width / 2 - marginLeftRightMobile;
-    }
-    return {
-        containerStyles: containerStyles,
-        arrowStyles: arrowStyles
-    };
-};
-var getTargetPosition = function(targetWrapper) {
-    return targetWrapper ? {
-        left: targetWrapper.offsetLeft,
-        top: targetWrapper.offsetTop,
-        width: targetWrapper.offsetWidth,
-        height: targetWrapper.offsetHeight,
-        // @ts-expect-error - parentNode must exist
-        parentLeft: targetWrapper.parentNode.offsetLeft
+}, B = function(t) {
+    return t ? {
+        left: t.offsetLeft,
+        top: t.offsetTop,
+        width: t.offsetWidth,
+        height: t.offsetHeight,
+        parentLeft: t.parentNode.offsetLeft
     } : null;
-};
-var Popover = function(param) {
-    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible, extra = param.extra;
-    var ref = useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
-    var targetWrapperRef = React.useRef(null);
-    position = getPosition(position, isTabletOrSmaller);
-    var innerWidth = getWidth(isTabletOrSmaller, isIos, width);
-    var classes = useStyles({
-        position: position
+}, st = function(param) {
+    var t = param.description, o = param.title, e = param.onClose, s = param.trackingEvent, a = param.position, l = param.width, b = param.target, f = param.asset, tmp = param.isVisible, x = tmp === void 0 ? !0 : tmp, I = param.extra;
+    var ref = M(), L = ref.texts, y = ref.colors, N = ref.isIos, ref1 = A(), u = ref1.isTabletOrSmaller, ref2 = _slicedToArray(h.useState(null), 2), S = ref2[0], k = ref2[1], w = h.useRef(null);
+    a = G(a, u);
+    var v = J(u, N, l), n = q({
+        position: a
     });
-    React.useEffect(function() {
-        var handleResize = function() {
-            setTargetPosition(getTargetPosition(targetWrapperRef.current));
+    h.useEffect(function() {
+        var i = function() {
+            k(B(w.current));
         };
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return function() {
-            window.removeEventListener("resize", handleResize);
+        return i(), window.addEventListener("resize", i), function() {
+            window.removeEventListener("resize", i);
         };
-    }, []);
-    React.useEffect(function() {
-        setTargetPosition(getTargetPosition(targetWrapperRef.current));
+    }, []), h.useEffect(function() {
+        k(B(w.current));
     }, [
-        isVisible
+        x
     ]);
-    var popoverContainer = null;
-    if (isVisible && targetPosition) {
-        var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
-        popoverContainer = /*#__PURE__*/ _jsxs("div", {
-            className: classes.container,
+    var T = null;
+    if (x && S) {
+        var ref3 = K(a, v, S, u), i = ref3.containerStyles, R = ref3.arrowStyles;
+        T = /* @__PURE__ */ c("div", {
+            className: n.container,
             style: _objectSpread({
-                width: innerWidth
-            }, containerStyles),
+                width: v
+            }, i),
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.arrowWrapper,
-                    style: arrowStyles,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: classes.arrow
+                /* @__PURE__ */ r("div", {
+                    className: n.arrowWrapper,
+                    style: R,
+                    children: /* @__PURE__ */ r("div", {
+                        className: n.arrow
                     })
                 }),
-                /*#__PURE__*/ _jsxs(Box, {
+                /* @__PURE__ */ c(g, {
                     padding: 16,
                     children: [
-                        /*#__PURE__*/ _jsx(Box, {
+                        /* @__PURE__ */ r(g, {
                             paddingRight: 24,
-                            className: classes.boxContent,
-                            children: /*#__PURE__*/ _jsxs(Inline, {
+                            className: n.boxContent,
+                            children: /* @__PURE__ */ c(E, {
                                 space: 16,
                                 children: [
-                                    asset,
-                                    /*#__PURE__*/ _jsx(Box, {
-                                        className: classes.textAlign,
-                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                    f,
+                                    /* @__PURE__ */ r(g, {
+                                        className: n.textAlign,
+                                        children: /* @__PURE__ */ c(D, {
                                             space: 4,
-                                            className: classes.textContent,
+                                            className: n.textContent,
                                             children: [
-                                                title && /*#__PURE__*/ _jsx(Text3, {
-                                                    regular: true,
-                                                    children: title
+                                                o && /* @__PURE__ */ r($, {
+                                                    regular: !0,
+                                                    children: o
                                                 }),
-                                                /*#__PURE__*/ _jsx(Text2, {
-                                                    regular: true,
-                                                    color: colors.textSecondary,
-                                                    children: description
+                                                /* @__PURE__ */ r(H, {
+                                                    regular: !0,
+                                                    color: y.textSecondary,
+                                                    children: t
                                                 })
                                             ]
                                         })
@@ -303,33 +272,32 @@ var Popover = function(param) {
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            className: classes.closeButtonIcon,
-                            onPress: function(e) {
-                                onClose === null || onClose === void 0 ? void 0 : onClose();
-                                e.stopPropagation();
+                        /* @__PURE__ */ r(z, {
+                            className: n.closeButtonIcon,
+                            onPress: function(W) {
+                                e == null || e(), W.stopPropagation();
                             },
-                            trackingEvent: trackingEvent,
-                            "aria-label": texts.modalClose,
-                            children: /*#__PURE__*/ _jsx(IconCloseRegular, {
-                                color: colors.neutralHigh
+                            trackingEvent: s,
+                            "aria-label": L.modalClose,
+                            children: /* @__PURE__ */ r(Y, {
+                                color: y.neutralHigh
                             })
                         }),
-                        extra
+                        I
                     ]
                 })
             ]
         });
     }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes.wrapper,
+    return /* @__PURE__ */ c("div", {
+        className: n.wrapper,
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                ref: targetWrapperRef,
-                children: target
+            /* @__PURE__ */ r("div", {
+                ref: w,
+                children: b
             }),
-            popoverContainer
+            T
         ]
     });
 };
-export default Popover;
+export { st as default };

package/dist-es/portal.js

@@ -44,37 +44,28 @@ 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 React from "react";
-import ReactDOM from "react-dom";
-export var Portal = function(param) {
-    var children = param.children, className = param.className;
-    var ref = _slicedToArray(React.useState(null), 2), container = ref[0], setContainer = ref[1];
-    React.useEffect(function() {
-        if (!container) {
-            var newContainer = document.createElement("div");
-            setContainer(newContainer);
-            document.body.appendChild(newContainer);
+import * as o from "react";
+import c from "react-dom";
+var f = function(param) {
+    var n = param.children, e = param.className;
+    var ref = _slicedToArray(o.useState(null), 2), t = ref[0], i = ref[1];
+    return o.useEffect(function() {
+        if (!t) {
+            var r = document.createElement("div");
+            i(r), document.body.appendChild(r);
         }
         return function() {
-            if (container) {
-                document.body.removeChild(container);
-            }
+            t && document.body.removeChild(t);
         };
     }, [
-        container
-    ]);
-    React.useEffect(function() {
-        if (container && className) {
-            container.classList.add(className);
-        }
-        return function() {
-            if (container && className) {
-                container.classList.remove(className);
-            }
+        t
+    ]), o.useEffect(function() {
+        return t && e && t.classList.add(e), function() {
+            t && e && t.classList.remove(e);
         };
     }, [
-        className,
-        container
-    ]);
-    return container && /*#__PURE__*/ ReactDOM.createPortal(children, container);
+        e,
+        t
+    ]), t && /*#__PURE__*/ c.createPortal(n, t);
 };
+export { f as Portal };

package/dist-es/progress-bar.js

@@ -1,28 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useTheme } from "./hooks";
-import { createUseStyles } from "./jss";
-var transition = "1s cubic-bezier(0.75, 0, 0.27, 1)";
-var useStyles = createUseStyles(function(param1) {
-    var colors = param1.colors;
+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: colors.control,
+            backgroundColor: r.control,
             borderRadius: 2
         },
         bar: {
             height: "100%",
             backgroundColor: function(param) {
-                var color = param.color;
-                return color !== null && color !== void 0 ? color : colors.controlActivated;
+                var a = param.color;
+                return a != null ? a : r.controlActivated;
             },
-            transition: "max-width ".concat(transition),
-            animation: "$bar ".concat(transition),
+            transition: "max-width ".concat(s),
+            animation: "$bar ".concat(s),
             borderRadius: 2,
             maxWidth: function(param) {
-                var progressPercent = param.progressPercent;
-                return "".concat(progressPercent, "%");
+                var a = param.progressPercent;
+                return "".concat(a, "%");
             }
         },
         "@keyframes bar": {
@@ -31,27 +29,23 @@ var useStyles = createUseStyles(function(param1) {
             }
         }
     };
-});
-var ProgressBar = function(param) {
-    var progressPercent = param.progressPercent, color = param.color, ariaLabel = param["aria-label"], ariaLabelledBy = param["aria-labelledby"];
-    var classes = useStyles({
-        progressPercent: progressPercent,
-        color: color
-    });
-    var texts = useTheme().texts;
-    var defaultLabel = texts.loading;
-    var label = ariaLabelledBy ? undefined : ariaLabel || defaultLabel;
-    return /*#__PURE__*/ _jsx("div", {
-        className: classes.barBackground,
+}), 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,
         role: "progressbar",
-        "aria-valuenow": progressPercent,
+        "aria-valuenow": r,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": label,
-        "aria-labelledby": ariaLabelledBy,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: classes.bar
+        "aria-label": b,
+        "aria-labelledby": e,
+        children: /* @__PURE__ */ i("div", {
+            className: t.bar
         })
     });
 };
-export default ProgressBar;
+export { v as default };