@telefonica/mistica 14.24.1 → 14.25.0

package/dist/slider.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return ee;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _hooks = require("./hooks.js");
+const _slidercssmistica = require("./slider.css-mistica.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const K = (param)=>{
+    let { disabled: u , steps: t = 1 , max: a = 100 , min: l = 0 , value: o , onChange: d , getStepArrayIndex: f , "arial-label": A , tooltip: $  } = param;
+    const { isIos: w  } = (0, _hooks.useTheme)(), { isTabletOrSmaller: k  } = (0, _hooks.useScreenSize)(), [i, g] = _react.useState(l), [m, C] = _react.useState(l), [b, M] = _react.useState(a), [N, O] = _react.useState(1), h = _react.useRef(null), P = _react.useMemo(()=>u ? "0.5" : "1", [
+        u
+    ]), j = 0, p = "50%", v = _react.useMemo(()=>u && _slidercssmistica.sliderDisabled, [
+        u
+    ]), y = _react.useCallback(function() {
+        let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+        if (!h.current) return;
+        const s = h.current.getBoundingClientRect(), n = Number(Math.abs(i - m) * 100 / (b - m)), S = 0.2 + (window.innerWidth - s.right) / 100 + (s.left - 0) / 100, x = e ? s.left - 10 - n * S : 10 - n * 0.2;
+        return `calc(${n}% + (${x}px))`;
+    }, [
+        i,
+        m,
+        b
+    ]), T = _react.useCallback((e)=>{
+        let s = e;
+        return Array.isArray(t) && (s = t.reduce((n, S)=>Math.abs(S - e) < Math.abs(n - e) ? S : n)), s;
+    }, [
+        t
+    ]), D = _react.useCallback(()=>{
+        Array.isArray(t) && t.sort((e, s)=>e - s);
+    }, [
+        t
+    ]), E = (e)=>{
+        g(e);
+    };
+    _react.useEffect(()=>{
+        d == null || d(i), f == null || f(i);
+    }, [
+        d,
+        f,
+        i
+    ]), _react.useEffect(()=>{
+        if (Array.isArray(t)) {
+            M(t.length - 1);
+            let e = 0;
+            o !== void 0 && (e = t.indexOf(T(o))), g(e);
+        } else {
+            C(l), M(a);
+            let e = l;
+            o !== void 0 && (l > o || o > a) && (e = a < o ? a : l), g(e), O(t);
+        }
+    }, [
+        t,
+        a,
+        l,
+        T,
+        o,
+        N,
+        D
+    ]);
+    const R = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _slidercssmistica.targetContainer,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                ref: h,
+                style: {
+                    opacity: P,
+                    paddingTop: j
+                },
+                className: _slidercssmistica.rangeSlider,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
+                        disabled: u,
+                        style: {
+                            top: p
+                        },
+                        className: (0, _classnames.default)(_slidercssmistica.sliderVariant[w ? "ios" : "default"], v),
+                        "aria-label": "Slider",
+                        type: "range",
+                        min: m,
+                        max: b,
+                        value: i,
+                        step: N,
+                        onChange: (e)=>E(+e.target.value)
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            left: y(),
+                            top: p
+                        },
+                        className: (0, _classnames.default)(_slidercssmistica.sliderThumbVariant[w ? "ios" : "default"])
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _slidercssmistica.progress,
+                        style: {
+                            width: y(),
+                            top: p
+                        }
+                    })
+                ]
+            })
+        });
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
+        className: _slidercssmistica.container,
+        "aria-label": A,
+        children: $ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+            description: Array.isArray(t) ? t[i].toString() : i.toString(),
+            width: k ? 42 : 45,
+            targetLabel: "",
+            textCenter: !0,
+            unstable_offsetX: y(!0),
+            targetStyle: {
+                width: "100%"
+            },
+            position: "top",
+            target: R()
+        }) : R()
+    });
+}, ee = K;

package/dist/tooltip.css-mistica.js

@@ -34,13 +34,13 @@ _export(exports, {
         return b;
     },
     enterActive: function() {
-        return o;
+        return x;
     },
     enterDone: function() {
-        return x;
+        return h;
     },
     exit: function() {
-        return h;
+        return o;
     },
     exitActive: function() {
         return y;
@@ -57,20 +57,23 @@ _export(exports, {
     textAlign: function() {
         return d;
     },
-    vars: function() {
+    textCenter: function() {
         return c;
     },
-    wrapper: function() {
+    vars: function() {
         return s;
+    },
+    wrapper: function() {
+        return A;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tooltip.css.ts.vanilla.css-mistica.js");
-var v = "_1xhatbpb _1y2v1nfb1 _1y2v1nfec _1y2v1nfbz _1y2v1nfcf _1y2v1nfdq _1y2v1nf31 _1y2v1nfdn", t = "_1xhatbpe", n = "_1xhatbpf", _ = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nfb1 _1y2v1nfc2 _1y2v1nfcf _1y2v1nfe6 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb1 _1y2v1nfew _1y2v1nfbu _1y2v1nfdz _1y2v1nfdn", b = "_1xhatbpl", o = "_1xhatbpm", x = "_1xhatbpn", h = "_1xhatbpo", y = "_1xhatbpp", i = "_1xhatbp6", m = "_1xhatbp7", w = "_1xhatbp8", d = "_1xhatbpk", c = {
+var v = "_1xhatbpb _1y2v1nfb1 _1y2v1nfec _1y2v1nfbz _1y2v1nfcf _1y2v1nfdq _1y2v1nf31 _1y2v1nfdn", t = "_1xhatbpe", n = "_1xhatbpf", _ = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nfb1 _1y2v1nfc2 _1y2v1nfcf _1y2v1nfe6 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb1 _1y2v1nfew _1y2v1nfbu _1y2v1nfdz _1y2v1nfdn", b = "_1xhatbpm", x = "_1xhatbpn", h = "_1xhatbpo", o = "_1xhatbpp", y = "_1xhatbpq", i = "_1xhatbp6", m = "_1xhatbp7", w = "_1xhatbp8", d = "_1xhatbpk", c = "_1xhatbpl", s = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, s = "_1y2v1nfba";
+}, A = "_1y2v1nfb7";

package/dist/tooltip.css.d.ts

@@ -20,6 +20,7 @@ export declare const wrapper: string;
 export declare const tooltipMinWidth = 40;
 export declare const container: string;
 export declare const textAlign: string;
+export declare const textCenter: string;
 export declare const enter: string;
 export declare const enterActive: string;
 export declare const enterDone: string;

package/dist/tooltip.d.ts

@@ -13,7 +13,8 @@ type Props = {
     delay?: boolean;
     dataAttributes?: DataAttributes;
     targetStyle?: React.CSSProperties;
-    unstable_offsetX?: number;
+    unstable_offsetX?: number | string;
+    textCenter?: boolean;
 };
 declare const Tooltip: React.FC<Props>;
 export default Tooltip;

package/dist/tooltip.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return oe;
+        return ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500, M = ()=>{}, It = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, Mt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Nt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", kt = (r)=>r === "top" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Lt = (r)=>r ? "1" : "0.2", Vt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : "", jt = (_param)=>{
-    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f  } = _param, C = _object_without_properties(_param, [
+const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500, M = ()=>{}, Nt = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, kt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Lt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Vt = (r)=>r === "top" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, jt = (r)=>r ? "1" : "0.2", Kt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : "", zt = (_param)=>{
+    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f , textCenter: z  } = _param, y = _object_without_properties(_param, [
         "children",
         "extra",
         "description",
@@ -156,16 +156,17 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
         "delay",
         "dataAttributes",
         "targetStyle",
-        "unstable_offsetX"
+        "unstable_offsetX",
+        "textCenter"
     ]);
-    const { isDarkMode: z  } = (0, _hooks.useTheme)(), [a, O] = _react.useState(!1), { isTabletOrSmaller: F  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), R = _react.useRef(null), x = _react.useRef(null), t = _react.useRef({
+    const { isDarkMode: F  } = (0, _hooks.useTheme)(), [a, C] = _react.useState(!1), { isTabletOrSmaller: H  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), O = _react.useRef(null), x = _react.useRef(null), t = _react.useRef({
         top: 0,
         right: 0,
         left: 0,
         bottom: 0,
         width: 0,
         height: 0
-    }), [H, X] = _react.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = _react.useState(void 0), i = ((n)=>{
+    }), [X, q] = _react.useState({}), G = (n)=>H ? n || Bt : n || $t, [e, J] = _react.useState(void 0), i = ((n)=>{
         if (!e) return n;
         const u = (d)=>{
             const p = t.current.top > e.height;
@@ -177,21 +178,21 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             left: t.current.left < e.width ? t.current.right + e.width > window.innerWidth ? t.current.top < e.height ? "bottom" : "top" : "right" : n,
             bottom: t.current.bottom + e.height > window.innerHeight ? l("top") : l(n)
         })[n];
-    })(q(C.position)), y = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
-        a && O(!1);
+    })(G(y.position)), R = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && C(!1);
     };
     _react.useEffect(()=>(window.addEventListener("resize", W), ()=>{
             window.removeEventListener("resize", W);
         }));
     const $ = ()=>{
-        O(!1);
+        C(!1);
     }, T = ()=>{
-        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
-    }, J = ()=>{
+        O.current && (t.current = O.current.getBoundingClientRect(), C(!a));
+    }, Q = ()=>{
         a || T();
-    }, Q = (n)=>{
-        n.keyCode === _keycodes.TAB && $();
     }, U = (n)=>{
+        n.keyCode === _keycodes.TAB && $();
+    }, Z = (n)=>{
         if (!e) return {};
         const u = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? t.current.width / 2 : "50%";
         return n === "bottom" || n === "top" ? {
@@ -221,42 +222,42 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
     }, [
         f,
         e
-    ]), b = (()=>C.width)(), Z = {
+    ]), b = (()=>y.width)(), _ = {
         top: _tooltipcssmistica.arrowTop,
         bottom: _tooltipcssmistica.arrowBottom,
         left: _tooltipcssmistica.arrowLeft,
         right: _tooltipcssmistica.arrowRight
-    }, _ = i && (0, _dynamic.assignInlineVars)({
-        [_tooltipcssmistica.vars.enterTransform]: It(i),
-        [_tooltipcssmistica.vars.exitTransform]: Nt(i),
-        [_tooltipcssmistica.vars.enterActiveAnimationName]: kt(i),
-        [_tooltipcssmistica.vars.enterDoneTransform]: Mt(i),
-        [_tooltipcssmistica.vars.shadowAlpha]: Lt(z),
-        [_tooltipcssmistica.vars.arrowBoxShadow]: Vt(i)
+    }, tt = i && (0, _dynamic.assignInlineVars)({
+        [_tooltipcssmistica.vars.enterTransform]: Nt(i),
+        [_tooltipcssmistica.vars.exitTransform]: Lt(i),
+        [_tooltipcssmistica.vars.enterActiveAnimationName]: Vt(i),
+        [_tooltipcssmistica.vars.enterDoneTransform]: kt(i),
+        [_tooltipcssmistica.vars.shadowAlpha]: jt(F),
+        [_tooltipcssmistica.vars.arrowBoxShadow]: Kt(i)
     });
     return _react.useEffect(()=>{
-        i && x.current && a && X(B(i, b || 0));
+        i && x.current && a && q(B(i, b || 0));
     }, [
         a,
         B,
         i,
         b
     ]), _react.useEffect(()=>{
-        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+        x.current && (x.current.getBoundingClientRect(), a && J(x.current.getBoundingClientRect()));
     }, [
         a
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: R,
+                ref: O,
                 style: K,
                 className: _tooltipcssmistica.wrapper,
                 onPointerOver: ()=>{
                     c.current && (clearTimeout(c.current), c.current = null), !h.current && (h.current = !0, V ? g.current = setTimeout(()=>{
                         g.current = null, T();
-                    }, Et) : T());
+                    }, Mt) : T());
                 },
-                onPointerLeave: y ? M : ()=>{
+                onPointerLeave: R ? M : ()=>{
                     if (g.current) {
                         clearTimeout(g.current), g.current = null, h.current = !1;
                         return;
@@ -265,8 +266,8 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                         h.current && (c.current = null, h.current = !1, T());
                     }, 100);
                 },
-                onFocus: J,
-                onKeyDown: Q,
+                onFocus: Q,
+                onKeyDown: U,
                 "touch-action": "auto",
                 role: "button",
                 tabIndex: 0,
@@ -277,12 +278,12 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_portal.Portal, {
                 children: [
-                    a && y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+                    a && R && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                         onPress: $
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                         in: a,
-                        timeout: Bt,
+                        timeout: It,
                         classNames: {
                             enter: _tooltipcssmistica.enter,
                             enterActive: _tooltipcssmistica.enterActive,
@@ -296,22 +297,22 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                         }, (0, _dom.getPrefixedDataAttributes)(j, "Tooltip")), {
                             role: "tooltip",
                             id: D,
-                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign),
+                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign, z ? _tooltipcssmistica.textCenter : ""),
                             style: _object_spread({
                                 width: b
-                            }, H, _),
+                            }, X, tt),
                             onPointerOver: ()=>{
                                 c.current && (clearTimeout(c.current), c.current = null);
                             },
-                            onPointerLeave: y ? M : ()=>{
+                            onPointerLeave: R ? M : ()=>{
                                 c.current = setTimeout(()=>{
                                     h.current && (c.current = null, h.current = !1, T());
                                 }, 100);
                             },
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    style: U(i),
-                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, Z[i]),
+                                    style: Z(i),
+                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, _[i]),
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _tooltipcssmistica.arrow
                                     })
@@ -337,4 +338,4 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             })
         ]
     });
-}, oe = jt;
+}, ae = zt;

package/dist/utils/locale.d.ts

@@ -1 +1 @@
-export type Locale = 'ca-ES' | 'en-US' | 'de-DE' | 'es-AR' | 'es-CO' | 'es-EC' | 'es-ES' | 'es-MX' | 'es-PE' | 'es-UY' | 'eu-ES' | 'gl-ES' | 'pt-BR';
+export type Locale = 'ca-ES' | 'en-US' | 'en-GB' | 'de-DE' | 'es-AR' | 'es-CO' | 'es-EC' | 'es-ES' | 'es-MX' | 'es-PE' | 'es-UY' | 'eu-ES' | 'gl-ES' | 'pt-BR';