@telefonica/mistica 14.14.0 → 14.16.0

package/dist/theme.js

@@ -9,20 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    AnchorLink: function() {
-        return u;
-    },
     NAVBAR_HEIGHT_DESKTOP: function() {
-        return s;
+        return C;
     },
     NAVBAR_HEIGHT_MOBILE: function() {
-        return d;
+        return c;
     },
     dimensions: function() {
-        return m;
+        return E;
+    },
+    getMisticaLinkComponent: function() {
+        return h;
     },
     getTexts: function() {
-        return C;
+        return b;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -105,7 +105,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const t = {
+const l = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar u ocultar contrase\xf1a",
     loading: "Cargando",
@@ -136,7 +136,7 @@ const t = {
     clearButton: "Borrar",
     carouselNextButton: "siguiente",
     carouselPrevButton: "anterior"
-}, o = {
+}, n = {
     expirationDatePlaceholder: "MM/YY",
     togglePasswordVisibilityLabel: "Toggle password visibility",
     loading: "Loading",
@@ -167,7 +167,7 @@ const t = {
     clearButton: "Clear",
     carouselNextButton: "next",
     carouselPrevButton: "previous"
-}, n = {
+}, d = {
     expirationDatePlaceholder: "MM/JJ",
     togglePasswordVisibilityLabel: "Passwort un-/sichtbar machen",
     loading: "Wird gespeichert",
@@ -198,7 +198,7 @@ const t = {
     clearButton: "L\xf6schen",
     carouselNextButton: "n\xe4chste",
     carouselPrevButton: "vorherige"
-}, l = {
+}, s = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar ou ocultar senha",
     loading: "Carregando",
@@ -229,31 +229,80 @@ const t = {
     clearButton: "Apagar",
     carouselNextButton: "pr\xf3ximo",
     carouselPrevButton: "anterior"
-}, C = (r)=>{
+}, b = (r)=>{
     switch(r.toLocaleLowerCase().split(/[-_]/)[0]){
         case "es":
-            return t;
-        case "pt":
             return l;
+        case "pt":
+            return s;
         case "de":
-            return n;
+            return d;
         case "en":
-            return o;
+            return n;
         default:
-            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), o;
+            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), n;
     }
-}, d = 56, s = 80, m = {
-    headerMobileHeight: d,
-    headerDesktopHeight: s
-}, u = (_param)=>/* @__PURE__ */ {
-    var { to: r , innerRef: e  } = _param, a = _object_without_properties(_param, [
+}, c = 56, C = 80, E = {
+    headerMobileHeight: c,
+    headerDesktopHeight: C
+}, m = (_param)=>/* @__PURE__ */ {
+    var { to: r , innerRef: e  } = _param, o = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
     return (0, _jsxruntime.jsx)("a", _object_spread_props(_object_spread({
         ref: e,
         href: typeof r == "string" ? r : r == null ? void 0 : r.pathname
-    }, a), {
-        children: a.children
+    }, o), {
+        children: o.children
     }));
+}, u = (r)=>r, f = (r)=>(_param)=>/* @__PURE__ */ {
+        var { innerRef: e  } = _param, o = _object_without_properties(_param, [
+            "innerRef"
+        ]);
+        return (0, _jsxruntime.jsx)(r, _object_spread({
+            ref: e
+        }, o));
+    }, v = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return (0, _jsxruntime.jsx)(r, {
+            href: e,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("a", _object_spread_props(_object_spread({
+                ref: o
+            }, i), {
+                children: t
+            }))
+        });
+    }, p = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return (0, _jsxruntime.jsx)(r, _object_spread_props(_object_spread({
+            href: e,
+            ref: o
+        }, i), {
+            children: t
+        }));
+    }, h = (r)=>{
+    if (!r) return m;
+    if (typeof r == "function" || r.$$typeof) return r;
+    switch(r.type){
+        case "ReactRouter5":
+            return u(r.Component);
+        case "ReactRouter6":
+            return f(r.Component);
+        case "Next12":
+            return v(r.Component);
+        case "Next13":
+            return p(r.Component);
+        default:
+            const e = r.type;
+            throw new Error(`Invalid Link type: ${e}`);
+    }
 };

package/dist/title.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Title1: function() {
-        return g;
+        return k;
     },
     Title2: function() {
-        return j;
+        return y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,7 @@ const _text = require("./text.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -54,50 +55,52 @@ function _object_spread(target) {
     }
     return target;
 }
-const a = (param)=>{
-    let { title: e , right: t  } = param;
-    return t ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+const m = (param)=>{
+    let { title: t , right: e  } = param;
+    const { textPresets: o  } = (0, _hooks.useTheme)();
+    return e ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: "between",
         alignItems: "baseline",
         children: [
-            e,
+            t,
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingLeft: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                    regular: !0,
-                    children: t
+                    weight: o.link.weight,
+                    children: e
                 })
             })
         ]
-    }) : e;
-}, g = (param)=>/* @__PURE__ */ {
-    let { children: e , as: t = "h3" , id: o , right: n , dataAttributes: i  } = param;
-    return (0, _jsxruntime.jsx)(a, {
+    }) : t;
+}, k = (param)=>{
+    let { children: t , as: e = "h3" , id: o , right: i , dataAttributes: n  } = param;
+    const { textPresets: a  } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
             color: _skincontractcssmistica.vars.colors.textSecondary,
             transform: "uppercase",
-            medium: !0,
-            as: t,
+            weight: a.title1.weight,
+            as: e,
             id: o,
             dataAttributes: _object_spread({
                 "component-name": "Title1"
-            }, i),
+            }, n),
             wordBreak: !1,
-            children: e
+            children: t
         }),
-        right: n
+        right: i
     });
-}, j = (param)=>/* @__PURE__ */ {
-    let { children: e , as: t = "h3" , id: o , right: n , dataAttributes: i  } = param;
-    return (0, _jsxruntime.jsx)(a, {
+}, y = (param)=>/* @__PURE__ */ {
+    let { children: t , as: e = "h3" , id: o , right: i , dataAttributes: n  } = param;
+    return (0, _jsxruntime.jsx)(m, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
-            as: t,
+            as: e,
             id: o,
             dataAttributes: _object_spread({
                 "component-name": "Title2"
-            }, i),
-            children: e
+            }, n),
+            children: t
         }),
-        right: n
+        right: i
     });
 };

package/dist/tooltip.css-mistica.js

@@ -34,13 +34,13 @@ _export(exports, {
         return o;
     },
     enterActive: function() {
-        return h;
+        return x;
     },
     enterDone: function() {
-        return x;
+        return y;
     },
     exit: function() {
-        return y;
+        return h;
     },
     exitActive: function() {
         return b;
@@ -58,16 +58,16 @@ _export(exports, {
         return s;
     },
     wrapper: function() {
-        return d;
+        return c;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tooltip.css.ts.vanilla.css-mistica.js");
-var v = "_1xhatbpb _1y2v1nf60 _1y2v1nfam _1y2v1nf8h _1y2v1nf8w _1y2v1nfa4 _1y2v1nf31 _1y2v1nfa1", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf60 _1y2v1nf8j _1y2v1nf8w _1y2v1nfak _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf80 _1y2v1nf60 _1y2v1nfb5 _1y2v1nf8c _1y2v1nfad _1y2v1nfa1", o = "_1xhatbpk", h = "_1xhatbpl", x = "_1xhatbpm", y = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
+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 = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, d = "_1y2v1nf68";
+}, c = "_1y2v1nf68";

package/dist/touchable.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     base: function() {
-        return n;
+        return f;
     },
     notTouchable: function() {
-        return f;
+        return n;
     },
     touchable: function() {
         return _;
@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./touchable.css.ts.vanilla.css-mistica.js");
-var n = "mhti6u1 _1y2v1nfaj", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfaj _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf66 _1y2v1nfa2 _1y2v1nf8b _1y2v1nf2y _1y2v1nf5y _1y2v1nfal";
+var f = "mhti6u1 _1y2v1nfar", n = "mhti6u4", _ = "mhti6u1 _1y2v1nfar _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf8f _1y2v1nf2y _1y2v1nf5y _1y2v1nfat";

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

@@ -24,6 +24,6 @@ _export(exports, {
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./aspect-ratio-support.css.ts.vanilla.css-mistica.js");
-var v = "yqswj62", n = "_1y2v1nf8b _1y2v1nf8r _1y2v1nfam _1y2v1nfb0", y = {
+var v = "yqswj62", n = "_1y2v1nf8f _1y2v1nf8w _1y2v1nfau _1y2v1nfb9", y = {
     aspectRatio: "var(--yqswj60)"
-}, f = "_1y2v1nfak _1y2v1nf9z _1y2v1nfa0 _1y2v1nf5z";
+}, f = "_1y2v1nfas _1y2v1nfa7 _1y2v1nfa8 _1y2v1nf5z";

package/dist/video.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "video", {
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var y = "_1y2v1nfam _1y2v1nfb0 _1y2v1nf66 _1y2v1nf5y _1y2v1nf9z _1y2v1nfa0 _1y2v1nfc6";
+var y = "_1y2v1nfau _1y2v1nfb9 _1y2v1nf66 _1y2v1nf5y _1y2v1nfa7 _1y2v1nfa8 _1y2v1nfci";

package/dist/video.d.ts

@@ -37,5 +37,11 @@ export type VideoProps = {
     preload?: 'none' | 'metadata' | 'auto';
     dataAttributes?: DataAttributes;
 };
-declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export interface VideoElement extends HTMLDivElement {
+    play: () => Promise<void>;
+    pause: () => void;
+    load: () => void;
+    setCurrentTime: (time: number) => void;
+}
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<VideoElement>>;
 export default Video;

package/dist/video.js

@@ -10,22 +10,20 @@ function _export(target, all) {
 }
 _export(exports, {
     RATIO: function() {
-        return M;
+        return K;
     },
     default: function() {
-        return ne;
+        return re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _image = require("./image.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
-const _common = require("./utils/common.js");
 const _dom = require("./utils/dom.js");
 const _platform = require("./utils/platform.js");
 const _videocssmistica = require("./video.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
-const _hooks = require("./hooks.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -144,14 +142,18 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const K = {
+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"
@@ -167,12 +169,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__*/ _react.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__*/ _react.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",
@@ -187,104 +189,142 @@ const K = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [r, s] = _react.useReducer(L, "loading"), g = _react.useRef(null), b = _react.useRef(), w = (0, _image.useMediaBorderRadius)(), p = typeof A == "number" ? A : M[A], R = _react.useCallback(()=>{
-        r === "loading" && (s("fail"), c == null || c());
+    const [a, l] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), b = (0, _image.useMediaBorderRadius)(), m = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
+        a === "loading" && (l("fail"), h == null || h());
     }, [
-        c,
-        r
+        h,
+        a
     ]);
     _react.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 && !(0, _platform.isRunningAcceptanceTest)();
-        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 && !(0, _platform.isRunningAcceptanceTest)();
+        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  } = (0, _hooks.useElementDimensions)(), B = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(F, g),
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", _object_spread_props(_object_spread({
+        ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: C,
-        loop: E,
+        muted: x,
+        loop: N,
         className: _videocssmistica.video,
-        preload: S,
-        onLoadStart: ()=>{
-            s("reset");
-        },
-        onError: R,
+        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
-    }, (0, _dom.getPrefixedDataAttributes)(T)), {
+        poster: _
+    }, (0, _dom.getPrefixedDataAttributes)(B)), {
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? _skincontractcssmistica.vars.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 (0, _jsxruntime.jsx)("source", {
-                src: e,
-                type: n
-            }, U);
-        })
-    })), j = !!(p !== 0 || i.width && i.height), G = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
-        ref: I,
-        aspectRatio: A,
-        width: i.width,
-        height: i.height,
-        src: l
-    }) : j ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        style: {
-            position: "absolute",
+            borderRadius: b ? _skincontractcssmistica.vars.borderRadii.container : 0,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
-            ref: I,
-            noBorderRadius: !w,
-            withIcon: r === "error"
+        children: U.map((param, i)=>/* @__PURE__ */ {
+            let { src: e , type: t  } = param;
+            return (0, _jsxruntime.jsx)("source", {
+                src: e,
+                type: t
+            }, i);
         })
-    }) : void 0;
+    })), E = !!(m !== 0 || n.width && n.height), F = a === "error", G = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
+            aspectRatio: c,
+            width: n.width,
+            height: n.height,
+            src: u
+        }) : E ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%"
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
+                noBorderRadius: !b,
+                withIcon: F
+            })
+        }) : void 0, [
+        c,
+        n.height,
+        n.width,
+        b,
+        F,
+        u,
+        E
+    ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_aspectratiosupport.AspectRatioElement, {
         style: {
             position: "relative"
         },
-        aspectRatio: p,
-        width: i.width,
-        height: i.height,
+        aspectRatio: m,
+        width: n.width,
+        height: n.height,
         children: [
-            B,
-            a && G
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("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__ */ (0, _jsxruntime.jsx)("div", {
+                ref: f,
+                style: {
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
+                    overflow: "hidden"
+                },
+                children: G
+            })
         ]
     });
-}), ne = _;
+}), re = z;

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var a = "_1y2v1nfai _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfak", f = "_1y2v1nfc6";
+var a = "_1y2v1nfaq _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfas", f = "_1y2v1nfci";
 export { a as avatar, f as image };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./badge.css.ts.vanilla.css-mistica.js";
-var n = "_17szrmd2 _1y2v1nf8g _1y2v1nf8v _1y2v1nf4f", r = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf8g _1y2v1nf8v _1y2v1nf4f _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nf1x", y = "_1y2v1nf60", a = "_1y2v1nf5z _1y2v1nf68";
-export { n as badge, r as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };
+var _ = "_17szrmd2 _1y2v1nf8k _1y2v1nf90 _1y2v1nf4f", n = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf8k _1y2v1nf90 _1y2v1nf4f _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", y = "_1y2v1nf60", a = "_1y2v1nf5z _1y2v1nf68";
+export { _ as badge, n as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };