@telefonica/mistica 14.41.0 → 14.42.1

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

@@ -78,20 +78,44 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import * as s from "react";
-import { FieldContainer as V, HelperText as ee, Label as te } from "./text-field-components.js";
-import { LABEL_LEFT_POSITION as R, LABEL_SCALE_MOBILE as ie, LABEL_SCALE_DESKTOP as ne } from "./text-field-components.css-mistica.js";
-import { Text3 as I } from "./text.js";
-import { isSafari as re, isFirefox as se, isRunningAcceptanceTest as le } from "./utils/platform.js";
-import { useAriaId as F, useScreenSize as oe, useIsomorphicLayoutEffect as ae, useTheme as de } from "./hooks.js";
-import A from "classnames";
-import { combineRefs as q } from "./utils/common.js";
-import { startIcon as ce, prefix as fe, prefixWithLabel as ge, prefixWithoutLabel as he, fullWidth as me, textArea as ue, textAreaWithLabel as Se, textAreaWithoutLabel as pe, input as be, inputWithLabel as ye, inputWithoutLabel as Le, inputFirefoxStyles as xe, endIcon as Ce, menuItem as Ae, menuItemSelected as Te, suggestionsContainer as Ee } from "./text-field-base.css-mistica.js";
-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, [
+import { jsx as n, jsxs as ae } from "react/jsx-runtime";
+import * as o from "react";
+import { FieldContainer as le, HelperText as oe, Label as se } from "./text-field-components.js";
+import { LABEL_SCALE_MOBILE as de, LABEL_SCALE_DESKTOP as ce } from "./text-field-components.css-mistica.js";
+import { Text3 as N } from "./text.js";
+import { isFirefox as ue, isRunningAcceptanceTest as fe } from "./utils/platform.js";
+import { useAriaId as A, useScreenSize as he, useIsomorphicLayoutEffect as me, useTheme as ge } from "./hooks.js";
+import $ from "classnames";
+import { combineRefs as H } from "./utils/common.js";
+import { startIcon as pe, prefix as Se, inputWithLabel as k, inputWithoutLabel as j, fullWidth as xe, fieldRightPadding as W, fieldLeftPadding as T, textArea as ye, textAreaWithLabel as be, textAreaWithoutLabel as Ce, input as Ee, inputFirefoxStyles as Re, hiddenDatePlaceholder as Le, emptyDateValue as Te, endIconContainer as $e, menuItem as Ae, menuItemSelected as Ie, suggestionsContainer as ve, fieldEndIconContainer as We, iconButtonSize as K, iconSize as M, fieldElementsGap as G } from "./text-field-base.css-mistica.js";
+import { vars as Fe } from "./skins/skin-contract.css-mistica.js";
+import { BaseIconButton as Ne } from "./icon-button.js";
+import { ThemeVariant as Pe } from "./theme-variant-context.js";
+const we = (l, u)=>{
+    if (!u) return !0;
+    const i = document.createElement("input");
+    return i.type = u, i.value = l || "", i.value !== "";
+}, Ue = (param)=>{
+    let { Icon: l, className: u, onPress: i, disabled: h, "aria-label": m } = param;
+    return(/**
+   * If we try to add fieldEndIconContainer styles to the BaseIconButton instead,
+   * there may be collisions because that component sets margin internally. We
+   * create a wrapper around it so that the margin's value won't be overrided.
+   */ /* @__PURE__ */ n("div", {
+        className: We,
+        children: /* @__PURE__ */ n(Ne, {
+            disabled: h,
+            "aria-label": m,
+            onPress: i,
+            size: K,
+            className: u,
+            children: /* @__PURE__ */ n(l, {
+                size: M
+            })
+        })
+    }));
+}, F = /*#__PURE__*/ o.forwardRef((_param, Z)=>{
+    var { error: l, helperText: u, label: i, inputProps: h, inputRef: m, defaultValue: s, value: r, onFocus: S, onBlur: x, inputComponent: g, prefix: y, startIcon: t, endIcon: f, endIconOverlay: p, shrinkLabel: P, multiline: L = !1, focus: b, fieldRef: J, maxLength: C, id: Q, autoComplete: U, fullWidth: X, dataAttributes: Y } = _param, a = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -113,183 +137,191 @@ const W = /*#__PURE__*/ s.forwardRef((_param, H)=>{
         "maxLength",
         "id",
         "autoComplete",
-        "fullWidth"
+        "fullWidth",
+        "dataAttributes"
     ]);
     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");
-    ae(()=>{
-        re() && Q("initial");
-    }, []), s.useEffect(()=>{
-        f !== "focused" && t != null && t.length && (O(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && t != null && t.length && d("filled");
+    const w = A(Q), z = A(), [d, c] = o.useState(s != null && s.length || r != null && r.length ? "filled" : "default"), { isTabletOrSmaller: V } = he(), [B, D] = o.useState((_ref = s == null ? void 0 : s.length) !== null && _ref !== void 0 ? _ref : 0), I = !!i || !a.required, E = a.type === "date" || a.type === "datetime-local" || a.type === "month", q = o.useRef(void 0);
+    me(()=>{
+        const e = E && !we(r, a.type) ? "" : r;
+        q.current !== r && E && !(e != null && e.length) && d === "filled" && b === void 0 && c("default"), q.current = r, d !== "focused" && e != null && e.length && (D(e.length), c("filled")), b && c("focused"), b === !1 && !(e != null && e.length) && c("default"), b === !1 && e != null && e.length && c("filled");
     }, [
-        f,
-        t,
-        C
-    ]), s.useEffect(()=>{
-        r.autoFocus && d("focused");
+        d,
+        r,
+        b,
+        E,
+        a.type
+    ]), o.useEffect(()=>{
+        a.autoFocus && c("focused");
     }, [
-        r.autoFocus
+        a.autoFocus
     ]);
-    const U = x ? "textarea" : "input", X = g ? {
-        inputRef: y
+    const ee = L ? "textarea" : "input", te = g ? {
+        inputRef: m
     } : {
-        ref: q(H, y)
-    }, b = _object_spread(_object_spread_props(_object_spread({}, r), {
-        maxLength: p,
-        autoComplete: D
-    }), m), P = w || f === "focused" || f === "filled", Y = P ? K ? ie : ne : 1, Z = {
-        left: e ? 48 : R,
+        ref: H(Z, m)
+    }, R = _object_spread(_object_spread_props(_object_spread({}, a), {
+        maxLength: C,
+        autoComplete: U
+    }), h), v = `calc(${M} + ${G}px)`, O = `calc(${K} + ${G}px)`, ie = P || d === "focused" || d === "filled" ? V ? de : ce : 1, ne = {
+        left: `calc(${T}px + ${t ? v : "0px"})`,
         // shrinking means applying a scale transformation, so width will be proportionally reduced.
         // Let's keep the original width.
-        width: `calc(((100% - ${R + (e ? 48 : R)}px)) / ${Y})`,
-        paddingRight: a && !P ? 36 : 0
-    }, k = Re({
-        paddingRight: a ? 0 : 16,
-        paddingLeft: h ? 0 : e ? 48 : 12
-    }), $ = r.type === "password" ? "Lucida Grande, Arial, sans-serif" : "inherit";
-    return /* @__PURE__ */ v(V, {
-        disabled: r.disabled,
-        helperText: /* @__PURE__ */ i(ee, {
-            error: c,
-            leftText: T,
-            rightText: x && p ? `${M}/${p}` : void 0
+        width: `calc((100% - ${T}px - ${t ? v : "0px"} - ${f || p ? O : `${W}px`}) / ${ie})`
+    }, re = a.type === "password" && B > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
+    return /* @__PURE__ */ n(le, {
+        disabled: a.disabled,
+        helperText: /* @__PURE__ */ n(oe, {
+            error: l,
+            leftText: u,
+            id: z,
+            rightText: L && C ? `${B}/${C}` : void 0
         }),
-        multiline: x,
-        fullWidth: G,
-        fieldRef: j,
-        readOnly: r.readOnly,
-        children: [
-            e && /* @__PURE__ */ i("div", {
-                className: ce,
-                children: e
-            }),
-            h && /* @__PURE__ */ i("div", {
-                className: A(fe, E ? ge : he),
-                style: {
-                    opacity: f === "default" ? 0 : 1,
-                    alignSelf: J
-                },
-                children: /* @__PURE__ */ i(I, {
-                    color: We.colors.textSecondary,
-                    regular: !0,
-                    wordBreak: !1,
-                    children: h
-                })
-            }),
-            /* @__PURE__ */ i("div", {
-                className: me,
-                style: {
-                    alignSelf: h ? "baseline" : "initial"
-                },
-                children: /* @__PURE__ */ i(I, {
-                    as: "div",
-                    regular: !0,
-                    children: /*#__PURE__*/ s.createElement(g || U, _object_spread(_object_spread_props(_object_spread({}, X, b), {
-                        id: N,
-                        style: _object_spread_props(_object_spread({}, b.style), {
-                            fontFamily: $
-                        }),
-                        className: x ? A(ue, E ? Se : pe, k) : A(be, E ? ye : Le, k, {
-                            [xe]: se()
-                        }),
-                        onFocus: (l)=>{
-                            d("focused"), u == null || u(l);
-                        },
-                        onBlur: (l)=>{
-                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
-                        },
-                        onChange: (l)=>{
-                            var _;
-                            p === void 0 || l.target.value.length <= p ? (O(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (_ = b.onChange) == null || _.call(b, l)) : (l.stopPropagation(), l.preventDefault());
-                        },
-                        defaultValue: o,
-                        value: t
-                    }), c && {
-                        "aria-invalid": !0
-                    }))
-                })
-            }),
-            n && /* @__PURE__ */ i(te, {
-                style: Z,
-                error: c,
-                forId: N,
-                inputState: f,
-                shrinkLabel: w,
-                optional: !r.required,
-                children: n
-            }),
-            a && /* @__PURE__ */ i("div", {
-                className: Ce,
-                children: a
-            }),
-            L
-        ]
+        multiline: L,
+        fullWidth: X,
+        fieldRef: J,
+        readOnly: a.readOnly,
+        dataAttributes: Y,
+        children: /* @__PURE__ */ ae(Pe, {
+            isInverse: !1,
+            children: [
+                t && /* @__PURE__ */ n("div", {
+                    className: pe,
+                    children: t
+                }),
+                y && /* @__PURE__ */ n("div", {
+                    className: $(Se, I ? k : j),
+                    style: {
+                        opacity: d === "default" ? 0 : 1
+                    },
+                    children: /* @__PURE__ */ n(N, {
+                        color: Fe.colors.textSecondary,
+                        regular: !0,
+                        wordBreak: !1,
+                        children: y
+                    })
+                }),
+                /* @__PURE__ */ n("div", {
+                    className: xe,
+                    children: /* @__PURE__ */ n(N, {
+                        as: "div",
+                        regular: !0,
+                        children: /*#__PURE__*/ o.createElement(g || ee, _object_spread(_object_spread_props(_object_spread({}, te, R), {
+                            id: w,
+                            style: _object_spread_props(_object_spread({
+                                paddingRight: f ? 0 : p ? `calc(${W}px + ${O})` : W,
+                                paddingLeft: y ? 0 : t ? `calc(${v} + ${T}px)` : T
+                            }, R.style), {
+                                fontFamily: re
+                            }),
+                            className: L ? $(ye, I ? be : Ce) : $(Ee, I ? k : j, {
+                                [Re]: ue(),
+                                // Hide webkit placeholder when label is not shrinked and value is empty
+                                [Le]: E && d === "default",
+                                // Force height of input when value is empty to avoid field from having height 0 in iOS
+                                [Te]: E && d !== "filled"
+                            }),
+                            onFocus: (e)=>{
+                                c("focused"), S == null || S(e);
+                            },
+                            onBlur: (e)=>{
+                                e.target.value.length > 0 ? c("filled") : c("default"), x == null || x(e);
+                            },
+                            onChange: (e)=>{
+                                var _;
+                                C === void 0 || e.target.value.length <= C ? (D(e.target.value.length), e.target.value.length > 0 && d !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (_ = R.onChange) == null || _.call(R, e)) : (e.stopPropagation(), e.preventDefault());
+                            },
+                            defaultValue: s,
+                            value: r
+                        }), l && {
+                            "aria-invalid": !0
+                        }, u && {
+                            "aria-describedby": z
+                        }))
+                    })
+                }),
+                i && /* @__PURE__ */ n(se, {
+                    style: ne,
+                    error: l,
+                    forId: w,
+                    inputState: d,
+                    shrinkLabel: P,
+                    optional: !a.required,
+                    children: i
+                }),
+                f && /* @__PURE__ */ n("div", {
+                    className: $e,
+                    children: f
+                }),
+                p
+            ]
+        })
     });
-}), 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, [
+}), ze = /*#__PURE__*/ o.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), Xe = /*#__PURE__*/ o.forwardRef((_param, h)=>{
+    var { getSuggestions: l, id: u } = _param, i = _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();
-    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), {
-            label: le(u) ? "" : n.label,
+    const [m, s] = o.useState([]), r = o.useRef(null), { platformOverrides: S, texts: x } = ge(), g = A(u), y = A();
+    if (l && (i.value === void 0 || i.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
+    return l ? /* @__PURE__ */ n(o.Suspense, {
+        fallback: /* @__PURE__ */ n(F, _object_spread_props(_object_spread({}, i), {
+            label: fe(S) ? "" : i.label,
             autoComplete: "off",
-            ref: m,
+            ref: h,
             id: g
         })),
-        children: /* @__PURE__ */ i(Ie, {
-            id: h,
-            inputProps: _object_spread_props(_object_spread({}, n), {
+        children: /* @__PURE__ */ n(ze, {
+            id: y,
+            inputProps: _object_spread_props(_object_spread({}, i), {
                 id: g,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
-                onChange: (e, param)=>{
-                    let { newValue: a } = param;
-                    var L;
-                    e.target = _object_spread_props(_object_spread({}, e.target), {
-                        value: a
-                    }), e.currentTarget = _object_spread_props(_object_spread({}, e.currentTarget), {
-                        value: a
-                    }), (L = n.onChange) == null || L.call(n, e);
+                onChange: (t, param)=>{
+                    let { newValue: f } = param;
+                    var p;
+                    t.target = _object_spread_props(_object_spread({}, t.target), {
+                        value: f
+                    }), t.currentTarget = _object_spread_props(_object_spread({}, t.currentTarget), {
+                        value: f
+                    }), (p = i.onChange) == null || p.call(i, t);
                 }
             }),
-            renderInputComponent: (e)=>/* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, e), {
-                    inputRef: q(t, n.inputRef, m)
+            renderInputComponent: (t)=>/* @__PURE__ */ n(F, _object_spread_props(_object_spread({}, t), {
+                    inputRef: H(r, i.inputRef, h)
                 })),
-            suggestions: y,
+            suggestions: m,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e } = param;
-                return o(c(e));
+                let { value: t } = param;
+                return s(l(t));
             },
-            onSuggestionsClearRequested: ()=>o([]),
-            getSuggestionValue: (e)=>e,
-            renderSuggestion: (e, param)=>{
-                let { isHighlighted: a } = param;
-                return /* @__PURE__ */ i("div", {
+            onSuggestionsClearRequested: ()=>s([]),
+            getSuggestionValue: (t)=>t,
+            renderSuggestion: (t, param)=>{
+                let { isHighlighted: f } = param;
+                return /* @__PURE__ */ n("div", {
                     role: "menuitem",
-                    className: A(Ae, {
-                        [Te]: a
+                    className: $(Ae, {
+                        [Ie]: f
                     }),
-                    children: /* @__PURE__ */ i(I, {
+                    children: /* @__PURE__ */ n(N, {
                         regular: !0,
-                        children: e
+                        children: t
                     })
                 });
             },
-            renderSuggestionsContainer: (e)=>/* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, e.containerProps), {
+            renderSuggestionsContainer: (t)=>/* @__PURE__ */ n("div", _object_spread_props(_object_spread({}, t.containerProps), {
                     style: {
-                        width: t.current ? t.current.clientWidth + 2 : 0
+                        width: r.current ? r.current.clientWidth + 2 : 0
                     },
-                    className: Ee,
-                    "aria-label": `${n.label} ${S.menuLabelSuffix}`,
-                    children: e.children
+                    className: ve,
+                    "aria-label": `${i.label} ${x.menuLabelSuffix}`,
+                    children: t.children
                 }))
         })
-    }) : /* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ n(F, _object_spread_props(_object_spread({}, i), {
         id: g,
-        ref: m
+        ref: h
     }));
 });
-export { W as TextFieldBase, De as TextFieldBaseAutosuggest };
+export { Ue as FieldEndIcon, F as TextFieldBase, Xe as TextFieldBaseAutosuggest };

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

@@ -1,4 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
-var _ = 328, n = 12, f = 0.78, a = 0.75, e = "_15k6ur97", i = "_1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc", y = "_15k6ur96 _1y2v1nfgi _1y2v1nfgo", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nfhy", u = "_1y2v1nfh5", h = "_1y2v1nf95 _1y2v1nfah _1y2v1nfgi", k = "_15k6ur9g", d = "_15k6ur91 _1y2v1nfgd _1y2v1nfjp _1y2v1nfhu _1y2v1nfgi _1y2v1nfgn _1y2v1nfk8", g = "_15k6ur93 _1y2v1nfjj _1y2v1nfh1", L = "_15k6ur9h", E = "_15k6ur99 _1y2v1nfh5", T = "_15k6ur9i", o = "_15k6ur94";
-export { _ as DEFAULT_WIDTH, n as LABEL_LEFT_POSITION, f as LABEL_SCALE_DESKTOP, a as LABEL_SCALE_MOBILE, e as disabled, i as field, y as fieldContainer, l as fieldMulti, t as fieldSingle, u as fullWidth, h as helperContainer, k as helperText, d as labelContainer, g as labelText, L as leftText, E as normalWidth, T as rightText, o as shrinked };
+var n = 328, a = 0.78, f = 0.75, e = "_15k6ur97", i = "_1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc", y = "_15k6ur96 _1y2v1nfgi _1y2v1nfgo", t = "_1y2v1nfh5", l = "_1y2v1nf95 _1y2v1nfah _1y2v1nfgi", h = "_15k6ur9d", k = "_15k6ur91 _1y2v1nfgd _1y2v1nfgi _1y2v1nfgn", u = "_15k6ur93 _1y2v1nfjj _1y2v1nfh1", d = "_15k6ur9e", g = "_15k6ur99 _1y2v1nfh5", o = "_15k6ur9f", L = "_15k6ur94";
+export { n as DEFAULT_WIDTH, a as LABEL_SCALE_DESKTOP, f as LABEL_SCALE_MOBILE, e as disabled, i as field, y as fieldContainer, t as fullWidth, l as helperContainer, h as helperText, k as labelContainer, u as labelText, d as leftText, g as normalWidth, o as rightText, L as shrinked };

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

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