@telefonica/mistica 14.36.1 → 14.37.0

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

@@ -51,93 +51,98 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as t, Fragment as g } from "react/jsx-runtime";
-import * as u from "react";
+import { jsxs as d, jsx as s, Fragment as y } from "react/jsx-runtime";
+import * as p from "react";
 import a from "classnames";
-import { useIsInverseVariant as y } from "./theme-variant-context.js";
+import { useIsInverseVariant as N } from "./theme-variant-context.js";
 import { useTheme as C } from "./hooks.js";
-import { Text1 as h } from "./text.js";
-import { labelContainer as S, shrinked as k, labelText as I, helperText as p, leftText as F, rightText as E, fieldContainer as L, fullWidth as W, normalWidth as j, disabled as w, field as O, fieldMulti as P, fieldSingle as V, helperContainer as A } from "./text-field-components.css-mistica.js";
-import { sprinkles as x } from "./sprinkles.css-mistica.js";
+import { Text1 as x } from "./text.js";
+import { labelContainer as S, shrinked as k, labelText as I, helperText as v, leftText as F, rightText as E, fieldContainer as L, fullWidth as W, normalWidth as j, disabled as w, field as O, fieldMulti as P, fieldSingle as V, helperContainer as q } from "./text-field-components.css-mistica.js";
+import { sprinkles as T } 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();
-    u.useEffect(()=>{
-        const T = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && b("transform 150ms, width 150ms");
+    let { shrinkLabel: o, forId: l, inputState: r, error: t, children: i, style: n, optional: m } = param;
+    const f = o || r === "focused" || r === "filled", [u, c] = p.useState("initial"), { texts: b } = C();
+    p.useEffect(()=>{
+        const g = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && c("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(T);
+            clearTimeout(g);
         };
     }, []);
-    let f = e.colors.textSecondary;
-    return o && r !== "default" ? f = e.colors.error : r === "focused" && (f = e.colors.controlActivated), /* @__PURE__ */ c("label", {
+    let h = e.colors.textSecondary;
+    return t && r !== "default" ? h = e.colors.error : r === "focused" && (h = e.colors.controlActivated), /* @__PURE__ */ d("label", {
         className: a(S, {
-            [k]: m
-        }, x({
-            color: f
+            [k]: f
+        }, T({
+            color: h
         })),
-        htmlFor: s,
+        htmlFor: l,
         style: _object_spread_props(_object_spread({}, n), {
-            transition: v
+            transition: u
         }),
         children: [
-            /* @__PURE__ */ t("span", {
+            /* @__PURE__ */ s("span", {
                 className: I,
                 children: i
             }),
-            d ? /* @__PURE__ */ c("span", {
+            m ? /* @__PURE__ */ d("span", {
                 children: [
                     "\xa0(",
-                    N.formFieldOptionalLabelSuffix,
+                    b.formFieldOptionalLabelSuffix,
                     ")"
                 ]
             }) : null
         ]
     });
 }, J = (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, {
+    let { leftText: o, rightText: l, error: r } = param;
+    const t = N(), i = t ? e.colors.textPrimaryInverse : r ? e.colors.error : e.colors.textSecondary, n = t ? e.colors.textPrimaryInverse : e.colors.textSecondary;
+    return /* @__PURE__ */ d(y, {
         children: [
-            l && /* @__PURE__ */ t("div", {
-                className: a(p, F),
-                children: /* @__PURE__ */ t(h, {
+            o && /* @__PURE__ */ s("div", {
+                className: a(v, F),
+                children: /* @__PURE__ */ s(x, {
                     color: i,
                     regular: !0,
                     as: "p",
-                    children: l
+                    children: o
                 })
             }),
-            s && /* @__PURE__ */ t("div", {
-                className: a(p, E),
-                children: /* @__PURE__ */ t(h, {
+            l && /* @__PURE__ */ s("div", {
+                className: a(v, E),
+                children: /* @__PURE__ */ s(x, {
                     color: n,
                     regular: !0,
                     as: "p",
-                    children: s
+                    children: l
                 })
             })
         ]
     });
-}, K = (param)=>/* @__PURE__ */ {
-    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
+}, K = (param)=>// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+/* @__PURE__ */ {
+    let { multiline: o, disabled: l, children: r, helperText: t, className: i, fieldRef: n, fullWidth: m, readOnly: f } = param;
+    return d("div", {
+        className: a(L, m ? W : j, {
+            [w]: l
         }),
+        onClick: (u)=>{
+            var c;
+            o && ((c = u.currentTarget.querySelector("textarea")) == null || c.focus());
+        },
         children: [
-            /* @__PURE__ */ t("div", {
-                className: a(O, l ? P : V, x({
-                    background: m ? e.colors.neutralLow : e.colors.backgroundContainer
+            /* @__PURE__ */ s("div", {
+                className: a(O, o ? P : V, T({
+                    background: f ? e.colors.neutralLow : e.colors.backgroundContainer
                 }), i),
                 ref: n,
                 children: r
             }),
-            o && /* @__PURE__ */ t("div", {
-                className: A,
-                children: o
+            t && /* @__PURE__ */ s("div", {
+                className: q,
+                children: t
             })
         ]
     });

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 _1y2v1nfea _1y2v1nf29",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfea _1y2v1nf2a",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfby _1y2v1nfbd _1y2v1nfea _1y2v1nf29"
+    default: "_1m1n0pr1 _1y2v1nfh4 _1y2v1nfgj _1y2v1nfjg _1y2v1nf2c",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfh4 _1y2v1nfgj _1y2v1nfjg _1y2v1nf2d",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfh4 _1y2v1nfgj _1y2v1nfjg _1y2v1nf2c"
 };
 export { v as variants };

package/dist-es/theme.js

@@ -321,6 +321,7 @@ const l = {
         case "Next12":
             return p(e.Component);
         case "Next13":
+        case "Next14":
             return b(e.Component);
         default:
             const r = e.type;

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

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tooltip.css.ts.vanilla.css-mistica.js";
-var v = "_1xhatbpa _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb5 _1y2v1nfeh _1y2v1nf33", a = "_1xhatbp8 _1y2v1nfb5 _1y2v1nfc5 _1y2v1nfeb", _ = "_1xhatbp1 _1y2v1nfb5", y = "_1xhatbp5 _1y2v1nfb4 _1y2v1nfd4 _1y2v1nfeb", e = "_1xhatbp3 _1y2v1nfb4 _1y2v1nfe3 _1y2v1nf33", o = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbp", r = {
+var a = "_1xhatbpa _1y2v1nfh9 _1y2v1nfhp _1y2v1nfgb _1y2v1nfjn _1y2v1nf36", v = "_1xhatbp8 _1y2v1nfgb _1y2v1nfhb _1y2v1nfjh", _ = "_1xhatbp1 _1y2v1nfgb", y = "_1xhatbp5 _1y2v1nfga _1y2v1nfia _1y2v1nfjh", o = "_1xhatbp3 _1y2v1nfga _1y2v1nfj9 _1y2v1nf36", r = "_1y2v1nfgg _1y2v1nfgm _1y2v1nfgv", f = {
     entering: {
         opacity: 1
     },
@@ -15,4 +15,4 @@ var v = "_1xhatbpa _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb5 _1y2v1nfeh _1y2v1nf33", a =
     },
     unmounted: {}
 };
-export { v as arrow, a as arrowContainer, _ as container, y as content, e as tooltip, o as tooltipCenter, r as tooltipTransitionClasses };
+export { a as arrow, v as arrowContainer, _ as container, y as content, o as tooltip, r as tooltipCenter, f as tooltipTransitionClasses };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./touchable.css.ts.vanilla.css-mistica.js";
-var f = "mhti6u1 _1y2v1nfea", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfea _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbc _1y2v1nfds _1y2v1nfbx _1y2v1nf30 _1y2v1nf62 _1y2v1nfec";
-export { f as base, y as notTouchable, _ as touchable };
+var y = "mhti6u1 _1y2v1nfjg", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfjg _1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfgi _1y2v1nfiy _1y2v1nfh3 _1y2v1nf33 _1y2v1nf68 _1y2v1nfji";
+export { y as base, f as notTouchable, _ as touchable };

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

@@ -1,6 +1,6 @@
 import "../sprinkles.css.ts.vanilla.css-mistica.js";
 import "./aspect-ratio-support.css.ts.vanilla.css-mistica.js";
-var a = "yqswj62", n = "_1y2v1nfbx _1y2v1nfce _1y2v1nfeh _1y2v1nfew", e = {
+var a = "yqswj62", n = "_1y2v1nfh3 _1y2v1nfhk _1y2v1nfjn _1y2v1nfk2", y = {
     aspectRatio: "var(--yqswj60)"
-}, y = "_1y2v1nfeb _1y2v1nfdp _1y2v1nfdq _1y2v1nfb4";
-export { a as container, n as containerWithWrapper, e as vars, y as wrapper };
+}, f = "_1y2v1nfjh _1y2v1nfiv _1y2v1nfiw _1y2v1nfga";
+export { a as container, n as containerWithWrapper, y as vars, f as wrapper };

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

@@ -73,7 +73,8 @@ const u = /*#__PURE__*/ n.createContext(!0), x = (param)=>{
 }, N = ()=>n.useContext(u), W = (t)=>{
     const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     let i = t.width, a = t.height;
-    t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / t.aspectRatio : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * t.aspectRatio : void 0 : i = t.width || "100%";
+    var _t_aspectRatio, _t_aspectRatio1;
+    t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / ((_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : 1) : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * ((_t_aspectRatio1 = t.aspectRatio) !== null && _t_aspectRatio1 !== void 0 ? _t_aspectRatio1 : 1) : void 0 : i = t.width || "100%";
     var _t_as;
     const c = s && !o, r = /*#__PURE__*/ n.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
         className: m(t.className, f, {

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var f = "_1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg5";
-export { f as video };
+var n = "_1y2v1nfjn _1y2v1nfk2 _1y2v1nfgi _1y2v1nf68 _1y2v1nfiv _1y2v1nfiw _1y2v1nflb";
+export { n as video };

package/dist-es/video.js

@@ -68,7 +68,7 @@ const K = {
     "16:9": 16 / 9,
     "4:3": 4 / 3
 }, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", H = /*#__PURE__*/ n.forwardRef((_param, A)=>{
-    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: k = !0, loop: N = !0, preload: x = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: v, onPlay: R, aspectRatio: c = "1:1", dataAttributes: U } = _param, o = _object_without_properties(_param, [
+    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: k = !0, loop: N = !0, preload: x = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: v, onPlay: w, aspectRatio: c = "1:1", dataAttributes: U } = _param, s = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -83,7 +83,7 @@ const K = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, d] = n.useReducer(M, "loading"), s = n.useRef(null), C = n.useRef(), f = n.useRef(null), b = D(X.mediaBorderRadius, q.borderRadii.container), m = typeof c == "number" ? c : _[c], w = n.useCallback(()=>{
+    const [a, d] = n.useReducer(M, "loading"), o = n.useRef(null), C = n.useRef(), f = n.useRef(null), R = D(X.mediaBorderRadius, q.borderRadii.container), m = s.width && s.height ? void 0 : typeof c == "number" ? c : _[c], b = n.useCallback(()=>{
         a === "loading" && (d("fail"), h == null || h());
     }, [
         h,
@@ -93,25 +93,25 @@ const K = {
         var e;
         if (C.current !== r) {
             let t;
-            return C.current = r, d("reset"), r ? (t = setTimeout(w, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
+            return C.current = r, d("reset"), r ? (t = setTimeout(b, T), (e = o.current) == null || e.load()) : d("fail"), ()=>{
                 clearTimeout(t);
             };
         }
     }, [
         r,
         T,
-        w
+        b
     ]);
     const I = ()=>{
         y == null || y();
-        const e = s.current, t = p && !P();
+        const e = o.current, t = p && !P();
         d("finishLoad"), e && t && e.paused && e.play();
     }, V = (Array.isArray(r) ? r : [
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
         } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ l("video", {
-        ref: s,
+        ref: o,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
@@ -119,13 +119,13 @@ const K = {
         loop: N,
         className: Q,
         preload: x,
-        onError: w,
+        onError: b,
         onPause: ()=>{
             v == null || v(), d("pause");
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (R == null || R(), d("play"));
+            a !== "playing" && ((e = o.current) == null ? void 0 : e.currentTime) !== 0 && (w == null || w(), d("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -136,7 +136,7 @@ const K = {
         poster: z,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: b,
+            borderRadius: R,
             visibility: g ? "hidden" : "visible",
             position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
@@ -149,10 +149,10 @@ const K = {
                 type: t
             }, i);
         })
-    }), E = !!(m !== 0 || o.width && o.height), S = a === "error", B = n.useMemo(()=>u ? /* @__PURE__ */ l($, {
+    }), E = !!(m !== 0 || s.width && s.height), S = a === "error", B = n.useMemo(()=>u ? /* @__PURE__ */ l($, {
             aspectRatio: c,
-            width: o.width,
-            height: o.height,
+            width: s.width,
+            height: s.height,
             src: u
         }) : E ? /* @__PURE__ */ l("div", {
             style: {
@@ -161,14 +161,14 @@ const K = {
                 height: "100%"
             },
             children: /* @__PURE__ */ l(J, {
-                borderRadius: b,
+                borderRadius: R,
                 withIcon: S
             })
         }) : void 0, [
         c,
-        o.height,
-        o.width,
-        b,
+        s.height,
+        s.width,
+        R,
         S,
         u,
         E
@@ -178,8 +178,8 @@ const K = {
             position: "relative"
         },
         aspectRatio: m,
-        width: o.width,
-        height: o.height,
+        width: s.width,
+        height: s.height,
         dataAttributes: Y(U, "Video"),
         children: [
             /* @__PURE__ */ l("div", {
@@ -192,18 +192,18 @@ const K = {
                     const t = e || null;
                     t && (t.play = ()=>{
                         var i;
-                        return ((i = s.current) == null ? void 0 : i.play()) || Promise.resolve();
+                        return ((i = o.current) == null ? void 0 : i.play()) || Promise.resolve();
                     }, t.pause = ()=>{
                         var i;
-                        return (i = s.current) == null ? void 0 : i.pause();
+                        return (i = o.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 F;
-                            d("reset"), (F = s.current) == null || F.load();
+                            d("reset"), (F = o.current) == null || F.load();
                         }, 100);
                     }, t.setCurrentTime = (i)=>{
-                        s.current && (s.current.currentTime = i);
+                        o.current && (o.current.currentTime = i);
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.36.1",
+    "version": "14.37.0",
     "license": "MIT",
     "repository": {
         "type": "git",