@telefonica/mistica 16.47.0 → 16.49.0

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

@@ -51,100 +51,120 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as s, jsx as e, Fragment as S } from "react/jsx-runtime";
-import * as v from "react";
-import d from "classnames";
+import { jsxs as d, jsx as l, Fragment as y } from "react/jsx-runtime";
+import * as H from "react";
+import m from "classnames";
 import { useTheme as T } from "./hooks.js";
-import { Text1 as x } from "./text.js";
-import { labelContainer as C, shrinked as k, labelText as E, helperText as N, leftHelperText as F, warnIcon as O, rightHelperText as H, fieldContainer as W, fullWidth as w, normalWidth as A, disabled as R, field as j, background as b, helperContainer as D } from "./text-field-components.css-mistica.js";
-import { vars as n } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as I } from "./utils/dom.js";
-import { formFieldOptionalLabelSuffix as q } from "./text-tokens.js";
-import B from "./generated/mistica-icons/icon-warning-regular.js";
-import L from "./screen-reader-only.js";
-const X = (param)=>{
-    let { shrinkLabel: l, forId: c, inputState: r, error: i, children: o, style: t, showOptional: a } = param;
-    const f = l || r === "focused" || r === "filled", [u, p] = v.useState("initial"), { texts: m, t: g } = T();
-    v.useEffect(()=>{
-        const y = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
+import { Text1 as g } from "./text.js";
+import { labelContainer as v, shrinked as F, labelText as V, helperText as L, leftHelperText as N, warnIcon as C, rightHelperText as D, fieldContainer as E, fullWidth as M, normalWidth as O, disabled as A, field as R, background as S, helperContainer as W } from "./text-field-components.css-mistica.js";
+import { vars as p } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
+import { formFieldOptionalLabelSuffix as w } from "./text-tokens.js";
+import j from "./generated/mistica-icons/icon-warning-regular.js";
+import I from "./screen-reader-only.js";
+import { fieldVars as t } from "./text-field-base.css-mistica.js";
+import { applyCssVars as P, pxToRem as i } from "./utils/css.js";
+const q = ()=>{
+    const { textPresets: e } = T();
+    return P({
+        [t.mobileFontSize]: i(e.inputValue.size.mobile),
+        [t.desktopFontSize]: i(e.inputValue.size.desktop),
+        [t.mobileLineHeight]: i(e.inputValue.lineHeight.mobile),
+        [t.desktopLineHeight]: i(e.inputValue.lineHeight.desktop),
+        [t.shrinkedLabelMobileFontSize]: i(e.inputLabel.size.mobile),
+        [t.shrinkedLabelDesktopFontSize]: i(e.inputLabel.size.desktop),
+        [t.shrinkedLabelMobileLineHeight]: i(e.inputLabel.lineHeight.mobile),
+        [t.shrinkedLabelDesktopLineHeight]: i(e.inputLabel.lineHeight.desktop),
+        [t.helperTextMobileFontSize]: i(e.inputHelperText.size.mobile),
+        [t.helperTextDesktopFontSize]: i(e.inputHelperText.size.desktop),
+        [t.helperTextMobileLineHeight]: i(e.inputHelperText.lineHeight.mobile),
+        [t.helperTextDesktopLineHeight]: i(e.inputHelperText.lineHeight.desktop),
+        [t.labelScaleMobile]: `calc(${e.inputLabel.size.mobile} / ${e.inputValue.size.mobile})`,
+        [t.labelScaleDesktop]: `calc(${e.inputLabel.size.desktop} / ${e.inputValue.size.desktop})`
+    });
+}, ie = (param)=>{
+    let { shrinkLabel: e, forId: c, inputState: r, error: n, children: s, style: o, showOptional: a } = param;
+    const h = e || r === "focused" || r === "filled", [f, b] = H.useState("initial"), { texts: x, t: u } = T();
+    H.useEffect(()=>{
+        const z = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && b("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(y);
+            clearTimeout(z);
         };
     }, []);
-    let h = n.colors.textSecondary;
-    return i && r !== "default" ? h = n.colors.textError : r === "focused" && (h = n.colors.textActivated), /* @__PURE__ */ s("label", {
-        className: d(C, {
-            [k]: f
+    let k = p.colors.textSecondary;
+    return n && r !== "default" ? k = p.colors.textError : r === "focused" && (k = p.colors.textActivated), /* @__PURE__ */ d("label", {
+        className: m(v, {
+            [F]: h
         }),
         htmlFor: c,
         style: _object_spread_props(_object_spread({
-            color: h
-        }, t), {
-            transition: u
+            color: k
+        }, o), {
+            transition: f
         }),
         "data-testid": "label",
         children: [
-            /* @__PURE__ */ e("span", {
-                className: E,
-                children: o
+            /* @__PURE__ */ l("span", {
+                className: V,
+                children: s
             }),
-            a ? /* @__PURE__ */ s("span", {
+            a ? /* @__PURE__ */ d("span", {
                 children: [
                     " (",
-                    m.formFieldOptionalLabelSuffix || g(q),
+                    x.formFieldOptionalLabelSuffix || u(w),
                     ")"
                 ]
             }) : null
         ]
     });
-}, Y = (param)=>{
-    let { leftText: l, leftTextId: c, rightText: r, rightTextId: i, rightTextLabel: o, error: t } = param;
-    const a = t ? n.colors.textError : n.colors.textSecondary;
-    return /* @__PURE__ */ s(S, {
+}, le = (param)=>{
+    let { leftText: e, leftTextId: c, rightText: r, rightTextId: n, rightTextLabel: s, error: o } = param;
+    const a = o ? p.colors.textError : p.colors.textSecondary;
+    return /* @__PURE__ */ d(y, {
         children: [
-            l && /* @__PURE__ */ s("p", {
-                className: d(N, F),
-                "data-testid": t ? "errorText" : "helperText",
+            e && /* @__PURE__ */ d("p", {
+                className: m(L, N),
+                "data-testid": o ? "errorText" : "helperText",
                 children: [
-                    t && /* @__PURE__ */ e(x, {
+                    o && /* @__PURE__ */ l(g, {
                         regular: !0,
                         color: a,
-                        children: /* @__PURE__ */ e(B, {
+                        children: /* @__PURE__ */ l(j, {
                             color: "currentColor",
-                            className: O
+                            className: C
                         })
                     }),
-                    /* @__PURE__ */ e(x, {
+                    /* @__PURE__ */ l(g, {
                         color: a,
                         regular: !0,
                         id: c,
-                        "aria-live": t ? "assertive" : void 0,
-                        children: l
+                        "aria-live": o ? "assertive" : void 0,
+                        children: e
                     })
                 ]
             }),
-            r && /* @__PURE__ */ e("div", {
-                className: d(N, {
-                    [H]: !!l
+            r && /* @__PURE__ */ l("div", {
+                className: m(L, {
+                    [D]: !!e
                 }),
                 "data-testid": "endHelperText",
-                children: /* @__PURE__ */ s(x, {
-                    color: n.colors.textSecondary,
+                children: /* @__PURE__ */ d(g, {
+                    color: p.colors.textSecondary,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
                     wordBreak: !1,
-                    id: i,
+                    id: n,
                     children: [
-                        o && /* @__PURE__ */ e(L, {
-                            children: /* @__PURE__ */ e("span", {
-                                children: o
+                        s && /* @__PURE__ */ l(I, {
+                            children: /* @__PURE__ */ l("span", {
+                                children: s
                             })
                         }),
-                        /* @__PURE__ */ e("span", {
-                            "aria-hidden": o !== void 0,
+                        /* @__PURE__ */ l("span", {
+                            "aria-hidden": s !== void 0,
                             children: r
                         })
                     ]
@@ -152,29 +172,31 @@ const X = (param)=>{
             })
         ]
     });
-}, Z = (param)=>{
-    let { multiline: l, disabled: c, children: r, helperText: i, className: o, fieldRef: t, fullWidth: a, readOnly: f, dataAttributes: u } = param;
+}, re = (param)=>{
+    let { multiline: e, disabled: c, children: r, helperText: n, className: s, fieldRef: o, fullWidth: a, readOnly: h, dataAttributes: f } = param;
+    const b = q();
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
-        className: d(W, a ? w : A, {
-            [R]: c
+    /* @__PURE__ */ d("div", _object_spread_props(_object_spread({
+        className: m(E, a ? M : O, {
+            [A]: c
         }),
-        onClick: (p)=>{
-            var m;
-            (m = p.currentTarget.querySelector(l ? "textarea" : "input")) == null || m.focus();
-        }
-    }, I(u)), {
+        onClick: (x)=>{
+            var u;
+            (u = x.currentTarget.querySelector(e ? "textarea" : "input")) == null || u.focus();
+        },
+        style: b
+    }, $(f)), {
         children: [
-            /* @__PURE__ */ e("div", {
-                className: d(j, f ? b.readOnly : b.default, o),
-                ref: t,
+            /* @__PURE__ */ l("div", {
+                className: m(R, h ? S.readOnly : S.default, s),
+                ref: o,
                 children: r
             }),
-            i && /* @__PURE__ */ e("div", {
-                className: D,
-                children: i
+            n && /* @__PURE__ */ l("div", {
+                className: W,
+                children: n
             })
         ]
     })));
 };
-export { Z as FieldContainer, Y as HelperText, X as Label };
+export { re as FieldContainer, le as HelperText, ie as Label, q as useApplyCssVars };

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

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-link.css.ts.vanilla.css-mistica.js";
 var n = {
-    underlineAlways: "v16_47_1m1n0pr2",
-    underlineOnHover: "v16_47_1m1n0pr3"
+    underlineAlways: "v16_49_1m1n0pr2",
+    underlineOnHover: "v16_49_1m1n0pr3"
 }, p = {
-    default: "v16_47_1m1n0pr8 v16_47_1m1n0pr1 v16_47_1m1n0pr0 v16_47_1y2v1nfqa v16_47_1y2v1nfpp v16_47_1y2v1nfsp v16_47_1m1n0pr4 v16_47_1y2v1nf2w",
-    brand: "v16_47_1m1n0pr9 v16_47_1m1n0pr1 v16_47_1m1n0pr0 v16_47_1y2v1nfqa v16_47_1y2v1nfpp v16_47_1y2v1nfsp v16_47_1m1n0pr5 v16_47_1y2v1nf2z",
-    negative: "v16_47_1m1n0pra v16_47_1m1n0pr1 v16_47_1m1n0pr0 v16_47_1y2v1nfqa v16_47_1y2v1nfpp v16_47_1y2v1nfsp v16_47_1m1n0pr6 v16_47_1y2v1nf2y",
-    media: "v16_47_1m1n0prb v16_47_1m1n0pr1 v16_47_1m1n0pr0 v16_47_1y2v1nfqa v16_47_1y2v1nfpp v16_47_1y2v1nfsp v16_47_1m1n0pr7 v16_47_1y2v1nf30"
+    default: "v16_49_1m1n0pr8 v16_49_1m1n0pr1 v16_49_1m1n0pr0 v16_49_1y2v1nfqa v16_49_1y2v1nfpp v16_49_1y2v1nfsp v16_49_1m1n0pr4 v16_49_1y2v1nf2w",
+    brand: "v16_49_1m1n0pr9 v16_49_1m1n0pr1 v16_49_1m1n0pr0 v16_49_1y2v1nfqa v16_49_1y2v1nfpp v16_49_1y2v1nfsp v16_49_1m1n0pr5 v16_49_1y2v1nf2z",
+    negative: "v16_49_1m1n0pra v16_49_1m1n0pr1 v16_49_1m1n0pr0 v16_49_1y2v1nfqa v16_49_1y2v1nfpp v16_49_1y2v1nfsp v16_49_1m1n0pr6 v16_49_1y2v1nf2y",
+    media: "v16_49_1m1n0prb v16_49_1m1n0pr1 v16_49_1m1n0pr0 v16_49_1y2v1nfqa v16_49_1y2v1nfpp v16_49_1y2v1nfsp v16_49_1m1n0pr7 v16_49_1y2v1nf30"
 };
 export { n as linkStyles, p as variants };

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

@@ -1,9 +1,9 @@
 import "./text.css.ts.vanilla.css-mistica.js";
 var r = {
-    mobileSize: "var(--v16_47_splu5g0)",
-    desktopSize: "var(--v16_47_splu5g1)",
-    mobileLineHeight: "var(--v16_47_splu5g2)",
-    desktopLineHeight: "var(--v16_47_splu5g3)",
-    lineClamp: "var(--v16_47_splu5g4)"
-}, _ = "v16_47_splu5g5", e = "v16_47_splu5g6", a = "v16_47_splu5g7", p = "v16_47_splu5g8", t = "v16_47_splu5g9";
+    mobileSize: "var(--v16_49_splu5g0)",
+    desktopSize: "var(--v16_49_splu5g1)",
+    mobileLineHeight: "var(--v16_49_splu5g2)",
+    desktopLineHeight: "var(--v16_49_splu5g3)",
+    lineClamp: "var(--v16_49_splu5g4)"
+}, _ = "v16_49_splu5g5", e = "v16_49_splu5g6", a = "v16_49_splu5g7", p = "v16_49_splu5g8", t = "v16_49_splu5g9";
 export { a as text, p as truncate, t as truncateToOneLine, r as vars, _ as withWordBreak, e as withoutWordBreak };