@telefonica/mistica 16.0.0 → 16.1.1

package/dist/slider.js

@@ -122,24 +122,24 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t), I = (n, t, o, a, g)=>{
+const Re = 48, me = 20, Ce = 28, Ve = (r, t, o)=>t >= o ? 0 : (r - t) / (o - t), I = (r, t, o, a, h)=>{
     const v = (i)=>{
         if (i === void 0) return t;
-        const B = n ? t + (o - t) * i : i;
+        const B = r ? t + (o - t) * i : i;
         return Math.max(t, Math.min(o, B));
     };
     if (t >= o) return t;
-    const h = v(g), P = t + Math.floor((h - t) / a) * a, R = t + Math.ceil((h - t) / a) * a;
-    return R <= o && R - h <= h - P ? R : P;
-}, w = (n, t, o)=>{
+    const b = v(h), P = t + Math.floor((b - t) / a) * a, R = t + Math.ceil((b - t) / a) * a;
+    return R <= o && R - b <= b - P ? R : P;
+}, w = (r, t, o)=>{
     if (!o) return t;
-    if (t === void 0) return n;
+    if (t === void 0) return r;
     let a = 0;
-    return o.forEach((g, v)=>{
-        o && Math.abs(g - t) <= Math.abs(o[a] - t) && (a = v);
+    return o.forEach((h, v)=>{
+        o && Math.abs(h - t) <= Math.abs(o[a] - t) && (a = v);
     }), a;
 }, Pe = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
-    var { values: n, step: t = 1, min: o = 0, max: a = 100, "aria-label": g, "aria-labelledby": v, id: h, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
+    var { values: r, step: t = 1, min: o = 0, max: a = 100, "aria-label": h, "aria-labelledby": v, id: b, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
         "values",
         "step",
         "min",
@@ -150,21 +150,22 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
         "dataAttributes",
         "tooltip"
     ]);
-    n && (n.length === 0 ? n = void 0 : a = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    r && (r.length === 0 ? r = void 0 : a = r.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
     const { defaultValue: Z, value: D, onChange: H, focusableRef: x, disabled: U, name: z } = (0, _formcontext.useControlProps)({
         name: i.name,
-        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, n)) : void 0,
-        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, n)) : void 0,
+        label: h,
+        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, r)) : void 0,
+        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, r)) : void 0,
         onChange: i.onChangeValue,
         disabled: i.disabled
-    }), [q, G] = _react.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, n))), u = D !== null && D !== void 0 ? D : q, $ = _react.useRef(u), T = _react.useCallback((e, r)=>{
-        const c = I(r, o, a, t, e);
-        $.current !== c && (H(n ? n[c] : c), G(c), $.current = c);
+    }), [q, G] = _react.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, r))), u = D !== null && D !== void 0 ? D : q, $ = _react.useRef(u), T = _react.useCallback((e, n)=>{
+        const c = I(n, o, a, t, e);
+        $.current !== c && (H(r ? r[c] : c), G(c), $.current = c);
     }, [
         o,
         a,
         t,
-        n,
+        r,
         H
     ]);
     _react.useEffect(()=>{
@@ -172,24 +173,24 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
     }, [
         T
     ]);
-    const _ = _react.useRef(null), m = _react.useRef(null), N = _react.useRef(null), J = _react.useRef(null), [p, E] = _react.useState(!1), [y, F] = _react.useState(!1), [K, L] = _react.useState(!1), { isIos: S } = (0, _hooks.useTheme)(), A = (e, r, c)=>{
+    const _ = _react.useRef(null), m = _react.useRef(null), N = _react.useRef(null), J = _react.useRef(null), [p, E] = _react.useState(!1), [y, F] = _react.useState(!1), [K, O] = _react.useState(!1), { isIos: S } = (0, _hooks.useTheme)(), A = (e, n, c)=>{
         const d = e == null ? void 0 : e.getBoundingClientRect();
-        return !!d && d.left <= r && r <= d.right && d.top <= c && c <= d.bottom;
+        return !!d && d.left <= n && n <= d.right && d.top <= c && c <= d.bottom;
     }, l = (0, _environment.isTouchableDevice)(), C = S ? Ce : me, f = l ? Re : C, M = (e)=>{
-        const r = _.current;
-        if (r) {
-            const c = r.getBoundingClientRect().left + C / 2, d = r.getBoundingClientRect().right - C / 2;
+        const n = _.current;
+        if (n) {
+            const c = n.getBoundingClientRect().left + C / 2, d = n.getBoundingClientRect().right - C / 2;
             T((e - c) / (d - c), !0);
         }
     }, Q = (e)=>{
         (0, _dom.cancelEvent)(e), M(e.clientX);
     }, W = (e)=>{
-        const r = m.current;
-        r && (r.onpointermove = Q, r.setPointerCapture(e.pointerId));
+        const n = m.current;
+        n && (n.onpointermove = Q, n.setPointerCapture(e.pointerId));
     }, ee = (e)=>{
-        const r = m.current;
-        r && (r.onpointermove = null, r.releasePointerCapture(e.pointerId));
-    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, O = `calc(${k} + ${f / 2}px)`, X = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        const n = m.current;
+        n && (n.onpointermove = null, n.releasePointerCapture(e.pointerId));
+    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, X = `calc(${k} + ${f / 2}px)`, L = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(S ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb, {
             [_slidercssmistica.thumbHover]: !S && y && !p,
             [_slidercssmistica.thumbActive]: !S && p
@@ -209,16 +210,16 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
             },
             ref: N,
             onPointerDown: (e)=>{
-                const r = e.clientX, c = e.clientY;
-                !l && A(N.current, r, c) ? (A(m.current, r, c) || M(r), E(!0), W(e)) : (0, _dom.cancelEvent)(e);
+                const n = e.clientX, c = e.clientY;
+                !l && A(N.current, n, c) ? (A(m.current, n, c) || M(n), E(!0), W(e)) : (0, _dom.cancelEvent)(e);
             },
             onPointerUp: (e)=>{
                 l || (E(!1), ee(e));
             },
             onTouchStart: (e)=>{
                 if ((0, _dom.cancelEvent)(e), l) {
-                    const r = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
-                    A(m.current, r, c) || M(r), E(!0);
+                    const n = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
+                    A(m.current, n, c) || M(n), E(!0);
                 }
             },
             onTouchEnd: (e)=>{
@@ -232,7 +233,7 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                     className: _slidercssmistica.track,
                     ref: _,
                     style: {
-                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${O}, ${_skincontractcssmistica.vars.colors.barTrack} ${O}`
+                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${X}, ${_skincontractcssmistica.vars.colors.barTrack} ${X}`
                     }
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -251,12 +252,12 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                         l || F(!1);
                     },
                     children: R ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
-                        target: X,
+                        target: L,
                         open: p || K || y ? !0 : void 0,
-                        description: String(n ? n[u] : u),
+                        description: String(r ? r[u] : u),
                         centerContent: !0,
                         delay: !1
-                    }) : X
+                    }) : L
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
                     type: "range",
@@ -264,11 +265,11 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                     max: a,
                     ref: (0, _common.combineRefs)(B, J, x),
                     step: t,
-                    "aria-label": g,
+                    "aria-label": h,
                     "aria-labelledby": v,
-                    id: h,
+                    id: b,
                     className: _slidercssmistica.input,
-                    "aria-valuetext": String(n ? n[u] : u),
+                    "aria-valuetext": String(r ? r[u] : u),
                     style: {
                         left: k,
                         width: f,
@@ -279,10 +280,10 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                     disabled: U,
                     onChange: (e)=>T(+e.target.value, !1),
                     onFocus: ()=>{
-                        L(!0);
+                        O(!0);
                     },
                     onBlur: ()=>{
-                        L(!1);
+                        O(!1);
                     }
                 })
             ]

package/dist/switch-component.js

@@ -118,22 +118,23 @@ function _object_spread_props(target, source) {
     return target;
 }
 const L = (e)=>{
-    const { isIos: d, isDarkMode: f } = (0, _hooks.useTheme)(), u = _react.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: c, onChange: a, focusableRef: v, disabled: t } = (0, _formcontext.useControlProps)({
+    const { isIos: d, isDarkMode: f } = (0, _hooks.useTheme)(), u = _react.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: s, onChange: a, focusableRef: v, disabled: i } = (0, _formcontext.useControlProps)({
         name: e.name,
+        label: e["aria-label"],
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [l, I] = _react.useState(!!k), r = c !== null && c !== void 0 ? c : l, N = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (i)=>a == null ? void 0 : a(i) : (0, _helpers.debounce)((i)=>{
-            a == null || a(i);
+    }), [c, I] = _react.useState(!!k), r = s !== null && s !== void 0 ? s : c, N = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : (0, _helpers.debounce)((t)=>{
+            a == null || a(t);
         }, 300), [
         a
     ]), m = ()=>{
-        c !== void 0 ? a == null || a(!c) : (I(!l), N(!l));
-    }, w = (i)=>{
-        i.key === _keys.SPACE && (i.preventDefault(), i.stopPropagation(), m());
+        s !== void 0 ? a == null || a(!s) : (I(!c), N(!c));
+    }, w = (t)=>{
+        t.key === _keys.SPACE && (t.preventDefault(), t.stopPropagation(), m());
     }, h = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _switchcomponentcssmistica.checkboxVariants[d ? t ? "disabledIos" : "ios" : t ? "disabled" : "default"],
+        className: _switchcomponentcssmistica.checkboxVariants[d ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _switchcomponentcssmistica.switchCheckboxContainerVariants[d ? "ios" : "default"],
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -152,15 +153,15 @@ const L = (e)=>{
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", _object_spread_props(_object_spread({
         role: "switch",
-        "aria-checked": c !== null && c !== void 0 ? c : l,
-        onClick: (i)=>{
-            i.stopPropagation(), t || m();
+        "aria-checked": s !== null && s !== void 0 ? s : c,
+        onClick: (t)=>{
+            t.stopPropagation(), i || m();
         },
-        onKeyDown: t ? void 0 : w,
-        tabIndex: t ? void 0 : 0,
+        onKeyDown: i ? void 0 : w,
+        tabIndex: i ? void 0 : 0,
         ref: v,
-        className: t ? _switchcomponentcssmistica.containerDisabled : _switchcomponentcssmistica.container,
-        "aria-disabled": t,
+        className: i ? _switchcomponentcssmistica.containerDisabled : _switchcomponentcssmistica.container,
+        "aria-disabled": i,
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-label"] ? void 0 : n
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Switch")), {
@@ -168,8 +169,8 @@ const L = (e)=>{
             children: e.render({
                 controlElement: h,
                 labelId: n,
-                disabled: !!t,
-                checked: c !== null && c !== void 0 ? c : l
+                disabled: !!i,
+                checked: s !== null && s !== void 0 ? s : c
             })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
@@ -182,7 +183,7 @@ const L = (e)=>{
                     as: "div",
                     id: n,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: t ? _switchcomponentcssmistica.disabled : "",
+                        className: i ? _switchcomponentcssmistica.disabled : "",
                         children: e.children
                     })
                 })

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

@@ -50,6 +50,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children?: void;
     readOnly?: boolean;
+    preventCopy?: boolean;
     dataAttributes?: DataAttributes;
 }
 interface TextFieldBaseProps {
@@ -92,6 +93,7 @@ interface TextFieldBaseProps {
     multiline?: boolean;
     inputMode?: string;
     readOnly?: boolean;
+    preventCopy?: boolean;
     min?: string;
     max?: string;
     role?: string;

package/dist/text-field-base.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     FieldEndIcon: function() {
-        return et;
+        return nt;
     },
     TextFieldBase: function() {
         return W;
     },
     TextFieldBaseAutosuggest: function() {
-        return tt;
+        return at;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,34 +160,36 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const De = (d, u)=>{
+const _e = (l, u)=>{
     if (!u) return !0;
     const t = document.createElement("input");
-    return t.type = u, t.value = d || "", t.value !== "";
-}, et = (param)=>{
-    let { hasBackgroundColor: d = !0, onPress: u, onChange: t, disabled: m, Icon: S, checkedProps: l, uncheckedProps: a, "aria-label": h } = param;
+    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;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _textfieldbasecssmistica.fieldEndIconContainer,
-        children: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, {
-            checkedProps: _object_spread_props(_object_spread({}, l), {
-                "aria-label": l["aria-label"] || ""
+        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"] || ""
             }),
             onChange: t,
-            hasOverlay: d,
+            hasOverlay: l,
             disabled: m
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
             Icon: S,
             disabled: m,
             "aria-label": h || "",
             onPress: u,
-            hasOverlay: d
+            hasOverlay: l
         })
     });
-}, W = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
-    var { error: d, helperText: u, label: t, inputProps: m, inputRef: S, defaultValue: l, value: a, onFocus: h, onBlur: b, inputComponent: L, prefix: y, startIcon: f, endIcon: x, endIconOverlay: i, shrinkLabel: g, multiline: p = !1, focus: I, fieldRef: k, maxLength: C, id: H, autoComplete: K, fullWidth: M, dataAttributes: J } = _param, o = _object_without_properties(_param, [
+}, H = (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, [
         "error",
         "helperText",
         "label",
@@ -210,59 +212,62 @@ const De = (d, u)=>{
         "id",
         "autoComplete",
         "fullWidth",
-        "dataAttributes"
+        "dataAttributes",
+        "preventCopy"
     ]);
+    const { preventCopyInFormFields: Z } = (0, _hooks.useTheme)();
+    A = A !== null && A !== void 0 ? A : Z;
     var _ref;
-    const U = _react.useId(), N = H || U, w = _react.useId(), [s, c] = _react.useState(l != null && l.length || a != null && a.length ? "filled" : "default"), { isTabletOrSmaller: X } = (0, _hooks.useScreenSize)(), [P, O] = _react.useState((_ref = l == null ? void 0 : l.length) !== null && _ref !== void 0 ? _ref : 0), A = !!t || !o.required, E = o.type === "date" || o.type === "datetime-local" || o.type === "month", B = _react.useRef(void 0);
+    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);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        const e = E && !De(a, o.type) ? "" : a;
+        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");
     }, [
         s,
         a,
         I,
         E,
-        o.type
+        d.type
     ]), _react.useEffect(()=>{
-        o.autoFocus && c("focused");
+        d.autoFocus && c("focused");
     }, [
-        o.autoFocus
+        d.autoFocus
     ]);
-    const Y = p ? "textarea" : "input", Z = L ? {
+    const te = p ? "textarea" : "input", ie = v ? {
         inputRef: S
     } : {
-        ref: (0, _common.combineRefs)(Q, S)
-    }, R = _object_spread(_object_spread_props(_object_spread({}, o), {
+        ref: (0, _common.combineRefs)(Y, S)
+    }, R = _object_spread(_object_spread_props(_object_spread({}, d), {
         maxLength: C,
-        autoComplete: K
-    }), m), $ = `calc(${_iconbuttoncssmistica.iconSize.default} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, D = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, V = g || s === "focused" || s === "filled" ? X ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, ee = {
-        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${f ? $ : "0px"})`,
+        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"})`,
         // 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 ? $ : "0px"} - ${x || i ? D : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${V})`
-    }, te = o.type === "password" && P > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
+        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";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.FieldContainer, {
-        disabled: o.disabled,
+        disabled: d.disabled,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-            error: d,
+            error: l,
             leftText: u,
-            id: w,
-            rightText: p && C ? `${P}/${C}` : void 0
+            id: P,
+            rightText: p && C ? `${D}/${C}` : void 0
         }),
         multiline: p,
-        fullWidth: M,
-        fieldRef: k,
-        readOnly: o.readOnly,
-        dataAttributes: J,
+        fullWidth: U,
+        fieldRef: M,
+        readOnly: d.readOnly,
+        dataAttributes: X,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-            isInverse: !1,
+            variant: "default",
             children: [
                 f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.startIcon,
                     children: f
                 }),
                 y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, A ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, $ ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     style: {
                         opacity: s === "default" ? 0 : 1
                     },
@@ -273,20 +278,29 @@ const De = (d, u)=>{
                         children: y
                     })
                 }),
+                t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                    style: ae,
+                    error: l,
+                    forId: w,
+                    inputState: s,
+                    shrinkLabel: g,
+                    optional: !d.required,
+                    children: t
+                }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.fullWidth,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         as: "div",
                         regular: !0,
-                        children: /*#__PURE__*/ _react.createElement(L || Y, _object_spread(_object_spread_props(_object_spread({}, Z, R), {
-                            id: N,
+                        children: /*#__PURE__*/ _react.createElement(v || te, _object_spread(_object_spread_props(_object_spread({}, ie, R), {
+                            id: w,
                             style: _object_spread_props(_object_spread({
-                                paddingRight: x ? 0 : i ? D : _textfieldbasecssmistica.fieldRightPadding,
-                                paddingLeft: y ? 0 : f ? `calc(${$} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
+                                paddingRight: x ? 0 : i ? q : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: y ? 0 : f ? `calc(${F} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
                             }, R.style), {
-                                fontFamily: te
+                                fontFamily: re
                             }),
-                            className: p ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, A ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, A ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
+                            className: p ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, $ ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, $ ? _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",
@@ -300,27 +314,21 @@ const De = (d, u)=>{
                                 e.target.value.length > 0 ? c("filled") : c("default"), b == null || b(e);
                             },
                             onChange: (e)=>{
-                                var q;
-                                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"), (q = R.onChange) == null || q.call(R, e)) : (e.stopPropagation(), e.preventDefault());
+                                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());
                             },
-                            defaultValue: l,
+                            defaultValue: o,
                             value: a
-                        }), d && {
+                        }), l && {
                             "aria-invalid": !0
                         }, u && {
-                            "aria-describedby": w
+                            "aria-describedby": P
+                        }, A && {
+                            onCopy: H,
+                            onCut: H
                         }))
                     })
                 }),
-                t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                    style: ee,
-                    error: d,
-                    forId: N,
-                    inputState: s,
-                    shrinkLabel: g,
-                    optional: !o.required,
-                    children: t
-                }),
                 x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.endIconContainer,
                     children: x
@@ -329,21 +337,21 @@ const De = (d, u)=>{
             ]
         })
     });
-}), qe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), tt = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
-    var { getSuggestions: d, id: u } = _param, t = _object_without_properties(_param, [
+}), Ge = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), at = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+    var { getSuggestions: l, id: u } = _param, t = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [S, l] = _react.useState([]), a = _react.useRef(null), { platformOverrides: h, texts: b, t: L } = (0, _hooks.useTheme)(), y = _react.useId(), f = u || y, x = _react.useId();
-    if (d && (t.value === void 0 || t.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
-    return d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+    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();
+    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,
             autoComplete: "off",
             ref: m,
             id: f
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(qe, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
             id: x,
             inputProps: _object_spread_props(_object_spread({}, t), {
                 id: f,
@@ -365,9 +373,9 @@ const De = (d, u)=>{
             suggestions: S,
             onSuggestionsFetchRequested: (param)=>{
                 let { value: i } = param;
-                return l(d(i));
+                return o(l(i));
             },
-            onSuggestionsClearRequested: ()=>l([]),
+            onSuggestionsClearRequested: ()=>o([]),
             getSuggestionValue: (i)=>i,
             renderSuggestion: (i, param)=>{
                 let { isHighlighted: g } = param;
@@ -387,7 +395,7 @@ const De = (d, u)=>{
                         width: a.current ? a.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${t.label} ${b.menuLabelSuffix || L(_texttokens.menuLabelSuffix)}`,
+                    "aria-label": `${t.label} ${b.menuLabelSuffix || v(_texttokens.menuLabelSuffix)}`,
                     children: i.children
                 }))
         })

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

@@ -19,39 +19,39 @@ _export(exports, {
         return e;
     },
     disabled: function() {
-        return k;
+        return y;
     },
     field: function() {
-        return i;
+        return k;
     },
     fieldContainer: function() {
-        return y;
+        return i;
     },
     fullWidth: function() {
-        return t;
+        return l;
     },
     helperContainer: function() {
-        return l;
+        return h;
     },
     helperText: function() {
-        return h;
+        return t;
     },
     labelContainer: function() {
-        return u;
+        return o;
     },
     labelText: function() {
-        return o;
+        return p;
     },
-    leftText: function() {
-        return d;
+    leftHelperText: function() {
+        return u;
     },
     normalWidth: function() {
-        return p;
-    },
-    rightText: function() {
         return L;
     },
     shrinked: function() {
+        return d;
+    },
+    warnIcon: function() {
         return E;
     }
 });
@@ -59,4 +59,4 @@ 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, k = "_15k6ur97", i = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", y = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", t = "_1y2v1nfi7", l = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", h = "_15k6ur9d", u = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", o = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", d = "_15k6ur9e", p = "_15k6ur99 _1y2v1nfi7", L = "_15k6ur9f", E = "_15k6ur94";
+var a = 328, f = 0.78, e = 0.75, y = "_15k6ur97", k = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", l = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", t = "_1y2v1nfi5 _1y2v1nf7j", o = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", p = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", u = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", d = "_15k6ur94", E = "_15k6ur9g";

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

@@ -10,6 +10,6 @@ export declare const normalWidth: string;
 export declare const fullWidth: string;
 export declare const field: string;
 export declare const helperContainer: string;
+export declare const leftHelperText: string;
 export declare const helperText: string;
-export declare const leftText: string;
-export declare const rightText: string;
+export declare const warnIcon: string;