@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/utils/aspect-ratio-support.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -51,15 +52,15 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as h } from "react/jsx-runtime";
-import { assignInlineVars as m } from "@vanilla-extract/dynamic";
-import l from "classnames";
-import * as c from "react";
-import { useIsomorphicLayoutEffect as f } from "../hooks.js";
-import { container as w, containerWithWrapper as R, vars as b, wrapper as g } from "./aspect-ratio-support.css-mistica.js";
-const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
-    let { children: t  } = param;
-    const [o, s] = c.useState(!0);
-    return f(()=>{
+import m from "classnames";
+import * as n from "react";
+import { useIsomorphicLayoutEffect as l } from "../hooks.js";
+import { container as f, containerWithWrapper as w, vars as R, wrapper as b } from "./aspect-ratio-support.css-mistica.js";
+import { applyCssVars as y } from "./css.js";
+const u = /*#__PURE__*/ n.createContext(!0), x = (param)=>{
+    let { children: t } = param;
+    const [o, s] = n.useState(!0);
+    return l(()=>{
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
         } catch (e) {
@@ -69,26 +70,26 @@ const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
         value: o,
         children: t
     });
-}, N = ()=>c.useContext(u), W = (t)=>{
+}, N = ()=>n.useContext(u), W = (t)=>{
     const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     let i = t.width, a = t.height;
     t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / t.aspectRatio : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * t.aspectRatio : void 0 : i = t.width || "100%";
     var _t_as;
-    const n = s && !o, r = /*#__PURE__*/ c.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
-        className: l(t.className, w, {
-            [R]: n
+    const c = s && !o, r = /*#__PURE__*/ n.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
+        className: m(t.className, f, {
+            [w]: c
         }),
-        style: _object_spread({}, n ? _object_spread_props(_object_spread({}, t.style), {
+        style: _object_spread({}, c ? _object_spread_props(_object_spread({}, t.style), {
             position: e ? "absolute" : "static",
             width: "100%"
         }) : _object_spread_props(_object_spread({}, t.style), {
             width: isNaN(Number(i)) ? i : Number(i),
             height: isNaN(Number(a)) ? a : Number(a)
-        }), m({
-            [b.aspectRatio]: e ? String(e) : "unset"
+        }), y({
+            [R.aspectRatio]: e ? String(e) : "unset"
         }))
-    }, !n && t.dataAttributes), t.children);
-    if (n) {
+    }, !c && t.dataAttributes), t.children);
+    if (c) {
         const d = (()=>e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${Number(t.width.replace("%", "")) / e}%` : `${100 / e}%` : 0)();
         return /* @__PURE__ */ h("div", _object_spread_props(_object_spread({
             style: {
@@ -96,7 +97,7 @@ const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
                 height: a,
                 paddingTop: d
             },
-            className: g
+            className: b
         }, t.dataAttributes), {
             children: r
         }));

package/dist-es/utils/css.js

@@ -1,7 +1,36 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(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) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { assignInlineVars as t } from "@vanilla-extract/dynamic";
 import { isRunningAcceptanceTest as e } from "./platform.js";
-const t = 16, r = (a)=>`${(parseFloat(a) / t).toFixed(3)}rem`;
+const s = 16, o = (a)=>`${(parseFloat(a) / s).toFixed(3)}rem`, i = (a)=>_object_spread({}, t(a));
 e();
 e();
-const n = e() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
+const c = e() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
 e();
-export { r as pxToRem, n as safeAreaInsetBottom };
+export { i as applyCssVars, o as pxToRem, c as safeAreaInsetBottom };

package/dist-es/utils/document-visibility.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as a } from "react/jsx-runtime";
 import * as t from "react";
 import { useTheme as v } from "../hooks.js";
 import { isAndroid as b } from "./platform.js";
 const i = ()=>typeof document < "u" && document.visibilityState === "visible", u = /*#__PURE__*/ t.createContext(!0), E = (param)=>{
-    let { hidden: m , children: l  } = param;
-    const { platformOverrides: d  } = v(), [o, e] = t.useState(!m);
+    let { hidden: m, children: l } = param;
+    const { platformOverrides: d } = v(), [o, e] = t.useState(!m);
     t.useEffect(()=>{
         const s = ()=>{
             e(i());

package/dist-es/utils/dom.js

@@ -111,7 +111,7 @@ const h = (e, t, r)=>e.addEventListener(t, r, c ? {
 }, i = (e)=>e.startsWith("var(") || e.startsWith("--"), l = (e, t)=>{
     if (!i(e)) throw new Error(`Invalid css var: ${e}`);
     if (e.startsWith("var(")) {
-        const { varName: r , fallback: n  } = v(e), s = l(r, t);
+        const { varName: r, fallback: n } = v(e), s = l(r, t);
         return !s && n ? i(n) ? l(n, t) : n : s;
     }
     return getComputedStyle(t !== null && t !== void 0 ? t : document.documentElement).getPropertyValue(e);

package/dist-es/utils/environment.js

@@ -1,2 +1,2 @@
-const e = ()=>typeof window > "u", i = ()=>!e();
-export { i as isClientSide, e as isServerSide };
+const e = ()=>typeof window > "u", i = ()=>!e(), o = ()=>i() ? window.matchMedia("(pointer: coarse)").matches : !1;
+export { i as isClientSide, e as isServerSide, o as isTouchableDevice };

package/dist-es/utils/keys.js

@@ -0,0 +1,2 @@
+const o = "ArrowLeft", t = "ArrowUp", n = "ArrowRight", r = "ArrowDown", c = "Enter", s = "Escape", E = " ", A = "Tab";
+export { r as DOWN, c as ENTER, s as ESC, o as LEFT, n as RIGHT, E as SPACE, A as TAB, t as UP };

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var f = "_1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg4";
+var f = "_1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg5";
 export { f as video };

package/dist-es/video.js

@@ -1,3 +1,4 @@
+"use client";
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -27,13 +28,15 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as l, jsxs as G } from "react/jsx-runtime";
 import * as n from "react";
-import { useMediaBorderRadius as J, ImageContent as M, ImageError as O } from "./image.js";
-import { AspectRatioContainer as P } from "./utils/aspect-ratio-support.js";
-import { isRunningAcceptanceTest as Q } from "./utils/platform.js";
-import { video as X } from "./video.css-mistica.js";
-import { vars as Y } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
-const q = {
+import { ImageContent as $, ImageError as J } from "./image.js";
+import { AspectRatioContainer as O } from "./utils/aspect-ratio-support.js";
+import { isRunningAcceptanceTest as P } from "./utils/platform.js";
+import { video as Q } from "./video.css-mistica.js";
+import { vars as X } from "./image.css-mistica.js";
+import { getPrefixedDataAttributes as Y } from "./utils/dom.js";
+import { fallbackVar as q } from "@vanilla-extract/css";
+import { vars as D } from "./skins/skin-contract.css-mistica.js";
+const K = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -60,12 +63,12 @@ const q = {
     error: {
         reset: "loading"
     }
-}, D = (r, u)=>q[r][u] || r, K = {
+}, M = (r, u)=>K[r][u] || r, _ = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ n.forwardRef((_param, A)=>{
-    var { src: r , poster: u , autoPlay: p = "when-loaded" , muted: x = !0 , loop: N = !0 , preload: k = "none" , loadingTimeout: T = 1e4 , onLoad: y , onError: h , onPause: R , onPlay: b , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, o = _object_without_properties(_param, [
+}, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", H = /*#__PURE__*/ n.forwardRef((_param, A)=>{
+    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: k = !0, loop: N = !0, preload: V = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: v, onPlay: R, aspectRatio: c = "1:1", dataAttributes: x } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -80,7 +83,7 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, d] = n.useReducer(D, "loading"), s = n.useRef(null), C = n.useRef(), f = n.useRef(null), w = J(), g = typeof c == "number" ? c : K[c], v = n.useCallback(()=>{
+    const [a, d] = n.useReducer(M, "loading"), s = n.useRef(null), C = n.useRef(), f = n.useRef(null), b = q(X.mediaBorderRadius, D.borderRadii.container), m = typeof c == "number" ? c : _[c], w = n.useCallback(()=>{
         a === "loading" && (d("fail"), h == null || h());
     }, [
         h,
@@ -90,39 +93,39 @@ const q = {
         var e;
         if (C.current !== r) {
             let t;
-            return C.current = r, d("reset"), r ? (t = setTimeout(v, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
+            return C.current = r, d("reset"), r ? (t = setTimeout(w, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
                 clearTimeout(t);
             };
         }
     }, [
         r,
         T,
-        v
+        w
     ]);
     const I = ()=>{
         y == null || y();
-        const e = s.current, t = p && !Q();
+        const e = s.current, t = p && !P();
         d("finishLoad"), e && t && e.paused && e.play();
     }, U = (Array.isArray(r) ? r : [
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), m = a === "error" || a === "loading" || a === "loaded", V = /* @__PURE__ */ l("video", {
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ l("video", {
         ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: x,
+        muted: k,
         loop: N,
-        className: X,
-        preload: k,
-        onError: v,
+        className: Q,
+        preload: V,
+        onError: w,
         onPause: ()=>{
-            R == null || R(), d("pause");
+            v == null || v(), d("pause");
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), d("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (R == null || R(), d("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -130,23 +133,23 @@ const q = {
         onCanPlayThrough: ()=>{
             p !== "streaming" && I();
         },
-        poster: _,
+        poster: z,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? Y.borderRadii.container : 0,
-            visibility: m ? "hidden" : "visible",
-            position: m || g !== 0 ? "absolute" : "static",
+            borderRadius: b,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
         children: U.map((param, i)=>/* @__PURE__ */ {
-            let { src: e , type: t  } = param;
+            let { src: e, type: t } = param;
             return l("source", {
                 src: e,
                 type: t
             }, i);
         })
-    }), E = !!(g !== 0 || o.width && o.height), F = a === "error", j = n.useMemo(()=>u ? /* @__PURE__ */ l(M, {
+    }), E = !!(m !== 0 || o.width && o.height), F = a === "error", B = n.useMemo(()=>u ? /* @__PURE__ */ l($, {
             aspectRatio: c,
             width: o.width,
             height: o.height,
@@ -157,27 +160,27 @@ const q = {
                 width: "100%",
                 height: "100%"
             },
-            children: /* @__PURE__ */ l(O, {
-                noBorderRadius: !w,
+            children: /* @__PURE__ */ l(J, {
+                borderRadius: b,
                 withIcon: F
             })
         }) : void 0, [
         c,
         o.height,
         o.width,
-        w,
+        b,
         F,
         u,
         E
     ]);
-    return /* @__PURE__ */ G(P, {
+    return /* @__PURE__ */ G(O, {
         style: {
             position: "relative"
         },
-        aspectRatio: g,
+        aspectRatio: m,
         width: o.width,
         height: o.height,
-        dataAttributes: $(B, "Video"),
+        dataAttributes: Y(x, "Video"),
         children: [
             /* @__PURE__ */ l("div", {
                 style: {
@@ -204,18 +207,18 @@ const q = {
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),
-            V,
+            j,
             /* @__PURE__ */ l("div", {
                 ref: f,
                 style: {
-                    position: g !== 0 ? "absolute" : "static",
-                    width: m ? "100%" : 0,
-                    height: m ? "100%" : 0,
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: j
+                children: B
             })
         ]
     });
-}), re = z;
-export { K as RATIO, re as default };
+}), ne = H;
+export { _ as RATIO, ne as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.33.0",
+    "version": "14.35.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -80,8 +80,8 @@
         "@storybook/react": "6.5.15",
         "@storybook/theming": "6.5.15",
         "@swc/cli": "^0.1.62",
-        "@swc/core": "^1.3.61",
-        "@swc/jest": "^0.2.26",
+        "@swc/core": "^1.3.95",
+        "@swc/jest": "^0.2.29",
         "@telefonica/acceptance-testing": "2.21.1",
         "@telefonica/eslint-config": "^1.7.0",
         "@telefonica/prettier-config": "^1.1.0",
@@ -102,7 +102,7 @@
         "@vanilla-extract/jest-transform": "^1.1.0",
         "@vanilla-extract/vite-plugin": "^3.8.2",
         "@vanilla-extract/webpack-plugin": "^2.2.0",
-        "@vitejs/plugin-react": "^4.0.0",
+        "@vitejs/plugin-react": "^4.2.0",
         "autoprefixer": "^10.4.12",
         "axe-html-reporter": "^2.2.3",
         "cpx": "^1.5.0",
@@ -111,6 +111,7 @@
         "dpdm": "^3.8.0",
         "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",
@@ -135,12 +136,13 @@
         "react-router": "^6.6.2",
         "react-router-dom": "^6.6.2",
         "rimraf": "3.0.2",
+        "rollup-plugin-preserve-directives": "^0.2.0",
         "semantic-release": "^19.0.2",
         "serve-handler": "^6.1.5",
         "swc-loader": "^0.2.3",
         "typescript": "^4.6.3",
-        "vite": "^4.3.9",
-        "vite-plugin-no-bundle": "^2.0.2"
+        "vite": "^4.5.0",
+        "vite-plugin-no-bundle": "^2.0.3"
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
@@ -201,6 +203,9 @@
         "@testing-library/dom": "^8.19.1"
     },
     "packageManager": "yarn@3.6.1",
+    "workspaces": [
+        "packages/eslint-plugin-mistica-local-rules"
+    ],
     "engines": {
         "node": "^18.0.0"
     }

package/dist/utils/key-codes.d.ts

@@ -1,8 +0,0 @@
-export declare const LEFT = 37;
-export declare const UP = 38;
-export declare const RIGHT = 39;
-export declare const DOWN = 40;
-export declare const ENTER = 13;
-export declare const ESC = 27;
-export declare const SPACE = 32;
-export declare const TAB = 9;

package/dist-es/utils/key-codes.js

@@ -1,2 +0,0 @@
-const o = 37, t = 38, c = 39, n = 40, s = 13, E = 27, T = 32, A = 9;
-export { n as DOWN, s as ENTER, E as ESC, o as LEFT, c as RIGHT, T as SPACE, A as TAB, t as UP };