@telefonica/mistica 16.1.0 → 16.2.0

package/dist/snackbar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ge;
+        return Ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -17,7 +17,6 @@ const _webviewbridge = require("@tef-novum/webview-bridge");
 const _hooks = require("./hooks.js");
 const _text = require("./text.js");
 const _snackbarcssmistica = require("./snackbar.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 _portal = require("./portal.js");
@@ -126,41 +125,41 @@ const ne = [
     "TIMEOUT",
     "CONSECUTIVE",
     "BUTTON"
-], oe = 5e3, se = 1e4, ce = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: t, buttonAccessibilityLabel: f, closeButtonLabel: p, duration: n, onClose: o, type: c, withDismiss: d = !1, dataAttributes: O } = param;
-    const { texts: T, t: a } = (0, _hooks.useTheme)(), [i, I] = _react.useState(!1), { width: s, ref: U } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: C } = (0, _hooks.useScreenSize)(), l = s > (C ? 160 : 128), B = _react.useRef(null), E = n === "PERSISTENT" && !t || d, k = t ? se : oe, S = _react.useRef(o);
+], se = 5e3, ce = 1e4, ae = /*#__PURE__*/ _react.forwardRef((param, E)=>{
+    let { message: u, buttonText: r, buttonAccessibilityLabel: m, closeButtonLabel: I, duration: o, onClose: n, type: c, withDismiss: f = !1, dataAttributes: O } = param;
+    const { texts: d, t: a } = (0, _hooks.useTheme)(), [i, p] = _react.useState(!1), { width: s, ref: k } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: C } = (0, _hooks.useScreenSize)(), T = s > (C ? 160 : 128), g = _react.useRef(null), v = o === "PERSISTENT" && !r || f, b = r ? ce : se, h = _react.useRef(n);
     _react.useEffect(()=>{
-        S.current = o;
+        h.current = n;
     }, [
-        o
+        n
     ]);
-    const u = _react.useCallback((v)=>{
-        I(!1), setTimeout(()=>{
-            var h;
-            (h = S.current) == null || h.call(S, v);
+    const l = _react.useCallback((B)=>{
+        p(!1), setTimeout(()=>{
+            var S;
+            (S = h.current) == null || S.call(h, B);
         }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, []);
-    return _react.useImperativeHandle(g, ()=>_object_spread_props(_object_spread({}, B), {
-            close: u
+    return _react.useImperativeHandle(E, ()=>_object_spread_props(_object_spread({}, g), {
+            close: l
         }), [
-        u
+        l
     ]), _react.useEffect(()=>{
-        const v = setTimeout(()=>{
-            I(!0);
-        }, 50), h = n !== "PERSISTENT" ? setTimeout(()=>u({
+        const B = setTimeout(()=>{
+            p(!0);
+        }, 50), S = o !== "PERSISTENT" ? setTimeout(()=>l({
                 action: "TIMEOUT"
-            }), k) : void 0;
+            }), b) : void 0;
         return ()=>{
-            clearTimeout(v), clearTimeout(h);
+            clearTimeout(B), clearTimeout(S);
         };
     }, [
-        u,
-        n,
-        k
+        l,
+        o,
+        b
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         className: _snackbarcssmistica.snackbarContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            ref: B,
+            ref: g,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
                 [_snackbarcssmistica.snackbarOpen]: i
             }),
@@ -172,62 +171,53 @@ const ne = [
             }, (0, _dom.getPrefixedDataAttributes)(O, "SnackBar")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                            flexDirection: l ? "column" : "row",
-                            alignItems: l ? void 0 : "center"
-                        })),
-                        style: E && !l ? {
+                        className: (0, _classnames.default)(T ? _snackbarcssmistica.contentWithLongButton : _snackbarcssmistica.contentWithoutLongButton),
+                        style: v && !T ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: E && l ? {
+                                style: v && T ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
-                                    children: m
+                                    children: u
                                 })
                             }),
-                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_snackbarcssmistica.button, {
-                                    [_snackbarcssmistica.longButton]: l
+                                    [_snackbarcssmistica.longButton]: T
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                                    className: (0, _sprinklescssmistica.sprinkles)({
-                                        paddingY: 4,
-                                        paddingX: 8,
-                                        border: "none",
-                                        padding: 0,
-                                        background: "transparent"
-                                    }),
-                                    ref: U,
+                                    className: _snackbarcssmistica.buttonTouchable,
+                                    ref: k,
                                     onPress: ()=>{
-                                        u({
+                                        l({
                                             action: "BUTTON"
                                         });
                                     },
-                                    "aria-label": f,
+                                    "aria-label": m,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         medium: !0,
                                         forceMobileSizes: !0,
                                         truncate: !0,
                                         color: c === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
-                                        children: t
+                                        children: r
                                     })
                                 })
                             })
                         ]
                     }),
-                    E ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                         onPress: ()=>{
-                            u({
+                            l({
                                 action: "DISMISS"
                             });
                         },
-                        "aria-label": p || T.closeButtonLabel || a(_texttokens.closeButtonLabel),
-                        className: _snackbarcssmistica.dismissButton[l ? "topRight" : "centered"],
+                        "aria-label": I || d.closeButtonLabel || a(_texttokens.closeButtonLabel),
+                        className: _snackbarcssmistica.dismissButton[T ? "topRight" : "centered"],
                         style: {
                             display: "flex",
                             width: 32,
@@ -245,23 +235,23 @@ const ne = [
             }))
         })
     });
-}), ae = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: t, buttonAccessibilityLabel: f, closeButtonLabel: p, duration: n, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: d, dataAttributes: O } = param;
-    const T = (0, _webviewbridge.isWebViewBridgeAvailable)(), a = _react.useRef(o), i = _react.useRef(!1);
+}), ie = /*#__PURE__*/ _react.forwardRef((param, E)=>{
+    let { message: u, buttonText: r, buttonAccessibilityLabel: m, closeButtonLabel: I, duration: o, onClose: n = ()=>{}, type: c = "INFORMATIVE", withDismiss: f, dataAttributes: O } = param;
+    const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), a = _react.useRef(n), i = _react.useRef(!1);
     return _react.useEffect(()=>{
-        a.current = o;
+        a.current = n;
     }, [
-        o
+        n
     ]), _react.useEffect(()=>{
-        T && !i.current && (i.current = !0, (0, _webviewbridge.nativeMessage)({
-            message: m,
-            duration: n,
-            buttonText: t,
-            buttonAccessibilityLabel: f,
+        d && !i.current && (i.current = !0, (0, _webviewbridge.nativeMessage)({
+            message: u,
+            duration: o,
+            buttonText: r,
+            buttonAccessibilityLabel: m,
             type: c,
-            withDismiss: d
-        }).then((I)=>{
-            const s = I;
+            withDismiss: f
+        }).then((p)=>{
+            const s = p;
             s != null && s.action && ne.includes(s.action) ? a.current({
                 action: s.action
             }) : a.current({
@@ -271,24 +261,24 @@ const ne = [
             i.current = !1;
         }));
     }, [
-        f,
-        p,
-        t,
-        n,
         m,
-        T,
+        I,
+        r,
+        o,
+        u,
+        d,
         c,
-        d
-    ]), T ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
-        ref: g,
-        message: m,
-        duration: n,
-        buttonText: t,
-        buttonAccessibilityLabel: f,
-        closeButtonLabel: p,
+        f
+    ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+        ref: E,
+        message: u,
+        duration: o,
+        buttonText: r,
+        buttonAccessibilityLabel: m,
+        closeButtonLabel: I,
         type: c,
         onClose: a.current,
-        withDismiss: d,
+        withDismiss: f,
         dataAttributes: O
     });
-}), ge = ae;
+}), Ee = ie;

package/dist/tag.css-mistica.js

@@ -2,12 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "tag", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    badge: function() {
+        return y;
+    },
+    icon: function() {
         return _;
+    },
+    tag: function() {
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tag.css.ts.vanilla.css-mistica.js");
-var _ = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+var y = "_1y2v1nfhl", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";

package/dist/tag.css.d.ts

@@ -1 +1,3 @@
 export declare const tag: string;
+export declare const icon: string;
+export declare const badge: string;

package/dist/tag.js

@@ -16,7 +16,6 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _css = require("./utils/css.js");
 const _dom = require("./utils/dom.js");
 const _tagcssmistica = require("./tag.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _hooks = require("./hooks.js");
@@ -78,10 +77,10 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
-    let { Icon: e, children: i, dataAttributes: m, type: l = "promo", badge: n } = param;
-    const { textPresets: d } = (0, _hooks.useTheme)(), p = (0, _themevariantcontext.useThemeVariant)(), o = n === !0 ? void 0 : n || 0;
-    if (!i) return null;
+const { colors: t } = _skincontractcssmistica.vars, C = (param)=>{
+    let { Icon: e, children: o, dataAttributes: c, type: m = "promo", badge: i } = param;
+    const { textPresets: d } = (0, _hooks.useTheme)(), l = (0, _themevariantcontext.useThemeVariant)(), a = i === !0 ? void 0 : i || 0;
+    if (!o) return null;
     const u = {
         // [textColor, backgroundColor]
         promo: [
@@ -95,7 +94,7 @@ const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
         inactive: [
             t.tagTextInactive,
             // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            p === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
+            l === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
             t.tagTextSuccess,
@@ -109,46 +108,43 @@ const { colors: t } = _skincontractcssmistica.vars, V = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [s, f] = u[l];
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m, "Tag")), {
-        className: (0, _classnames.default)(_tagcssmistica.tag, (0, _sprinklescssmistica.sprinkles)({
+    }, [n, p] = u[m];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Tag")), {
+        className: (0, _classnames.default)(_tagcssmistica.tag),
+        style: {
             paddingLeft: e ? 8 : 12,
-            paddingRight: o !== 0 ? 8 : 12,
-            background: f
-        })),
+            paddingRight: a !== 0 ? 8 : 12,
+            background: p
+        },
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(e, {
-                    color: s,
+                    color: n,
                     size: (0, _css.pxToRem)(16),
-                    className: (0, _sprinklescssmistica.sprinkles)({
-                        display: "block"
-                    })
+                    className: _tagcssmistica.icon
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                 isInverse: !1,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                        color: s,
+                        color: n,
                         size: 14,
                         lineHeight: 20,
                         weight: d.indicator.weight,
                         truncate: !0,
-                        children: i
+                        children: o
                     }),
-                    o !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    a !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 4,
-                        className: (0, _sprinklescssmistica.sprinkles)({
-                            display: "inline-flex"
-                        }),
+                        className: _tagcssmistica.badge,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                            value: o
+                            value: a
                         })
                     })
                 ]
             })
         ]
     }));
-}, I = V;
+}, I = C;

package/dist/text-field-base.d.ts

@@ -83,7 +83,7 @@ interface TextFieldBaseProps {
     onFocus?: React.FocusEventHandler;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     inputProps?: {
-        [name: string]: unknown;
+        [name: string]: string | number | undefined;
     };
     inputComponent?: React.ComponentType<any>;
     shrinkLabel?: boolean;

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", {