@telefonica/mistica 14.33.0 → 14.34.0

package/dist-es/hero.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -78,24 +79,24 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import * as R from "react";
+import * as I from "react";
 import f from "classnames";
 import { useScreenSize as T } from "./hooks.js";
 import { MediaBorderRadiusProvider as v } from "./image.js";
-import { Text3 as x, Text8 as D } from "./text.js";
+import { Text3 as y, Text8 as D } from "./text.js";
 import O from "./grid-layout.js";
 import l from "./box.js";
-import y from "./stack.js";
+import x from "./stack.js";
 import j from "./button-group.js";
 import { vars as c } from "./skins/skin-contract.css-mistica.js";
-import { vars as b, container as h, containerMobile as G, containerDesktop as S, layout as L, actions as A } from "./hero.css-mistica.js";
-import { assignInlineVars as B } from "@vanilla-extract/dynamic";
+import { container as h, containerMobile as G, containerDesktop as b, layout as L, actions as A, vars as S } from "./hero.css-mistica.js";
 import { useIsInsideSlideshowContext as V } from "./carousel.js";
-import { getPrefixedDataAttributes as N } from "./utils/dom.js";
+import { getPrefixedDataAttributes as B } from "./utils/dom.js";
 import { sprinkles as H } from "./sprinkles.css-mistica.js";
 import { ThemeVariant as Y } from "./theme-variant-context.js";
-const k = (param)=>/* @__PURE__ */ {
-    let { children: e , isInverse: o  } = param;
+import { applyCssVars as C } from "./utils/css.js";
+const N = (param)=>/* @__PURE__ */ {
+    let { children: e, isInverse: o } = param;
     return r(Y, {
         isInverse: o,
         children: /* @__PURE__ */ r("div", {
@@ -104,7 +105,7 @@ const k = (param)=>/* @__PURE__ */ {
         })
     });
 }, u = (param)=>/* @__PURE__ */ {
-    let { headline: e , title: o , pretitle: n , description: i , descriptionLinesMax: d , extra: a , button: t , secondaryButton: p , buttonLink: m  } = param;
+    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: n, button: i, secondaryButton: p, buttonLink: m } = param;
     return s("section", {
         className: H({
             height: "100%",
@@ -115,17 +116,17 @@ const k = (param)=>/* @__PURE__ */ {
         children: [
             /* @__PURE__ */ s("div", {
                 children: [
-                    /* @__PURE__ */ s(y, {
+                    /* @__PURE__ */ s(x, {
                         space: 16,
                         children: [
                             e && e,
-                            /* @__PURE__ */ s(y, {
+                            /* @__PURE__ */ s(x, {
                                 space: 8,
                                 children: [
-                                    n && /* @__PURE__ */ r(x, {
+                                    a && /* @__PURE__ */ r(y, {
                                         as: "p",
                                         regular: !0,
-                                        children: n
+                                        children: a
                                     }),
                                     o && /* @__PURE__ */ r(D, {
                                         as: "h1",
@@ -133,109 +134,109 @@ const k = (param)=>/* @__PURE__ */ {
                                     })
                                 ]
                             }),
-                            i && /* @__PURE__ */ r(x, {
+                            t && /* @__PURE__ */ r(y, {
                                 as: "p",
                                 regular: !0,
                                 color: c.colors.textSecondary,
                                 truncate: d,
-                                children: i
+                                children: t
                             })
                         ]
                     }),
-                    a && /* @__PURE__ */ r("div", {
-                        children: a
+                    n && /* @__PURE__ */ r("div", {
+                        children: n
                     })
                 ]
             }),
-            (t || m) && /* @__PURE__ */ r("div", {
+            (i || m) && /* @__PURE__ */ r("div", {
                 className: A,
                 children: /* @__PURE__ */ r(j, {
-                    primaryButton: t,
+                    primaryButton: i,
                     secondaryButton: p,
                     link: m
                 })
             })
         ]
     });
-}, C = {
+}, k = {
     default: c.colors.background,
     alternative: c.colors.backgroundAlternative,
     brand: c.colors.backgroundBrand,
     "brand-secondary": c.colors.backgroundBrandSecondary
-}, $ = /*#__PURE__*/ R.forwardRef((_param, t)=>{
-    var { height: e , background: o = "default" , media: n , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, a = _object_without_properties(_param, [
+}, $ = /*#__PURE__*/ I.forwardRef((_param, i)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: p  } = T(), m = V(), g = o === "brand" || o === "brand-secondary";
+    const { isTabletOrSmaller: p } = T(), m = V(), g = o === "brand" || o === "brand-secondary";
     if (p) return /* @__PURE__ */ r(v, {
         value: !1,
-        children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, N(_object_spread({
+        children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, B(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: i,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: k[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, B({
-                [b.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, C({
+                [S.height]: e !== null && e !== void 0 ? e : "100%"
             })),
             className: f(h, G),
             children: [
-                n,
-                /* @__PURE__ */ r(k, {
+                a,
+                /* @__PURE__ */ r(N, {
                     isInverse: g,
                     children: /* @__PURE__ */ r(l, {
                         paddingTop: 24,
                         paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ r(u, _object_spread({}, a))
+                        children: /* @__PURE__ */ r(u, _object_spread({}, n))
                     })
                 })
             ]
         }))
     });
-    const w = i === "left" ? n : /* @__PURE__ */ r(l, {
+    const w = t === "left" ? a : /* @__PURE__ */ r(l, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, a))
-    }), I = i === "right" ? n : /* @__PURE__ */ r(l, {
+        children: /* @__PURE__ */ r(u, _object_spread({}, n))
+    }), R = t === "right" ? a : /* @__PURE__ */ r(l, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, a))
+        children: /* @__PURE__ */ r(u, _object_spread({}, n))
     });
     return /* @__PURE__ */ r(v, {
         value: !0,
-        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, N(_object_spread({
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, B(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: i,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: k[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, B({
-                [b.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, C({
+                [S.height]: e !== null && e !== void 0 ? e : "100%"
             })),
             className: H({
                 height: "100%",
                 display: "flex",
                 alignItems: "center"
             }),
-            children: /* @__PURE__ */ r(k, {
+            children: /* @__PURE__ */ r(N, {
                 isInverse: g,
                 children: /* @__PURE__ */ r(O, {
                     template: "6+6",
                     left: /* @__PURE__ */ r(l, {
                         paddingY: 56,
-                        className: f(h, S),
+                        className: f(h, b),
                         children: w
                     }),
                     right: /* @__PURE__ */ r(l, {
                         paddingY: 56,
-                        className: f(h, S),
-                        children: I
+                        className: f(h, b),
+                        children: R
                     })
                 })
             })

package/dist-es/highlighted-card.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -90,7 +91,7 @@ import { vars as E } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as N } from "./hooks.js";
 const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
     var _e_isInverse;
-    const { title: r , description: a , imageUrl: o , imageFit: l  } = e, g = v(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = T(), { textPresets: f  } = N(), n = /* @__PURE__ */ c(C, {
+    const { title: r, description: a, imageUrl: o, imageFit: l } = e, g = v(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = T(), { textPresets: f } = N(), n = /* @__PURE__ */ c(C, {
         ref: i,
         isInverse: u,
         className: H,
@@ -170,7 +171,7 @@ const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
         children: n
     }) : n;
 }), R = /*#__PURE__*/ h.forwardRef((_param, r)=>{
-    var { "aria-label": e  } = _param, i = _object_without_properties(_param, [
+    var { "aria-label": e } = _param, i = _object_without_properties(_param, [
         "aria-label"
     ]);
     const a = e !== null && e !== void 0 ? e : i.title;

package/dist-es/hooks.js

@@ -36,7 +36,7 @@ const z = (t)=>{
             r(0), i(0);
             return;
         }
-        const { width: m , height: g  } = d[0].contentRect;
+        const { width: m, height: g } = d[0].contentRect;
         r(m), i(g);
     }, []), l = n.useCallback((d)=>{
         c(d);
@@ -56,7 +56,7 @@ const z = (t)=>{
         ref: l
     };
 }, B = (t)=>{
-    const { useId: r  } = x();
+    const { useId: r } = x();
     if (r) {
         const e = r();
         return t || e;
@@ -85,13 +85,13 @@ const z = (t)=>{
         o
     ]);
 }, L = ()=>{
-    const { height: t  } = a();
+    const { height: t } = a();
     return t;
 }, M = ()=>{
-    const { width: t  } = a();
+    const { width: t } = a();
     return t;
 }, A = ()=>{
-    const { screenHeight: t  } = a();
+    const { screenHeight: t } = a();
     return t;
 }, D = ()=>u() && window.top !== window.self, V = u() ? n.useLayoutEffect : n.useEffect, k = (t, r, e)=>{
     const [i, s] = n.useState(r);

package/dist-es/horizontal-scroll.js

@@ -3,7 +3,7 @@ import t from "classnames";
 import * as s from "react";
 import { scroll as c, noScrollbar as m } from "./horizontal-scroll.css-mistica.js";
 const n = /*#__PURE__*/ s.forwardRef((param, l)=>/* @__PURE__ */ {
-    let { children: o , noScrollbar: r  } = param;
+    let { children: o, noScrollbar: r } = param;
     return a("div", {
         className: t(c, {
             [m]: r

package/dist-es/iban-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -124,7 +125,7 @@ const y = {
     const r = Math.ceil(n / 4) - 1;
     return n + r;
 }, M = (_param)=>{
-    var { inputRef: e , value: t , defaultValue: n , onChange: r  } = _param, o = _object_without_properties(_param, [
+    var { inputRef: e, value: t, defaultValue: n, onChange: r } = _param, o = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
@@ -154,7 +155,7 @@ const y = {
         ref: L(e, c)
     }));
 }, Z = (_param)=>{
-    var { disabled: e , error: t , helperText: n , name: r , optional: o , validate: a , onChange: p , onChangeValue: c , onBlur: i , value: m , defaultValue: d  } = _param, u = _object_without_properties(_param, [
+    var { disabled: e, error: t, helperText: n, name: r, optional: o, validate: a, onChange: p, onChangeValue: c, onBlur: i, value: m, defaultValue: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -167,7 +168,7 @@ const y = {
         "value",
         "defaultValue"
     ]);
-    const { texts: s  } = V(), f = x({
+    const { texts: s } = V(), f = x({
         name: r,
         value: m,
         defaultValue: d,

package/dist-es/icon-button.js

@@ -69,7 +69,7 @@ const s = 24, b = (e, t, a, n, l)=>{
         textAlign: "center"
     };
 }, u = (e)=>{
-    const { icon: t , children: a  } = e, n = {
+    const { icon: t, children: a } = e, n = {
         className: e.className || "",
         disabled: e.disabled,
         style: e.style,
@@ -101,13 +101,13 @@ const s = 24, b = (e, t, a, n, l)=>{
         children: !t && r.Children.only(a)
     }));
 }, h = (e)=>{
-    const { icon: t , backgroundColor: a = "transparent" , iconSize: n , size: l = s  } = e;
+    const { icon: t, backgroundColor: a = "transparent", iconSize: n, size: l = s } = e;
     return /* @__PURE__ */ i(u, _object_spread_props(_object_spread({}, e), {
         className: o(d, e.className),
         style: _object_spread({}, b(t, l, a, n, e.disabled), e.style)
     }));
 }, B = (e)=>{
-    const { size: t = s , disabled: a  } = e;
+    const { size: t = s, disabled: a } = e;
     return /* @__PURE__ */ i(u, _object_spread_props(_object_spread({}, e), {
         className: o(d, e.className),
         style: {

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

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as i } from "react/jsx-runtime";
 const t = (param)=>/* @__PURE__ */ {
-    let { role: e = "presentation" , size: h = 24  } = param;
+    let { role: e = "presentation", size: h = 24 } = param;
     return l("svg", {
         role: e,
         width: h,

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

@@ -29,7 +29,7 @@ function _object_spread(target) {
 import { jsx as s } from "react/jsx-runtime";
 import { vars as c } from "../skins/skin-contract.css-mistica.js";
 const h = (param)=>/* @__PURE__ */ {
-    let { size: o , color: r , transform: n , transitionDuration: t , className: e , style: l  } = param;
+    let { size: o, color: r, transform: n, transitionDuration: t, className: e, style: l } = param;
     return s("svg", {
         role: "presentation",
         width: o,
@@ -55,7 +55,7 @@ const h = (param)=>/* @__PURE__ */ {
     left: 180,
     right: 0
 }, g = (param)=>{
-    let { size: o = 24 , color: r , className: n , style: t , transitionDuration: e = 300 , direction: l = "right"  } = param;
+    let { size: o = 24, color: r, className: n, style: t, transitionDuration: e = 300, direction: l = "right" } = param;
     const i = r || c.colors.neutralHigh, a = {
         size: o,
         color: i,

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

@@ -1,7 +1,7 @@
 import { jsx as h, jsxs as v } from "react/jsx-runtime";
 import { vars as a } from "../skins/skin-contract.css-mistica.js";
 const l = (param)=>/* @__PURE__ */ {
-    let { role: t = "presentation" , size: c = 48 , color: r  } = param;
+    let { role: t = "presentation", size: c = 48, color: r } = param;
     return h("svg", {
         width: c,
         height: c,

package/dist-es/icons/icon-cvv-visa-mc.js

@@ -1,7 +1,7 @@
 import { jsx as c, jsxs as a } from "react/jsx-runtime";
 import { vars as h } from "../skins/skin-contract.css-mistica.js";
 const s = (param)=>/* @__PURE__ */ {
-    let { role: r = "presentation" , size: t = 48 , color: v  } = param;
+    let { role: r = "presentation", size: t = 48, color: v } = param;
     return c("svg", {
         width: t,
         height: t,

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

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,8 +34,8 @@ import { O2_SKIN as m, O2_CLASSIC_SKIN as d } from "../skins/constants.js";
 import { vars as t } from "../skins/skin-contract.css-mistica.js";
 import { outerAnimation as l, innerAnimation as a } from "./icon-error.css-mistica.js";
 const h = (param)=>{
-    let { size: e = 48  } = param;
-    const { platformOverrides: o  } = c();
+    let { size: e = 48 } = param;
+    const { platformOverrides: o } = c();
     return /* @__PURE__ */ r("svg", {
         width: e,
         height: e,
@@ -84,8 +85,8 @@ const h = (param)=>{
         })
     });
 }, f = (param)=>{
-    let { size: e = 48  } = param;
-    const { platformOverrides: o  } = c();
+    let { size: e = 48 } = param;
+    const { platformOverrides: o } = c();
     return /* @__PURE__ */ r("svg", {
         width: e,
         height: e,
@@ -132,7 +133,7 @@ const h = (param)=>{
         })
     });
 }, k = (e)=>{
-    const { skinName: o  } = c();
+    const { skinName: o } = c();
     return o === m || o === d ? /* @__PURE__ */ r(h, _object_spread({}, e)) : /* @__PURE__ */ r(f, _object_spread({}, e));
 }, w = k;
 export { w as default };

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

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -31,7 +32,7 @@ import { useTheme as c } from "../hooks.js";
 import { O2_CLASSIC_SKIN as i, O2_SKIN as l } from "../skins/constants.js";
 import { vars as n } from "../skins/skin-contract.css-mistica.js";
 const s = (param)=>/* @__PURE__ */ {
-    let { size: r = 48  } = param;
+    let { size: r = 48 } = param;
     return o("svg", {
         width: r,
         height: r,
@@ -70,7 +71,7 @@ const s = (param)=>/* @__PURE__ */ {
         })
     });
 }, d = (param)=>/* @__PURE__ */ {
-    let { size: r = 48  } = param;
+    let { size: r = 48 } = param;
     return o("svg", {
         width: r,
         height: r,
@@ -85,7 +86,7 @@ const s = (param)=>/* @__PURE__ */ {
         })
     });
 }, h = (r)=>{
-    const { skinName: e  } = c();
+    const { skinName: e } = c();
     return e === i || e === l ? /* @__PURE__ */ o(s, _object_spread({}, r)) : /* @__PURE__ */ o(d, _object_spread({}, r));
 }, u = h;
 export { u as default };

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

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as i } from "react/jsx-runtime";
 const r = (param)=>/* @__PURE__ */ {
-    let { role: c = "presentation" , size: e = 24  } = param;
+    let { role: c = "presentation", size: e = 24 } = param;
     return l("svg", {
         role: c,
         width: e,

package/dist-es/icons/icon-success-vivo-new.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -30,8 +31,8 @@ import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useTheme as i, useAriaId as n } from "../hooks.js";
 import { getAnimateCircleScaleInProps as c, getAnimateDrawLineProps as l } from "../utils/animation.js";
 const d = (param)=>{
-    let { size: o = 48  } = param;
-    const { platformOverrides: r  } = i(), t = n();
+    let { size: o = 48 } = param;
+    const { platformOverrides: r } = i(), t = n();
     return /* @__PURE__ */ s("svg", {
         width: o,
         height: o,

package/dist-es/icons/icon-success-vivo.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -32,8 +33,8 @@ import { getAnimateSweepInProps as n } from "../utils/animation.js";
 import { useIsInverseVariant as t } from "../theme-variant-context.js";
 import { vars as o } from "../skins/skin-contract.css-mistica.js";
 const c = (param)=>{
-    let { size: C = 48  } = param;
-    const e = t(), { platformOverrides: s  } = i();
+    let { size: C = 48 } = param;
+    const e = t(), { platformOverrides: s } = i();
     return /* @__PURE__ */ r("svg", {
         width: C,
         height: C,

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

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,8 +34,8 @@ import { useTheme as d } from "../hooks.js";
 import { useIsInverseVariant as v } from "../theme-variant-context.js";
 import { vars as i } from "../skins/skin-contract.css-mistica.js";
 const u = (param)=>{
-    let { size: t = 48 , color: e , skipAnimation: r = !1  } = param;
-    const n = v(), { platformOverrides: o  } = d();
+    let { size: t = 48, color: e, skipAnimation: r = !1 } = param;
+    const n = v(), { platformOverrides: o } = d();
     return /* @__PURE__ */ s("svg", {
         role: "presentation",
         width: t,
@@ -68,8 +69,8 @@ const u = (param)=>{
         })
     });
 }, k = (param)=>{
-    let { size: t = 48 , color: e , skipAnimation: r = !1  } = param;
-    const n = v(), { platformOverrides: o  } = d();
+    let { size: t = 48, color: e, skipAnimation: r = !1 } = param;
+    const n = v(), { platformOverrides: o } = d();
     return /* @__PURE__ */ s("svg", {
         role: "presentation",
         width: t,
@@ -101,8 +102,8 @@ const u = (param)=>{
         })
     });
 }, I = (param)=>{
-    let { size: t , color: e , skipAnimation: r  } = param;
-    const { skinName: n  } = d();
+    let { size: t, color: e, skipAnimation: r } = param;
+    const { skinName: n } = d();
     switch(n){
         case m:
         case p:

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

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as t } from "react/jsx-runtime";
 const a = (param)=>/* @__PURE__ */ {
-    let { role: i = "presentation" , size: h = 24  } = param;
+    let { role: i = "presentation", size: h = 24 } = param;
     return l("svg", {
         role: i,
         width: h,

package/dist-es/image.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,13 +93,13 @@ import { vars as o } from "./skins/skin-contract.css-mistica.js";
 import { combineRefs as K } from "./utils/common.js";
 import Z from "./skeleton-base.js";
 const x = /*#__PURE__*/ r.createContext(!0), q = ()=>r.useContext(x), m1 = (param)=>/* @__PURE__ */ {
-    let { children: e , value: a  } = param;
+    let { children: e, value: a } = param;
     return t(x.Provider, {
         value: a,
         children: e
     });
 }, G = (param)=>/* @__PURE__ */ {
-    let { style: e  } = param;
+    let { style: e } = param;
     return t("svg", {
         width: "48",
         height: "48",
@@ -112,8 +113,8 @@ const x = /*#__PURE__*/ r.createContext(!0), q = ()=>r.useContext(x), m1 = (para
         })
     });
 }, J = /*#__PURE__*/ r.forwardRef((param, c)=>{
-    let { noBorderRadius: e , circular: a , withIcon: d = !0 , border: l  } = param;
-    const s = D(), { skinName: n  } = O();
+    let { noBorderRadius: e, circular: a, withIcon: d = !0, border: l } = param;
+    const s = D(), { skinName: n } = O();
     return /* @__PURE__ */ t("div", {
         style: {
             height: "100%",
@@ -154,7 +155,7 @@ const x = /*#__PURE__*/ r.createContext(!0), q = ()=>r.useContext(x), m1 = (para
     "7:10": 7 / 10,
     "4:3": 4 / 3
 }, k = "1:1", Q = /*#__PURE__*/ r.forwardRef((_param, A)=>{
-    var { aspectRatio: e = k , alt: a = "" , dataAttributes: d , noBorderRadius: l , src: c , onError: s , onLoad: n , loadingFallback: y = !0 , errorFallback: S = !0  } = _param, i = _object_without_properties(_param, [
+    var { aspectRatio: e = k, alt: a = "", dataAttributes: d, noBorderRadius: l, src: c, onError: s, onLoad: n, loadingFallback: y = !0, errorFallback: S = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",