@telefonica/mistica 14.14.0 → 14.16.0

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

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tabs.css.ts.vanilla.css-mistica.js";
-var v = "_1y2v1nf63 _1y2v1nf60 _1y2v1nfb0 _1y2v1nfbs _1y2v1nf8t _1y2v1nf45", y = "lgofm1m", _ = "lgofm14 _1y2v1nf60 _1y2v1nfb0 _1y2v1nfbe _1y2v1nf95", o = "lgofm12 _1y2v1nf92 _1y2v1nf5z _1y2v1nfak", a = "lgofm10", t = {
+var v = "_1y2v1nf63 _1y2v1nf60 _1y2v1nfb9 _1y2v1nfc3 _1y2v1nf8y _1y2v1nf45", y = "lgofm1m", _ = "lgofm14 _1y2v1nf60 _1y2v1nfb9 _1y2v1nfbo _1y2v1nf9b", a = "lgofm12 _1y2v1nf98 _1y2v1nf5z _1y2v1nfas", o = "lgofm10", t = {
     noSelected: "_1y2v1nf1y",
     selected: "_1y2v1nf1w lgofm1h",
     selectedAnimating: "_1y2v1nf1w lgofm1i"
 }, e = {
-    default: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm18",
-    tabs2: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm19",
-    tabs3: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm1a"
-}, r = "lgofm1e", l = "_1y2v1nf92 _1y2v1nf64";
-export { v as animatedLine, y as icon, _ as inner, o as outer, a as outerBorder, t as tabSelectionVariants, e as tabVariants, r as tabWithIcon, l as tabsContainer };
+    default: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm18",
+    tabs2: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm19",
+    tabs3: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm1a"
+}, r = "lgofm1e", l = "_1y2v1nf98 _1y2v1nf64";
+export { v as animatedLine, y as icon, _ as inner, a as outer, o as outerBorder, t as tabSelectionVariants, e as tabVariants, r as tabWithIcon, l as tabsContainer };

package/dist-es/tabs.js

@@ -50,18 +50,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import * as c from "react";
-import $ from "classnames";
-import { BaseTouchable as g } from "./touchable.js";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import * as m from "react";
+import S from "classnames";
+import { BaseTouchable as $ } from "./touchable.js";
 import v from "./responsive-layout.js";
-import { useAriaId as R, useElementDimensions as S } from "./hooks.js";
-import { Text3 as x } from "./text.js";
-import { isRunningAcceptanceTest as w } from "./utils/platform.js";
-import { getPrefixedDataAttributes as I } from "./utils/dom.js";
-import { outerBorder as W, outer as B, inner as D, tabsContainer as P, tabVariants as V, tabSelectionVariants as m, tabWithIcon as _, icon as j, animatedLine as k } from "./tabs.css-mistica.js";
-const f = w() ? 0 : 300, q = (r)=>{
-    switch(r){
+import { useTheme as R, useAriaId as x, useElementDimensions as k } from "./hooks.js";
+import { Text as w } from "./text.js";
+import { isRunningAcceptanceTest as I } from "./utils/platform.js";
+import { getPrefixedDataAttributes as z } from "./utils/dom.js";
+import { outerBorder as H, outer as P, inner as W, tabsContainer as B, tabVariants as D, tabSelectionVariants as d, tabWithIcon as V, icon as _, animatedLine as j } from "./tabs.css-mistica.js";
+const f = I() ? 0 : 300, q = (i)=>{
+    switch(i){
         case 2:
             return "tabs2";
         case 3:
@@ -70,71 +70,75 @@ const f = w() ? 0 : 300, q = (r)=>{
             return "default";
     }
 }, C = (param)=>{
-    let { selectedIndex: r , onChange: T , tabs: d , dataAttributes: A  } = param;
-    const o = R(), { ref: N  } = S(), u = c.useRef(null), b = c.useRef(null), [p, h] = c.useState(!1), L = (i, l)=>{
-        const e = document.querySelector(`[id='${o}'] [data-tabindex="${i}"]`), n = document.querySelector(`[id='${o}'] [data-tabindex="${l}"]`), t = u.current, a = b.current;
-        e && n && t && a && (h(!0), t.style.display = "block", t.style.width = `${e.offsetWidth}px`, t.style.transform = `translate(${e.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            t.style.width = `${n.offsetWidth}px`, t.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`, t.style.transition = `transform ${f}ms, width ${f}ms`;
+    let { selectedIndex: i , onChange: y , tabs: b , dataAttributes: T  } = param;
+    const { textPresets: o  } = R(), n = x(), { ref: A  } = k(), u = m.useRef(null), h = m.useRef(null), [p, L] = m.useState(!1), N = (l, c)=>{
+        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), r = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
+        t && r && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.width = `${r.offsetWidth}px`, e.style.transform = `translate(${r.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${f}ms, width ${f}ms`;
         }), setTimeout(()=>{
-            t.style.transition = "", t.style.display = "none", h(!1);
+            e.style.transition = "", e.style.display = "none", L(!1);
         }, f));
     };
     return /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
-        id: o,
+        id: n,
         role: "tablist",
-        ref: N,
-        className: W
-    }, I(A, "Tabs")), {
+        ref: A,
+        className: H
+    }, z(T, "Tabs")), {
         children: /* @__PURE__ */ s(v, {
             fullWidth: !0,
-            children: /* @__PURE__ */ y("div", {
-                className: B,
+            children: /* @__PURE__ */ g("div", {
+                className: P,
                 children: [
                     /* @__PURE__ */ s("div", {
-                        ref: b,
-                        className: D,
+                        ref: h,
+                        className: W,
                         children: /* @__PURE__ */ s("div", {
-                            className: P,
-                            children: d.map((param, t)=>{
-                                let { text: i , trackingEvent: l , icon: e , "aria-controls": n  } = param;
-                                const a = t === r;
-                                return /* @__PURE__ */ y(g, {
+                            className: B,
+                            children: b.map((param, e)=>{
+                                let { text: l , trackingEvent: c , icon: t , "aria-controls": r  } = param;
+                                const a = e === i;
+                                return /* @__PURE__ */ g($, {
                                     dataAttributes: {
                                         "component-name": "Tab",
-                                        tabindex: t
+                                        tabindex: e
                                     },
-                                    className: $(V[q(d.length)], a ? p ? m.selectedAnimating : m.selected : m.noSelected, e && _),
+                                    className: S(D[q(b.length)], a ? p ? d.selectedAnimating : d.selected : d.noSelected, t && V),
                                     onPress: ()=>{
-                                        !p && r !== t && (T(t), L(r, t));
+                                        !p && i !== e && (y(e), N(i, e));
                                     },
-                                    trackingEvent: l,
+                                    trackingEvent: c,
                                     role: "tab",
-                                    "aria-controls": n,
+                                    "aria-controls": r,
                                     "aria-selected": a ? "true" : "false",
                                     children: [
-                                        e && /* @__PURE__ */ s("div", {
-                                            className: j,
-                                            children: e
+                                        t && /* @__PURE__ */ s("div", {
+                                            className: _,
+                                            children: t
                                         }),
-                                        /* @__PURE__ */ s(x, {
-                                            medium: !0,
+                                        /* @__PURE__ */ s(w, {
+                                            desktopSize: o.tabsLabel.size.desktop,
+                                            mobileSize: o.tabsLabel.size.mobile,
+                                            desktopLineHeight: o.tabsLabel.lineHeight.desktop,
+                                            mobileLineHeight: o.tabsLabel.lineHeight.mobile,
+                                            weight: "medium",
                                             color: "inherit",
                                             wordBreak: !1,
                                             textAlign: "center",
-                                            children: i
+                                            children: l
                                         })
                                     ]
-                                }, t);
+                                }, e);
                             })
                         })
                     }),
                     /* @__PURE__ */ s("div", {
                         ref: u,
-                        className: k
+                        className: j
                     })
                 ]
             })
         })
     }));
-}, K = C;
-export { K as default };
+}, X = C;
+export { X as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tag.css.ts.vanilla.css-mistica.js";
-var _ = "_1wy08671 _1y2v1nf6t _1y2v1nf77 _1y2v1nf65 _1y2v1nf69 _1y2v1nf6j _1y2v1nf6d _1y2v1nf9h _1y2v1nf81";
+var _ = "_1wy08671 _1y2v1nf6t _1y2v1nf78 _1y2v1nf65 _1y2v1nf69 _1y2v1nf6j _1y2v1nf6d _1y2v1nf9o _1y2v1nf84";
 export { _ as tag };

package/dist-es/tag.js

@@ -50,21 +50,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
 import d from "./box.js";
-import { Text as h } from "./text.js";
-import { useThemeVariant as f, ThemeVariant as v } from "./theme-variant-context.js";
-import { pxToRem as w } from "./utils/css.js";
-import { getPrefixedDataAttributes as T } from "./utils/dom.js";
-import { tag as x } from "./tag.css-mistica.js";
+import { Text as f } from "./text.js";
+import { useThemeVariant as v, ThemeVariant as w } from "./theme-variant-context.js";
+import { pxToRem as T } from "./utils/css.js";
+import { getPrefixedDataAttributes as x } from "./utils/dom.js";
+import { tag as H } from "./tag.css-mistica.js";
 import { sprinkles as m } from "./sprinkles.css-mistica.js";
-import { vars as H } from "./skins/skin-contract.css-mistica.js";
-import L from "classnames";
-const { colors: r  } = H, b = (param)=>{
-    let { Icon: o , children: i , dataAttributes: c , type: l = "promo"  } = param;
-    const t = f(), s = t === "inverse";
-    if (!i) return null;
-    const g = {
+import { vars as L } from "./skins/skin-contract.css-mistica.js";
+import b from "classnames";
+import { useTheme as I } from "./hooks.js";
+const { colors: r  } = L, k = (param)=>{
+    let { Icon: o , children: s , dataAttributes: c , type: g = "promo"  } = param;
+    const { textPresets: l  } = I(), i = v(), t = i === "inverse";
+    if (!s) return null;
+    const p = {
         // [textColor, inverseTextColor, backgroundColor]
         promo: [
             r.promoHigh,
@@ -79,7 +80,7 @@ const { colors: r  } = H, b = (param)=>{
         inactive: [
             r.neutralMedium,
             r.neutralMediumInverse,
-            t === "alternative" ? r.neutralLowAlternative : r.neutralLow
+            i === "alternative" ? r.neutralLowAlternative : r.neutralLow
         ],
         success: [
             r.successHigh,
@@ -96,35 +97,35 @@ const { colors: r  } = H, b = (param)=>{
             r.errorHighInverse,
             r.errorLow
         ]
-    }, [n, a, p] = g[l];
-    return /* @__PURE__ */ u("span", _object_spread_props(_object_spread({}, T(c, "Tag")), {
-        className: L(x, m({
+    }, [n, a, u] = p[g];
+    return /* @__PURE__ */ h("span", _object_spread_props(_object_spread({}, x(c, "Tag")), {
+        className: b(H, m({
             paddingLeft: o ? 8 : 12,
-            background: s ? r.inverse : p
+            background: t ? r.inverse : u
         })),
         children: [
             o && /* @__PURE__ */ e(d, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ e(o, {
-                    color: s ? a : n,
-                    size: w(16),
+                    color: t ? a : n,
+                    size: T(16),
                     className: m({
                         display: "block"
                     })
                 })
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(w, {
                 isInverse: !1,
-                children: /* @__PURE__ */ e(h, {
-                    color: s ? a : n,
+                children: /* @__PURE__ */ e(f, {
+                    color: t ? a : n,
                     size: 14,
                     lineHeight: 20,
-                    weight: "medium",
+                    weight: l.indicator.weight,
                     truncate: !0,
-                    children: i
+                    children: s
                 })
             })
         ]
     }));
-}, R = b;
-export { R as default };
+}, D = k;
+export { D as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
-var n = "rhey4tf _1y2v1nf7m _1y2v1nf82 _1y2v1nf64 _1y2v1nf6j", r = "rhey4t4", t = "rhey4ta _1y2v1nf5z _1y2v1nf8r rhey4t1 _1y2v1nfa2 _1y2v1nf97 _1y2v1nf1w _1y2v1nf8b", e = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6w _1y2v1nf7a", a = "rhey4to _1y2v1nf91 _1y2v1nf64 _1y2v1nf6j _1y2v1nfaj", h = "_1y2v1nf3e", i = "rhey4tj _1y2v1nf7n _1y2v1nf82", o = "rhey4tl _1y2v1nf78", l = "_1y2v1nf6w _1y2v1nf7a", u = "rhey4th _1y2v1nf7n _1y2v1nf81 _1y2v1nf64 _1y2v1nf6j _1y2v1nf8r _1y2v1nf60", p = "rhey4tr _1y2v1nf60", b = "rhey4t6 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x rhey4t1 _1y2v1nfa2 _1y2v1nf97 _1y2v1nf1w _1y2v1nf8b", x = "rhey4t7", m = "rhey4t8";
-export { n as endIcon, r as fullWidth, t as input, e as inputFirefoxStyles, f as inputWithLabel, _ as inputWithoutLabel, a as menuItem, h as menuItemSelected, i as prefix, o as prefixWithLabel, l as prefixWithoutLabel, u as startIcon, p as suggestionsContainer, b as textArea, x as textAreaWithLabel, m as textAreaWithoutLabel };
+var n = "rhey4tf _1y2v1nf7o _1y2v1nf85 _1y2v1nf64 _1y2v1nf6j", r = "rhey4t4", t = "rhey4ta _1y2v1nf5z _1y2v1nf8w rhey4t1 _1y2v1nfaa _1y2v1nf9d _1y2v1nf1w _1y2v1nf8f", f = "rhey4tb", e = "rhey4tc", _ = "_1y2v1nf6w _1y2v1nf7b", a = "rhey4to _1y2v1nf97 _1y2v1nf64 _1y2v1nf6j _1y2v1nfar", h = "_1y2v1nf3e", i = "rhey4tj _1y2v1nf7p _1y2v1nf85", o = "rhey4tl _1y2v1nf79", l = "_1y2v1nf6w _1y2v1nf7b", p = "rhey4th _1y2v1nf7p _1y2v1nf84 _1y2v1nf64 _1y2v1nf6j _1y2v1nf8w _1y2v1nf60", u = "rhey4tr _1y2v1nf60", b = "rhey4t6 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 rhey4t1 _1y2v1nfaa _1y2v1nf9d _1y2v1nf1w _1y2v1nf8f", x = "rhey4t7", W = "rhey4t8";
+export { n as endIcon, r as fullWidth, t as input, f as inputFirefoxStyles, e as inputWithLabel, _ as inputWithoutLabel, a as menuItem, h as menuItemSelected, i as prefix, o as prefixWithLabel, l as prefixWithoutLabel, p as startIcon, u as suggestionsContainer, b as textArea, x as textAreaWithLabel, W as textAreaWithoutLabel };

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

@@ -81,16 +81,16 @@ import { jsxs as te, jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { FieldContainer as ie, HelperText as ne, Label as re } from "./text-field-components.js";
 import { LABEL_LEFT_POSITION as R, LABEL_SCALE_MOBILE as se, LABEL_SCALE_DESKTOP as le } from "./text-field-components.css-mistica.js";
-import { Text3 as O } from "./text.js";
-import { isSafari as oe, isIos as ae, isRunningAcceptanceTest as B, isFirefox as de } from "./utils/platform.js";
-import { useAriaId as W, useScreenSize as ce, useTheme as j, useIsomorphicLayoutEffect as fe } from "./hooks.js";
-import T from "classnames";
-import { combineRefs as z } from "./utils/common.js";
-import { startIcon as he, prefix as me, prefixWithLabel as ge, prefixWithoutLabel as ue, fullWidth as pe, textArea as Se, textAreaWithLabel as be, textAreaWithoutLabel as ye, input as xe, inputWithLabel as Le, inputWithoutLabel as Ce, inputFirefoxStyles as Te, endIcon as Ae, menuItem as Ee, menuItemSelected as Re, suggestionsContainer as Ie } from "./text-field-base.css-mistica.js";
-import { sprinkles as Oe } from "./sprinkles.css-mistica.js";
-import { vars as We } from "./skins/skin-contract.css-mistica.js";
-const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
-    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: h , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: D , multiline: L = !1 , focus: C , fieldRef: H , maxLength: S , id: K , autoComplete: M , fullWidth: G  } = _param, r = _object_without_properties(_param, [
+import { Text3 as I } from "./text.js";
+import { isSafari as oe, isRunningAcceptanceTest as q, isFirefox as ae } from "./utils/platform.js";
+import { useAriaId as O, useScreenSize as de, useTheme as B, useIsomorphicLayoutEffect as ce } from "./hooks.js";
+import A from "classnames";
+import { combineRefs as j } from "./utils/common.js";
+import { startIcon as fe, prefix as he, prefixWithLabel as ge, prefixWithoutLabel as me, fullWidth as ue, textArea as Se, textAreaWithLabel as pe, textAreaWithoutLabel as be, input as ye, inputWithLabel as Le, inputWithoutLabel as xe, inputFirefoxStyles as Ce, endIcon as Ae, menuItem as Te, menuItemSelected as Ee, suggestionsContainer as Re } from "./text-field-base.css-mistica.js";
+import { sprinkles as We } from "./sprinkles.css-mistica.js";
+import { vars as Ie } from "./skins/skin-contract.css-mistica.js";
+const W = /*#__PURE__*/ s.forwardRef((_param, M)=>{
+    var { error: c , helperText: T , label: n , inputProps: m , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: S , inputComponent: h , prefix: g , startIcon: e , endIcon: a , endIconOverlay: L , shrinkLabel: z , multiline: x = !1 , focus: C , fieldRef: D , maxLength: p , id: G , autoComplete: H , fullWidth: K  } = _param, r = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -115,8 +115,8 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
         "fullWidth"
     ]);
     var _ref;
-    const F = W(K), [f, d] = s.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: Q  } = ce(), [U, N] = s.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = j(), P = D || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [X, Y] = s.useState("baseline");
-    fe(()=>{
+    const F = O(G), [f, d] = s.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: J  } = de(), [Q, N] = s.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, U = B(), w = z || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [X, Y] = s.useState("baseline");
+    ce(()=>{
         oe() && Y("initial");
     }, []), s.useEffect(()=>{
         f !== "focused" && t != null && t.length && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && t != null && t.length && d("filled");
@@ -129,77 +129,77 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
     }, [
         r.autoFocus
     ]);
-    const Z = L ? "textarea" : "input", v = h ? {
+    const Z = x ? "textarea" : "input", $ = h ? {
         inputRef: y
     } : {
-        ref: z(J, y)
+        ref: j(M, y)
     }, b = _object_spread(_object_spread_props(_object_spread({}, r), {
-        maxLength: S,
-        autoComplete: M
-    }), g), k = P || f === "focused" || f === "filled", $ = k ? Q ? se : le : 1, V = {
+        maxLength: p,
+        autoComplete: H
+    }), m), P = w || f === "focused" || f === "filled", v = P ? J ? se : le : 1, V = {
         left: e ? 48 : R,
         // shrinking means applying a scale transformation, so width will be proportionally reduced.
         // Let's keep the original width.
-        width: `calc(((100% - ${R + (e ? 48 : R)}px)) / ${$})`,
-        paddingRight: a && !k ? 36 : 0
-    }, _ = Oe({
+        width: `calc(((100% - ${R + (e ? 48 : R)}px)) / ${v})`,
+        paddingRight: a && !P ? 36 : 0
+    }, k = We({
         paddingRight: a ? 0 : 16,
-        paddingLeft: m ? 0 : e ? 48 : 12
-    }), ee = r.type === "password" && ae(w.platformOverrides) && !B(w.platformOverrides) ? "arial" : "inherit";
+        paddingLeft: g ? 0 : e ? 48 : 12
+    }), ee = r.type === "password" && !q(U.platformOverrides) ? "Lucida Grande, Arial, sans-serif" : "inherit";
     return /* @__PURE__ */ te(ie, {
         disabled: r.disabled,
         helperText: /* @__PURE__ */ i(ne, {
             error: c,
-            leftText: A,
-            rightText: L && S ? `${U}/${S}` : void 0
+            leftText: T,
+            rightText: x && p ? `${Q}/${p}` : void 0
         }),
-        multiline: L,
-        fullWidth: G,
-        fieldRef: H,
+        multiline: x,
+        fullWidth: K,
+        fieldRef: D,
         readOnly: r.readOnly,
         children: [
             e && /* @__PURE__ */ i("div", {
-                className: he,
+                className: fe,
                 children: e
             }),
-            m && /* @__PURE__ */ i("div", {
-                className: T(me, E ? ge : ue),
+            g && /* @__PURE__ */ i("div", {
+                className: A(he, E ? ge : me),
                 style: {
                     opacity: f === "default" ? 0 : 1,
                     alignSelf: X
                 },
-                children: /* @__PURE__ */ i(O, {
-                    color: We.colors.textSecondary,
+                children: /* @__PURE__ */ i(I, {
+                    color: Ie.colors.textSecondary,
                     regular: !0,
                     wordBreak: !1,
-                    children: m
+                    children: g
                 })
             }),
             /* @__PURE__ */ i("div", {
-                className: pe,
+                className: ue,
                 style: {
-                    alignSelf: m ? "baseline" : "initial"
+                    alignSelf: g ? "baseline" : "initial"
                 },
-                children: /* @__PURE__ */ i(O, {
+                children: /* @__PURE__ */ i(I, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ s.createElement(h || Z, _object_spread(_object_spread_props(_object_spread({}, v, b), {
+                    children: /*#__PURE__*/ s.createElement(h || Z, _object_spread(_object_spread_props(_object_spread({}, $, b), {
                         id: F,
                         style: _object_spread_props(_object_spread({}, b.style), {
                             fontFamily: ee
                         }),
-                        className: L ? T(Se, E ? be : ye, _) : T(xe, E ? Le : Ce, _, {
-                            [Te]: de()
+                        className: x ? A(Se, E ? pe : be, k) : A(ye, E ? Le : xe, k, {
+                            [Ce]: ae()
                         }),
                         onFocus: (l)=>{
                             d("focused"), u == null || u(l);
                         },
                         onBlur: (l)=>{
-                            l.target.value.length > 0 ? d("filled") : d("default"), p == null || p(l);
+                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
                         },
                         onChange: (l)=>{
-                            var q;
-                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (q = b.onChange) == null || q.call(b, l)) : (l.stopPropagation(), l.preventDefault());
+                            var _;
+                            p === void 0 || l.target.value.length <= p ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (_ = b.onChange) == null || _.call(b, l)) : (l.stopPropagation(), l.preventDefault());
                         },
                         defaultValue: o,
                         value: t
@@ -213,7 +213,7 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
                 error: c,
                 forId: F,
                 inputState: f,
-                shrinkLabel: P,
+                shrinkLabel: w,
                 optional: !r.required,
                 children: n
             }),
@@ -221,41 +221,41 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
                 className: Ae,
                 children: a
             }),
-            x
+            L
         ]
     });
-}), Fe = /*#__PURE__*/ s.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), Ke = /*#__PURE__*/ s.forwardRef((_param, g)=>{
-    var { getSuggestions: c , id: A  } = _param, n = _object_without_properties(_param, [
+}), Oe = /*#__PURE__*/ s.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), Ge = /*#__PURE__*/ s.forwardRef((_param, m)=>{
+    var { getSuggestions: c , id: T  } = _param, n = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = s.useState([]), t = s.useRef(null), { platformOverrides: u , texts: p  } = j(), h = W(A), m = W();
+    const [y, o] = s.useState([]), t = s.useRef(null), { platformOverrides: u , texts: S  } = B(), h = O(T), g = O();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ i(s.Suspense, {
-        fallback: /* @__PURE__ */ i(I, _object_spread_props(_object_spread({}, n), {
-            label: B(u) ? "" : n.label,
+        fallback: /* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, n), {
+            label: q(u) ? "" : n.label,
             autoComplete: "off",
-            ref: g,
+            ref: m,
             id: h
         })),
-        children: /* @__PURE__ */ i(Fe, {
-            id: m,
+        children: /* @__PURE__ */ i(Oe, {
+            id: g,
             inputProps: _object_spread_props(_object_spread({}, n), {
                 id: h,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
                     let { newValue: a  } = param;
-                    var x;
+                    var L;
                     e.target = _object_spread_props(_object_spread({}, e.target), {
                         value: a
                     }), e.currentTarget = _object_spread_props(_object_spread({}, e.currentTarget), {
                         value: a
-                    }), (x = n.onChange) == null || x.call(n, e);
+                    }), (L = n.onChange) == null || L.call(n, e);
                 }
             }),
-            renderInputComponent: (e)=>/* @__PURE__ */ i(I, _object_spread_props(_object_spread({}, e), {
-                    inputRef: z(t, n.inputRef, g)
+            renderInputComponent: (e)=>/* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, e), {
+                    inputRef: j(t, n.inputRef, m)
                 })),
             suggestions: y,
             onSuggestionsFetchRequested: (param)=>{
@@ -268,10 +268,10 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
                 let { isHighlighted: a  } = param;
                 return i("div", {
                     role: "menuitem",
-                    className: T(Ee, {
-                        [Re]: a
+                    className: A(Te, {
+                        [Ee]: a
                     }),
-                    children: /* @__PURE__ */ i(O, {
+                    children: /* @__PURE__ */ i(I, {
                         regular: !0,
                         children: e
                     })
@@ -281,14 +281,14 @@ const I = /*#__PURE__*/ s.forwardRef((_param, J)=>{
                     style: {
                         width: t.current ? t.current.clientWidth + 2 : 0
                     },
-                    className: Ie,
-                    "aria-label": `${n.label} ${p.menuLabelSuffix}`,
+                    className: Re,
+                    "aria-label": `${n.label} ${S.menuLabelSuffix}`,
                     children: e.children
                 }))
         })
-    }) : /* @__PURE__ */ i(I, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ i(W, _object_spread_props(_object_spread({}, n), {
         id: h,
-        ref: g
+        ref: m
     }));
 });
-export { I as TextFieldBase, Ke as TextFieldBaseAutosuggest };
+export { W as TextFieldBase, Ge as TextFieldBaseAutosuggest };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
-var _ = 328, a = 12, n = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfak _1y2v1nfa1 _1y2v1nf64 _1y2v1nfaa _1y2v1nf5z", i = "_15k6ur96 _1y2v1nf64 _1y2v1nf6a", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf92", k = "_1y2v1nf8b", u = "_1y2v1nf7n _1y2v1nf82 _1y2v1nf64", L = "_15k6ur9g", d = "_15k6ur91 _1y2v1nf60 _1y2v1nfam _1y2v1nf8y _1y2v1nf64 _1y2v1nf69 _1y2v1nfb4", E = "_15k6ur93 _1y2v1nfak _1y2v1nf6n", T = "_15k6ur9h", h = "_15k6ur99 _1y2v1nf8b", o = "_15k6ur9i", b = "_15k6ur94";
-export { _ as DEFAULT_WIDTH, a as LABEL_LEFT_POSITION, n as LABEL_SCALE_DESKTOP, f as LABEL_SCALE_MOBILE, e as disabled, y as field, i as fieldContainer, l as fieldMulti, t as fieldSingle, k as fullWidth, u as helperContainer, L as helperText, d as labelContainer, E as labelText, T as leftText, h as normalWidth, o as rightText, b as shrinked };
+var _ = 328, a = 12, n = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfas _1y2v1nfa9 _1y2v1nf64 _1y2v1nfai _1y2v1nf5z", i = "_15k6ur96 _1y2v1nf64 _1y2v1nf6a", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf98", u = "_1y2v1nf8f", k = "_1y2v1nf7p _1y2v1nf85 _1y2v1nf64", d = "_15k6ur9g", L = "_15k6ur91 _1y2v1nf60 _1y2v1nfau _1y2v1nf94 _1y2v1nf64 _1y2v1nf69 _1y2v1nfbd", E = "_15k6ur93 _1y2v1nfas _1y2v1nf6n", T = "_15k6ur9h", h = "_15k6ur99 _1y2v1nf8f", o = "_15k6ur9i", p = "_15k6ur94";
+export { _ as DEFAULT_WIDTH, a as LABEL_LEFT_POSITION, n as LABEL_SCALE_DESKTOP, f as LABEL_SCALE_MOBILE, e as disabled, y as field, i as fieldContainer, l as fieldMulti, t as fieldSingle, u as fullWidth, k as helperContainer, d as helperText, L as labelContainer, E as labelText, T as leftText, h as normalWidth, o as rightText, p as shrinked };

package/dist-es/text-link.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-link.css.ts.vanilla.css-mistica.js";
-var v = {
-    default: "_1m1n0pr1 _1y2v1nf8c _1y2v1nf67 _1y2v1nfaj _1y2v1nf27",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf8c _1y2v1nf67 _1y2v1nfaj _1y2v1nf28",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf8c _1y2v1nf67 _1y2v1nfaj _1y2v1nf27"
+var r = {
+    default: "_1m1n0pr1 _1y2v1nf8g _1y2v1nf67 _1y2v1nfar _1y2v1nf27",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf8g _1y2v1nf67 _1y2v1nfar _1y2v1nf28",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf8g _1y2v1nf67 _1y2v1nfar _1y2v1nf27"
 };
-export { v as variants };
+export { r as variants };

package/dist-es/text.js

@@ -80,7 +80,7 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as r } from "react/jsx-runtime";
 import * as R from "react";
 import $ from "classnames";
-import { assignInlineVars as S } from "@vanilla-extract/dynamic";
+import { assignInlineVars as L } from "@vanilla-extract/dynamic";
 import { useIsInverseVariant as j } from "./theme-variant-context.js";
 import { pxToRem as p } from "./utils/css.js";
 import { getPrefixedDataAttributes as B } from "./utils/dom.js";
@@ -93,7 +93,7 @@ const J = {
     medium: 500,
     bold: 700
 }, K = (e)=>e === !0 ? 1 : e || "initial", n = (param)=>{
-    let { weight: e , color: i = m.colors.textPrimary , decoration: t , truncate: o , transform: g , wordBreak: c = !0 , hyphens: f , as: z = "span" , children: h , size: d , mobileSize: u = d , desktopSize: b = d , lineHeight: T , mobileLineHeight: k = T , desktopLineHeight: L = T , letterSpacing: H , textAlign: w , textShadow: v , id: A , role: P , "aria-level": y , dataAttributes: I  } = param;
+    let { weight: e , color: i = m.colors.textPrimary , decoration: t , truncate: o , transform: g , wordBreak: c = !0 , hyphens: S , as: z = "span" , children: h , size: u , mobileSize: d = u , desktopSize: b = u , lineHeight: T , mobileLineHeight: f = T , desktopLineHeight: k = T , letterSpacing: w , textAlign: H , textShadow: v , id: A , role: P , "aria-level": y , dataAttributes: I  } = param;
     const W = j(), V = K(o), C = {
         [m.colors.textPrimary]: m.colors.textPrimaryInverse,
         [m.colors.textSecondary]: m.colors.textSecondaryInverse,
@@ -103,12 +103,12 @@ const J = {
     const D = $(E, c ? N : q, {
         [F]: o === 1 || o === !0,
         [G]: o && o > 1
-    }), M = S({
-        [x.mobileSize]: u ? p(u) : "",
-        [x.mobileLineHeight]: k ? p(k) : "",
+    }), M = L({
+        [x.mobileSize]: d ? p(d) : "",
+        [x.mobileLineHeight]: f ? p(f) : "",
         [x.desktopSize]: b ? p(b) : "",
-        [x.desktopLineHeight]: L ? p(L) : ""
-    }), O = o ? S({
+        [x.desktopLineHeight]: k ? p(k) : ""
+    }), O = o ? L({
         [x.lineClamp]: String(V)
     }) : {};
     var _C_i;
@@ -119,14 +119,14 @@ const J = {
         "aria-level": y
     }, B(I)), {
         style: _object_spread_props(_object_spread({}, M, O), {
-            hyphens: f,
-            letterSpacing: H,
+            hyphens: S,
+            letterSpacing: w,
             fontWeight: e ? J[e] : "inherit",
             textTransform: g || "inherit",
             textDecoration: t !== null && t !== void 0 ? t : "inherit",
             overflowWrap: c ? "anywhere" : "inherit",
             color: W ? (_C_i = C[i]) !== null && _C_i !== void 0 ? _C_i : i : i,
-            textAlign: w,
+            textAlign: H,
             textShadow: v
         })
     }), h);
@@ -134,6 +134,7 @@ const J = {
     if (e.light) return "light";
     if (e.regular) return "regular";
     if (e.medium) return "medium";
+    if (e.weight) return e.weight;
 }, s = (param)=>{
     let { forceMobileSizes: e , mobileSize: i , mobileLineHeight: t , desktopSize: o , desktopLineHeight: g  } = param;
     return e ? {