@telefonica/mistica 16.1.1 → 16.3.0

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

@@ -18,45 +18,51 @@ _export(exports, {
     LABEL_SCALE_MOBILE: function() {
         return e;
     },
-    disabled: function() {
+    background: function() {
         return y;
     },
-    field: function() {
+    disabled: function() {
         return k;
     },
+    field: function() {
+        return l;
+    },
     fieldContainer: function() {
         return i;
     },
     fullWidth: function() {
-        return l;
+        return t;
     },
     helperContainer: function() {
         return h;
     },
     helperText: function() {
-        return t;
+        return o;
     },
     labelContainer: function() {
-        return o;
+        return u;
     },
     labelText: function() {
-        return p;
+        return d;
     },
     leftHelperText: function() {
-        return u;
+        return p;
     },
     normalWidth: function() {
         return L;
     },
     shrinked: function() {
-        return d;
+        return E;
     },
     warnIcon: function() {
-        return E;
+        return T;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./text-field-components.css.ts.vanilla.css-mistica.js");
-var a = 328, f = 0.78, e = 0.75, y = "_15k6ur97", k = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", l = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", t = "_1y2v1nfi5 _1y2v1nf7j", o = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", p = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", u = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", d = "_15k6ur94", E = "_15k6ur9g";
+var a = 328, f = 0.78, e = 0.75, y = {
+    default: "_1y2v1nf3q",
+    readOnly: "_1y2v1nf5k"
+}, k = "_15k6ur97", l = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", t = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", o = "_1y2v1nfi5 _1y2v1nf7j", u = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", d = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", p = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", E = "_15k6ur94", T = "_15k6ur9g";

package/dist/text-field-components.css.d.ts

@@ -13,3 +13,4 @@ export declare const helperContainer: string;
 export declare const leftHelperText: string;
 export declare const helperText: string;
 export declare const warnIcon: string;
+export declare const background: Record<"default" | "readOnly", string>;

package/dist/text-field-components.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     FieldContainer: function() {
-        return Z;
+        return Y;
     },
     HelperText: function() {
-        return Y;
+        return X;
     },
     Label: function() {
-        return X;
+        return U;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -27,7 +27,6 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _hooks = require("./hooks.js");
 const _text = require("./text.js");
 const _textfieldcomponentscssmistica = require("./text-field-components.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _texttokens = require("./text-tokens.js");
@@ -130,26 +129,26 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const X = (param)=>{
-    let { shrinkLabel: t, forId: l, inputState: e, error: s, children: i, style: n, optional: a } = param;
-    const f = t || e === "focused" || e === "filled", [u, p] = _react.useState("initial"), { texts: d, t: N } = (0, _hooks.useTheme)();
+const U = (param)=>{
+    let { shrinkLabel: o, forId: l, inputState: e, error: s, children: i, style: a, optional: n } = param;
+    const f = o || e === "focused" || e === "filled", [u, h] = _react.useState("initial"), { texts: d, t: y } = (0, _hooks.useTheme)();
     _react.useEffect(()=>{
-        const y = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
+        const N = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(y);
+            clearTimeout(N);
         };
     }, []);
-    let h = _skincontractcssmistica.vars.colors.textSecondary;
-    return s && e !== "default" ? h = _skincontractcssmistica.vars.colors.textError : e === "focused" && (h = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
+    let p = _skincontractcssmistica.vars.colors.textSecondary;
+    return s && e !== "default" ? p = _skincontractcssmistica.vars.colors.textError : e === "focused" && (p = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
         className: (0, _classnames.default)(_textfieldcomponentscssmistica.labelContainer, {
             [_textfieldcomponentscssmistica.shrinked]: f
-        }, (0, _sprinklescssmistica.sprinkles)({
-            color: h
-        })),
+        }),
         htmlFor: l,
-        style: _object_spread_props(_object_spread({}, n), {
+        style: _object_spread_props(_object_spread({
+            color: p
+        }, a), {
             transition: u
         }),
         children: [
@@ -157,42 +156,42 @@ const X = (param)=>{
                 className: _textfieldcomponentscssmistica.labelText,
                 children: i
             }),
-            a ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
+            n ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || N(_texttokens.formFieldOptionalLabelSuffix),
+                    d.formFieldOptionalLabelSuffix || y(_texttokens.formFieldOptionalLabelSuffix),
                     ")"
                 ]
             }) : null
         ]
     });
-}, Y = (param)=>{
-    let { leftText: t, rightText: l, error: e, id: s } = param;
-    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : e ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, a = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
+}, X = (param)=>{
+    let { leftText: o, rightText: l, error: e, id: s } = param;
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : e ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, n = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            t && /* @__PURE__ */ (0, _jsxruntime.jsxs)("p", {
+            o && /* @__PURE__ */ (0, _jsxruntime.jsxs)("p", {
                 className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText, _textfieldcomponentscssmistica.leftHelperText),
                 children: [
                     e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                         regular: !0,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconwarningregular.default, {
-                            color: n,
+                            color: a,
                             className: _textfieldcomponentscssmistica.warnIcon
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                        color: n,
+                        color: a,
                         regular: !0,
                         id: s,
-                        children: t
+                        children: o
                     })
                 ]
             }),
             l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                    color: a,
+                    color: n,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
@@ -201,23 +200,21 @@ const X = (param)=>{
             })
         ]
     });
-}, Z = (param)=>{
-    let { multiline: t, disabled: l, children: e, helperText: s, className: i, fieldRef: n, fullWidth: a, readOnly: f, dataAttributes: u } = param;
+}, Y = (param)=>{
+    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, a ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
+        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, n ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
             [_textfieldcomponentscssmistica.disabled]: l
         }),
-        onClick: (p)=>{
+        onClick: (h)=>{
             var d;
-            (d = p.currentTarget.querySelector(t ? "textarea" : "input")) == null || d.focus();
+            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
         }
     }, (0, _dom.getPrefixedDataAttributes)(u)), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, (0, _sprinklescssmistica.sprinkles)({
-                    background: f ? _skincontractcssmistica.vars.colors.neutralLow : _skincontractcssmistica.vars.colors.backgroundContainer
-                }), i),
-                ref: n,
+                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, f ? _textfieldcomponentscssmistica.background.readOnly : _textfieldcomponentscssmistica.background.default, i),
+                ref: a,
                 children: e
             }),
             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {

package/dist/text-props.d.ts

@@ -0,0 +1,60 @@
+export declare const text1: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text2: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text3: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text4: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text5: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text6: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text7: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text8: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text9: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text10: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};

package/dist/text-props.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    text1: function() {
+        return e;
+    },
+    text10: function() {
+        return d;
+    },
+    text2: function() {
+        return i;
+    },
+    text3: function() {
+        return t;
+    },
+    text4: function() {
+        return o;
+    },
+    text5: function() {
+        return p;
+    },
+    text6: function() {
+        return x;
+    },
+    text7: function() {
+        return n;
+    },
+    text8: function() {
+        return s;
+    },
+    text9: function() {
+        return b;
+    }
+});
+const e = {
+    mobileSize: 12,
+    mobileLineHeight: "16px",
+    desktopSize: 14,
+    desktopLineHeight: "20px"
+}, i = {
+    mobileSize: 14,
+    mobileLineHeight: "20px",
+    desktopSize: 16,
+    desktopLineHeight: "24px"
+}, t = {
+    mobileSize: 16,
+    mobileLineHeight: "24px",
+    desktopSize: 18,
+    desktopLineHeight: "24px"
+}, o = {
+    mobileSize: 18,
+    mobileLineHeight: "24px",
+    desktopSize: 20,
+    desktopLineHeight: "28px"
+}, p = {
+    mobileSize: 20,
+    mobileLineHeight: "24px",
+    desktopSize: 28,
+    desktopLineHeight: "32px"
+}, x = {
+    mobileSize: 24,
+    mobileLineHeight: "32px",
+    desktopSize: 32,
+    desktopLineHeight: "40px"
+}, n = {
+    mobileSize: 28,
+    mobileLineHeight: "32px",
+    desktopSize: 40,
+    desktopLineHeight: "48px"
+}, s = {
+    mobileSize: 32,
+    mobileLineHeight: "40px",
+    desktopSize: 48,
+    desktopLineHeight: "56px"
+}, b = {
+    mobileSize: 40,
+    mobileLineHeight: "48px",
+    desktopSize: 56,
+    desktopLineHeight: "64px"
+}, d = {
+    mobileSize: 48,
+    mobileLineHeight: "56px",
+    desktopSize: 64,
+    desktopLineHeight: "72px"
+};

package/dist/text.d.ts

@@ -58,68 +58,6 @@ interface RestrictedWeightTextProps<T> extends TextPresetProps {
 }
 type RegularMediumProps = ExclusifyUnion<RegularProps | MediumProps | RestrictedWeightTextProps<'regular' | 'medium'>>;
 type LightRegularMediumProps = ExclusifyUnion<LightProps | RegularProps | MediumProps | RestrictedWeightTextProps<'light' | 'regular' | 'medium'>>;
-export declare const textProps: {
-    text1: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text2: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text3: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text4: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text5: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text6: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text7: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text8: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text9: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text10: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-};
 export declare const Text10: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;
 export declare const Text9: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;
 export declare const Text8: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;