@telefonica/mistica 16.1.1 → 16.3.0

package/dist-es/table.js

@@ -77,44 +77,45 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import * as x from "react";
-import { getPrefixedDataAttributes as V } from "./utils/dom.js";
-import { table as X, boxed as W, collapsedRowsInMobile as E, fullWidth as M, hiddenHeadersInDesktop as ee, hiddenHeadersInMobile as te, cellTextAlign as _, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as H, collapsedRowHeaderItem as le, mobileCellHeading as re, collapsedRowTitle as ae, actionsTableCell as Y, topActions as oe, scrollContainer as se, scrollOverResponsiveLayout as ne, vars as ie } from "./table.css-mistica.js";
-import { vars as j } from "./skins/skin-contract.css-mistica.js";
-import ce, { Text1 as F, textProps as h, Text2 as me } from "./text.js";
-import { InternalBoxed as pe } from "./boxed.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import * as E from "react";
+import { getPrefixedDataAttributes as X } from "./utils/dom.js";
+import { table as W, boxed as ee, collapsedRowsInMobile as M, fullWidth as _, hiddenHeadersInDesktop as te, hiddenHeadersInMobile as le, cellTextAlign as H, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as Y, collapsedRowHeaderItem as re, mobileCellHeading as oe, collapsedRowTitle as ae, actionsTableCell as j, topActions as se, scrollContainer as ne, scrollOverResponsiveLayout as ie, vars as ce } from "./table.css-mistica.js";
+import { vars as F } from "./skins/skin-contract.css-mistica.js";
+import me, { Text1 as x, Text2 as pe } from "./text.js";
+import { text2 as f, text4 as G } from "./text-props.js";
+import { InternalBoxed as de } from "./boxed.js";
 import c from "classnames";
-import de from "./box.js";
-import { applyCssVars as he } from "./utils/css.js";
-import be from "./inline.js";
-import { IconButton as ue, ToggleIconButton as ge } from "./icon-button.js";
-import { iconContainerSize as G, iconSize as ye } from "./icon-button.css-mistica.js";
-import { TableActionsHeader as fe } from "./table-actions-header.js";
-const P = {
+import he from "./box.js";
+import { applyCssVars as be } from "./utils/css.js";
+import ue from "./inline.js";
+import { IconButton as ge, ToggleIconButton as ye } from "./icon-button.js";
+import { iconContainerSize as Z, iconSize as fe } from "./icon-button.css-mistica.js";
+import { TableActionsHeader as ke } from "./table-actions-header.js";
+const $ = {
     default: "8px",
     boxed: "16px"
-}, Z = "1px", ke = (a)=>a.Icon ? /* @__PURE__ */ e(ue, _object_spread_props(_object_spread({}, a), {
-        "aria-label": a.label,
+}, q = "1px", ve = (o)=>o.Icon ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, o), {
+        "aria-label": o.label,
         small: !0,
         type: "neutral",
         backgroundType: "transparent",
         bleedY: !0
-    })) : /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, a), {
-        checkedProps: _object_spread_props(_object_spread({}, a.checkedProps), {
-            "aria-label": a.checkedProps.label,
+    })) : /* @__PURE__ */ e(ye, _object_spread_props(_object_spread({}, o), {
+        checkedProps: _object_spread_props(_object_spread({}, o.checkedProps), {
+            "aria-label": o.checkedProps.label,
             type: "brand",
             backgroundType: "solid"
         }),
-        uncheckedProps: _object_spread_props(_object_spread({}, a.uncheckedProps), {
-            "aria-label": a.uncheckedProps.label,
+        uncheckedProps: _object_spread_props(_object_spread({}, o.uncheckedProps), {
+            "aria-label": o.uncheckedProps.label,
             type: "neutral",
             backgroundType: "transparent"
         }),
         small: !0,
         bleedY: !0
-    })), q = "left", Oe = /*#__PURE__*/ x.forwardRef((_param, $)=>{
-    var { dataAttributes: a, heading: m = [], content: k = [], boxed: b, responsive: J, fullWidth: u = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = q, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: g, scrollOverResponsiveLayout: K, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
+    })), J = "left", Ee = /*#__PURE__*/ E.forwardRef((_param, z)=>{
+    var { dataAttributes: o, heading: m = [], content: k = [], boxed: h, responsive: K, fullWidth: b = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = J, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: u, scrollOverResponsiveLayout: Q, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
         "dataAttributes",
         "heading",
         "content",
@@ -130,68 +131,68 @@ const P = {
         "scrollOverResponsiveLayout",
         "rowHeaderIndex"
     ]);
-    const z = (l)=>{
+    const B = (l)=>{
         var _T_l;
-        return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : q : T;
-    }, r = J === "collapse-rows", B = g === !0 || g === "mobile", Q = g === !0 || g === "desktop", y = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), D = /* @__PURE__ */ f("table", {
-        className: c(X, {
-            [W]: b,
-            [E]: r,
-            [M]: u,
-            [ee]: Q,
-            [te]: B || r
+        return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : J : T;
+    }, r = K === "collapse-rows", P = u === !0 || u === "mobile", U = u === !0 || u === "desktop", g = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), D = /* @__PURE__ */ y("table", {
+        className: c(W, {
+            [ee]: h,
+            [M]: r,
+            [_]: b,
+            [te]: U,
+            [le]: P || r
         }),
         "aria-label": S["aria-label"],
         "aria-labelledby": S["aria-labelledby"],
         "aria-describedby": S["aria-describedby"],
         children: [
             m.length > 0 && /* @__PURE__ */ e("thead", {
-                children: /* @__PURE__ */ f(F, {
+                children: /* @__PURE__ */ y(x, {
                     as: "tr",
                     medium: !0,
                     transform: "uppercase",
-                    color: j.colors.textSecondary,
+                    color: F.colors.textSecondary,
                     wordBreak: !1,
                     children: [
-                        m.map((l, o)=>/* @__PURE__ */ e("th", {
+                        m.map((l, a)=>/* @__PURE__ */ e("th", {
                                 scope: "col",
-                                className: c(_[z(o)], N[C], {
-                                    [L]: o === 0,
-                                    [R]: o === m.length - 1 && !y
+                                className: c(H[B(a)], N[C], {
+                                    [L]: a === 0,
+                                    [R]: a === m.length - 1 && !g
                                 }),
                                 style: {
-                                    minWidth: p == null ? void 0 : p[o],
-                                    width: p == null ? void 0 : p[o]
+                                    minWidth: p == null ? void 0 : p[a],
+                                    width: p == null ? void 0 : p[a]
                                 },
                                 children: l
-                            }, o)),
-                        y && /* @__PURE__ */ e(fe, {})
+                            }, a)),
+                        g && /* @__PURE__ */ e(ke, {})
                     ]
                 })
             }),
             /* @__PURE__ */ e("tbody", {
-                children: k.length > 0 ? k.map((l, o)=>{
+                children: k.length > 0 ? k.map((l, a)=>{
                     var _l_actions;
-                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], w = /* @__PURE__ */ e(be, {
+                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], w = /* @__PURE__ */ e(ue, {
                         space: 16,
-                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ke, _object_spread({}, d), t) : /* @__PURE__ */ e(x.Fragment, {
+                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ve, _object_spread({}, d), t) : /* @__PURE__ */ e(E.Fragment, {
                                 children: d
                             }, t))
-                    }), I = i.length ? `calc(${G.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
+                    }), I = i.length ? `calc(${Z.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
                     return(// Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
-                    /* @__PURE__ */ f("tr", {
+                    /* @__PURE__ */ y("tr", {
                         style: {
                             position: "relative"
                         },
                         children: [
                             n.map((d, t)=>{
-                                const U = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
-                                return /* @__PURE__ */ f(t === s ? "th" : "td", {
+                                const V = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
+                                return /* @__PURE__ */ y(t === s ? "th" : "td", {
                                     className: c(N[C], {
                                         [L]: t === 0,
-                                        [R]: t === n.length - 1 && !y,
-                                        [H]: U && r,
-                                        [le]: t === s && r
+                                        [R]: t === n.length - 1 && !g,
+                                        [Y]: V && r,
+                                        [re]: t === s && r
                                     }),
                                     style: {
                                         // add space between top actions and content
@@ -199,30 +200,30 @@ const P = {
                                     },
                                     scope: t === s ? "row" : void 0,
                                     children: [
-                                        t !== s && r && m[t] && !B && // this is aria-hidden because screen readers already read the column heading from the th
+                                        t !== s && r && m[t] && !P && // this is aria-hidden because screen readers already read the column heading from the th
                                         /* @__PURE__ */ e("div", {
-                                            className: re,
+                                            className: oe,
                                             "aria-hidden": !0,
-                                            children: /* @__PURE__ */ e(F, {
+                                            children: /* @__PURE__ */ e(x, {
                                                 medium: !0,
-                                                color: j.colors.textSecondary,
+                                                color: F.colors.textSecondary,
                                                 children: m[t]
                                             })
                                         }),
-                                        /* @__PURE__ */ e(ce, _object_spread_props(_object_spread({
-                                            desktopSize: h.text2.desktopSize,
-                                            desktopLineHeight: h.text2.desktopLineHeight
+                                        /* @__PURE__ */ e(me, _object_spread_props(_object_spread({
+                                            desktopSize: f.desktopSize,
+                                            desktopLineHeight: f.desktopLineHeight
                                         }, t === s && r ? {
-                                            mobileSize: h.text4.mobileSize,
-                                            mobileLineHeight: h.text4.mobileLineHeight
+                                            mobileSize: G.mobileSize,
+                                            mobileLineHeight: G.mobileLineHeight
                                         } : {
-                                            mobileSize: h.text2.mobileSize,
-                                            mobileLineHeight: h.text2.mobileLineHeight
+                                            mobileSize: f.mobileSize,
+                                            mobileLineHeight: f.mobileLineHeight
                                         }), {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ e("div", {
-                                                className: c(_[z(t)], {
+                                                className: c(H[B(t)], {
                                                     [ae]: t === s && r
                                                 }),
                                                 children: d
@@ -232,7 +233,7 @@ const P = {
                                 }, t);
                             }),
                             i.length > 0 ? /* @__PURE__ */ e("td", {
-                                className: c(N[C], Y, R, {
+                                className: c(N[C], j, R, {
                                     [L]: n.length === 0
                                 }),
                                 align: "right",
@@ -240,30 +241,30 @@ const P = {
                                     width: `calc(${I} + 12px)`
                                 },
                                 children: w
-                            }) : y && /* @__PURE__ */ e("td", {
-                                className: Y
+                            }) : g && /* @__PURE__ */ e("td", {
+                                className: j
                             }),
                             process.env.NODE_ENV !== "test" && r && i.length > 0 && /* @__PURE__ */ e("td", {
-                                className: oe,
+                                className: se,
                                 style: {
                                     position: "absolute",
-                                    top: `calc(${b ? P.boxed : P.default} - ${Z} + (${G.small} - ${ye.small}) / 2)`,
-                                    right: b ? `calc(${P.boxed} - ${Z})` : 0,
+                                    top: `calc(${h ? $.boxed : $.default} - ${q} + (${Z.small} - ${fe.small}) / 2)`,
+                                    right: h ? `calc(${$.boxed} - ${q})` : 0,
                                     width: I
                                 },
                                 children: w
                             })
                         ]
-                    }, o));
+                    }, a));
                 }) : /* @__PURE__ */ e("tr", {
                     children: /* @__PURE__ */ e("td", {
                         colSpan: m.length,
                         className: c({
-                            [H]: r
+                            [Y]: r
                         }),
-                        children: typeof A == "string" ? /* @__PURE__ */ e(de, {
+                        children: typeof A == "string" ? /* @__PURE__ */ e(he, {
                             paddingY: 56,
-                            children: /* @__PURE__ */ e(me, {
+                            children: /* @__PURE__ */ e(pe, {
                                 regular: !0,
                                 textAlign: "center",
                                 as: "div",
@@ -277,35 +278,35 @@ const P = {
     }), O = function() {
         let l = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
         return {
-            className: c(se, {
-                [ne]: l,
-                [E]: r,
-                [M]: u
+            className: c(ne, {
+                [ie]: l,
+                [M]: r,
+                [_]: b
             }),
-            style: he({
-                [ie.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
+            style: be({
+                [ce.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
             })
         };
     };
-    return b ? /* @__PURE__ */ e(pe, {
+    return h ? /* @__PURE__ */ e(de, {
         desktopOnly: r,
         width: "fit-content",
         maxWidth: "100%",
         minWidth: {
-            desktop: u ? "100%" : "auto",
-            mobile: r || u ? "100%" : "auto"
+            desktop: b ? "100%" : "auto",
+            mobile: r || b ? "100%" : "auto"
         },
-        ref: $,
+        ref: z,
         dataAttributes: _object_spread({
             "component-name": "Table"
-        }, a),
+        }, o),
         children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, O()), {
             children: D
         }))
     }) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-        ref: $
-    }, V(a, "Table"), O(K)), {
+        ref: z
+    }, X(o, "Table"), O(Q)), {
         children: D
     }));
 });
-export { Oe as Table };
+export { Ee as Table };

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 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
-export { _ as tag };
+var y = "_1y2v1nfhl _1y2v1nfa1", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+export { y as badge, _ as icon, f as tag };

package/dist-es/tag.js

@@ -51,23 +51,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import g from "./box.js";
-import { Text as x } from "./text.js";
-import { useThemeVariant as T, ThemeVariant as h } from "./theme-variant-context.js";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import p from "./box.js";
+import { Text as f } from "./text.js";
+import { useThemeVariant as T, ThemeVariant as x } from "./theme-variant-context.js";
 import { pxToRem as v } from "./utils/css.js";
-import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import { tag as B } from "./tag.css-mistica.js";
-import { sprinkles as a } from "./sprinkles.css-mistica.js";
-import { vars as b } from "./skins/skin-contract.css-mistica.js";
-import w from "classnames";
-import { useTheme as A } from "./hooks.js";
-import P from "./badge.js";
-const { colors: t } = b, V = (param)=>{
-    let { Icon: e, children: i, dataAttributes: m, type: l = "promo", badge: n } = param;
-    const { textPresets: d } = A(), p = T(), o = n === !0 ? void 0 : n || 0;
-    if (!i) return null;
-    const u = {
+import { getPrefixedDataAttributes as h } from "./utils/dom.js";
+import { tag as k, icon as B, badge as b } from "./tag.css-mistica.js";
+import { vars as w } from "./skins/skin-contract.css-mistica.js";
+import A from "classnames";
+import { useTheme as P } from "./hooks.js";
+import V from "./badge.js";
+const { colors: t } = w, C = (param)=>{
+    let { Icon: e, children: o, dataAttributes: g, type: c = "promo", badge: i } = param;
+    const { textPresets: m } = P(), d = T(), a = i === !0 ? void 0 : i || 0;
+    if (!o) return null;
+    const l = {
         // [textColor, backgroundColor]
         promo: [
             t.tagTextPromo,
@@ -80,7 +79,7 @@ const { colors: t } = b, V = (param)=>{
         inactive: [
             t.tagTextInactive,
             // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            p === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
+            d === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
             t.tagTextSuccess,
@@ -94,47 +93,43 @@ const { colors: t } = b, V = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [s, f] = u[l];
-    return /* @__PURE__ */ c("span", _object_spread_props(_object_spread({}, k(m, "Tag")), {
-        className: w(B, a({
+    }, [n, u] = l[c];
+    return /* @__PURE__ */ s("span", _object_spread_props(_object_spread({}, h(g, "Tag")), {
+        className: A(k),
+        style: {
             paddingLeft: e ? 8 : 12,
-            paddingRight: o !== 0 ? 8 : 12,
-            background: f
-        })),
+            paddingRight: a !== 0 ? 8 : 12,
+            background: u
+        },
         children: [
-            e && /* @__PURE__ */ r(g, {
+            e && /* @__PURE__ */ r(p, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ r(e, {
-                    color: s,
+                    color: n,
                     size: v(16),
-                    className: a({
-                        display: "block"
-                    })
+                    className: B
                 })
             }),
-            /* @__PURE__ */ c(h, {
+            /* @__PURE__ */ s(x, {
                 isInverse: !1,
                 children: [
-                    /* @__PURE__ */ r(x, {
-                        color: s,
+                    /* @__PURE__ */ r(f, {
+                        color: n,
                         size: 14,
                         lineHeight: 20,
-                        weight: d.indicator.weight,
+                        weight: m.indicator.weight,
                         truncate: !0,
-                        children: i
+                        children: o
                     }),
-                    o !== 0 && /* @__PURE__ */ r(g, {
-                        paddingLeft: 4,
-                        className: a({
-                            display: "inline-flex"
-                        }),
-                        children: /* @__PURE__ */ r(P, {
-                            value: o
+                    a !== 0 && /* @__PURE__ */ r("div", {
+                        className: b,
+                        children: /* @__PURE__ */ r(V, {
+                            value: a
                         })
                     })
                 ]
             })
         ]
     }));
-}, I = V;
+}, I = C;
 export { I as default };

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

@@ -2,5 +2,8 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
-var a = 328, f = 0.78, e = 0.75, y = "_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";
-export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as disabled, k as field, i as fieldContainer, l as fullWidth, h as helperContainer, t as helperText, o as labelContainer, p as labelText, u as leftHelperText, L as normalWidth, d as shrinked, E as warnIcon };
+var a = 328, f = 0.78, e = 0.75, y = {
+    default: "_1y2v1nf3q",
+    readOnly: "_1y2v1nf5k"
+}, k = "_15k6ur97", l = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", t = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", o = "_1y2v1nfi5 _1y2v1nf7j", u = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", d = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", p = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", E = "_15k6ur94", T = "_15k6ur9g";
+export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as background, k as disabled, l as field, i as fieldContainer, t as fullWidth, h as helperContainer, o as helperText, u as labelContainer, d as labelText, p as leftHelperText, L as normalWidth, E as shrinked, T as warnIcon };

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

@@ -51,81 +51,80 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as o, Fragment as C } from "react/jsx-runtime";
+import { jsxs as c, jsx as r, Fragment as C } from "react/jsx-runtime";
 import * as g from "react";
 import m from "classnames";
 import { useIsInverseOrMediaVariant as I } from "./theme-variant-context.js";
 import { useTheme as S } from "./hooks.js";
 import { Text1 as x } from "./text.js";
-import { labelContainer as T, shrinked as k, labelText as E, helperText as b, leftHelperText as F, warnIcon as L, fieldContainer as O, fullWidth as W, normalWidth as w, disabled as A, field as P, helperContainer as j } from "./text-field-components.css-mistica.js";
-import { sprinkles as v } from "./sprinkles.css-mistica.js";
-import { vars as r } from "./skins/skin-contract.css-mistica.js";
+import { labelContainer as T, shrinked as E, labelText as F, helperText as v, leftHelperText as O, warnIcon as k, fieldContainer as W, fullWidth as A, normalWidth as L, disabled as P, field as j, background as b, helperContainer as w } from "./text-field-components.css-mistica.js";
+import { vars as t } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as D } from "./utils/dom.js";
 import { formFieldOptionalLabelSuffix as H } from "./text-tokens.js";
 import R from "./generated/mistica-icons/icon-warning-regular.js";
-const X = (param)=>{
-    let { shrinkLabel: t, forId: l, inputState: e, error: s, children: i, style: n, optional: a } = param;
-    const f = t || e === "focused" || e === "filled", [u, p] = g.useState("initial"), { texts: d, t: N } = S();
+const U = (param)=>{
+    let { shrinkLabel: o, forId: l, inputState: e, error: s, children: i, style: a, optional: n } = param;
+    const f = o || e === "focused" || e === "filled", [u, h] = g.useState("initial"), { texts: d, t: y } = S();
     g.useEffect(()=>{
-        const y = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
+        const N = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(y);
+            clearTimeout(N);
         };
     }, []);
-    let h = r.colors.textSecondary;
-    return s && e !== "default" ? h = r.colors.textError : e === "focused" && (h = r.colors.textActivated), /* @__PURE__ */ c("label", {
+    let p = t.colors.textSecondary;
+    return s && e !== "default" ? p = t.colors.textError : e === "focused" && (p = t.colors.textActivated), /* @__PURE__ */ c("label", {
         className: m(T, {
-            [k]: f
-        }, v({
-            color: h
-        })),
+            [E]: f
+        }),
         htmlFor: l,
-        style: _object_spread_props(_object_spread({}, n), {
+        style: _object_spread_props(_object_spread({
+            color: p
+        }, a), {
             transition: u
         }),
         children: [
-            /* @__PURE__ */ o("span", {
-                className: E,
+            /* @__PURE__ */ r("span", {
+                className: F,
                 children: i
             }),
-            a ? /* @__PURE__ */ c("span", {
+            n ? /* @__PURE__ */ c("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || N(H),
+                    d.formFieldOptionalLabelSuffix || y(H),
                     ")"
                 ]
             }) : null
         ]
     });
-}, Y = (param)=>{
-    let { leftText: t, rightText: l, error: e, id: s } = param;
-    const i = I(), n = i ? r.colors.textPrimaryInverse : e ? r.colors.textError : r.colors.textSecondary, a = i ? r.colors.textPrimaryInverse : r.colors.textSecondary;
+}, X = (param)=>{
+    let { leftText: o, rightText: l, error: e, id: s } = param;
+    const i = I(), a = i ? t.colors.textPrimaryInverse : e ? t.colors.textError : t.colors.textSecondary, n = i ? t.colors.textPrimaryInverse : t.colors.textSecondary;
     return /* @__PURE__ */ c(C, {
         children: [
-            t && /* @__PURE__ */ c("p", {
-                className: m(b, F),
+            o && /* @__PURE__ */ c("p", {
+                className: m(v, O),
                 children: [
-                    e && /* @__PURE__ */ o(x, {
+                    e && /* @__PURE__ */ r(x, {
                         regular: !0,
-                        children: /* @__PURE__ */ o(R, {
-                            color: n,
-                            className: L
+                        children: /* @__PURE__ */ r(R, {
+                            color: a,
+                            className: k
                         })
                     }),
-                    /* @__PURE__ */ o(x, {
-                        color: n,
+                    /* @__PURE__ */ r(x, {
+                        color: a,
                         regular: !0,
                         id: s,
-                        children: t
+                        children: o
                     })
                 ]
             }),
-            l && /* @__PURE__ */ o("div", {
-                className: m(b),
-                children: /* @__PURE__ */ o(x, {
-                    color: a,
+            l && /* @__PURE__ */ r("div", {
+                className: m(v),
+                children: /* @__PURE__ */ r(x, {
+                    color: n,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
@@ -134,31 +133,29 @@ const X = (param)=>{
             })
         ]
     });
-}, Z = (param)=>{
-    let { multiline: t, disabled: l, children: e, helperText: s, className: i, fieldRef: n, fullWidth: a, readOnly: f, dataAttributes: u } = param;
+}, Y = (param)=>{
+    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ c("div", _object_spread_props(_object_spread({
-        className: m(O, a ? W : w, {
-            [A]: l
+        className: m(W, n ? A : L, {
+            [P]: l
         }),
-        onClick: (p)=>{
+        onClick: (h)=>{
             var d;
-            (d = p.currentTarget.querySelector(t ? "textarea" : "input")) == null || d.focus();
+            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
         }
     }, D(u)), {
         children: [
-            /* @__PURE__ */ o("div", {
-                className: m(P, v({
-                    background: f ? r.colors.neutralLow : r.colors.backgroundContainer
-                }), i),
-                ref: n,
+            /* @__PURE__ */ r("div", {
+                className: m(j, f ? b.readOnly : b.default, i),
+                ref: a,
                 children: e
             }),
-            s && /* @__PURE__ */ o("div", {
-                className: j,
+            s && /* @__PURE__ */ r("div", {
+                className: w,
                 children: s
             })
         ]
     })));
 };
-export { Z as FieldContainer, Y as HelperText, X as Label };
+export { Y as FieldContainer, X as HelperText, U as Label };