@telefonica/mistica 16.3.0 → 16.4.0

package/dist/text-field-base.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     FieldEndIcon: function() {
-        return nt;
+        return ot;
     },
     TextFieldBase: function() {
-        return W;
+        return N;
     },
     TextFieldBaseAutosuggest: function() {
-        return at;
+        return dt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,36 +160,36 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const _e = (l, u)=>{
+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__ */ (0, _jsxruntime.jsx)("div", {
         className: _textfieldbasecssmistica.fieldEndIconContainer,
         children: o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, {
             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
+            disabled: h
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
             Icon: S,
-            disabled: m,
-            "aria-label": h || "",
+            disabled: h,
+            "aria-label": p || "",
             onPress: u,
             hasOverlay: l
         })
     });
-}, H = (l)=>{
+}, j = (l)=>{
     l.preventDefault();
-}, W = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -215,59 +215,62 @@ const _e = (l, u)=>{
         "dataAttributes",
         "preventCopy"
     ]);
-    const { preventCopyInFormFields: Z } = (0, _hooks.useTheme)();
-    A = A !== null && A !== void 0 ? A : Z;
+    const { preventCopyInFormFields: V, texts: ee, t: te } = (0, _hooks.useTheme)();
+    L = L !== null && L !== void 0 ? L : V;
     var _ref;
-    const V = _react.useId(), w = J || V, P = _react.useId(), [s, c] = _react.useState(o != null && o.length || a != null && a.length ? "filled" : "default"), { isTabletOrSmaller: ee } = (0, _hooks.useScreenSize)(), [D, O] = _react.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 = _react.useRef(void 0);
+    const ie = _react.useId(), P = Q || ie, D = _react.useId(), O = _react.useId(), [s, c] = _react.useState(o != null && o.length || r != null && r.length ? "filled" : "default"), { isTabletOrSmaller: ne } = (0, _hooks.useScreenSize)(), [A, B] = _react.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 = _react.useRef(void 0);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        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 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
     ]), _react.useEffect(()=>{
         d.autoFocus && c("focused");
     }, [
         d.autoFocus
     ]);
-    const te = p ? "textarea" : "input", ie = v ? {
+    const re = m ? "textarea" : "input", ae = v ? {
         inputRef: S
     } : {
-        ref: (0, _common.combineRefs)(Y, S)
-    }, R = _object_spread(_object_spread_props(_object_spread({}, d), {
-        maxLength: C,
-        autoComplete: Q
-    }), m), F = `calc(${_iconbuttoncssmistica.iconSize.default} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, q = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, ne = g || s === "focused" || s === "filled" ? ee ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, ae = {
-        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${f ? F : "0px"})`,
+        ref: (0, _common.combineRefs)(Z, S)
+    }, E = _object_spread(_object_spread_props(_object_spread({}, d), {
+        maxLength: g,
+        autoComplete: U
+    }), h), W = `calc(${_iconbuttoncssmistica.iconSize.default} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, q = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, le = x || s === "focused" || s === "filled" ? ne ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, oe = {
+        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}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% - ${_textfieldbasecssmistica.fieldLeftPadding}px - ${f ? F : "0px"} - ${x || i ? q : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${ne})`
-    }, re = d.type === "password" && D > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
+        width: `calc((100% - ${_textfieldbasecssmistica.fieldLeftPadding}px - ${f ? W : "0px"} - ${I || i ? q : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${le})`
+    }, de = d.type === "password" && A > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.FieldContainer, {
         disabled: d.disabled,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
             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(_texttokens.formTextMultilineMaxCount).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,
+        dataAttributes: Y,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: [
                 f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.startIcon,
+                    "data-testid": "startIcon",
                     children: f
                 }),
                 y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, $ ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, F ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     style: {
                         opacity: s === "default" ? 0 : 1
                     },
@@ -279,11 +282,11 @@ const _e = (l, u)=>{
                     })
                 }),
                 t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                    style: ae,
+                    style: oe,
                     error: l,
-                    forId: w,
+                    forId: P,
                     inputState: s,
-                    shrinkLabel: g,
+                    shrinkLabel: x,
                     optional: !d.required,
                     children: t
                 }),
@@ -292,83 +295,84 @@ const _e = (l, u)=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         as: "div",
                         regular: !0,
-                        children: /*#__PURE__*/ _react.createElement(v || te, _object_spread(_object_spread_props(_object_spread({}, ie, R), {
-                            id: w,
+                        children: /*#__PURE__*/ _react.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 : _textfieldbasecssmistica.fieldRightPadding,
-                                paddingLeft: y ? 0 : f ? `calc(${F} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
-                            }, R.style), {
-                                fontFamily: re
+                                paddingRight: I ? 0 : i ? q : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: y ? 0 : f ? `calc(${W} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
+                            }, E.style), {
+                                fontFamily: de
                             }),
-                            className: p ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, $ ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, $ ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
+                            className: m ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, F ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, F ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
                                 [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)(),
                                 // Hide webkit placeholder when label is not shrinked and value is empty
-                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: E && s === "default",
+                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: T && s === "default",
                                 // Force height of input when value is empty to avoid field from having height 0 in iOS
-                                [_textfieldbasecssmistica.emptyDateValue]: E && s !== "filled"
+                                [_textfieldbasecssmistica.emptyDateValue]: 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__ */ (0, _jsxruntime.jsx)("div", {
+                I && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.endIconContainer,
-                    children: x
+                    "data-testid": "endIcon",
+                    children: I
                 }),
                 i
             ]
         })
     });
-}), Ge = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), at = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+}), ke = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), dt = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
     var { getSuggestions: l, id: u } = _param, t = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [S, o] = _react.useState([]), a = _react.useRef(null), { platformOverrides: h, texts: b, t: v } = (0, _hooks.useTheme)(), y = _react.useId(), f = u || y, x = _react.useId();
+    const [S, o] = _react.useState([]), r = _react.useRef(null), { platformOverrides: p, texts: b, t: v } = (0, _hooks.useTheme)(), y = _react.useId(), f = u || y, I = _react.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__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, t), {
-            label: (0, _platform.isRunningAcceptanceTest)(h) ? "" : t.label,
+        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({}, t), {
+            label: (0, _platform.isRunningAcceptanceTest)(p) ? "" : t.label,
             autoComplete: "off",
-            ref: m,
+            ref: h,
             id: f
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
-            id: x,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, i), {
-                    inputRef: (0, _common.combineRefs)(a, t.inputRef, m)
+            renderInputComponent: (i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({}, i), {
+                    inputRef: (0, _common.combineRefs)(r, t.inputRef, h)
                 })),
             suggestions: S,
             onSuggestionsFetchRequested: (param)=>{
@@ -378,11 +382,11 @@ const _e = (l, u)=>{
             onSuggestionsClearRequested: ()=>o([]),
             getSuggestionValue: (i)=>i,
             renderSuggestion: (i, param)=>{
-                let { isHighlighted: g } = param;
+                let { isHighlighted: x } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "menuitem",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItem, {
-                        [_textfieldbasecssmistica.menuItemSelected]: g
+                        [_textfieldbasecssmistica.menuItemSelected]: x
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
@@ -392,15 +396,15 @@ const _e = (l, u)=>{
             },
             renderSuggestionsContainer: (i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("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: _textfieldbasecssmistica.suggestionsContainer,
                     "aria-label": `${t.label} ${b.menuLabelSuffix || v(_texttokens.menuLabelSuffix)}`,
                     children: i.children
                 }))
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, t), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({}, t), {
         id: f,
-        ref: m
+        ref: h
     }));
 });

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

@@ -13,42 +13,45 @@ _export(exports, {
         return a;
     },
     LABEL_SCALE_DESKTOP: function() {
-        return f;
+        return e;
     },
     LABEL_SCALE_MOBILE: function() {
-        return e;
+        return f;
     },
     background: function() {
         return y;
     },
     disabled: function() {
-        return k;
+        return i;
     },
     field: function() {
-        return l;
+        return t;
     },
     fieldContainer: function() {
-        return i;
+        return l;
     },
     fullWidth: function() {
-        return t;
+        return o;
     },
     helperContainer: function() {
         return h;
     },
     helperText: function() {
-        return o;
+        return k;
     },
     labelContainer: function() {
         return u;
     },
     labelText: function() {
-        return d;
+        return p;
     },
     leftHelperText: function() {
-        return p;
+        return d;
     },
     normalWidth: function() {
+        return b;
+    },
+    rightHelperText: function() {
         return L;
     },
     shrinked: function() {
@@ -62,7 +65,7 @@ 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 = {
-    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";
+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";

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

@@ -11,6 +11,7 @@ export declare const fullWidth: string;
 export declare const field: string;
 export declare const helperContainer: string;
 export declare const leftHelperText: string;
+export declare const rightHelperText: string;
 export declare const helperText: string;
 export declare const warnIcon: string;
 export declare const background: Record<"default" | "readOnly", string>;

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

@@ -14,11 +14,13 @@ export declare const Label: ({ shrinkLabel, forId, inputState, error, children,
 type HelperTextProps = {
     leftText?: string;
     rightText?: string;
+    rightTextLabel?: string;
     error?: boolean;
-    id?: string;
+    leftTextId?: string;
+    rightTextId?: string;
     children?: void;
 };
-export declare const HelperText: ({ leftText, rightText, error, id }: HelperTextProps) => JSX.Element;
+export declare const HelperText: ({ leftText, leftTextId, rightText, rightTextId, rightTextLabel, error, }: HelperTextProps) => JSX.Element;
 type FieldContainerProps = {
     multiline?: boolean;
     disabled?: boolean;

package/dist/text-field-components.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     FieldContainer: function() {
-        return Y;
+        return ee;
     },
     HelperText: function() {
-        return X;
+        return $;
     },
     Label: function() {
-        return U;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -31,6 +31,7 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _texttokens = require("./text-tokens.js");
 const _iconwarningregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-warning-regular.js"));
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -129,93 +130,110 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-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)();
+const Z = (param)=>{
+    let { shrinkLabel: o, forId: d, inputState: r, error: s, children: l, style: i, optional: a } = param;
+    const n = o || r === "focused" || r === "filled", [m, p] = _react.useState("initial"), { texts: u, t: N } = (0, _hooks.useTheme)();
     _react.useEffect(()=>{
-        const N = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
+        const b = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(N);
+            clearTimeout(b);
         };
     }, []);
-    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", {
+    let h = _skincontractcssmistica.vars.colors.textSecondary;
+    return s && r !== "default" ? h = _skincontractcssmistica.vars.colors.textError : r === "focused" && (h = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
         className: (0, _classnames.default)(_textfieldcomponentscssmistica.labelContainer, {
-            [_textfieldcomponentscssmistica.shrinked]: f
+            [_textfieldcomponentscssmistica.shrinked]: n
         }),
-        htmlFor: l,
+        htmlFor: d,
         style: _object_spread_props(_object_spread({
-            color: p
-        }, a), {
-            transition: u
+            color: h
+        }, i), {
+            transition: m
         }),
+        "data-testid": "label",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                 className: _textfieldcomponentscssmistica.labelText,
-                children: i
+                children: l
             }),
-            n ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
+            a ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || y(_texttokens.formFieldOptionalLabelSuffix),
+                    u.formFieldOptionalLabelSuffix || N(_texttokens.formFieldOptionalLabelSuffix),
                     ")"
                 ]
             }) : null
         ]
     });
-}, 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;
+}, $ = (param)=>{
+    let { leftText: o, leftTextId: d, rightText: r, rightTextId: s, rightTextLabel: l, error: i } = param;
+    const a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = a ? _skincontractcssmistica.vars.colors.textPrimaryInverse : i ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, m = a ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             o && /* @__PURE__ */ (0, _jsxruntime.jsxs)("p", {
                 className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText, _textfieldcomponentscssmistica.leftHelperText),
+                "data-testid": i ? "errorText" : "helperText",
                 children: [
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                         regular: !0,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconwarningregular.default, {
-                            color: a,
+                            color: n,
                             className: _textfieldcomponentscssmistica.warnIcon
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                        color: a,
+                        color: n,
                         regular: !0,
-                        id: s,
+                        id: d,
                         children: o
                     })
                 ]
             }),
-            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText),
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                    color: n,
+            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText, {
+                    [_textfieldcomponentscssmistica.rightHelperText]: !!o
+                }),
+                "data-testid": "endHelperText",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_text.Text1, {
+                    color: m,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
-                    children: l
+                    wordBreak: !1,
+                    id: s,
+                    children: [
+                        l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                                children: l
+                            })
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                            "aria-hidden": l !== void 0,
+                            children: r
+                        })
+                    ]
                 })
             })
         ]
     });
-}, Y = (param)=>{
-    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
+}, ee = (param)=>{
+    let { multiline: o, disabled: d, children: r, helperText: s, className: l, fieldRef: i, fullWidth: a, readOnly: n, dataAttributes: m } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, n ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
-            [_textfieldcomponentscssmistica.disabled]: l
+        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, a ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
+            [_textfieldcomponentscssmistica.disabled]: d
         }),
-        onClick: (h)=>{
-            var d;
-            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
+        onClick: (p)=>{
+            var u;
+            (u = p.currentTarget.querySelector(o ? "textarea" : "input")) == null || u.focus();
         }
-    }, (0, _dom.getPrefixedDataAttributes)(u)), {
+    }, (0, _dom.getPrefixedDataAttributes)(m)), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, f ? _textfieldcomponentscssmistica.background.readOnly : _textfieldcomponentscssmistica.background.default, i),
-                ref: a,
-                children: e
+                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, n ? _textfieldcomponentscssmistica.background.readOnly : _textfieldcomponentscssmistica.background.default, l),
+                ref: i,
+                children: r
             }),
             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldcomponentscssmistica.helperContainer,