@telefonica/mistica 14.15.0 → 14.16.1

package/dist-es/video.js

@@ -79,22 +79,24 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as d, jsxs as V } from "react/jsx-runtime";
 import * as o from "react";
-import { useMediaBorderRadius as D, ImageContent as J, ImageError as O } from "./image.js";
+import { useMediaBorderRadius as J, ImageContent as M, ImageError as O } from "./image.js";
 import { AspectRatioElement as P } from "./utils/aspect-ratio-support.js";
-import { combineRefs as Q } from "./utils/common.js";
-import { getPrefixedDataAttributes as X } from "./utils/dom.js";
-import { isRunningAcceptanceTest as Y } from "./utils/platform.js";
-import { video as $ } from "./video.css-mistica.js";
-import { vars as q } from "./skins/skin-contract.css-mistica.js";
-import { useElementDimensions as H } from "./hooks.js";
-const K = {
+import { getPrefixedDataAttributes as Q } from "./utils/dom.js";
+import { isRunningAcceptanceTest as X } from "./utils/platform.js";
+import { video as Y } from "./video.css-mistica.js";
+import { vars as $ } from "./skins/skin-contract.css-mistica.js";
+const q = {
     loading: {
         play: "playing",
         pause: "paused",
         fail: "error",
         finishLoad: "loaded"
     },
-    loaded: {
+    /**
+   * This state represents the scenario when video.load() finishes, but the video isn't played yet. Some browsers don't actually load
+   * the video until someone plays it. In this case, we need to show the poster, because we may not have the first frame to display it.
+   * https://stackoverflow.com/questions/10235919/the-canplay-canplaythrough-events-for-an-html5-video-are-not-called-on-firefox/26430919#26430919
+   */ loaded: {
         play: "playing",
         pause: "paused",
         reset: "loading"
@@ -110,12 +112,12 @@ const K = {
     error: {
         reset: "loading"
     }
-}, L = (t, l)=>K[t][l] || t, M = {
+}, D = (r, u)=>q[r][u] || r, K = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, W = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", _ = /*#__PURE__*/ o.forwardRef((_param, F)=>{
-    var { src: t , poster: l , autoPlay: u = "when-loaded" , muted: C = !0 , loop: E = !0 , preload: S = "none" , loadingTimeout: y = 1e4 , onLoad: h , onError: c , onPause: f , onPlay: m , aspectRatio: A = "1:1" , dataAttributes: T  } = _param, i = _object_without_properties(_param, [
+}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ o.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: w , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, n = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -130,105 +132,143 @@ const K = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [r, s] = o.useReducer(L, "loading"), g = o.useRef(null), b = o.useRef(), w = D(), p = typeof A == "number" ? A : M[A], R = o.useCallback(()=>{
-        r === "loading" && (s("fail"), c == null || c());
+    const [a, l] = o.useReducer(D, "loading"), s = o.useRef(null), C = o.useRef(), f = o.useRef(null), b = J(), m = typeof c == "number" ? c : K[c], v = o.useCallback(()=>{
+        a === "loading" && (l("fail"), h == null || h());
     }, [
-        c,
-        r
+        h,
+        a
     ]);
     o.useEffect(()=>{
         var e;
-        if (b.current !== t) {
-            b.current = t;
-            const n = setTimeout(R, y);
-            return (e = g.current) == null || e.load(), ()=>{
-                clearTimeout(n);
+        if (C.current !== r) {
+            C.current = r;
+            const t = setTimeout(v, T);
+            return l("reset"), (e = s.current) == null || e.load(), ()=>{
+                clearTimeout(t);
             };
         }
     }, [
-        t,
-        y,
-        R
+        r,
+        T,
+        v
     ]);
-    const v = ()=>{
-        h == null || h();
-        const e = g.current, n = u && !Y();
-        s("finishLoad"), e && n && e.paused && e.play();
-    }, x = (Array.isArray(t) ? t : [
-        t
+    const I = ()=>{
+        y == null || y();
+        const e = s.current, t = p && !X();
+        l("finishLoad"), e && t && e.paused && e.play();
+    }, U = (Array.isArray(r) ? r : [
+        r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), a = r === "error" || r === "loading" || r === "loaded", { ref: I , width: N , height: k  } = H(), B = /* @__PURE__ */ d("video", _object_spread_props(_object_spread({
-        ref: Q(F, g),
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ d("video", _object_spread_props(_object_spread({
+        ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: C,
-        loop: E,
-        className: $,
-        preload: S,
-        onLoadStart: ()=>{
-            s("reset");
-        },
-        onError: R,
+        muted: x,
+        loop: N,
+        className: Y,
+        preload: k,
+        onError: v,
         onPause: ()=>{
-            f == null || f(), s("pause");
+            R == null || R(), l("pause");
         },
-        onPlay: ()=>{
-            m == null || m(), s("play");
+        onTimeUpdate: ()=>{
+            var e;
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (w == null || w(), l("play"));
         },
         onCanPlay: ()=>{
-            u === "streaming" && v();
+            p === "streaming" && I();
         },
         onCanPlayThrough: ()=>{
-            u !== "streaming" && v();
+            p !== "streaming" && I();
         },
-        poster: W
-    }, X(T)), {
+        poster: _
+    }, Q(B)), {
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? q.borderRadii.container : 0,
-            visibility: a ? "hidden" : "visible",
-            position: a || p !== 0 ? "absolute" : "static",
-            width: a ? N : "100%",
-            height: a ? k : "100%"
-        },
-        children: x.map((param, U)=>/* @__PURE__ */ {
-            let { src: e , type: n  } = param;
-            return d("source", {
-                src: e,
-                type: n
-            }, U);
-        })
-    })), j = !!(p !== 0 || i.width && i.height), G = l ? /* @__PURE__ */ d(J, {
-        ref: I,
-        aspectRatio: A,
-        width: i.width,
-        height: i.height,
-        src: l
-    }) : j ? /* @__PURE__ */ d("div", {
-        style: {
-            position: "absolute",
+            borderRadius: b ? $.borderRadii.container : 0,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
-        children: /* @__PURE__ */ d(O, {
-            ref: I,
-            noBorderRadius: !w,
-            withIcon: r === "error"
+        children: U.map((param, i)=>/* @__PURE__ */ {
+            let { src: e , type: t  } = param;
+            return d("source", {
+                src: e,
+                type: t
+            }, i);
         })
-    }) : void 0;
+    })), E = !!(m !== 0 || n.width && n.height), F = a === "error", G = o.useMemo(()=>u ? /* @__PURE__ */ d(M, {
+            aspectRatio: c,
+            width: n.width,
+            height: n.height,
+            src: u
+        }) : E ? /* @__PURE__ */ d("div", {
+            style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%"
+            },
+            children: /* @__PURE__ */ d(O, {
+                noBorderRadius: !b,
+                withIcon: F
+            })
+        }) : void 0, [
+        c,
+        n.height,
+        n.width,
+        b,
+        F,
+        u,
+        E
+    ]);
     return /* @__PURE__ */ V(P, {
         style: {
             position: "relative"
         },
-        aspectRatio: p,
-        width: i.width,
-        height: i.height,
+        aspectRatio: m,
+        width: n.width,
+        height: n.height,
         children: [
-            B,
-            a && G
+            /* @__PURE__ */ d("div", {
+                style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%"
+                },
+                ref: (e)=>{
+                    const t = e || null;
+                    t && (t.play = ()=>{
+                        var i;
+                        return ((i = s.current) == null ? void 0 : i.play()) || Promise.resolve();
+                    }, t.pause = ()=>{
+                        var i;
+                        return (i = s.current) == null ? void 0 : i.pause();
+                    }, t.load = ()=>{
+                        var i;
+                        (i = f.current) != null && i.style && (f.current.style.width = "100%", f.current.style.height = "100%"), setTimeout(()=>{
+                            var S;
+                            l("reset"), (S = s.current) == null || S.load();
+                        }, 100);
+                    }, t.setCurrentTime = (i)=>{
+                        s.current && (s.current.currentTime = i);
+                    }), typeof A == "function" ? A(t) : A && (A.current = t);
+                }
+            }),
+            j,
+            /* @__PURE__ */ d("div", {
+                ref: f,
+                style: {
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
+                    overflow: "hidden"
+                },
+                children: G
+            })
         ]
     });
-}), ne = _;
-export { M as RATIO, ne as default };
+}), re = z;
+export { K as RATIO, re as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.15.0",
+    "version": "14.16.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -81,7 +81,7 @@
         "@swc/core": "^1.3.61",
         "@swc/jest": "^0.2.26",
         "@telefonica/acceptance-testing": "2.13.0",
-        "@telefonica/eslint-config": "^1.3.0",
+        "@telefonica/eslint-config": "^1.6.0",
         "@telefonica/prettier-config": "^1.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",

package/dist/cvv-field.css-mistica.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    cvvText: function() {
-        return v;
-    },
-    tooltipContainer: function() {
-        return n;
-    }
-});
-require("./sprinkles.css.ts.vanilla.css-mistica.js");
-require("./cvv-field.css.ts.vanilla.css-mistica.js");
-var v = "_10ijton2 _1y2v1nf1w", n = "_1y2v1nf64 _1y2v1nf6j";

package/dist/cvv-field.css.d.ts

@@ -1,2 +0,0 @@
-export declare const tooltipContainer: string;
-export declare const cvvText: string;

package/dist/cvv-field.css.ts.vanilla.css-mistica.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return s;
-    }
-});
-const s = "";

package/dist/icons/icon-creditcard.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-type Props = {
-    role?: string;
-    size?: number;
-};
-declare const IconCreditcard: React.FC<Props>;
-export default IconCreditcard;

package/dist/icons/icon-creditcard.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return e;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const o = (param)=>/* @__PURE__ */ {
-    let { role: t = "presentation" , size: r = 24  } = param;
-    return (0, _jsxruntime.jsx)("svg", {
-        role: t,
-        width: r,
-        height: r,
-        viewBox: `0 0 ${r} ${r}`,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
-            fill: "#757575",
-            fillRule: "nonzero",
-            transform: `scale(${r / 32})`,
-            children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                    d: "M13.58 21.075H7.039a.666.666 0 1 1 0-1.333h6.543a.667.667 0 0 1 0 1.333"
-                }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                    d: "M25.827 24.409H6.2c-.992 0-1.8-.807-1.8-1.8v-6.875h23.228v6.875c0 .993-.806 1.8-1.8 1.8M6.2 8.4h19.628c.994 0 1.8.808 1.8 1.8v1.548H4.4V10.2c0-.992.808-1.8 1.8-1.8m19.628-1.735H6.2a3.539 3.539 0 0 0-3.533 3.535v12.408A3.539 3.539 0 0 0 6.2 26.143h19.628a3.539 3.539 0 0 0 3.534-3.534V10.2a3.539 3.539 0 0 0-3.534-3.535"
-                })
-            ]
-        })
-    });
-}, e = o;

package/dist/icons/icon-info-cvv.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-type Props = {
-    size?: number;
-    color?: string;
-};
-declare const IconInfo: React.FC<Props>;
-export default IconInfo;

package/dist/icons/icon-info-cvv.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return i;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
-const n = (param)=>/* @__PURE__ */ {
-    let { size: o = 24 , color: r  } = param;
-    return (0, _jsxruntime.jsx)("svg", {
-        role: "presentation",
-        width: o,
-        height: o,
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-            fill: r || _skincontractcssmistica.vars.colors.neutralMedium,
-            fillRule: "evenodd",
-            d: "M12 7a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 12 7zm0 3.75c-.69 0-1.25.56-1.25 1.25v3.75a1.25 1.25 0 0 0 2.5 0V12c0-.69-.56-1.25-1.25-1.25zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18.125c-4.48 0-8.125-3.645-8.125-8.125S7.519 3.875 12 3.875c4.48 0 8.125 3.645 8.125 8.125S16.48 20.125 12 20.125z"
-        })
-    });
-}, i = n;

package/dist/icons/icon-search.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-type Props = {
-    size?: number;
-    color?: string;
-};
-declare const IconSearch: React.FC<Props>;
-export default IconSearch;

package/dist/icons/icon-search.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return s;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
-const e = (param)=>/* @__PURE__ */ {
-    let { size: t = 24 , color: C  } = param;
-    return (0, _jsxruntime.jsx)("svg", {
-        width: t,
-        height: t,
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
-            fill: C || _skincontractcssmistica.vars.colors.neutralHigh,
-            transform: "translate(2 2)",
-            children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                    d: "M7.916,0.0001 C3.544,0.0001 0,3.5441 0,7.9161 C0,12.2881 3.544,15.8321 7.916,15.8321 C10.106,15.8321 12.089,14.9411 13.522,13.5031 C14.949,12.0721 15.831,10.0971 15.831,7.9161 C15.831,3.5441 12.288,0.0001 7.916,0.0001 M7.916,1.3001 C11.563,1.3001 14.531,4.2681 14.531,7.9161 C14.531,9.6791 13.847,11.3371 12.603,12.5861 C11.352,13.8401 9.687,14.5321 7.916,14.5321 C4.268,14.5321 1.3,11.5631 1.3,7.9161 C1.3,4.2681 4.268,1.3001 7.916,1.3001"
-                }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                    d: "M19.7722781,18.8379393 L13.9822781,13.0439393 C13.728525,12.7900109 13.3169678,12.7898688 13.0630393,13.0436219 C12.8091109,13.297375 12.8089688,13.7089322 13.0627219,13.9628607 L18.8527219,19.7568607 C19.106475,20.0107891 19.5180322,20.0109312 19.7719607,19.7571781 C20.0258891,19.503425 20.0260312,19.0918678 19.7722781,18.8379393 Z"
-                })
-            ]
-        })
-    });
-}, s = e;

package/dist-es/cvv-field.css-mistica.js

@@ -1,4 +0,0 @@
-import "./sprinkles.css.ts.vanilla.css-mistica.js";
-import "./cvv-field.css.ts.vanilla.css-mistica.js";
-var v = "_10ijton2 _1y2v1nf1w", n = "_1y2v1nf64 _1y2v1nf6j";
-export { v as cvvText, n as tooltipContainer };

package/dist-es/cvv-field.css.ts.vanilla.css-mistica.js

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

package/dist-es/icons/icon-creditcard.js

@@ -1,24 +0,0 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-const o = (param)=>/* @__PURE__ */ {
-    let { role: t = "presentation" , size: r = 24  } = param;
-    return a("svg", {
-        role: t,
-        width: r,
-        height: r,
-        viewBox: `0 0 ${r} ${r}`,
-        children: /* @__PURE__ */ n("g", {
-            fill: "#757575",
-            fillRule: "nonzero",
-            transform: `scale(${r / 32})`,
-            children: [
-                /* @__PURE__ */ a("path", {
-                    d: "M13.58 21.075H7.039a.666.666 0 1 1 0-1.333h6.543a.667.667 0 0 1 0 1.333"
-                }),
-                /* @__PURE__ */ a("path", {
-                    d: "M25.827 24.409H6.2c-.992 0-1.8-.807-1.8-1.8v-6.875h23.228v6.875c0 .993-.806 1.8-1.8 1.8M6.2 8.4h19.628c.994 0 1.8.808 1.8 1.8v1.548H4.4V10.2c0-.992.808-1.8 1.8-1.8m19.628-1.735H6.2a3.539 3.539 0 0 0-3.533 3.535v12.408A3.539 3.539 0 0 0 6.2 26.143h19.628a3.539 3.539 0 0 0 3.534-3.534V10.2a3.539 3.539 0 0 0-3.534-3.535"
-                })
-            ]
-        })
-    });
-}, e = o;
-export { e as default };

package/dist-es/icons/icon-info-cvv.js

@@ -1,17 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { vars as t } from "../skins/skin-contract.css-mistica.js";
-const n = (param)=>/* @__PURE__ */ {
-    let { size: o = 24 , color: r  } = param;
-    return e("svg", {
-        role: "presentation",
-        width: o,
-        height: o,
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ e("path", {
-            fill: r || t.colors.neutralMedium,
-            fillRule: "evenodd",
-            d: "M12 7a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 12 7zm0 3.75c-.69 0-1.25.56-1.25 1.25v3.75a1.25 1.25 0 0 0 2.5 0V12c0-.69-.56-1.25-1.25-1.25zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18.125c-4.48 0-8.125-3.645-8.125-8.125S7.519 3.875 12 3.875c4.48 0 8.125 3.645 8.125 8.125S16.48 20.125 12 20.125z"
-        })
-    });
-}, i = n;
-export { i as default };

package/dist-es/icons/icon-search.js

@@ -1,23 +0,0 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { vars as a } from "../skins/skin-contract.css-mistica.js";
-const e = (param)=>/* @__PURE__ */ {
-    let { size: t = 24 , color: C  } = param;
-    return r("svg", {
-        width: t,
-        height: t,
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ o("g", {
-            fill: C || a.colors.neutralHigh,
-            transform: "translate(2 2)",
-            children: [
-                /* @__PURE__ */ r("path", {
-                    d: "M7.916,0.0001 C3.544,0.0001 0,3.5441 0,7.9161 C0,12.2881 3.544,15.8321 7.916,15.8321 C10.106,15.8321 12.089,14.9411 13.522,13.5031 C14.949,12.0721 15.831,10.0971 15.831,7.9161 C15.831,3.5441 12.288,0.0001 7.916,0.0001 M7.916,1.3001 C11.563,1.3001 14.531,4.2681 14.531,7.9161 C14.531,9.6791 13.847,11.3371 12.603,12.5861 C11.352,13.8401 9.687,14.5321 7.916,14.5321 C4.268,14.5321 1.3,11.5631 1.3,7.9161 C1.3,4.2681 4.268,1.3001 7.916,1.3001"
-                }),
-                /* @__PURE__ */ r("path", {
-                    d: "M19.7722781,18.8379393 L13.9822781,13.0439393 C13.728525,12.7900109 13.3169678,12.7898688 13.0630393,13.0436219 C12.8091109,13.297375 12.8089688,13.7089322 13.0627219,13.9628607 L18.8527219,19.7568607 C19.106475,20.0107891 19.5180322,20.0109312 19.7719607,19.7571781 C20.0258891,19.503425 20.0260312,19.0918678 19.7722781,18.8379393 Z"
-                })
-            ]
-        })
-    });
-}, s = e;
-export { s as default };