@telefonica/mistica 14.39.0 → 14.40.0

package/dist-es/theme.js

@@ -266,31 +266,31 @@ const l = {
 }, u = 56, d = 80, E = {
     headerMobileHeight: u,
     headerDesktopHeight: d
-}, m = (_param)=>/* @__PURE__ */ {
+}, m = (_param)=>{
     var { to: e, innerRef: r } = _param, a = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
-    return o("a", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ o("a", _object_spread_props(_object_spread({
         ref: r,
         href: typeof e == "string" ? e : e == null ? void 0 : e.pathname
     }, a), {
         children: a.children
     }));
-}, C = (e)=>e, f = (e)=>(_param)=>/* @__PURE__ */ {
+}, C = (e)=>e, f = (e)=>(_param)=>{
         var { innerRef: r } = _param, a = _object_without_properties(_param, [
             "innerRef"
         ]);
-        return o(e, _object_spread({
+        return /* @__PURE__ */ o(e, _object_spread({
             ref: r
         }, a));
-    }, p = (e)=>(_param)=>/* @__PURE__ */ {
+    }, p = (e)=>(_param)=>{
         var { to: r, innerRef: a, children: t } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return o(e, {
+        return /* @__PURE__ */ o(e, {
             href: r,
             children: /* @__PURE__ */ o("a", _object_spread_props(_object_spread({
                 ref: a
@@ -298,13 +298,13 @@ const l = {
                 children: t
             }))
         });
-    }, b = (e)=>(_param)=>/* @__PURE__ */ {
+    }, b = (e)=>(_param)=>{
         var { to: r, innerRef: a, children: t } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return o(e, _object_spread_props(_object_spread({
+        return /* @__PURE__ */ o(e, _object_spread_props(_object_spread({
             href: r,
             ref: a
         }, n), {

package/dist-es/title.js

@@ -115,9 +115,9 @@ const m = (param)=>{
             "component-name": "Title2"
         }, s)
     });
-}, S = (param)=>/* @__PURE__ */ {
+}, S = (param)=>{
     let { children: t, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
-    return e(m, {
+    return /* @__PURE__ */ e(m, {
         title: /* @__PURE__ */ e(h, {
             as: i,
             id: o,

package/dist-es/tooltip.js

@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as F, Fragment as mt, jsx as f } from "react/jsx-runtime";
+import { jsxs as F, Fragment as mt, jsx as p } from "react/jsx-runtime";
 import * as i from "react";
 import { useAriaId as ht, useBoundingRect as it, useWindowSize as gt } from "./hooks.js";
 import { Portal as Tt } from "./portal.js";
@@ -63,67 +63,68 @@ import { getCssVarValue as wt, getPrefixedDataAttributes as Rt } from "./utils/d
 import { TAB as _t, ESC as Ct } from "./utils/keys.js";
 import { isTouchableDevice as Nt } from "./utils/environment.js";
 import { isEqual as st } from "./utils/helpers.js";
-import q from "classnames";
-import { vars as Z } from "./skins/skin-contract.css-mistica.js";
+import Z from "classnames";
+import { vars as J } from "./skins/skin-contract.css-mistica.js";
 import { useIsInverseVariant as kt, ThemeVariant as Lt } from "./theme-variant-context.js";
 import { combineRefs as At } from "./utils/common.js";
 import { useTooltipState as $t, useSetTooltipState as Pt } from "./tooltip-context-provider.js";
 import { isRunningAcceptanceTest as Ft } from "./utils/platform.js";
 const at = (e)=>({
-        border: `1px solid ${e ? Z.colors.backgroundContainer : Z.colors.border}`
-    }), lt = 496, Dt = 300, Wt = 500, Vt = 100, c = 20, b = 6, E = b + c / 2 + 1, Bt = (e)=>{
+        border: `1px solid ${e ? J.colors.backgroundContainer : J.colors.border}`
+    }), lt = 496, Dt = 300, Wt = 500, Vt = 100, c = 20, O = 6, E = O + c / 2 + 1, Bt = (e)=>{
     switch(e){
         case "left":
-            return `translateX(-${b}px)`;
+            return `translateX(-${O}px)`;
         case "right":
-            return `translateX(${b}px)`;
+            return `translateX(${O}px)`;
         case "top":
-            return `translateY(-${b}px)`;
+            return `translateY(-${O}px)`;
         case "bottom":
-            return `translateY(${b}px)`;
+            return `translateY(${O}px)`;
         default:
             return "";
     }
-}, ft = (e)=>{
-    const O = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), m = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), w = e.offsetWidth - O, h = e.offsetHeight - m;
+}, pt = (e)=>{
+    const I = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), m = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), w = e.offsetWidth - I, h = e.offsetHeight - m;
     return {
         width: w,
         height: h
     };
-}, ct = (e, O, m, w, h)=>{
-    if (!e || !O) return;
-    const { top: D, bottom: R, left: W, right: V } = e, I = w - R, g = h - V, M = D, n = W, { width: B, height: $ } = ft(O), S = B + E, d = $ + E, y = S <= Math.max(n, g), T = d <= Math.max(I, M);
-    if (!(!T && !y)) switch(m){
+}, ct = (e, I, m, w, h)=>{
+    if (!e || !I) return;
+    const { top: D, bottom: R, left: W, right: V } = e, M = w - R, g = h - V, S = D, n = W, { width: B, height: $ } = pt(I), y = B + E, d = $ + E, T = y <= Math.max(n, g), v = d <= Math.max(M, S);
+    if (!(!v && !T)) switch(m){
         case "left":
-            return y ? S <= n ? "left" : "right" : I > M ? "bottom" : "top";
+            return T ? y <= n ? "left" : "right" : M > S ? "bottom" : "top";
         case "right":
-            return y ? S <= g ? "right" : "left" : I > M ? "bottom" : "top";
+            return T ? y <= g ? "right" : "left" : M > S ? "bottom" : "top";
         case "top":
-            return T ? d <= M ? "top" : "bottom" : n > g ? "left" : "right";
+            return v ? d <= S ? "top" : "bottom" : n > g ? "left" : "right";
         case "bottom":
-            return T ? d <= I ? "bottom" : "top" : n > g ? "left" : "right";
+            return v ? d <= M ? "bottom" : "top" : n > g ? "left" : "right";
         default:
             return;
     }
 }, Xt = (param)=>{
-    let { children: e, extra: O, description: m, target: w, title: h, width: D, position: R = "top", dataAttributes: W, delay: V = !0, centerContent: I, open: g, textCenter: M } = param;
-    const n = ht(), { openTooltipId: B } = $t(), { openTooltip: $, closeTooltip: S } = Pt(), [d, y] = i.useState(), [T, J] = i.useState(), X = i.useRef(null), z = i.useRef(null), [_, pt] = i.useState(null), p = Nt(), H = V ? Wt : 0, [Q, Y] = i.useState(!1), [tt, P] = i.useState(!1), G = g !== void 0, [et, K] = i.useState(!1), v = G ? g : n === B, U = kt(), l = it(X, v), dt = it(z, v, !0), s = gt(), x = i.useCallback(()=>{
-        K(!1), Y(!1), P(!1);
+    let { children: e, extra: I, description: m, target: w, title: h, width: D, position: R = "top", dataAttributes: W, delay: V = !0, centerContent: M, open: g, textCenter: S } = param;
+    const n = ht(), { openTooltipId: B } = $t(), { openTooltip: $, closeTooltip: y } = Pt(), [d, T] = i.useState(), [v, X] = i.useState(), z = i.useRef(null), H = i.useRef(null), [_, ft] = i.useState(null), f = Nt(), Y = V ? Wt : 0, [Q, G] = i.useState(!1), [tt, P] = i.useState(!1), K = g !== void 0, [et, U] = i.useState(!1), x = K ? g : n === B, j = kt(), l = it(z, x), dt = it(H, x, !0), s = gt(), b = i.useCallback(()=>{
+        U(!1), G(!1), P(!1);
     }, []);
     i.useEffect(()=>{
-        v || x();
+        x || b();
     }, [
-        v,
-        x
+        x,
+        b
     ]), i.useEffect(()=>{
-        if (!_ || !v) return;
+        if (!_ || !x) return;
         const r = ct(l, _, R, s.height, s.width);
         if (!r || !l) {
-            y(void 0), J(void 0), x();
+            T(void 0), X(void 0), b();
             return;
         }
         let o, t;
-        const { left: a, right: C, top: N, bottom: k } = l, { width: L, height: A } = ft(_), ot = s.width - L, rt = s.height - A, u = parseInt(wt(Z.borderRadii.container)) || 8;
+        var _parseInt;
+        const { left: a, right: C, top: N, bottom: k } = l, { width: L, height: A } = pt(_), ot = s.width - L, rt = s.height - A, u = (_parseInt = parseInt(wt(J.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
         switch(r){
             case "top":
                 o = {
@@ -138,7 +139,7 @@ const at = (e)=>({
             case "bottom":
                 o = {
                     left: Math.max(0, Math.min(ot, (a + C - L) / 2)),
-                    top: k - b,
+                    top: k - O,
                     padding: `${E}px 0px 0px 0px`
                 }, t = {
                     left: Math.max(u, Math.min(s.width - u - c, (a + C - c) / 2)),
@@ -161,7 +162,7 @@ const at = (e)=>({
             case "right":
             default:
                 o = {
-                    left: C - b,
+                    left: C - O,
                     top: Math.max(0, Math.min(rt, (N + k - A) / 2)),
                     padding: `0px 0px 0px ${E}px`
                 }, t = {
@@ -172,90 +173,93 @@ const at = (e)=>({
                 };
                 break;
         }
-        typeof t.top == "number" && (t.top -= o.top, t.top = `${t.top / A * 100}%`), typeof t.left == "number" && (t.left -= o.left, t.left = `${t.left / L * 100}%`), st(o, d) || y(o), st(t, T) || J(t);
+        typeof t.top == "number" && (t.top -= o.top, t.top = `${t.top / A * 100}%`), typeof t.left == "number" && (t.left -= o.left, t.left = `${t.left / L * 100}%`), st(o, d) || T(o), st(t, v) || X(t);
     }, [
         _,
         l,
         dt,
-        v,
+        x,
         R,
         s,
         d,
-        T,
-        U,
-        p,
+        v,
+        j,
+        f,
         n,
-        x
+        b
     ]);
-    const j = i.useRef(!1);
+    const q = i.useRef(!1);
     i.useEffect(()=>{
         const r = (a)=>{
             switch(a.key){
                 case Ct:
-                    x();
+                    b();
                     break;
                 case _t:
-                    j.current = !0;
+                    q.current = !0;
                     break;
             }
-        }, o = ()=>j.current = !1, t = (a)=>{
-            p && l && (a.clientX < l.left || a.clientX > l.right || a.clientY < l.top || a.clientY > l.bottom) && x();
+        }, o = ()=>q.current = !1, t = (a)=>{
+            f && l && (a.clientX < l.left || a.clientX > l.right || a.clientY < l.top || a.clientY > l.bottom) && b();
         };
         return document.addEventListener("keydown", r, !1), document.addEventListener("keyup", o, !1), document.addEventListener("click", t, !1), ()=>{
             document.removeEventListener("keydown", r, !1), document.removeEventListener("keyup", o, !1), document.removeEventListener("click", t, !1);
         };
     }, [
-        p,
-        x,
+        f,
+        b,
         l
     ]), i.useEffect(()=>{
-        G || (tt || Q || et ? $(n) : S(n));
+        K || (tt || Q || et ? $(n) : y(n));
     }, [
         tt,
         Q,
         et,
         n,
         $,
-        S,
-        G
+        y,
+        K
     ]);
     const ut = ct(l, _, R, s.height, s.width);
     return /* @__PURE__ */ F(mt, {
         children: [
-            /* @__PURE__ */ f("div", {
+            /* @__PURE__ */ p("div", {
                 ref: (r)=>{
                     const o = r == null ? void 0 : r.firstElementChild;
-                    o && o !== X.current && (X.current = o);
+                    o && o !== z.current && (z.current = o);
                 },
                 onMouseOver: ()=>{
-                    p || P(!0);
+                    f || P(!0);
                 },
                 onMouseLeave: ()=>{
-                    p || P(!1);
+                    f || P(!1);
                 },
                 onClick: ()=>{
-                    p && P(!0);
+                    f && P(!0);
                 },
                 onFocus: ()=>{
-                    j.current && K(!0);
+                    q.current && U(!0);
                 },
                 onBlur: ()=>{
-                    p || K(!1);
+                    f || U(!1);
                 },
                 "aria-describedby": n,
                 children: w
             }),
-            /* @__PURE__ */ f(Tt, {
-                children: /* @__PURE__ */ f(vt, {
-                    in: v,
-                    nodeRef: z,
+            /* @__PURE__ */ p(Tt, {
+                children: /* @__PURE__ */ p(vt, {
+                    in: x,
+                    nodeRef: H,
                     timeout: Ft() ? 0 : {
-                        enter: Dt + H,
+                        enter: Dt + Y,
                         exit: Vt
                     },
+                    onExited: ()=>{
+                        T(void 0), X(void 0);
+                    },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    children: (r)=>/* @__PURE__ */ f("div", _object_spread_props(_object_spread({
+                    children: (r)=>/* @__PURE__ */ p("div", _object_spread_props(_object_spread({
                             style: {
                                 /**
                * Hack to prevent text from wrapping automatically when touching the viewport's edges,
@@ -271,29 +275,29 @@ const at = (e)=>({
                             role: "tooltip",
                             "aria-label": n,
                             tabIndex: -1,
-                            children: /* @__PURE__ */ f("div", {
-                                className: q(xt),
+                            children: /* @__PURE__ */ p("div", {
+                                className: Z(xt),
                                 style: _object_spread_props(_object_spread({
                                     pointerEvents: r === "entered" ? "auto" : "none",
                                     transform: Bt(ut)
                                 }, d, bt[r]), {
-                                    transition: r === "entering" ? `opacity .1s linear ${H}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${H}ms` : "opacity .1s linear"
+                                    transition: r === "entering" ? `opacity .1s linear ${Y}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${Y}ms` : "opacity .1s linear"
                                 }),
-                                ref: At(pt, z),
+                                ref: At(ft, H),
                                 onMouseEnter: ()=>{
-                                    !p && r === "entered" && Y(!0);
+                                    !f && r === "entered" && G(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    p || Y(!1);
+                                    f || G(!1);
                                 },
                                 children: /* @__PURE__ */ F("div", {
                                     className: Ot,
                                     style: _object_spread({
                                         width: D
-                                    }, at(U)),
+                                    }, at(j)),
                                     children: [
-                                        /* @__PURE__ */ f("div", {
-                                            className: q(It, I || M ? Mt : void 0),
+                                        /* @__PURE__ */ p("div", {
+                                            className: Z(It, M || S ? Mt : void 0),
                                             style: {
                                                 maxWidth: Math.min(lt, s.width)
                                             },
@@ -303,26 +307,26 @@ const at = (e)=>({
                                                     (h || m) && /* @__PURE__ */ F(Et, {
                                                         space: 4,
                                                         children: [
-                                                            h && /* @__PURE__ */ f(nt, {
+                                                            h && /* @__PURE__ */ p(nt, {
                                                                 medium: !0,
                                                                 children: h
                                                             }),
-                                                            m && /* @__PURE__ */ f(nt, {
+                                                            m && /* @__PURE__ */ p(nt, {
                                                                 regular: !0,
                                                                 children: m
                                                             })
                                                         ]
                                                     }),
-                                                    O || e
+                                                    I || e
                                                 ]
                                             })
                                         }),
-                                        /* @__PURE__ */ f("div", {
+                                        /* @__PURE__ */ p("div", {
                                             className: St,
-                                            style: T,
-                                            children: /* @__PURE__ */ f("div", {
-                                                className: q(yt),
-                                                style: at(U)
+                                            style: v,
+                                            children: /* @__PURE__ */ p("div", {
+                                                className: Z(yt),
+                                                style: at(j)
                                             })
                                         })
                                     ]

package/dist-es/utils/animation.js

@@ -174,9 +174,9 @@ const a = (e)=>!o(e), d = (e, t)=>a(t) ? {
                 })
             ]
         })
-    } : null, m = (param, t)=>/* @__PURE__ */ {
+    } : null, m = (param, t)=>{
     let { children: e } = param;
-    return n(l, {
+    return /* @__PURE__ */ n(l, {
         children: [
             e,
             t

package/dist-es/utils/css.js

@@ -31,7 +31,7 @@ import { isRunningAcceptanceTest as s } from "./platform.js";
 const n = 16, f = (e)=>`${(parseFloat(e) / n).toFixed(3)}rem`, p = (e)=>_object_spread({}, r(e));
 s();
 s();
-const v = s() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
+const v = s() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset-bottom, 0px))" : "env(safe-area-inset-bottom)";
 s();
 const o = function() {
     for(var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++){

package/dist-es/video.js

@@ -142,9 +142,9 @@ const K = {
             width: "100%",
             height: "100%"
         },
-        children: V.map((param, i)=>/* @__PURE__ */ {
+        children: V.map((param, i)=>{
             let { src: e, type: t } = param;
-            return l("source", {
+            return /* @__PURE__ */ l("source", {
                 src: e,
                 type: t
             }, i);

package/dist-es/vivinho-loading-animation/pulse-lottie.json.js

@@ -116,9 +116,7 @@ const t = "4.8.0", e = {
                         ]
                     }
                 ],
-                ix: 6,
-                x: `var $bm_rt;
-$bm_rt = loopOut('cycle', 0);`
+                ix: 6
             }
         },
         ao: 0,
@@ -1946,7 +1944,7 @@ $bm_rt = loopOut('cycle', 0);`
         bm: 0,
         completed: !0
     }
-], c = [], d = !0, l = {
+], c = [], d = !0, p = {
     v: t,
     meta: e,
     fr: r,
@@ -1961,4 +1959,4 @@ $bm_rt = loopOut('cycle', 0);`
     markers: c,
     __complete: d
 };
-export { d as __complete, k as assets, x as ddd, l as default, r as fr, o as h, a as ip, m as layers, c as markers, e as meta, n as nm, i as op, t as v, s as w };
+export { d as __complete, k as assets, x as ddd, p as default, r as fr, o as h, a as ip, m as layers, c as markers, e as meta, n as nm, i as op, t as v, s as w };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.39.0",
+    "version": "14.40.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -28,13 +28,13 @@
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf css/mistica.css && rimraf community.d.ts && rimraf community.js && rimraf node_modules/.cache",
         "prepublishOnly": "node scripts/prepublish-only.js",
         "prepack": "yarn build",
-        "storybook": "start-storybook -p 6006",
+        "storybook": "storybook dev -p 6006",
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
         "vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
-        "storybook-static": "rimraf public && yarn build-storybook -s ./.storybook/css/fonts -o public --quiet",
+        "storybook-static": "rimraf public && storybook build -s ./.storybook/css/fonts -o public --quiet",
         "serve-static-storybook": "node ./scripts/serve-static-storybook.js",
         "detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
         "audit-accessibility": "node .github/actions/audit-accessibility/main.js",
@@ -66,19 +66,17 @@
         "@azure/storage-blob": "^12.9.0",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/git": "^10.0.1",
-        "@storybook/addon-actions": "6.5.15",
-        "@storybook/addon-controls": "6.5.15",
-        "@storybook/addon-links": "6.5.15",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addon-storysource": "6.5.15",
-        "@storybook/addon-viewport": "6.5.15",
-        "@storybook/addons": "6.5.15",
-        "@storybook/builder-webpack5": "^6.5.15",
-        "@storybook/cli": "6.5.15",
-        "@storybook/components": "6.5.15",
-        "@storybook/manager-webpack5": "^6.5.15",
-        "@storybook/react": "6.5.15",
-        "@storybook/theming": "6.5.15",
+        "@storybook/addon-actions": "7.6.6",
+        "@storybook/addon-controls": "7.6.6",
+        "@storybook/addon-links": "7.6.6",
+        "@storybook/addon-storysource": "7.6.6",
+        "@storybook/addon-viewport": "7.6.6",
+        "@storybook/addons": "7.6.6",
+        "@storybook/cli": "7.6.6",
+        "@storybook/components": "7.6.6",
+        "@storybook/react": "7.6.6",
+        "@storybook/react-webpack5": "7.6.6",
+        "@storybook/theming": "7.6.6",
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.95",
         "@swc/jest": "^0.2.29",
@@ -99,6 +97,7 @@
         "@types/react-transition-group": "^4.4.4",
         "@types/rimraf": "^3.0.2",
         "@types/semver-compare": "^1.0.1",
+        "@types/webpack-env": "^1.18.4",
         "@vanilla-extract/jest-transform": "^1.1.0",
         "@vanilla-extract/vite-plugin": "^3.8.2",
         "@vanilla-extract/webpack-plugin": "^2.2.0",
@@ -112,7 +111,6 @@
         "es6-promise-pool": "^2.5.0",
         "eslint": "^8.11.0",
         "eslint-plugin-mistica-local-rules": "workspace:*",
-        "file-loader": "^6.2.0",
         "glob": "^7.2.0",
         "gzip-size": "^6.0.0",
         "husky": "^7.0.4",
@@ -139,6 +137,7 @@
         "rollup-plugin-preserve-directives": "^0.2.0",
         "semantic-release": "^19.0.2",
         "serve-handler": "^6.1.5",
+        "storybook": "7.6.6",
         "swc-loader": "^0.2.3",
         "typescript": "^4.6.3",
         "vite": "^4.5.0",