@telefonica/mistica 14.32.1 → 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, {
@@ -85,24 +86,25 @@ import { BaseTouchable as s } from "./touchable.js";
 import { Text as x, Text2 as k } from "./text.js";
 import { Boxed as C } from "./boxed.js";
 import I, { useIsDismissable as T } from "./maybe-dismissable.js";
-import { container as P, textContainerVariant as y, imageContent as E, touchableContainer as d } from "./highlighted-card.css-mistica.js";
-import { vars as H } from "./skins/skin-contract.css-mistica.js";
+import { container as H, textContainerVariant as P, imageContent as y, touchableContainer as m } from "./highlighted-card.css-mistica.js";
+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, m = 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: P,
+        className: H,
         dataAttributes: _object_spread({
             "component-name": "HighlightedCard"
         }, e.dataAttributes),
         width: e.width ? `${e.width}px` : "100%",
+        minHeight: "100%",
         children: [
             /* @__PURE__ */ c("div", {
-                role: m ? void 0 : "region",
-                className: y[o ? "withImage" : "withoutImage"],
-                "aria-label": m ? void 0 : e["aria-label"],
+                role: d ? void 0 : "region",
+                className: P[o ? "withImage" : "withoutImage"],
+                "aria-label": d ? void 0 : e["aria-label"],
                 children: [
                     /* @__PURE__ */ t(x, {
                         mobileSize: 18,
@@ -119,7 +121,7 @@ const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
                         paddingTop: 8,
                         children: /* @__PURE__ */ t(k, {
                             regular: !0,
-                            color: H.colors.textSecondary,
+                            color: E.colors.textSecondary,
                             truncate: e.descriptionLinesMax,
                             as: "p",
                             hyphens: "auto",
@@ -140,7 +142,7 @@ const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
                 ]
             }),
             o && /* @__PURE__ */ t("div", {
-                className: E,
+                className: y,
                 style: {
                     backgroundImage: `url(${o})`,
                     backgroundRepeat: "no-repeat",
@@ -153,23 +155,23 @@ const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
     return e.button ? n : e.onPress ? /* @__PURE__ */ t(s, {
         onPress: e.onPress,
         trackingEvent: e.trackingEvent,
-        className: d,
+        className: m,
         children: n
     }) : e.to ? /* @__PURE__ */ t(s, {
         to: e.to,
         trackingEvent: e.trackingEvent,
         fullPageOnWebView: e.fullPageOnWebView,
-        className: d,
+        className: m,
         children: n
     }) : e.href ? /* @__PURE__ */ t(s, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        className: d,
+        className: m,
         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

@@ -1,73 +1,74 @@
 import * as n from "react";
-import f from "./theme-context.js";
-import m from "./screen-size-context.js";
-import g from "./aria-id-getter-context.js";
-import { listenResize as S } from "./utils/dom.js";
-import { isClientSide as h } from "./utils/environment.js";
-const y = ()=>{
-    const t = n.useContext(f);
+import S from "./theme-context.js";
+import y from "./screen-size-context.js";
+import b from "./aria-id-getter-context.js";
+import { listenResize as W } from "./utils/dom.js";
+import { isClientSide as u } from "./utils/environment.js";
+const x = ()=>{
+    const t = n.useContext(S);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
-}, E = (t)=>{
+};
+let f = "", w = 0, h = 0;
+const z = (t)=>{
     n.useEffect(()=>{
         if (t) {
-            let s = "", e = 0, i = 0;
-            const r = document.scrollingElement || document.documentElement, c = ()=>{
-                var u;
+            const r = document.scrollingElement || document.documentElement, e = ()=>{
+                var s;
                 var _ref, _ref1;
-                if (i++, !(i > 1) && (e = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, s = (_ref1 = (u = document.body) == null ? void 0 : u.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (h++, !(h > 1) && (w = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
-                    const l = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${l};position:fixed;top:${-e}px;left:0px;right:0px;bottom:0px`;
+                    const o = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-w}px;left:0px;right:0px;bottom:0px`;
                 }
-            }, o = ()=>{
-                i--, !(i > 0) && (document.body && (document.body.style.cssText = s), r && (r.scrollTop = e));
+            }, i = ()=>{
+                h--, !(h > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = w));
             };
-            return c(), o;
+            return e(), i;
         }
         return ()=>{};
     }, [
         t
     ]);
-}, H = ()=>n.useContext(m), T = ()=>{
-    const [t, s] = n.useState(0), [e, i] = n.useState(0), [r, c] = n.useState(null), o = n.useCallback((d)=>{
+}, C = ()=>n.useContext(y), R = ()=>{
+    const [t, r] = n.useState(0), [e, i] = n.useState(0), [s, c] = n.useState(null), o = n.useCallback((d)=>{
         if (!d) {
-            s(0), i(0);
+            r(0), i(0);
             return;
         }
-        const { width: l , height: a  } = d[0].contentRect;
-        s(l), i(a);
-    }, []), u = n.useCallback((d)=>{
+        const { width: m, height: g } = d[0].contentRect;
+        r(m), i(g);
+    }, []), l = n.useCallback((d)=>{
         c(d);
     }, []);
     return n.useEffect(()=>{
-        if (!r) {
-            s(0), i(0);
+        if (!s) {
+            r(0), i(0);
             return;
         }
-        return S(r, o);
+        return W(s, o);
     }, [
-        r,
+        s,
         o
     ]), {
         width: t,
         height: e,
-        ref: u
+        ref: l
     };
-}, z = (t)=>{
-    const { useId: s  } = y();
-    if (s) {
-        const e = s();
+}, B = (t)=>{
+    const { useId: r } = x();
+    if (r) {
+        const e = r();
         return t || e;
     } else {
-        const e = n.useContext(g);
+        const e = n.useContext(b);
         return n.useRef(t || e()).current;
     }
-}, w = ()=>{
-    const [t, s] = n.useState(h() ? window.innerHeight : 1200), [e, i] = n.useState(h() ? window.innerWidth : 800), [r, c] = n.useState(h() ? window.screen.availHeight : 1200), [o, u] = n.useState(h() ? window.screen.availWidth : 800);
+}, a = ()=>{
+    const [t, r] = n.useState(u() ? window.innerHeight : 1200), [e, i] = n.useState(u() ? window.innerWidth : 800), [s, c] = n.useState(u() ? window.screen.availHeight : 1200), [o, l] = n.useState(u() ? window.screen.availWidth : 800);
     return n.useEffect(()=>{
         const d = ()=>{
-            s(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
+            r(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), l(window.screen.availWidth);
         };
         return window.addEventListener("resize", d), ()=>{
             window.removeEventListener("resize", d);
@@ -75,30 +76,30 @@ const y = ()=>{
     }, []), n.useMemo(()=>({
             height: t,
             width: e,
-            screenHeight: r,
+            screenHeight: s,
             screenWidth: o
         }), [
         t,
         e,
-        r,
+        s,
         o
     ]);
-}, C = ()=>{
-    const { height: t  } = w();
+}, L = ()=>{
+    const { height: t } = a();
     return t;
-}, R = ()=>{
-    const { width: t  } = w();
+}, M = ()=>{
+    const { width: t } = a();
     return t;
-}, B = ()=>{
-    const { screenHeight: t  } = w();
+}, A = ()=>{
+    const { screenHeight: t } = a();
     return t;
-}, L = ()=>h() && window.top !== window.self, M = h() ? n.useLayoutEffect : n.useEffect, A = (t, s, e)=>{
-    const [i, r] = n.useState(s);
+}, D = ()=>u() && window.top !== window.self, V = u() ? n.useLayoutEffect : n.useEffect, k = (t, r, e)=>{
+    const [i, s] = n.useState(r);
     return n.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
         const c = new IntersectionObserver((o)=>{
-            r(o[0].isIntersecting);
+            s(o[0].isIntersecting);
         }, {
             root: e == null ? void 0 : e.root,
             rootMargin: e == null ? void 0 : e.rootMargin,
@@ -114,4 +115,4 @@ const y = ()=>{
         e == null ? void 0 : e.threshold
     ]), i;
 };
-export { z as useAriaId, E as useDisableBodyScroll, T as useElementDimensions, A as useIsInViewport, L as useIsWithinIFrame, M as useIsomorphicLayoutEffect, B as useScreenHeight, H as useScreenSize, y as useTheme, C as useWindowHeight, w as useWindowSize, R as useWindowWidth };
+export { B as useAriaId, z as useDisableBodyScroll, R as useElementDimensions, k as useIsInViewport, D as useIsWithinIFrame, V as useIsomorphicLayoutEffect, A as useScreenHeight, C as useScreenSize, x as useTheme, L as useWindowHeight, a as useWindowSize, M as useWindowWidth };

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,