@telefonica/mistica 14.17.1 → 14.18.0

package/dist-es/theme.js

@@ -77,7 +77,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 const l = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar u ocultar contrase\xf1a",
@@ -108,7 +108,9 @@ const l = {
     backNavigationBar: "Atr\xe1s",
     clearButton: "Borrar",
     carouselNextButton: "siguiente",
-    carouselPrevButton: "anterior"
+    carouselPrevButton: "anterior",
+    playIconButtonLabel: "Reproducir",
+    pauseIconButtonLabel: "Pausar"
 }, n = {
     expirationDatePlaceholder: "MM/YY",
     togglePasswordVisibilityLabel: "Toggle password visibility",
@@ -139,7 +141,9 @@ const l = {
     backNavigationBar: "Back",
     clearButton: "Clear",
     carouselNextButton: "next",
-    carouselPrevButton: "previous"
+    carouselPrevButton: "previous",
+    playIconButtonLabel: "Play",
+    pauseIconButtonLabel: "Pause"
 }, d = {
     expirationDatePlaceholder: "MM/JJ",
     togglePasswordVisibilityLabel: "Passwort un-/sichtbar machen",
@@ -170,7 +174,9 @@ const l = {
     backNavigationBar: "Zur\xfcck",
     clearButton: "L\xf6schen",
     carouselNextButton: "n\xe4chste",
-    carouselPrevButton: "vorherige"
+    carouselPrevButton: "vorherige",
+    playIconButtonLabel: "Abspielen",
+    pauseIconButtonLabel: "Pausieren"
 }, s = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar ou ocultar senha",
@@ -201,9 +207,11 @@ const l = {
     backNavigationBar: "Voltar",
     clearButton: "Apagar",
     carouselNextButton: "pr\xf3ximo",
-    carouselPrevButton: "anterior"
-}, b = (r)=>{
-    switch(r.toLocaleLowerCase().split(/[-_]/)[0]){
+    carouselPrevButton: "anterior",
+    playIconButtonLabel: "Reproduzir",
+    pauseIconButtonLabel: "Pausar"
+}, b = (e)=>{
+    switch(e.toLocaleLowerCase().split(/[-_]/)[0]){
         case "es":
             return l;
         case "pt":
@@ -213,70 +221,70 @@ const l = {
         case "en":
             return n;
         default:
-            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), n;
+            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${e}`), n;
     }
-}, c = 56, C = 80, E = {
+}, c = 56, u = 80, E = {
     headerMobileHeight: c,
-    headerDesktopHeight: C
-}, m = (_param)=>/* @__PURE__ */ {
-    var { to: r , innerRef: e  } = _param, o = _object_without_properties(_param, [
+    headerDesktopHeight: u
+}, C = (_param)=>/* @__PURE__ */ {
+    var { to: e , innerRef: r  } = _param, a = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
-    return a("a", _object_spread_props(_object_spread({
-        ref: e,
-        href: typeof r == "string" ? r : r == null ? void 0 : r.pathname
-    }, o), {
-        children: o.children
+    return o("a", _object_spread_props(_object_spread({
+        ref: r,
+        href: typeof e == "string" ? e : e == null ? void 0 : e.pathname
+    }, a), {
+        children: a.children
     }));
-}, u = (r)=>r, f = (r)=>(_param)=>/* @__PURE__ */ {
-        var { innerRef: e  } = _param, o = _object_without_properties(_param, [
+}, m = (e)=>e, f = (e)=>(_param)=>/* @__PURE__ */ {
+        var { innerRef: r  } = _param, a = _object_without_properties(_param, [
             "innerRef"
         ]);
-        return a(r, _object_spread({
-            ref: e
-        }, o));
-    }, v = (r)=>(_param)=>/* @__PURE__ */ {
-        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+        return o(e, _object_spread({
+            ref: r
+        }, a));
+    }, p = (e)=>(_param)=>/* @__PURE__ */ {
+        var { to: r , innerRef: a , children: t  } = _param, i = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return a(r, {
-            href: e,
-            children: /* @__PURE__ */ a("a", _object_spread_props(_object_spread({
-                ref: o
+        return o(e, {
+            href: r,
+            children: /* @__PURE__ */ o("a", _object_spread_props(_object_spread({
+                ref: a
             }, i), {
                 children: t
             }))
         });
-    }, p = (r)=>(_param)=>/* @__PURE__ */ {
-        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+    }, v = (e)=>(_param)=>/* @__PURE__ */ {
+        var { to: r , innerRef: a , children: t  } = _param, i = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return a(r, _object_spread_props(_object_spread({
-            href: e,
-            ref: o
+        return o(e, _object_spread_props(_object_spread({
+            href: r,
+            ref: a
         }, i), {
             children: t
         }));
-    }, h = (r)=>{
-    if (!r) return m;
-    if (typeof r == "function" || r.$$typeof) return r;
-    switch(r.type){
+    }, h = (e)=>{
+    if (!e) return C;
+    if (typeof e == "function" || e.$$typeof) return e;
+    switch(e.type){
         case "ReactRouter5":
-            return u(r.Component);
+            return m(e.Component);
         case "ReactRouter6":
-            return f(r.Component);
+            return f(e.Component);
         case "Next12":
-            return v(r.Component);
+            return p(e.Component);
         case "Next13":
-            return p(r.Component);
+            return v(e.Component);
         default:
-            const e = r.type;
-            throw new Error(`Invalid Link type: ${e}`);
+            const r = e.type;
+            throw new Error(`Invalid Link type: ${r}`);
     }
 };
-export { C as NAVBAR_HEIGHT_DESKTOP, c as NAVBAR_HEIGHT_MOBILE, E as dimensions, h as getMisticaLinkComponent, b as getTexts };
+export { u as NAVBAR_HEIGHT_DESKTOP, c as NAVBAR_HEIGHT_MOBILE, E as dimensions, h as getMisticaLinkComponent, b as getTexts };

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

@@ -1,11 +1,11 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tooltip.css.ts.vanilla.css-mistica.js";
-var v = "_1xhatbpb _1y2v1nf60 _1y2v1nfau _1y2v1nf8l _1y2v1nf91 _1y2v1nfac _1y2v1nf31 _1y2v1nfa9", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf60 _1y2v1nf8o _1y2v1nf91 _1y2v1nfas _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6u _1y2v1nf79 _1y2v1nf7o _1y2v1nf83 _1y2v1nf60 _1y2v1nfbe _1y2v1nf8g _1y2v1nfal _1y2v1nfa9", o = "_1xhatbpk", x = "_1xhatbpl", y = "_1xhatbpm", h = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
+var v = "_1xhatbpb _1y2v1nfb0 _1y2v1nfe6 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf31 _1y2v1nfdl", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nfb0 _1y2v1nfc0 _1y2v1nfcd _1y2v1nfe4 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb0 _1y2v1nfeq _1y2v1nfbs _1y2v1nfdx _1y2v1nfdl", o = "_1xhatbpk", b = "_1xhatbpl", x = "_1xhatbpm", h = "_1xhatbpn", y = "_1xhatbpo", m = "_1xhatbp6", d = "_1xhatbp7", i = "_1xhatbp8", w = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, c = "_1y2v1nf68";
-export { v as arrow, t as arrowBottom, _ as arrowLeft, n as arrowRight, e as arrowTop, f as arrowWrapper, p as container, o as enter, x as enterActive, y as enterDone, h as exit, b as exitActive, m as fadeInBottomKeyframes, i as fadeInTopKeyframes, w as fadeInXKeyframes, s as vars, c as wrapper };
+}, s = "_1y2v1nfb8";
+export { v as arrow, t as arrowBottom, _ as arrowLeft, n as arrowRight, e as arrowTop, f as arrowWrapper, p as container, o as enter, b as enterActive, x as enterDone, h as exit, y as exitActive, m as fadeInBottomKeyframes, d as fadeInTopKeyframes, i as fadeInXKeyframes, w as vars, s as wrapper };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./touchable.css.ts.vanilla.css-mistica.js";
-var f = "mhti6u1 _1y2v1nfar", n = "mhti6u4", _ = "mhti6u1 _1y2v1nfar _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf8f _1y2v1nf2y _1y2v1nf5y _1y2v1nfat";
-export { f as base, n as notTouchable, _ as touchable };
+var n = "mhti6u1 _1y2v1nfe3", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfe3 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb6 _1y2v1nfdm _1y2v1nfbr _1y2v1nf2y _1y2v1nf5y _1y2v1nfe5";
+export { n as base, f as notTouchable, _ as touchable };

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

@@ -1,6 +1,6 @@
 import "../sprinkles.css.ts.vanilla.css-mistica.js";
 import "./aspect-ratio-support.css.ts.vanilla.css-mistica.js";
-var v = "yqswj62", n = "_1y2v1nf8f _1y2v1nf8w _1y2v1nfau _1y2v1nfb9", y = {
+var a = "yqswj62", n = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfe6 _1y2v1nfel", y = {
     aspectRatio: "var(--yqswj60)"
-}, f = "_1y2v1nfas _1y2v1nfa7 _1y2v1nfa8 _1y2v1nf5z";
-export { v as container, n as containerWithWrapper, y as vars, f as wrapper };
+}, e = "_1y2v1nfe4 _1y2v1nfdj _1y2v1nfdk _1y2v1nfaz";
+export { a as container, n as containerWithWrapper, y as vars, e as wrapper };

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

@@ -55,10 +55,10 @@ 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 g, wrapper as N } from "./aspect-ratio-support.css-mistica.js";
-const u = /*#__PURE__*/ c.createContext(!0), C = (param)=>{
+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 [n, s] = c.useState(!0);
+    const [o, s] = c.useState(!0);
     return f(()=>{
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
@@ -66,39 +66,40 @@ const u = /*#__PURE__*/ c.createContext(!0), C = (param)=>{
             s(!1);
         }
     }, []), /* @__PURE__ */ h(u.Provider, {
-        value: n,
+        value: o,
         children: t
     });
-}, v = ()=>c.useContext(u), W = (t)=>{
-    const n = v(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
+}, N = ()=>c.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 o = s && !n, r = /*#__PURE__*/ c.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", {
+    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]: o
+            [R]: n
         }),
-        style: _object_spread({}, o ? _object_spread_props(_object_spread({}, t.style), {
+        style: _object_spread({}, n ? _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({
-            [g.aspectRatio]: e ? String(e) : "unset"
+            [b.aspectRatio]: e ? String(e) : "unset"
         }))
-    }, t.children);
-    if (o) {
+    }, !n && t.dataAttributes), t.children);
+    if (n) {
         const d = (()=>e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${Number(t.width.replace("%", "")) / e}%` : `${100 / e}%` : 0)();
-        return /* @__PURE__ */ h("div", {
+        return /* @__PURE__ */ h("div", _object_spread_props(_object_spread({
             style: {
                 width: i,
                 height: a,
                 paddingTop: d
             },
-            className: N,
+            className: g
+        }, t.dataAttributes), {
             children: r
-        });
+        }));
     } else return r;
 };
-export { W as AspectRatioElement, C as AspectRatioSupportProvider, v as useSupportsAspectRatio };
+export { W as AspectRatioContainer, x as AspectRatioSupportProvider, N as useSupportsAspectRatio };

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var y = "_1y2v1nfau _1y2v1nfb9 _1y2v1nf66 _1y2v1nf5y _1y2v1nfa7 _1y2v1nfa8 _1y2v1nfci";
-export { y as video };
+var f = "_1y2v1nfe6 _1y2v1nfel _1y2v1nfb6 _1y2v1nf5y _1y2v1nfdj _1y2v1nfdk _1y2v1nffu";
+export { f as video };

package/dist-es/video.js

@@ -1,55 +1,3 @@
-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;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -77,14 +25,14 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as d, jsxs as V } from "react/jsx-runtime";
-import * as o from "react";
+import { jsx as d, 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 { AspectRatioElement as P } from "./utils/aspect-ratio-support.js";
-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";
+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 = {
     loading: {
         play: "playing",
@@ -116,8 +64,8 @@ const q = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, _ = "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, [
+}, _ = "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, [
         "src",
         "poster",
         "autoPlay",
@@ -132,13 +80,13 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    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(()=>{
+    const [a, l] = 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(()=>{
         a === "loading" && (l("fail"), h == null || h());
     }, [
         h,
         a
     ]);
-    o.useEffect(()=>{
+    n.useEffect(()=>{
         var e;
         if (C.current !== r) {
             C.current = r;
@@ -154,20 +102,20 @@ const q = {
     ]);
     const I = ()=>{
         y == null || y();
-        const e = s.current, t = p && !X();
+        const e = s.current, t = p && !Q();
         l("finishLoad"), e && t && e.paused && e.play();
     }, U = (Array.isArray(r) ? r : [
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ d("video", _object_spread_props(_object_spread({
+        } : e), m = a === "error" || a === "loading" || a === "loaded", V = /* @__PURE__ */ d("video", {
         ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
         muted: x,
         loop: N,
-        className: Y,
+        className: X,
         preload: k,
         onError: v,
         onPause: ()=>{
@@ -175,7 +123,7 @@ const q = {
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (w == null || w(), l("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), l("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -183,13 +131,12 @@ const q = {
         onCanPlayThrough: ()=>{
             p !== "streaming" && I();
         },
-        poster: _
-    }, Q(B)), {
+        poster: _,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: b ? $.borderRadii.container : 0,
-            visibility: g ? "hidden" : "visible",
-            position: g || m !== 0 ? "absolute" : "static",
+            borderRadius: w ? Y.borderRadii.container : 0,
+            visibility: m ? "hidden" : "visible",
+            position: m || g !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
@@ -200,10 +147,10 @@ const q = {
                 type: t
             }, i);
         })
-    })), E = !!(m !== 0 || n.width && n.height), F = a === "error", G = o.useMemo(()=>u ? /* @__PURE__ */ d(M, {
+    }), E = !!(g !== 0 || o.width && o.height), F = a === "error", j = n.useMemo(()=>u ? /* @__PURE__ */ d(M, {
             aspectRatio: c,
-            width: n.width,
-            height: n.height,
+            width: o.width,
+            height: o.height,
             src: u
         }) : E ? /* @__PURE__ */ d("div", {
             style: {
@@ -212,25 +159,26 @@ const q = {
                 height: "100%"
             },
             children: /* @__PURE__ */ d(O, {
-                noBorderRadius: !b,
+                noBorderRadius: !w,
                 withIcon: F
             })
         }) : void 0, [
         c,
-        n.height,
-        n.width,
-        b,
+        o.height,
+        o.width,
+        w,
         F,
         u,
         E
     ]);
-    return /* @__PURE__ */ V(P, {
+    return /* @__PURE__ */ G(P, {
         style: {
             position: "relative"
         },
-        aspectRatio: m,
-        width: n.width,
-        height: n.height,
+        aspectRatio: g,
+        width: o.width,
+        height: o.height,
+        dataAttributes: $(B, "Video"),
         children: [
             /* @__PURE__ */ d("div", {
                 style: {
@@ -257,16 +205,16 @@ const q = {
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),
-            j,
+            V,
             /* @__PURE__ */ d("div", {
                 ref: f,
                 style: {
-                    position: m !== 0 ? "absolute" : "static",
-                    width: g ? "100%" : 0,
-                    height: g ? "100%" : 0,
+                    position: g !== 0 ? "absolute" : "static",
+                    width: m ? "100%" : 0,
+                    height: m ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: G
+                children: j
             })
         ]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.17.1",
+    "version": "14.18.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -198,5 +198,5 @@
         "@types/react-dom": "^18.0.10",
         "@testing-library/dom": "^8.19.1"
     },
-    "packageManager": "yarn@3.2.4"
+    "packageManager": "yarn@3.6.1"
 }