@telefonica/mistica 16.3.0 → 16.4.0

package/dist-es/switch-component.js

@@ -51,44 +51,45 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as l, Fragment as x, jsxs as b } from "react/jsx-runtime";
+import { jsx as s, Fragment as D, jsxs as k } from "react/jsx-runtime";
 import * as o from "react";
-import { debounce as C } from "./utils/helpers.js";
-import { SPACE as D } from "./utils/keys.js";
-import { useControlProps as S } from "./form-context.js";
-import { Text3 as V } from "./text.js";
-import y from "./inline.js";
-import { useTheme as g } from "./hooks.js";
-import { getPrefixedDataAttributes as E } from "./utils/dom.js";
-import { containerDisabled as P, container as A, interactiveArea as j, disabled as K, checkboxVariants as M, switchCheckboxContainerVariants as R, switchCheckboxLabel as T, barVariants as $, ballVariants as F } from "./switch-component.css-mistica.js";
-const L = (e)=>{
-    const { isIos: d, isDarkMode: f } = g(), u = o.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: s, onChange: a, focusableRef: v, disabled: i } = S({
+import { debounce as S } from "./utils/helpers.js";
+import { SPACE as y } from "./utils/keys.js";
+import { useControlProps as g } from "./form-context.js";
+import { Text3 as E } from "./text.js";
+import P from "./inline.js";
+import { useTheme as A } from "./hooks.js";
+import { getPrefixedDataAttributes as j } from "./utils/dom.js";
+import { containerDisabled as B, container as K, interactiveArea as M, disabled as R, checkboxVariants as T, switchCheckboxContainerVariants as $, switchCheckboxLabel as F, inverseBarVariants as L, barVariants as O, inverseBallVariants as _, ballVariants as q } from "./switch-component.css-mistica.js";
+import { useIsInverseVariant as z } from "./theme-variant-context.js";
+const G = (e)=>{
+    const { isIos: c, isDarkMode: v } = A(), m = z(), I = o.useId(), n = e["aria-labelledby"] || I, { defaultValue: V, value: l, onChange: a, focusableRef: N, disabled: i } = g({
         name: e.name,
         label: e["aria-label"],
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [c, I] = o.useState(!!k), r = s !== null && s !== void 0 ? s : c, N = o.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : C((t)=>{
+    }), [r, w] = o.useState(!!V), d = l !== null && l !== void 0 ? l : r, x = o.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : S((t)=>{
             a == null || a(t);
         }, 300), [
         a
-    ]), m = ()=>{
-        s !== void 0 ? a == null || a(!s) : (I(!c), N(!c));
-    }, w = (t)=>{
-        t.key === D && (t.preventDefault(), t.stopPropagation(), m());
-    }, h = /* @__PURE__ */ l("div", {
-        className: M[d ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
-        children: /* @__PURE__ */ l("div", {
-            className: R[d ? "ios" : "default"],
-            children: /* @__PURE__ */ b("div", {
-                className: T,
+    ]), b = ()=>{
+        l !== void 0 ? a == null || a(!l) : (w(!r), x(!r));
+    }, C = (t)=>{
+        t.key === y && (t.preventDefault(), t.stopPropagation(), b());
+    }, h = c ? d ? "checkedIos" : v ? "iosDark" : "ios" : d ? "checked" : "default", f = c ? d ? "checkedIos" : "ios" : d ? "checked" : "default", u = /* @__PURE__ */ s("div", {
+        className: T[c ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
+        children: /* @__PURE__ */ s("div", {
+            className: $[c ? "ios" : "default"],
+            children: /* @__PURE__ */ k("div", {
+                className: F,
                 children: [
-                    /* @__PURE__ */ l("span", {
-                        className: $[d ? r ? "checkedIos" : f ? "iosDark" : "ios" : r ? "checked" : "default"]
+                    /* @__PURE__ */ s("span", {
+                        className: m ? L[h] : O[h]
                     }),
-                    /* @__PURE__ */ l("span", {
-                        className: F[d ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
+                    /* @__PURE__ */ s("span", {
+                        className: m ? _[f] : q[f]
                     })
                 ]
             })
@@ -96,44 +97,44 @@ const L = (e)=>{
     });
     return(// When the switch is disabled, it shouldn't be focusable
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    /* @__PURE__ */ l("span", _object_spread_props(_object_spread({
+    /* @__PURE__ */ s("span", _object_spread_props(_object_spread({
         role: "switch",
-        "aria-checked": s !== null && s !== void 0 ? s : c,
+        "aria-checked": l !== null && l !== void 0 ? l : r,
         onClick: (t)=>{
-            t.stopPropagation(), i || m();
+            t.stopPropagation(), i || b();
         },
-        onKeyDown: i ? void 0 : w,
+        onKeyDown: i ? void 0 : C,
         tabIndex: i ? void 0 : 0,
-        ref: v,
-        className: i ? P : A,
+        ref: N,
+        className: i ? B : K,
         "aria-disabled": i,
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-label"] ? void 0 : n
-    }, E(e.dataAttributes, "Switch")), {
-        children: e.render ? /* @__PURE__ */ l(x, {
+    }, j(e.dataAttributes, "Switch")), {
+        children: e.render ? /* @__PURE__ */ s(D, {
             children: e.render({
-                controlElement: h,
+                controlElement: u,
                 labelId: n,
                 disabled: !!i,
-                checked: s !== null && s !== void 0 ? s : c
+                checked: l !== null && l !== void 0 ? l : r
             })
-        }) : /* @__PURE__ */ b(y, {
+        }) : /* @__PURE__ */ k(P, {
             space: 16,
             alignItems: "center",
-            className: j,
+            className: M,
             children: [
-                h,
-                e.children && /* @__PURE__ */ l(V, {
+                u,
+                e.children && /* @__PURE__ */ s(E, {
                     regular: !0,
                     as: "div",
                     id: n,
-                    children: /* @__PURE__ */ l("span", {
-                        className: i ? K : "",
+                    children: /* @__PURE__ */ s("span", {
+                        className: i ? R : "",
                         children: e.children
                     })
                 })
             ]
         })
     })));
-}, U = L;
-export { U as default };
+}, ae = G;
+export { ae as default };

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

@@ -1,17 +1,17 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tabs.css.ts.vanilla.css-mistica.js";
-var f = "_1y2v1nfhj _1y2v1nfhf _1y2v1nfl6 _1y2v1nfm0 _1y2v1nfiq", e = "lgofm1q", y = "lgofm14", _ = "lgofm13 _1y2v1nfjv _1y2v1nfi7 _1y2v1nfhe", a = "lgofm10", r = "lgofm11", l = {
+var v = "_1y2v1nfhn _1y2v1nfhj _1y2v1nfla _1y2v1nfm4 _1y2v1nfiu", e = "lgofm1q", y = "lgofm14", _ = "lgofm13 _1y2v1nfjz _1y2v1nfib _1y2v1nfhi", a = "lgofm10", r = "lgofm11", o = {
     default: "lgofm1a",
     inverse: "lgofm1b"
-}, o = {
-    noSelected: "_1y2v1nf28",
-    noSelectedInverse: "_1y2v1nf29",
+}, l = {
+    noSelected: "_1y2v1nf2a",
+    noSelectedInverse: "_1y2v1nf2b",
     selected: "lgofm1g",
     selectedInverse: "lgofm1h",
     selectedAnimating: "lgofm1i",
     selectedAnimatingInverse: "lgofm1j"
 }, t = {
-    default: "lgofm17 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhl _1y2v1nfi2 _1y2v1nfhz _1y2v1nfht _1y2v1nfjj _1y2v1nfjv _1y2v1nf7c",
-    fullWidth: "lgofm19 lgofm17 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhl _1y2v1nfi2 _1y2v1nfhz _1y2v1nfht _1y2v1nfjj _1y2v1nfjv _1y2v1nf7c"
-}, i = "_1y2v1nfjv _1y2v1nfi7 _1y2v1nfhk";
-export { f as animatedLine, e as icon, y as inner, _ as outer, a as outerBorder, r as outerBorderInverse, l as tabHover, o as tabSelectionVariants, t as tabVariants, i as tabsContainer };
+    default: "lgofm17 _1y2v1nfae _1y2v1nfbn _1y2v1nfhp _1y2v1nfi6 _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjn _1y2v1nfjz _1y2v1nf7g",
+    fullWidth: "lgofm19 lgofm17 _1y2v1nfae _1y2v1nfbn _1y2v1nfhp _1y2v1nfi6 _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjn _1y2v1nfjz _1y2v1nf7g"
+}, i = "_1y2v1nfjz _1y2v1nfib _1y2v1nfho";
+export { v as animatedLine, e as icon, y as inner, _ as outer, a as outerBorder, r as outerBorderInverse, o as tabHover, l as tabSelectionVariants, t as tabVariants, i as tabsContainer };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tag.css.ts.vanilla.css-mistica.js";
-var y = "_1y2v1nfhl _1y2v1nfa1", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+var y = "_1y2v1nfhp _1y2v1nfa5", _ = "_1y2v1nfhq", f = "_1wy08671 _1y2v1nf7n _1y2v1nf8w _1y2v1nfhp _1y2v1nfht _1y2v1nfi3 _1y2v1nfhx _1y2v1nfjk";
 export { y as badge, _ as icon, f as tag };

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

@@ -1,5 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
-var n = "rhey4t8", v = "rhey4th _1y2v1nfa1 _1y2v1nfhk _1y2v1nfhz", y = 12, a = "rhey4tr", f = 4, h = 11, i = 15, _ = "rhey4t4", d = "rhey4t7", l = "calc(1.5rem + 24px)", o = "rhey4ta _1y2v1nfhe rhey4t1 _1y2v1nfk2 _1y2v1nfj5 _1y2v1nf26 _1y2v1nfi7", p = "rhey4tb", u = "rhey4tc", m = "rhey4td", c = "rhey4tn _1y2v1nfhk _1y2v1nfhz _1y2v1nfkk", b = "_1y2v1nf44", g = "rhey4tl _1y2v1nfbg", k = "rhey4tj _1y2v1nfbg _1y2v1nfhk _1y2v1nfhz _1y2v1nfio _1y2v1nfhf", x = "rhey4tq _1y2v1nfhf", s = "rhey4t6 _1y2v1nf7d _1y2v1nf8m rhey4t1 _1y2v1nfk2 _1y2v1nfj5 _1y2v1nf26 _1y2v1nfi7", I = "rhey4te", L = "rhey4tf";
-export { n as emptyDateValue, v as endIconContainer, y as fieldElementsGap, a as fieldEndIconContainer, f as fieldEndIconGap, h as fieldLeftPadding, i as fieldRightPadding, _ as fullWidth, d as hiddenDatePlaceholder, l as iconButtonSize, o as input, p as inputFirefoxStyles, u as inputWithLabel, m as inputWithoutLabel, c as menuItem, b as menuItemSelected, g as prefix, k as startIcon, x as suggestionsContainer, s as textArea, I as textAreaWithLabel, L as textAreaWithoutLabel };
+var n = "rhey4t8", v = "rhey4th _1y2v1nfa5 _1y2v1nfho _1y2v1nfi3", y = 12, a = "rhey4tr", i = 4, f = 11, h = 15, _ = "rhey4t4", o = "rhey4t7", l = "calc(1.5rem + 24px)", d = "rhey4ta _1y2v1nfhi rhey4t1 _1y2v1nfk6 _1y2v1nfj9 _1y2v1nf28 _1y2v1nfib", p = "rhey4tb", u = "rhey4tc", c = "rhey4td", m = "rhey4tn _1y2v1nfho _1y2v1nfi3 _1y2v1nfko", b = "_1y2v1nf46", s = "rhey4tl _1y2v1nfbk", x = "rhey4tj _1y2v1nfbk _1y2v1nfho _1y2v1nfi3 _1y2v1nfis _1y2v1nfhj", I = "rhey4tq _1y2v1nfhj", g = "rhey4t6 _1y2v1nf7h _1y2v1nf8q rhey4t1 _1y2v1nfk6 _1y2v1nfj9 _1y2v1nf28 _1y2v1nfib", j = "rhey4te", k = "rhey4tf";
+export { n as emptyDateValue, v as endIconContainer, y as fieldElementsGap, a as fieldEndIconContainer, i as fieldEndIconGap, f as fieldLeftPadding, h as fieldRightPadding, _ as fullWidth, o as hiddenDatePlaceholder, l as iconButtonSize, d as input, p as inputFirefoxStyles, u as inputWithLabel, c as inputWithoutLabel, m as menuItem, b as menuItemSelected, s as prefix, x as startIcon, I as suggestionsContainer, g as textArea, j as textAreaWithLabel, k as textAreaWithoutLabel };

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

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

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

@@ -2,8 +2,8 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.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 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";
-export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as background, k as disabled, l as field, i as fieldContainer, t as fullWidth, h as helperContainer, o as helperText, u as labelContainer, d as labelText, p as leftHelperText, L as normalWidth, E as shrinked, T as warnIcon };
+var a = 328, e = 0.78, f = 0.75, y = {
+    default: "_1y2v1nf3s",
+    readOnly: "_1y2v1nf5o"
+}, i = "_15k6ur97", t = "_1y2v1nfkp _1y2v1nfk5 _1y2v1nfho _1y2v1nfke _1y2v1nfhi", l = "_15k6ur96 _1y2v1nfho _1y2v1nfhu", o = "_1y2v1nfib", h = "_1y2v1nfab _1y2v1nfbn _1y2v1nfho", k = "_1y2v1nfi9 _1y2v1nf7n", u = "_15k6ur91 _1y2v1nfhj _1y2v1nfho _1y2v1nfht", p = "_15k6ur93 _1y2v1nfkp _1y2v1nfi7", d = "_15k6ur9e _1y2v1nfho", b = "_15k6ur99 _1y2v1nfib", L = "_1y2v1nfae", E = "_15k6ur94", T = "_15k6ur9h";
+export { a as DEFAULT_WIDTH, e as LABEL_SCALE_DESKTOP, f as LABEL_SCALE_MOBILE, y as background, i as disabled, t as field, l as fieldContainer, o as fullWidth, h as helperContainer, k as helperText, u as labelContainer, p as labelText, d as leftHelperText, b as normalWidth, L as rightHelperText, E as shrinked, T as warnIcon };