@telefonica/mistica 16.55.0 → 16.56.1-beta.1

package/dist/tabs.css-mistica.js

@@ -10,53 +10,53 @@ function _export(target, all) {
 }
 _export(exports, {
     get animatedLine () {
-        return r;
+        return g;
     },
     get icon () {
-        return t;
+        return m;
     },
     get inner () {
-        return l;
+        return f;
     },
     get outer () {
-        return o;
+        return t;
     },
     get outerBorder () {
-        return n;
+        return a;
     },
     get tabHover () {
-        return g;
+        return o;
     },
     get tabSelectionVariants () {
-        return a;
+        return l;
     },
     get tabVariants () {
-        return m;
+        return n;
     },
     get tabsContainer () {
-        return e;
+        return b;
     },
     get vars () {
-        return f;
+        return v;
     }
 });
-/* empty css                                     */ /* empty css                                */ var f = {
-    borderColor: "var(--v16_55_lgofm10)"
-}, n = "v16_55_lgofm11", o = "v16_55_lgofm13 v16_55_lgofm12 v16_55_1y2v1nfsf v16_55_1y2v1nfqr v16_55_1y2v1nfpy", l = "v16_55_lgofm14", e = "v16_55_lgofm15 v16_55_1y2v1nfsf v16_55_1y2v1nfqr v16_55_1y2v1nfq4", m = {
-    default: "v16_55_lgofm18 v16_55_lgofm17 v16_55_lgofm16 v16_55_1y2v1nfiu v16_55_1y2v1nfk3 v16_55_1y2v1nfq5 v16_55_1y2v1nfqm v16_55_1y2v1nfqj v16_55_1y2v1nfqd v16_55_1y2v1nfs3 v16_55_1y2v1nfsf v16_55_1y2v1nffw",
-    fullWidth: "v16_55_lgofm19 v16_55_lgofm17 v16_55_lgofm16 v16_55_1y2v1nfiu v16_55_1y2v1nfk3 v16_55_1y2v1nfq5 v16_55_1y2v1nfqm v16_55_1y2v1nfqj v16_55_1y2v1nfqd v16_55_1y2v1nfs3 v16_55_1y2v1nfsf v16_55_1y2v1nffw"
-}, g = {
-    default: "v16_55_lgofm1d v16_55_lgofm1a",
-    brand: "v16_55_lgofm1e v16_55_lgofm1b",
-    negative: "v16_55_lgofm1f v16_55_lgofm1c"
-}, a = {
-    noSelected: "v16_55_lgofm1p v16_55_lgofm1g v16_55_1y2v1nf52",
-    noSelectedBrand: "v16_55_lgofm1q v16_55_lgofm1h v16_55_1y2v1nf55",
-    noSelectedNegative: "v16_55_lgofm1r v16_55_lgofm1i v16_55_1y2v1nf54",
-    selected: "v16_55_lgofm1s v16_55_lgofm1j",
-    selectedBrand: "v16_55_lgofm1t v16_55_lgofm1k",
-    selectedNegative: "v16_55_lgofm1u v16_55_lgofm1l",
-    selectedAnimating: "v16_55_lgofm1v v16_55_lgofm1m",
-    selectedAnimatingBrand: "v16_55_lgofm1w v16_55_lgofm1n",
-    selectedAnimatingNegative: "v16_55_lgofm1x v16_55_lgofm1o"
-}, t = "v16_55_lgofm1y", r = "v16_55_lgofm1z v16_55_1y2v1nfq3 v16_55_1y2v1nfpz v16_55_1y2v1nftt v16_55_1y2v1nfun v16_55_1y2v1nfra";
+/* empty css                                     */ /* empty css                                */ var v = {
+    borderColor: "var(--v16_56_1-beta_1_lgofm10)"
+}, a = "v16_56_1-beta_1_lgofm11", t = "v16_56_1-beta_1_lgofm13 v16_56_1-beta_1_lgofm12 v16_56_1-beta_1_1y2v1nfsf v16_56_1-beta_1_1y2v1nfqr v16_56_1-beta_1_1y2v1nfpy", f = "v16_56_1-beta_1_lgofm14", b = "v16_56_1-beta_1_lgofm15 v16_56_1-beta_1_1y2v1nfsf v16_56_1-beta_1_1y2v1nfqr v16_56_1-beta_1_1y2v1nfq4", n = {
+    default: "v16_56_1-beta_1_lgofm18 v16_56_1-beta_1_lgofm17 v16_56_1-beta_1_lgofm16 v16_56_1-beta_1_1y2v1nfiu v16_56_1-beta_1_1y2v1nfk3 v16_56_1-beta_1_1y2v1nfq5 v16_56_1-beta_1_1y2v1nfqm v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_1y2v1nfqd v16_56_1-beta_1_1y2v1nfs3 v16_56_1-beta_1_1y2v1nfsf v16_56_1-beta_1_1y2v1nffw",
+    fullWidth: "v16_56_1-beta_1_lgofm19 v16_56_1-beta_1_lgofm17 v16_56_1-beta_1_lgofm16 v16_56_1-beta_1_1y2v1nfiu v16_56_1-beta_1_1y2v1nfk3 v16_56_1-beta_1_1y2v1nfq5 v16_56_1-beta_1_1y2v1nfqm v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_1y2v1nfqd v16_56_1-beta_1_1y2v1nfs3 v16_56_1-beta_1_1y2v1nfsf v16_56_1-beta_1_1y2v1nffw"
+}, o = {
+    default: "v16_56_1-beta_1_lgofm1d v16_56_1-beta_1_lgofm1a",
+    brand: "v16_56_1-beta_1_lgofm1e v16_56_1-beta_1_lgofm1b",
+    negative: "v16_56_1-beta_1_lgofm1f v16_56_1-beta_1_lgofm1c"
+}, l = {
+    noSelected: "v16_56_1-beta_1_lgofm1p v16_56_1-beta_1_lgofm1g v16_56_1-beta_1_1y2v1nf52",
+    noSelectedBrand: "v16_56_1-beta_1_lgofm1q v16_56_1-beta_1_lgofm1h v16_56_1-beta_1_1y2v1nf55",
+    noSelectedNegative: "v16_56_1-beta_1_lgofm1r v16_56_1-beta_1_lgofm1i v16_56_1-beta_1_1y2v1nf54",
+    selected: "v16_56_1-beta_1_lgofm1s v16_56_1-beta_1_lgofm1j",
+    selectedBrand: "v16_56_1-beta_1_lgofm1t v16_56_1-beta_1_lgofm1k",
+    selectedNegative: "v16_56_1-beta_1_lgofm1u v16_56_1-beta_1_lgofm1l",
+    selectedAnimating: "v16_56_1-beta_1_lgofm1v v16_56_1-beta_1_lgofm1m",
+    selectedAnimatingBrand: "v16_56_1-beta_1_lgofm1w v16_56_1-beta_1_lgofm1n",
+    selectedAnimatingNegative: "v16_56_1-beta_1_lgofm1x v16_56_1-beta_1_lgofm1o"
+}, m = "v16_56_1-beta_1_lgofm1y", g = "v16_56_1-beta_1_lgofm1z v16_56_1-beta_1_1y2v1nfq3 v16_56_1-beta_1_1y2v1nfpz v16_56_1-beta_1_1y2v1nftt v16_56_1-beta_1_1y2v1nfun v16_56_1-beta_1_1y2v1nfra";

package/dist/tag.css-mistica.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     get badge () {
-        return q;
+        return b;
     },
     get icon () {
-        return f;
+        return e;
     },
     get smallTag () {
-        return n;
+        return t;
     },
     get tag () {
-        return y;
+        return a;
     }
 });
-/* empty css                                     */ /* empty css                               */ var y = "v16_55_1wy08673 v16_55_1wy08671 v16_55_1wy08670 v16_55_1y2v1nfq5 v16_55_1y2v1nfq9 v16_55_1y2v1nfqj v16_55_1y2v1nfqd v16_55_1wy08672 v16_55_1y2v1nfs0", n = "v16_55_1wy08675 v16_55_1wy08671 v16_55_1wy08670 v16_55_1y2v1nfq5 v16_55_1y2v1nfq9 v16_55_1y2v1nfqj v16_55_1y2v1nfqd v16_55_1wy08674 v16_55_1y2v1nfg0 v16_55_1y2v1nfh9 v16_55_1y2v1nfry", f = "v16_55_1wy08676 v16_55_1y2v1nfq6", q = "v16_55_1wy08677 v16_55_1y2v1nfq5 v16_55_1y2v1nfil";
+/* empty css                                     */ /* empty css                               */ var a = "v16_56_1-beta_1_1wy08673 v16_56_1-beta_1_1wy08671 v16_56_1-beta_1_1wy08670 v16_56_1-beta_1_1y2v1nfq5 v16_56_1-beta_1_1y2v1nfq9 v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_1y2v1nfqd v16_56_1-beta_1_1wy08672 v16_56_1-beta_1_1y2v1nfs0", t = "v16_56_1-beta_1_1wy08675 v16_56_1-beta_1_1wy08671 v16_56_1-beta_1_1wy08670 v16_56_1-beta_1_1y2v1nfq5 v16_56_1-beta_1_1y2v1nfq9 v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_1y2v1nfqd v16_56_1-beta_1_1wy08674 v16_56_1-beta_1_1y2v1nfg0 v16_56_1-beta_1_1y2v1nfh9 v16_56_1-beta_1_1y2v1nfry", e = "v16_56_1-beta_1_1wy08676 v16_56_1-beta_1_1y2v1nfq6", b = "v16_56_1-beta_1_1wy08677 v16_56_1-beta_1_1y2v1nfq5 v16_56_1-beta_1_1y2v1nfil";

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

@@ -10,46 +10,46 @@ function _export(target, all) {
 }
 _export(exports, {
     get emptyDateValue () {
-        return o;
+        return f;
     },
     get endIconContainer () {
         return L;
     },
     get fieldElementsGap () {
-        return y;
+        return r;
     },
     get fieldEndIconGap () {
-        return h;
+        return b;
     },
     get fieldLeftPadding () {
-        return r;
+        return a;
     },
     get fieldRightPadding () {
-        return t;
+        return v;
     },
     get fieldVars () {
-        return n;
+        return h;
     },
     get fullWidth () {
-        return i;
+        return n;
     },
     get hiddenDatePlaceholder () {
-        return f;
+        return l;
     },
     get iconButtonSize () {
-        return a;
+        return y;
     },
     get input () {
-        return p;
+        return o;
     },
     get inputFirefoxStyles () {
-        return d;
+        return p;
     },
     get inputWithLabel () {
-        return s;
+        return d;
     },
     get inputWithoutLabel () {
-        return b;
+        return s;
     },
     get menuItem () {
         return g;
@@ -70,7 +70,7 @@ _export(exports, {
         return S;
     },
     get textArea () {
-        return l;
+        return i;
     },
     get textAreaWithLabel () {
         return m;
@@ -79,19 +79,19 @@ _export(exports, {
         return x;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ var r = 11, t = 15, y = 12, h = 4, a = "calc(1.5rem + 24px)", n = {
-    mobileFontSize: "var(--v16_55_rhey4t0)",
-    desktopFontSize: "var(--v16_55_rhey4t1)",
-    mobileLineHeight: "var(--v16_55_rhey4t2)",
-    desktopLineHeight: "var(--v16_55_rhey4t3)",
-    shrinkedLabelMobileFontSize: "var(--v16_55_rhey4t4)",
-    shrinkedLabelDesktopFontSize: "var(--v16_55_rhey4t5)",
-    shrinkedLabelMobileLineHeight: "var(--v16_55_rhey4t6)",
-    shrinkedLabelDesktopLineHeight: "var(--v16_55_rhey4t7)",
-    helperTextMobileFontSize: "var(--v16_55_rhey4t8)",
-    helperTextDesktopFontSize: "var(--v16_55_rhey4t9)",
-    helperTextMobileLineHeight: "var(--v16_55_rhey4ta)",
-    helperTextDesktopLineHeight: "var(--v16_55_rhey4tb)",
-    labelScaleDesktop: "var(--v16_55_rhey4tc)",
-    labelScaleMobile: "var(--v16_55_rhey4td)"
-}, i = "v16_55_rhey4ti", l = "v16_55_rhey4tk v16_55_rhey4tj v16_55_1y2v1nffx v16_55_1y2v1nfh6 v16_55_rhey4tf v16_55_rhey4te v16_55_1y2v1nfsm v16_55_1y2v1nfrp v16_55_1y2v1nf4x v16_55_1y2v1nfqr", f = "v16_55_rhey4tl", o = "v16_55_rhey4tm", p = "v16_55_rhey4to v16_55_rhey4tn v16_55_1y2v1nfpy v16_55_rhey4tf v16_55_rhey4te v16_55_1y2v1nfsm v16_55_1y2v1nfrp v16_55_1y2v1nf4x v16_55_1y2v1nfqr", d = "v16_55_rhey4tp", s = "v16_55_rhey4tq", b = "v16_55_rhey4tr", m = "v16_55_rhey4ts", x = "v16_55_rhey4tt", L = "v16_55_rhey4tv v16_55_rhey4tu v16_55_1y2v1nfil v16_55_1y2v1nfq4 v16_55_1y2v1nfqj", k = "v16_55_rhey4tx v16_55_rhey4tw v16_55_1y2v1nfk0 v16_55_1y2v1nfq4 v16_55_1y2v1nfqj v16_55_1y2v1nfr8 v16_55_1y2v1nfpz", u = "v16_55_rhey4tz v16_55_rhey4ty v16_55_1y2v1nfk0", c = "v16_55_rhey4t11 v16_55_rhey4t10 v16_55_1y2v1nfq4 v16_55_1y2v1nfqj", g = "v16_55_rhey4t13 v16_55_rhey4t11 v16_55_rhey4t10 v16_55_1y2v1nfq4 v16_55_1y2v1nfqj v16_55_rhey4t12 v16_55_1y2v1nft7", q = "v16_55_rhey4t14", S = "v16_55_rhey4t16 v16_55_rhey4t15 v16_55_1y2v1nfpz";
+/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ var a = 11, v = 15, r = 12, b = 4, y = "calc(1.5rem + 24px)", h = {
+    mobileFontSize: "var(--v16_56_1-beta_1_rhey4t0)",
+    desktopFontSize: "var(--v16_56_1-beta_1_rhey4t1)",
+    mobileLineHeight: "var(--v16_56_1-beta_1_rhey4t2)",
+    desktopLineHeight: "var(--v16_56_1-beta_1_rhey4t3)",
+    shrinkedLabelMobileFontSize: "var(--v16_56_1-beta_1_rhey4t4)",
+    shrinkedLabelDesktopFontSize: "var(--v16_56_1-beta_1_rhey4t5)",
+    shrinkedLabelMobileLineHeight: "var(--v16_56_1-beta_1_rhey4t6)",
+    shrinkedLabelDesktopLineHeight: "var(--v16_56_1-beta_1_rhey4t7)",
+    helperTextMobileFontSize: "var(--v16_56_1-beta_1_rhey4t8)",
+    helperTextDesktopFontSize: "var(--v16_56_1-beta_1_rhey4t9)",
+    helperTextMobileLineHeight: "var(--v16_56_1-beta_1_rhey4ta)",
+    helperTextDesktopLineHeight: "var(--v16_56_1-beta_1_rhey4tb)",
+    labelScaleDesktop: "var(--v16_56_1-beta_1_rhey4tc)",
+    labelScaleMobile: "var(--v16_56_1-beta_1_rhey4td)"
+}, n = "v16_56_1-beta_1_rhey4ti", i = "v16_56_1-beta_1_rhey4tk v16_56_1-beta_1_rhey4tj v16_56_1-beta_1_1y2v1nffx v16_56_1-beta_1_1y2v1nfh6 v16_56_1-beta_1_rhey4tf v16_56_1-beta_1_rhey4te v16_56_1-beta_1_1y2v1nfsm v16_56_1-beta_1_1y2v1nfrp v16_56_1-beta_1_1y2v1nf4x v16_56_1-beta_1_1y2v1nfqr", l = "v16_56_1-beta_1_rhey4tl", f = "v16_56_1-beta_1_rhey4tm", o = "v16_56_1-beta_1_rhey4to v16_56_1-beta_1_rhey4tn v16_56_1-beta_1_1y2v1nfpy v16_56_1-beta_1_rhey4tf v16_56_1-beta_1_rhey4te v16_56_1-beta_1_1y2v1nfsm v16_56_1-beta_1_1y2v1nfrp v16_56_1-beta_1_1y2v1nf4x v16_56_1-beta_1_1y2v1nfqr", p = "v16_56_1-beta_1_rhey4tp", d = "v16_56_1-beta_1_rhey4tq", s = "v16_56_1-beta_1_rhey4tr", m = "v16_56_1-beta_1_rhey4ts", x = "v16_56_1-beta_1_rhey4tt", L = "v16_56_1-beta_1_rhey4tv v16_56_1-beta_1_rhey4tu v16_56_1-beta_1_1y2v1nfil v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfqj", k = "v16_56_1-beta_1_rhey4tx v16_56_1-beta_1_rhey4tw v16_56_1-beta_1_1y2v1nfk0 v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_1y2v1nfr8 v16_56_1-beta_1_1y2v1nfpz", u = "v16_56_1-beta_1_rhey4tz v16_56_1-beta_1_rhey4ty v16_56_1-beta_1_1y2v1nfk0", c = "v16_56_1-beta_1_rhey4t11 v16_56_1-beta_1_rhey4t10 v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfqj", g = "v16_56_1-beta_1_rhey4t13 v16_56_1-beta_1_rhey4t11 v16_56_1-beta_1_rhey4t10 v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfqj v16_56_1-beta_1_rhey4t12 v16_56_1-beta_1_1y2v1nft7", q = "v16_56_1-beta_1_rhey4t14", S = "v16_56_1-beta_1_rhey4t16 v16_56_1-beta_1_rhey4t15 v16_56_1-beta_1_1y2v1nfpz";

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

@@ -5,6 +5,7 @@ export declare const fieldRightPadding: number;
 export declare const fieldElementsGap = 12;
 export declare const fieldEndIconGap = 4;
 export declare const iconButtonSize: string;
+export declare const suggestionsContainerPadding = 8;
 export declare const fieldVars: {
     mobileFontSize: `var(--${string})`;
     desktopFontSize: `var(--${string})`;

package/dist/text-field-base.js

@@ -159,20 +159,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Je = (i, g)=>{
-    if (!g) return !0;
-    const r = document.createElement("input");
-    return r.type = g, r.value = i || "", r.value !== "";
+const Je = (i, h)=>{
+    if (!h) return !0;
+    const o = document.createElement("input");
+    return o.type = h, o.value = i || "", o.value !== "";
 }, ut = (param)=>{
-    let { hasBackgroundColor: i = !0, onPress: g, onChange: r, disabled: x, Icon: n, checkedProps: u, uncheckedProps: o, "aria-label": b } = param;
+    let { hasBackgroundColor: i = !0, onPress: h, onChange: o, disabled: x, Icon: n, checkedProps: u, uncheckedProps: r, "aria-label": b } = param;
     return u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, {
         checkedProps: _object_spread_props(_object_spread({}, u), {
             "aria-label": u["aria-label"] || ""
         }),
-        uncheckedProps: _object_spread_props(_object_spread({}, o), {
-            "aria-label": o["aria-label"] || ""
+        uncheckedProps: _object_spread_props(_object_spread({}, r), {
+            "aria-label": r["aria-label"] || ""
         }),
-        onChange: r,
+        onChange: o,
         hasOverlay: i,
         disabled: x,
         small: !0,
@@ -181,7 +181,7 @@ const Je = (i, g)=>{
         Icon: n,
         disabled: x,
         "aria-label": b || "",
-        onPress: g,
+        onPress: h,
         hasOverlay: i,
         small: !0,
         bleedRight: !0
@@ -189,7 +189,7 @@ const Je = (i, g)=>{
 }, X = (i)=>{
     i.preventDefault();
 }, V = /*#__PURE__*/ _react.forwardRef((_param, te)=>{
-    var { error: i, helperText: g, label: r, inputProps: x, inputRef: n, defaultValue: u, value: o, onFocus: b, onBlur: N, inputComponent: C, prefix: R, startIcon: h, endIcon: y, endIconOverlay: I, shrinkLabel: v, multiline: S = !1, focus: p, fieldRef: P, maxLength: c, id: e, autoComplete: s, fullWidth: T, dataAttributes: W, preventCopy: w, showOptionalLabel: ee = !0, required: B } = _param, d = _object_without_properties(_param, [
+    var { error: i, helperText: h, label: o, inputProps: x, inputRef: n, defaultValue: u, value: r, onFocus: b, onBlur: N, inputComponent: C, prefix: R, startIcon: p, endIcon: y, endIconOverlay: I, shrinkLabel: v, multiline: S = !1, focus: c, fieldRef: P, maxLength: f, id: e, autoComplete: s, fullWidth: T, dataAttributes: W, preventCopy: w, showOptionalLabel: ee = !0, required: B } = _param, d = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -220,63 +220,64 @@ const Je = (i, g)=>{
     const { preventCopyInFormFields: le, texts: ae, t: ie } = (0, _hooks.useTheme)();
     w = w !== null && w !== void 0 ? w : le;
     var _u_length;
-    const ne = _react.useId(), k = e || ne, z = _react.useId(), H = _react.useId(), [f, m] = _react.useState((u === null || u === void 0 ? void 0 : u.length) || (o === null || o === void 0 ? void 0 : o.length) ? "filled" : "default"), { isTabletOrSmaller: oe } = (0, _hooks.useScreenSize)(), [D, G] = _react.useState((_u_length = u === null || u === void 0 ? void 0 : u.length) !== null && _u_length !== void 0 ? _u_length : 0), L = !!r || !B, F = d.type === "date" || d.type === "datetime-local" || d.type === "time" || d.type === "month", j = _react.useRef(void 0);
+    const ne = _react.useId(), k = e || ne, z = _react.useId(), H = _react.useId(), [m, g] = _react.useState((u === null || u === void 0 ? void 0 : u.length) || (r === null || r === void 0 ? void 0 : r.length) ? "filled" : "default"), { isTabletOrSmaller: re } = (0, _hooks.useScreenSize)(), [D, G] = _react.useState((_u_length = u === null || u === void 0 ? void 0 : u.length) !== null && _u_length !== void 0 ? _u_length : 0), L = !!o || !B, F = d.type === "date" || d.type === "datetime-local" || d.type === "time" || d.type === "month", j = _react.useRef(void 0);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        const l = F && !Je(o, d.type) ? "" : o, fe = o !== void 0;
+        const l = F && !Je(r, d.type) ? "" : r, fe = r !== void 0;
         var _l_length;
-        j.current !== o && F && !(l === null || l === void 0 ? void 0 : l.length) && f === "filled" && p === void 0 && m("default"), j.current = o, f !== "focused" && fe && (G((_l_length = l === null || l === void 0 ? void 0 : l.length) !== null && _l_length !== void 0 ? _l_length : 0), m((l === null || l === void 0 ? void 0 : l.length) ? "filled" : "default")), p && m("focused"), p === !1 && !(l === null || l === void 0 ? void 0 : l.length) && m("default"), p === !1 && (l === null || l === void 0 ? void 0 : l.length) && m("filled");
+        j.current !== r && F && !(l === null || l === void 0 ? void 0 : l.length) && m === "filled" && c === void 0 && g("default"), j.current = r, m !== "focused" && fe && (G((_l_length = l === null || l === void 0 ? void 0 : l.length) !== null && _l_length !== void 0 ? _l_length : 0), g((l === null || l === void 0 ? void 0 : l.length) ? "filled" : "default")), c && g("focused"), c === !1 && !(l === null || l === void 0 ? void 0 : l.length) && g("default"), c === !1 && (l === null || l === void 0 ? void 0 : l.length) && g("filled");
     }, [
-        f,
-        o,
-        p,
+        m,
+        r,
+        c,
         F,
         d.type
     ]), _react.useEffect(()=>{
-        d.autoFocus && m("focused");
+        d.autoFocus && g("focused");
     }, [
         d.autoFocus
     ]);
-    const re = S ? "textarea" : "input", se = C ? {
+    const oe = S ? "textarea" : "input", se = C ? {
         inputRef: n
     } : {
         ref: (0, _common.combineRefs)(te, n)
     }, M = _object_spread(_object_spread_props(_object_spread({}, d), {
-        maxLength: c,
+        maxLength: f,
         autoComplete: s
-    }), x), O = `calc(${_iconbuttoncssmistica.iconSize.small} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, K = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, de = v || f === "focused" || f === "filled" ? oe ? _textfieldbasecssmistica.fieldVars.labelScaleMobile : _textfieldbasecssmistica.fieldVars.labelScaleDesktop : 1, ue = {
-        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${h ? O : "0px"})`,
+    }), x), O = `calc(${_iconbuttoncssmistica.iconSize.small} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, K = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, de = v || m === "focused" || m === "filled" ? re ? _textfieldbasecssmistica.fieldVars.labelScaleMobile : _textfieldbasecssmistica.fieldVars.labelScaleDesktop : 1, ue = {
+        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${p ? O : "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 - ${h ? O : "0px"} - ${y || I ? K : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${de})`
+        width: `calc((100% - ${_textfieldbasecssmistica.fieldLeftPadding}px - ${p ? O : "0px"} - ${y || I ? K : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${de})`
     }, ce = d.type === "password" && D > 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: i,
-            leftText: g,
+            leftText: h,
             leftTextId: z,
             rightTextId: H,
-            rightText: S && c ? `${D}/${c}` : void 0,
-            rightTextLabel: S && c ? ie(ae.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, c) : void 0
+            rightText: S && f ? `${D}/${f}` : void 0,
+            rightTextLabel: S && f ? ie(ae.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, f) : void 0
         }),
         multiline: S,
         fullWidth: T,
         fieldRef: P,
         readOnly: d.readOnly,
         dataAttributes: W,
+        focus: c,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: [
-                h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.startIcon,
                     "data-testid": "startIcon",
-                    children: h
+                    children: p
                 }),
                 R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     "aria-hidden": !0,
                     className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, L ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     style: {
-                        opacity: f === "default" ? 0 : 1
+                        opacity: m === "default" ? 0 : 1
                     },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -285,21 +286,21 @@ const Je = (i, g)=>{
                         children: R
                     })
                 }),
-                r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
                     style: ue,
                     error: i,
                     forId: k,
-                    inputState: f,
+                    inputState: m,
                     shrinkLabel: v,
                     showOptional: !B && ee,
-                    children: r
+                    children: o
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.fullWidth,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         as: "div",
                         regular: !0,
-                        children: /*#__PURE__*/ _react.createElement(C || re, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, se, M), {
+                        children: /*#__PURE__*/ _react.createElement(C || oe, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, se, M), {
                             id: k
                         }), B && {
                             "aria-required": !0
@@ -308,32 +309,32 @@ const Je = (i, g)=>{
                         }), {
                             style: _object_spread_props(_object_spread({
                                 paddingRight: y ? 0 : I ? K : _textfieldbasecssmistica.fieldRightPadding,
-                                paddingLeft: R ? 0 : h ? `calc(${O} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
+                                paddingLeft: R ? 0 : p ? `calc(${O} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
                             }, M.style), {
                                 fontFamily: ce
                             }),
                             className: S ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, L ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, L ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
                                 [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)(),
                                 // Hide webkit placeholder when label is not shrinked and value is empty
-                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: F && f === "default",
+                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: F && m === "default",
                                 // Force height of input when value is empty to avoid field from having height 0 in iOS
-                                [_textfieldbasecssmistica.emptyDateValue]: F && f !== "filled"
+                                [_textfieldbasecssmistica.emptyDateValue]: F && m !== "filled"
                             }),
                             onFocus: (l)=>{
-                                m("focused"), b === null || b === void 0 ? void 0 : b(l);
+                                g("focused"), b === null || b === void 0 ? void 0 : b(l);
                             },
                             onBlur: (l)=>{
-                                l.target.value.length > 0 ? m("filled") : m("default"), N === null || N === void 0 ? void 0 : N(l);
+                                l.target.value.length > 0 ? g("filled") : g("default"), N === null || N === void 0 ? void 0 : N(l);
                             },
                             onChange: (l)=>{
                                 var _M_onChange;
-                                c === void 0 || l.target.value.length <= c ? (G(l.target.value.length), l.target.value.length > 0 && f !== "focused" && m(l.target.value.length > 0 ? "filled" : "default"), (_M_onChange = M.onChange) === null || _M_onChange === void 0 ? void 0 : _M_onChange.call(M, l)) : (l.stopPropagation(), l.preventDefault());
+                                f === void 0 || l.target.value.length <= f ? (G(l.target.value.length), l.target.value.length > 0 && m !== "focused" && g(l.target.value.length > 0 ? "filled" : "default"), (_M_onChange = M.onChange) === null || _M_onChange === void 0 ? void 0 : _M_onChange.call(M, l)) : (l.stopPropagation(), l.preventDefault());
                             },
                             defaultValue: u,
-                            value: o
+                            value: r
                         }), i && {
                             "aria-invalid": !0
-                        }, (g || S && c) && {
+                        }, (h || S && f) && {
                             "aria-describedby": `${z} ${H}`
                         }, w && {
                             onCopy: X,
@@ -351,25 +352,25 @@ const Je = (i, g)=>{
         })
     });
 }), Qe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), ct = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { getSuggestions: i, id: g, shouldShowSuggestions: r = "focus", withSuggestionsEmptyCase: x = !1 } = _param, n = _object_without_properties(_param, [
+    var { getSuggestions: i, id: h, shouldShowSuggestions: o = "focus", withSuggestionsEmptyCase: x = !1 } = _param, n = _object_without_properties(_param, [
         "getSuggestions",
         "id",
         "shouldShowSuggestions",
         "withSuggestionsEmptyCase"
     ]);
-    const [o, b] = _react.useState([]), [N, C] = _react.useState(!1), R = _react.useRef(null), h = _react.useRef(null), { platformOverrides: y, texts: I, t: v } = (0, _hooks.useTheme)(), S = _react.useId(), p = g || S, P = _react.useId(), c = typeof x == "string" ? x : I.searchFieldSuggestionsEmptyCase || v(_texttokens.searchFieldSuggestionsEmptyCase);
+    const [r, b] = _react.useState([]), [N, C] = _react.useState(!1), R = _react.useRef(null), p = _react.useRef(null), { platformOverrides: y, texts: I, t: v } = (0, _hooks.useTheme)(), S = _react.useId(), c = h || S, P = _react.useId(), f = typeof x == "string" ? x : I.searchFieldSuggestionsEmptyCase || v(_texttokens.searchFieldSuggestionsEmptyCase);
     if (i && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, n), {
             label: (0, _platform.isRunningAcceptanceTest)(y) ? "" : n.label,
             autoComplete: "off",
             ref: u,
-            id: p
+            id: c
         })),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Qe, {
             id: P,
             inputProps: _object_spread_props(_object_spread({}, n), {
-                id: p,
+                id: c,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
@@ -389,12 +390,12 @@ const Je = (i, g)=>{
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
                     role: "combobox"
                 }, T), {
-                    fieldRef: h,
+                    fieldRef: p,
                     inputRef: (0, _common.combineRefs)(R, n.inputRef, u)
                 }), s);
             },
-            suggestions: o,
-            shouldRenderSuggestions: (e)=>r === "focus" || e.trim().length >= r,
+            suggestions: r,
+            shouldRenderSuggestions: (e)=>o === "focus" || e.trim().length >= o,
             onSuggestionsFetchRequested: (param)=>{
                 let { value: e } = param;
                 const s = i(e);
@@ -421,19 +422,19 @@ const Je = (i, g)=>{
                 if (!N) return null;
                 const _e_containerProps = e.containerProps, { key: s } = _e_containerProps, T = _object_without_properties(_e_containerProps, [
                     "key"
-                ]), W = o.length === 0 && x ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ]), W = r.length === 0 && x ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "status",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItemBase),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                        children: c
+                        children: f
                     })
                 }) : e.children;
                 return W ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, T), {
                     key: s,
                     style: {
-                        width: h.current ? h.current.clientWidth + 2 : 0
+                        width: p.current ? p.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
                     "aria-label": `${n.label} ${I.menuLabelSuffix || v(_texttokens.menuLabelSuffix)}`
@@ -441,7 +442,7 @@ const Je = (i, g)=>{
             }
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, n), {
-        id: p,
+        id: c,
         ref: u
     }));
 });

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

@@ -10,55 +10,58 @@ function _export(target, all) {
 }
 _export(exports, {
     get DEFAULT_WIDTH () {
-        return u;
+        return t;
     },
     get background () {
-        return m;
+        return s;
     },
     get disabled () {
-        return y;
+        return f;
     },
     get field () {
-        return d;
+        return o;
     },
     get fieldContainer () {
-        return e;
+        return u;
     },
     get fieldFocusRing () {
-        return t;
+        return l;
+    },
+    get focused () {
+        return i;
     },
     get fullWidth () {
-        return l;
+        return y;
     },
     get helperContainer () {
-        return o;
+        return d;
     },
     get helperText () {
-        return h;
+        return c;
     },
     get labelContainer () {
-        return a;
+        return r;
     },
     get labelText () {
-        return f;
+        return b;
     },
     get leftHelperText () {
         return p;
     },
     get normalWidth () {
-        return i;
+        return k;
     },
     get rightHelperText () {
         return q;
     },
     get shrinked () {
-        return k;
+        return n;
     },
     get warnIcon () {
-        return b;
+        return h;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ /* empty css                                                 */ var u = 328, a = "v16_55_15k6ur91 v16_55_15k6ur90 v16_55_1y2v1nfpz v16_55_1y2v1nfq4 v16_55_1y2v1nfq9", f = "v16_55_15k6ur93 v16_55_15k6ur92 v16_55_1y2v1nft8 v16_55_1y2v1nfqn", k = "v16_55_15k6ur94", e = "v16_55_15k6ur96 v16_55_15k6ur95 v16_55_1y2v1nfq4 v16_55_1y2v1nfqa", y = "v16_55_15k6ur97", i = "v16_55_15k6ur99 v16_55_15k6ur98 v16_55_1y2v1nfqr", l = "v16_55_15k6ur9a v16_55_1y2v1nfqr", t = "v16_55_15k6ur9b", d = "v16_55_15k6ur9d v16_55_15k6ur9c v16_55_1y2v1nfsn v16_55_1y2v1nfq4 v16_55_1y2v1nfsv v16_55_1y2v1nfpy v16_55_15k6ur9b", o = "v16_55_15k6ur9e v16_55_1y2v1nfir v16_55_1y2v1nfk3 v16_55_1y2v1nfq4", p = "v16_55_15k6ur9g v16_55_15k6ur9f v16_55_1y2v1nfq4", q = "v16_55_15k6ur9h v16_55_1y2v1nfiu", h = "v16_55_15k6ur9i v16_55_1y2v1nfqp v16_55_1y2v1nfg3", b = "v16_55_15k6ur9j", m = {
-    default: "v16_55_15k6ur9m v16_55_15k6ur9k v16_55_1y2v1nf83",
-    readOnly: "v16_55_15k6ur9n v16_55_15k6ur9l v16_55_1y2v1nfcs"
+/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ /* empty css                                                 */ var t = 328, r = "v16_56_1-beta_1_15k6ur91 v16_56_1-beta_1_15k6ur90 v16_56_1-beta_1_1y2v1nfpz v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfq9", b = "v16_56_1-beta_1_15k6ur93 v16_56_1-beta_1_15k6ur92 v16_56_1-beta_1_1y2v1nft8 v16_56_1-beta_1_1y2v1nfqn", n = "v16_56_1-beta_1_15k6ur94", u = "v16_56_1-beta_1_15k6ur96 v16_56_1-beta_1_15k6ur95 v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfqa", f = "v16_56_1-beta_1_15k6ur97", k = "v16_56_1-beta_1_15k6ur99 v16_56_1-beta_1_15k6ur98 v16_56_1-beta_1_1y2v1nfqr", y = "v16_56_1-beta_1_15k6ur9a v16_56_1-beta_1_1y2v1nfqr", i = "v16_56_1-beta_1_15k6ur9b", l = "v16_56_1-beta_1_15k6ur9c", o = "v16_56_1-beta_1_15k6ur9e v16_56_1-beta_1_15k6ur9d v16_56_1-beta_1_1y2v1nfsn v16_56_1-beta_1_1y2v1nfq4 v16_56_1-beta_1_1y2v1nfsv v16_56_1-beta_1_1y2v1nfpy v16_56_1-beta_1_15k6ur9c", d = "v16_56_1-beta_1_15k6ur9f v16_56_1-beta_1_1y2v1nfir v16_56_1-beta_1_1y2v1nfk3 v16_56_1-beta_1_1y2v1nfq4", p = "v16_56_1-beta_1_15k6ur9h v16_56_1-beta_1_15k6ur9g v16_56_1-beta_1_1y2v1nfq4", q = "v16_56_1-beta_1_15k6ur9i v16_56_1-beta_1_1y2v1nfiu", c = "v16_56_1-beta_1_15k6ur9j v16_56_1-beta_1_1y2v1nfqp v16_56_1-beta_1_1y2v1nfg3", h = "v16_56_1-beta_1_15k6ur9k", s = {
+    default: "v16_56_1-beta_1_15k6ur9n v16_56_1-beta_1_15k6ur9l v16_56_1-beta_1_1y2v1nf83",
+    readOnly: "v16_56_1-beta_1_15k6ur9o v16_56_1-beta_1_15k6ur9m v16_56_1-beta_1_1y2v1nfcs"
 };

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

@@ -7,6 +7,7 @@ export declare const disabled: string;
 export declare const normalWidth: string;
 export declare const fullWidth: string;
 export declare const browserDefaultFocusOutline: string[];
+export declare const focused: string;
 export declare const fieldFocusRing: string;
 export declare const field: string;
 export declare const helperContainer: string;

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

@@ -32,6 +32,7 @@ type FieldContainerProps = {
     fullWidth?: boolean;
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
+    focus?: boolean;
 };
-export declare const FieldContainer: ({ multiline, disabled, children, helperText, className, fieldRef, fullWidth, readOnly, dataAttributes, }: FieldContainerProps) => JSX.Element;
+export declare const FieldContainer: ({ multiline, disabled, children, helperText, className, fieldRef, fullWidth, readOnly, dataAttributes, focus, }: FieldContainerProps) => JSX.Element;
 export {};