@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/text-field-base.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 { startIcon as ce, prefix as fe, prefixWithLabel as ge, prefixWithoutLabe
 import { sprinkles as Re } from "./sprinkles.css-mistica.js";
 import { vars as We } from "./skins/skin-contract.css-mistica.js";
 const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
-    var { error: c , helperText: T , label: n , inputProps: m , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: S , inputComponent: g , prefix: h , startIcon: e , endIcon: a , endIconOverlay: L , shrinkLabel: B , multiline: x = !1 , focus: C , fieldRef: j , maxLength: p , id: z , autoComplete: D , fullWidth: G  } = _param, r = _object_without_properties(_param, [
+    var { error: c, helperText: T, label: n, inputProps: m, inputRef: y, defaultValue: o, value: t, onFocus: u, onBlur: S, inputComponent: g, prefix: h, startIcon: e, endIcon: a, endIconOverlay: L, shrinkLabel: B, multiline: x = !1, focus: C, fieldRef: j, maxLength: p, id: z, autoComplete: D, fullWidth: G } = _param, r = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -115,7 +116,7 @@ const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
         "fullWidth"
     ]);
     var _ref;
-    const N = F(z), [f, d] = s.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K  } = oe(), [M, O] = s.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = s.useState("baseline");
+    const N = F(z), [f, d] = s.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K } = oe(), [M, O] = s.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = s.useState("baseline");
     ae(()=>{
         re() && Q("initial");
     }, []), s.useEffect(()=>{
@@ -225,11 +226,11 @@ const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
         ]
     });
 }), Ie = /*#__PURE__*/ s.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), De = /*#__PURE__*/ s.forwardRef((_param, m)=>{
-    var { getSuggestions: c , id: T  } = _param, n = _object_without_properties(_param, [
+    var { getSuggestions: c, id: T } = _param, n = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = s.useState([]), t = s.useRef(null), { platformOverrides: u , texts: S  } = de(), g = F(T), h = F();
+    const [y, o] = s.useState([]), t = s.useRef(null), { platformOverrides: u, texts: S } = de(), g = F(T), h = F();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ i(s.Suspense, {
         fallback: /* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, n), {
@@ -245,7 +246,7 @@ const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
-                    let { newValue: a  } = param;
+                    let { newValue: a } = param;
                     var L;
                     e.target = _object_spread_props(_object_spread({}, e.target), {
                         value: a
@@ -259,13 +260,13 @@ const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
                 })),
             suggestions: y,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e  } = param;
+                let { value: e } = param;
                 return o(c(e));
             },
             onSuggestionsClearRequested: ()=>o([]),
             getSuggestionValue: (e)=>e,
             renderSuggestion: (e, param)=>/* @__PURE__ */ {
-                let { isHighlighted: a  } = param;
+                let { isHighlighted: a } = param;
                 return i("div", {
                     role: "menuitem",
                     className: A(Ae, {

package/dist-es/text-field-components.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
-var _ = 328, a = 12, n = 0.78, e = 0.75, f = "_15k6ur97", y = "_1y2v1nfea _1y2v1nfdr _1y2v1nfba _1y2v1nfe0 _1y2v1nfb4", i = "_15k6ur96 _1y2v1nfba _1y2v1nfbg", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nfcq", b = "_1y2v1nfbx", u = "_1y2v1nf8x _1y2v1nfa9 _1y2v1nfba", k = "_15k6ur9g", d = "_15k6ur91 _1y2v1nfb5 _1y2v1nfeg _1y2v1nfcm _1y2v1nfba _1y2v1nfbf _1y2v1nfez", L = "_15k6ur93 _1y2v1nfea _1y2v1nfbt", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nfbx", x = "_15k6ur9i", h = "_15k6ur94";
-export { _ as DEFAULT_WIDTH, a as LABEL_LEFT_POSITION, n as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, f as disabled, y as field, i as fieldContainer, l as fieldMulti, t as fieldSingle, b as fullWidth, u as helperContainer, k as helperText, d as labelContainer, L as labelText, E as leftText, T as normalWidth, x as rightText, h as shrinked };
+var _ = 328, a = 12, n = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfeb _1y2v1nfdr _1y2v1nfba _1y2v1nfe0 _1y2v1nfb4", i = "_15k6ur96 _1y2v1nfba _1y2v1nfbg", l = "_15k6ur9e", b = "_15k6ur9d _1y2v1nfcq", t = "_1y2v1nfbx", u = "_1y2v1nf8x _1y2v1nfa9 _1y2v1nfba", k = "_15k6ur9g", d = "_15k6ur91 _1y2v1nfb5 _1y2v1nfeh _1y2v1nfcm _1y2v1nfba _1y2v1nfbf _1y2v1nff0", L = "_15k6ur93 _1y2v1nfeb _1y2v1nfbt", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nfbx", h = "_15k6ur9i", x = "_15k6ur94";
+export { _ as DEFAULT_WIDTH, a as LABEL_LEFT_POSITION, n as LABEL_SCALE_DESKTOP, f as LABEL_SCALE_MOBILE, e as disabled, y as field, i as fieldContainer, l as fieldMulti, b as fieldSingle, t as fullWidth, u as helperContainer, k as helperText, d as labelContainer, L as labelText, E as leftText, T as normalWidth, h as rightText, x as shrinked };

package/dist-es/text-field-components.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -60,8 +61,8 @@ import { labelContainer as S, shrinked as k, labelText as I, helperText as p, le
 import { sprinkles as x } from "./sprinkles.css-mistica.js";
 import { vars as e } from "./skins/skin-contract.css-mistica.js";
 const G = (param)=>{
-    let { shrinkLabel: l , forId: s , inputState: r , error: o , children: i , style: n , optional: d  } = param;
-    const m = l || r === "focused" || r === "filled", [v, b] = u.useState("initial"), { texts: N  } = C();
+    let { shrinkLabel: l, forId: s, inputState: r, error: o, children: i, style: n, optional: d } = param;
+    const m = l || r === "focused" || r === "filled", [v, b] = u.useState("initial"), { texts: N } = C();
     u.useEffect(()=>{
         const T = setTimeout(()=>{
             process.env.NODE_ENV !== "test" && b("transform 150ms, width 150ms");
@@ -96,7 +97,7 @@ const G = (param)=>{
         ]
     });
 }, J = (param)=>{
-    let { leftText: l , rightText: s , error: r  } = param;
+    let { leftText: l, rightText: s, error: r } = param;
     const o = y(), i = o ? e.colors.textPrimaryInverse : r ? e.colors.error : e.colors.textSecondary, n = o ? e.colors.textPrimaryInverse : e.colors.textSecondary;
     return /* @__PURE__ */ c(g, {
         children: [
@@ -121,7 +122,7 @@ const G = (param)=>{
         ]
     });
 }, K = (param)=>/* @__PURE__ */ {
-    let { multiline: l , disabled: s , children: r , helperText: o , className: i , fieldRef: n , fullWidth: d , readOnly: m  } = param;
+    let { multiline: l, disabled: s, children: r, helperText: o, className: i, fieldRef: n, fullWidth: d, readOnly: m } = param;
     return c("div", {
         className: a(L, d ? W : j, {
             [w]: s

package/dist-es/text-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -94,7 +95,7 @@ const C = (c, t, r, i)=>{
         c
     ]);
 }, H = /*#__PURE__*/ n.forwardRef((_param, g)=>{
-    var { disabled: c , error: t , helperText: r , name: i , optional: m , validate: a , onChangeValue: p , onChange: d , value: R , defaultValue: T , onBlur: l , onFocus: u , onPress: x  } = _param, s = _object_without_properties(_param, [
+    var { disabled: c, error: t, helperText: r, name: i, optional: m, validate: a, onChangeValue: p, onChange: d, value: R, defaultValue: T, onBlur: l, onFocus: u, onPress: x } = _param, s = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",

package/dist-es/text-link.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-link.css.ts.vanilla.css-mistica.js";
 var v = {
-    default: "_1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfe9 _1y2v1nf29",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfe9 _1y2v1nf2a",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfe9 _1y2v1nf29"
+    default: "_1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfea _1y2v1nf29",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfea _1y2v1nf2a",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfea _1y2v1nf29"
 };
 export { v as variants };

package/dist-es/text-link.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -87,13 +88,13 @@ import { getTextFromChildren as o } from "./utils/common.js";
 import { useTrackingConfig as T, eventNames as x, eventCategories as I, eventActions as y } from "./utils/analytics.js";
 import { variants as n } from "./text-link.css-mistica.js";
 const E = (_param)=>{
-    var { children: t , className: r = "" , disabled: a , style: s  } = _param, e = _object_without_properties(_param, [
+    var { children: t, className: r = "", disabled: a, style: s } = _param, e = _object_without_properties(_param, [
         "children",
         "className",
         "disabled",
         "style"
     ]);
-    const i = k(), { isDarkMode: m  } = p(), { formStatus: c  } = d(), { eventFormat: f  } = T(), u = ()=>f === "google-analytics-4" ? {
+    const i = k(), { isDarkMode: m } = p(), { formStatus: c } = d(), { eventFormat: f } = T(), u = ()=>f === "google-analytics-4" ? {
             name: x.userInteraction,
             component_type: "link",
             component_copy: o(t)

package/dist-es/text.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -80,9 +81,8 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as r } from "react/jsx-runtime";
 import * as R from "react";
 import $ from "classnames";
-import { assignInlineVars as L } from "@vanilla-extract/dynamic";
 import { useIsInverseVariant as j } from "./theme-variant-context.js";
-import { pxToRem as h } from "./utils/css.js";
+import { applyCssVars as S, pxToRem as p } from "./utils/css.js";
 import { getPrefixedDataAttributes as B } from "./utils/dom.js";
 import { useTheme as a } from "./hooks.js";
 import { vars as m } from "./skins/skin-contract.css-mistica.js";
@@ -93,8 +93,8 @@ const J = {
     medium: 500,
     bold: 700
 }, K = (e)=>e === !0 ? 1 : e || "initial", n = (param)=>{
-    let { weight: e , color: i = m.colors.textPrimary , decoration: t , truncate: o , transform: l , wordBreak: c = !0 , hyphens: S , as: z = "span" , children: g , size: u , mobileSize: d = u , desktopSize: b = u , lineHeight: T , mobileLineHeight: f = T , desktopLineHeight: k = T , letterSpacing: w , textAlign: H , textShadow: v , id: A , role: P , "aria-level": y , dataAttributes: I  } = param;
-    const W = j(), V = K(o), C = {
+    let { weight: e, color: i = m.colors.textPrimary, decoration: t, truncate: o, transform: l, wordBreak: c = !0, hyphens: f, as: z = "span", children: g, size: u, mobileSize: d = u, desktopSize: b = u, lineHeight: T, mobileLineHeight: k = T, desktopLineHeight: L = T, letterSpacing: w, textAlign: H, textShadow: v, id: A, role: P, "aria-level": y, dataAttributes: I } = param;
+    const W = j(), C = K(o), V = {
         [m.colors.textPrimary]: m.colors.textPrimaryInverse,
         [m.colors.textSecondary]: m.colors.textSecondaryInverse,
         [m.colors.textLink]: m.colors.textLinkInverse
@@ -103,15 +103,15 @@ const J = {
     const D = $(E, c ? N : q, {
         [F]: o === 1 || o === !0,
         [G]: o && o > 1
-    }), M = L({
-        [x.mobileSize]: d ? h(d) : "inherit",
-        [x.mobileLineHeight]: f ? h(f) : "inherit",
-        [x.desktopSize]: b ? h(b) : "inherit",
-        [x.desktopLineHeight]: k ? h(k) : "inherit"
-    }), O = o ? L({
-        [x.lineClamp]: String(V)
+    }), M = S({
+        [x.mobileSize]: d ? p(d) : "inherit",
+        [x.mobileLineHeight]: k ? p(k) : "inherit",
+        [x.desktopSize]: b ? p(b) : "inherit",
+        [x.desktopLineHeight]: L ? p(L) : "inherit"
+    }), O = o ? S({
+        [x.lineClamp]: String(C)
     }) : {};
-    var _C_i;
+    var _V_i;
     return /*#__PURE__*/ R.createElement(z, _object_spread_props(_object_spread({
         className: D,
         id: A,
@@ -119,24 +119,24 @@ const J = {
         "aria-level": y
     }, B(I)), {
         style: _object_spread_props(_object_spread({}, M, O), {
-            hyphens: S,
+            hyphens: f,
             letterSpacing: w,
             fontWeight: e ? J[e] : "inherit",
             textTransform: l || "inherit",
             textDecoration: t !== null && t !== void 0 ? t : "inherit",
             overflowWrap: c ? "anywhere" : "inherit",
-            color: W ? (_C_i = C[i]) !== null && _C_i !== void 0 ? _C_i : i : i,
+            color: W ? (_V_i = V[i]) !== null && _V_i !== void 0 ? _V_i : i : i,
             textAlign: H,
             textShadow: v
         })
     }), g);
-}, p = (e)=>{
+}, h = (e)=>{
     if (e.light) return "light";
     if (e.regular) return "regular";
     if (e.medium) return "medium";
     if (e.weight) return e.weight;
 }, s = (param)=>{
-    let { forceMobileSizes: e , mobileSize: i , mobileLineHeight: t , desktopSize: o , desktopLineHeight: l  } = param;
+    let { forceMobileSizes: e, mobileSize: i, mobileLineHeight: t, desktopSize: o, desktopLineHeight: l } = param;
     return e ? {
         size: i,
         lineHeight: t
@@ -146,12 +146,12 @@ const J = {
         desktopSize: o,
         desktopLineHeight: l
     };
-}, oe = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, ie = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 48,
@@ -164,12 +164,12 @@ const J = {
             "component-name": "Text10"
         }, e)
     }), t));
-}, ne = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, oe = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 40,
@@ -182,12 +182,12 @@ const J = {
             "component-name": "Text9"
         }, e)
     }), t));
-}, re = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, ne = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 32,
@@ -200,12 +200,12 @@ const J = {
             "component-name": "Text8"
         }, e)
     }), t));
-}, se = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, re = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 28,
@@ -218,12 +218,12 @@ const J = {
             "component-name": "Text7"
         }, e)
     }), t));
-}, me = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, se = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 24,
@@ -236,12 +236,12 @@ const J = {
             "component-name": "Text6"
         }, e)
     }), t));
-}, ae = (_param)=>{
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, me = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
-    const { textPresets: o  } = a();
+    const { textPresets: o } = a();
     return /* @__PURE__ */ r(n, _object_spread(_object_spread_props(_object_spread({}, s({
         forceMobileSizes: i,
         mobileSize: 20,
@@ -254,8 +254,8 @@ const J = {
             "component-name": "Text5"
         }, e)
     }), t));
-}, xe = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, ae = (_param)=>/* @__PURE__ */ {
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
@@ -266,13 +266,13 @@ const J = {
         desktopSize: 20,
         desktopLineHeight: "28px"
     })), {
-        weight: p(t),
+        weight: h(t),
         dataAttributes: _object_spread({
             "component-name": "Text4"
         }, e)
     }), t));
-}, he = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, xe = (_param)=>/* @__PURE__ */ {
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
@@ -283,13 +283,13 @@ const J = {
         desktopSize: 18,
         desktopLineHeight: "24px"
     })), {
-        weight: p(t),
+        weight: h(t),
         dataAttributes: _object_spread({
             "component-name": "Text3"
         }, e)
     }), t));
 }, pe = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
@@ -300,13 +300,13 @@ const J = {
         desktopSize: 16,
         desktopLineHeight: "24px"
     })), {
-        weight: p(t),
+        weight: h(t),
         dataAttributes: _object_spread({
             "component-name": "Text2"
         }, e)
     }), t));
-}, le = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
+}, he = (_param)=>/* @__PURE__ */ {
+    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
@@ -317,10 +317,10 @@ const J = {
         desktopSize: 14,
         desktopLineHeight: "20px"
     })), {
-        weight: p(t),
+        weight: h(t),
         dataAttributes: _object_spread({
             "component-name": "Text1"
         }, e)
     }), t));
-}, ge = n;
-export { n as Text, le as Text1, oe as Text10, pe as Text2, he as Text3, xe as Text4, ae as Text5, me as Text6, se as Text7, re as Text8, ne as Text9, ge as default };
+}, le = n;
+export { n as Text, he as Text1, ie as Text10, pe as Text2, xe as Text3, ae as Text4, me as Text5, se as Text6, re as Text7, ne as Text8, oe as Text9, le as default };

package/dist-es/theme-context-provider.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -26,118 +27,127 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as N, Fragment as O } from "react/jsx-runtime";
+import { jsx as r, jsxs as O, Fragment as H } from "react/jsx-runtime";
 import * as a from "react";
-import { assignInlineVars as w } from "@vanilla-extract/dynamic";
-import B from "./dialog.js";
-import F from "./screen-size-context-provider.js";
-import $ from "./aria-id-getter-context.js";
-import { getTexts as V, dimensions as j, getMisticaLinkComponent as _, NAVBAR_HEIGHT_MOBILE as z } from "./theme.js";
-import { getPlatform as L, isInsideNovumNativeApp as G } from "./utils/platform.js";
-import h from "./theme-context.js";
-import { useIsomorphicLayoutEffect as q } from "./hooks.js";
+import { assignInlineVars as y } from "@vanilla-extract/dynamic";
+import V from "./dialog.js";
+import h from "./screen-size-context-provider.js";
+import B from "./aria-id-getter-context.js";
+import { getTexts as F, dimensions as $, getMisticaLinkComponent as j, NAVBAR_HEIGHT_MOBILE as G } from "./theme.js";
+import { getPlatform as w, isInsideNovumNativeApp as z } from "./utils/platform.js";
+import q from "./theme-context.js";
+import { useIsomorphicLayoutEffect as K } from "./hooks.js";
 import W from "./tab-focus.js";
 import J from "./modal-context-provider.js";
-import { DocumentVisibilityProvider as K } from "./utils/document-visibility.js";
-import { AspectRatioSupportProvider as Q } from "./utils/aspect-ratio-support.js";
-import { TrackingConfig as U } from "./utils/analytics.js";
-import { vars as X } from "./skins/skin-contract.css-mistica.js";
-import { fromHexToRgb as Y } from "./utils/color.js";
-import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as Z } from "./skins/defaults.js";
-const tt = "(prefers-color-scheme: dark)", et = ()=>{
+import Q from "./tooltip-context-provider.js";
+import { DocumentVisibilityProvider as U } from "./utils/document-visibility.js";
+import { AspectRatioSupportProvider as X } from "./utils/aspect-ratio-support.js";
+import { TrackingConfig as Y } from "./utils/analytics.js";
+import { vars as Z } from "./skins/skin-contract.css-mistica.js";
+import { fromHexToRgb as tt } from "./utils/color.js";
+import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as et } from "./skins/defaults.js";
+import { isClientSide as rt } from "./utils/environment.js";
+import { PACKAGE_VERSION as I } from "./package-version.js";
+if (process.env.NODE_ENV !== "production" && rt()) {
+    if (window.__mistica_version__ && window.__mistica_version__ !== I) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
+    window.__mistica_version__ = I;
+}
+const ot = "(prefers-color-scheme: dark)", it = ()=>{
     const [t, c] = a.useState(!1);
-    return q(()=>{
+    return K(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(tt), i = ()=>{
+        const o = window.matchMedia(ot), i = ()=>{
             c(o.matches);
         };
         return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, rt = ()=>(t)=>t, ot = (t)=>({
-        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? z : t == null ? void 0 : t.headerMobileHeight
-    }), it = (param)=>{
-    let { theme: t , children: c , as: o  } = param;
+}, st = ()=>(t)=>t, nt = (t)=>({
+        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? G : t == null ? void 0 : t.headerMobileHeight
+    }), at = (param)=>{
+    let { theme: t, children: c, as: o } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const i = a.useRef(1), R = a.useCallback(()=>`aria-id-hook-${i.current++}`, []), H = et(), u = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, y = _object_spread({}, t.skin.colors, t.skin.darkModeColors), k = u === "auto" && H || u === "dark", m = k ? y : S, p = a.useMemo(()=>{
-        var s, n, d, x, f, b, P, g, M, C, T, D, I, E;
+    const i = a.useRef(1), N = a.useCallback(()=>`aria-id-hook-${i.current++}`, []), R = it(), p = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), m = p === "auto" && R || p === "dark", u = m ? A : S, k = a.useMemo(()=>{
+        var s, n, d, x, f, P, b, g, _, C, M, T, E, D;
         const l = _object_spread({
-            platform: L(),
-            insideNovumNativeApp: G()
+            platform: w(),
+            insideNovumNativeApp: z()
         }, t.platformOverrides);
         var _t_useHrefDecorator;
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
             platformOverrides: l,
-            texts: _object_spread({}, V(t.i18n.locale), t.texts),
+            texts: _object_spread({}, F(t.i18n.locale), t.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, j, ot(t.dimensions)),
+            dimensions: _object_spread({}, $, nt(t.dimensions)),
             textPresets: {
                 text5: _object_spread({}, e.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
                 text6: _object_spread({}, e.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
                 text7: _object_spread({}, e.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
                 text8: _object_spread({}, e.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
                 text9: _object_spread({}, e.text9, (f = t.skin.textPresets) == null ? void 0 : f.text9),
-                text10: _object_spread({}, e.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
-                cardTitle: _object_spread({}, e.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
+                text10: _object_spread({}, e.text10, (P = t.skin.textPresets) == null ? void 0 : P.text10),
+                cardTitle: _object_spread({}, e.cardTitle, (b = t.skin.textPresets) == null ? void 0 : b.cardTitle),
                 button: _object_spread({}, e.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
-                link: _object_spread({}, e.link, (M = t.skin.textPresets) == null ? void 0 : M.link),
+                link: _object_spread({}, e.link, (_ = t.skin.textPresets) == null ? void 0 : _.link),
                 title1: _object_spread({}, e.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
-                title2: _object_spread({}, e.title2, (T = t.skin.textPresets) == null ? void 0 : T.title2),
-                navigationBar: _object_spread({}, e.navigationBar, (D = t.skin.textPresets) == null ? void 0 : D.navigationBar),
-                indicator: _object_spread({}, e.indicator, (I = t.skin.textPresets) == null ? void 0 : I.indicator),
-                tabsLabel: _object_spread({}, e.tabsLabel, (E = t.skin.textPresets) == null ? void 0 : E.tabsLabel)
+                title2: _object_spread({}, e.title2, (M = t.skin.textPresets) == null ? void 0 : M.title2),
+                navigationBar: _object_spread({}, e.navigationBar, (T = t.skin.textPresets) == null ? void 0 : T.navigationBar),
+                indicator: _object_spread({}, e.indicator, (E = t.skin.textPresets) == null ? void 0 : E.indicator),
+                tabsLabel: _object_spread({}, e.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
-            Link: _(t.Link),
-            isDarkMode: k,
-            isIos: L(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : rt,
+            Link: j(t.Link),
+            isDarkMode: m,
+            isIos: w(l) === "ios",
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : st,
             useId: t.useId
         };
     }, [
         t,
-        k
-    ]), A = Object.fromEntries(Object.entries(m).map((param)=>{
+        m
+    ]), L = Object.fromEntries(Object.entries(u).map((param)=>{
         let [l, s] = param;
         let n = "";
         if (s.startsWith("#")) {
-            const [d, x, f] = Y(s);
+            const [d, x, f] = tt(s);
             n = `${d}, ${x}, ${f}`;
         }
         return [
             l,
             n
         ];
-    })), v = w(X, {
-        colors: m,
-        rawColors: A,
-        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : Z
+    })), v = y(Z, {
+        colors: u,
+        rawColors: L,
+        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : et
     });
     return /* @__PURE__ */ r(W, {
         disabled: !t.enableTabFocus,
         children: /* @__PURE__ */ r(J, {
-            children: /* @__PURE__ */ r(h.Provider, {
-                value: p,
-                children: /* @__PURE__ */ r(U, {
-                    eventFormat: p.analytics.eventFormat,
-                    children: /* @__PURE__ */ r(Q, {
-                        children: /* @__PURE__ */ r(K, {
-                            children: /* @__PURE__ */ r($.Provider, {
-                                value: R,
-                                children: /* @__PURE__ */ r(F, {
-                                    children: /* @__PURE__ */ r(B, {
-                                        children: o ? /*#__PURE__*/ a.createElement(o, {
-                                            style: v
-                                        }, c) : /* @__PURE__ */ N(O, {
-                                            children: [
-                                                (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
-                                                    children: `:root {${v}}`
-                                                }),
-                                                c
-                                            ]
+            children: /* @__PURE__ */ r(Q, {
+                children: /* @__PURE__ */ r(q.Provider, {
+                    value: k,
+                    children: /* @__PURE__ */ r(Y, {
+                        eventFormat: k.analytics.eventFormat,
+                        children: /* @__PURE__ */ r(X, {
+                            children: /* @__PURE__ */ r(U, {
+                                children: /* @__PURE__ */ r(B.Provider, {
+                                    value: N,
+                                    children: /* @__PURE__ */ r(h, {
+                                        children: /* @__PURE__ */ r(V, {
+                                            children: o ? /*#__PURE__*/ a.createElement(o, {
+                                                style: v
+                                            }, c) : /* @__PURE__ */ O(H, {
+                                                children: [
+                                                    (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
+                                                        children: `:root {${v}}`
+                                                    }),
+                                                    c
+                                                ]
+                                            })
                                         })
                                     })
                                 })
@@ -148,5 +158,5 @@ const tt = "(prefers-color-scheme: dark)", et = ()=>{
             })
         })
     });
-}, Ct = it;
-export { Ct as default, et as useIsOsDarkModeEnabled };
+}, It = at;
+export { It as default, it as useIsOsDarkModeEnabled };

package/dist-es/theme-context.js

@@ -1,3 +1,4 @@
+"use client";
 import * as t from "react";
 const e = /*#__PURE__*/ t.createContext(null), o = e;
 export { o as default };

package/dist-es/theme-variant-context.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import * as e from "react";
 const t = /*#__PURE__*/ e.createContext("default"), m = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , variant: a , children: n  } = param;
+    let { isInverse: r, variant: a, children: n } = param;
     return o(t.Provider, {
         value: a !== null && a !== void 0 ? a : r ? "inverse" : "default",
         children: n