@igne-agency/react-web-ui 0.5.0 → 0.6.0

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

@@ -1,125 +1,202 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1kpis_3 {
+  ._root_1qwga_3 {
     min-inline-size: 0;
   }
-  ._group_1kpis_6 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._group_1qwga_6 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._group_1qwga_6 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._group_1kpis_6 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._group_1kpis_6[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._group_1qwga_6 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._group_1qwga_6[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._group_1kpis_6 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._group_1qwga_6 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._group_1kpis_6:hover:not([data-disabled], [data-readonly]), ._group_1kpis_6[data-focused], ._group_1kpis_6[data-popup-open] {
-    border-color: var(--sys-color-primary);
+  ._group_1qwga_6:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._group_1qwga_6[data-focused], ._group_1qwga_6[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._group_1qwga_6:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
   }
-  ._group_1kpis_6[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+  ._group_1qwga_6[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
   }
-  ._group_1kpis_6[data-pending] {
+  ._group_1qwga_6[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._group_1kpis_6[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._group_1kpis_6[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._group_1qwga_6[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._group_1qwga_6[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._group_1kpis_6 {
+  ._group_1qwga_6 {
     position: relative;
     display: flex;
-    gap: var(--sys-unit-4);
+    gap: var(--field-inlay-gap, var(--sys-unit-4));
   }
-  ._group_1kpis_6 {
+  ._group_1qwga_6 {
     inline-size: 100%;
     cursor: text;
   }
-  ._control_1kpis_71 {
-    flex: 1;
-    min-inline-size: 0;
-    border: none;
-    background: none;
-    padding: 0;
-    color: inherit;
-    font: inherit;
-  }
-  ._control_1kpis_71::-webkit-search-cancel-button {
+  ._control_1qwga_136::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._control_1kpis_71::-webkit-search-decoration {
+  ._control_1qwga_136::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._control_1kpis_71 {
+  ._control_1qwga_136 {
     line-height: normal;
   }
-  ._control_1kpis_71::placeholder {
-    color: var(--field-placeholder-fg);
+  ._control_1qwga_136:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._control_1qwga_136:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._control_1qwga_136 {
+    flex: 1;
+    min-inline-size: 0;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+  }
+  ._control_1qwga_136::placeholder {
+    color: var(--_field-placeholder-fg);
   }
-  ._bar_1kpis_94 {
+  ._bar_1qwga_171 {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--sys-unit-4);
+    gap: var(--text-field-bar-gap, var(--sys-unit-4));
     pointer-events: none;
   }
-  ._bar_1kpis_94:empty {
+  ._bar_1qwga_171:empty {
     display: none;
   }
-  ._inlay_1kpis_104 {
+  ._inlay_1qwga_181 {
     display: inline-flex;
     flex: none;
     align-items: center;
-    gap: var(--sys-unit-2);
-    color: var(--field-muted-fg);
-    font: var(--sys-font-body-medium);
+    gap: var(--field-inlay-content-gap, var(--sys-unit-2));
+    color: var(--field-inlay-fg, var(--_field-muted-fg));
+    font: var(--field-inlay-font, var(--sys-font-body-medium));
     cursor: default;
     pointer-events: none;
     line-height: normal;
   }
-  ._action_1kpis_115 {
+  ._action_1qwga_192 {
     position: relative;
     flex: none;
-    margin-block: calc(-1 * var(--sys-unit-6));
+    margin-block: calc(-1 * var(--field-pad-y, var(--sys-unit-6)));
     cursor: pointer;
   }
   @media (any-pointer: coarse) {
-    ._action_1kpis_115::before {
+    ._action_1qwga_192::before {
       content: "";
       position: absolute;
       inset: 50%;
@@ -128,7 +205,7 @@
       block-size: var(--sys-unit-22);
     }
   }
-  ._copyStatus_1kpis_131 {
+  ._copyStatus_1qwga_208 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -136,31 +213,31 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._counter_1kpis_139 {
-    --counter-fg: var(
+  ._counter_1qwga_216 {
+    --_counter-fg: var(
     	--text-field-counter-fg,
     	var(--sys-color-text-muted)
     );
     align-self: flex-end;
     justify-self: end;
-    color: var(--counter-fg);
+    color: var(--_counter-fg);
     font: var(--text-field-counter-font, var(--sys-font-body-small));
     font-variant-numeric: tabular-nums;
     cursor: default;
   }
-  ._counter_1kpis_139[data-tone=warning] {
-    --counter-fg: var(
+  ._counter_1qwga_216[data-tone=warning] {
+    --_counter-fg: var(
     	--text-field-counter-warning-fg,
     	var(--sys-color-warning-fg)
     );
   }
-  ._counter_1kpis_139[data-tone=error] {
-    --counter-fg: var(
+  ._counter_1qwga_216[data-tone=error] {
+    --_counter-fg: var(
     	--text-field-counter-error-fg,
     	var(--sys-color-error-fg)
     );
   }
-  ._visuallyHidden_1kpis_163 {
+  ._visuallyHidden_1qwga_240 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { FieldBlurHandler, FieldProps } from "../field/index.ts";
+import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
 import { type TextInputInputProps, type TextInputRootProps } from "./text-input.tsx";
 /** The clear button: off, or on with its accessible name. */
 export type TextFieldClearProps = Readonly<{

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

@@ -1,5 +1,8 @@
+import { IconButton } from "../button/button.js";
+import { Field } from "../field/field.js";
 import { TextInput } from "./text-input.js";
 import text_field_module_default from "./text-field.module.js";
+import { Spinner } from "../spinner/spinner.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/text-field/text-field.tsx
@@ -17,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var TextField = (t0) => {
-	const $ = c(83);
+	const $ = c(85);
 	let className;
 	let clearIcon;
 	let clearLabel;
@@ -115,121 +118,148 @@ var TextField = (t0) => {
 	}
 	const t2 = (t1 === void 0 ? false : t1) ? text_field_module_default.visuallyHidden : void 0;
 	let t3;
-	if ($[31] !== label || $[32] !== t2) {
-		t3 = /* @__PURE__ */ jsx(TextInput.Label, {
+	if ($[31] !== optionalLabel) {
+		t3 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[31] = optionalLabel;
+		$[32] = t3;
+	} else t3 = $[32];
+	let t4;
+	if ($[33] !== label || $[34] !== t2 || $[35] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(TextInput.Label, {
 			className: t2,
-			children: label
+			children: [
+				label,
+				" ",
+				t3
+			]
 		});
-		$[31] = label;
-		$[32] = t2;
-		$[33] = t3;
-	} else t3 = $[33];
-	let t4;
-	if ($[34] !== icon) {
-		t4 = icon !== void 0 && /* @__PURE__ */ jsx(TextInput.Inlay, {
+		$[33] = label;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+	} else t4 = $[36];
+	let t5;
+	if ($[37] !== icon) {
+		t5 = icon !== void 0 && /* @__PURE__ */ jsx(TextInput.Inlay, {
 			"aria-hidden": "true",
 			children: icon
 		});
-		$[34] = icon;
-		$[35] = t4;
-	} else t4 = $[35];
-	let t5;
-	if ($[36] !== prefix) {
-		t5 = prefix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: prefix });
-		$[36] = prefix;
-		$[37] = t5;
-	} else t5 = $[37];
+		$[37] = icon;
+		$[38] = t5;
+	} else t5 = $[38];
 	let t6;
-	if ($[38] !== inputProps) {
-		t6 = /* @__PURE__ */ jsx(TextInput.Input, { ...inputProps });
-		$[38] = inputProps;
-		$[39] = t6;
-	} else t6 = $[39];
+	if ($[39] !== prefix) {
+		t6 = prefix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: prefix });
+		$[39] = prefix;
+		$[40] = t6;
+	} else t6 = $[40];
 	let t7;
-	if ($[40] !== suffix) {
-		t7 = suffix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: suffix });
-		$[40] = suffix;
-		$[41] = t7;
-	} else t7 = $[41];
+	if ($[41] !== inputProps) {
+		t7 = /* @__PURE__ */ jsx(TextInput.Input, { ...inputProps });
+		$[41] = inputProps;
+		$[42] = t7;
+	} else t7 = $[42];
 	let t8;
-	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(TextInput.Pending, {});
-		$[42] = t8;
-	} else t8 = $[42];
+	if ($[43] !== suffix) {
+		t8 = suffix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: suffix });
+		$[43] = suffix;
+		$[44] = t8;
+	} else t8 = $[44];
 	let t9;
-	if ($[43] !== clearIcon || $[44] !== clearLabel || $[45] !== clearable) {
-		t9 = clearable === true && /* @__PURE__ */ jsx(TextInput.Clear, {
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(TextInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[45] = t9;
+	} else t9 = $[45];
+	let t10;
+	if ($[46] !== clearIcon || $[47] !== clearLabel || $[48] !== clearable) {
+		t10 = clearable === true && /* @__PURE__ */ jsx(TextInput.Clear, { render: /* @__PURE__ */ jsx(IconButton, {
 			label: clearLabel,
+			variant: "tertiary",
+			size: "sm",
 			children: clearIcon
-		});
-		$[43] = clearIcon;
-		$[44] = clearLabel;
-		$[45] = clearable;
-		$[46] = t9;
-	} else t9 = $[46];
-	let t10;
-	if ($[47] !== copiedIcon || $[48] !== copiedLabel || $[49] !== copyFailedIcon || $[50] !== copyFailedLabel || $[51] !== copyIcon || $[52] !== copyLabel || $[53] !== copyable) {
-		t10 = copyable === true && /* @__PURE__ */ jsx(TextInput.Copy, {
-			label: copyLabel,
+		}) });
+		$[46] = clearIcon;
+		$[47] = clearLabel;
+		$[48] = clearable;
+		$[49] = t10;
+	} else t10 = $[49];
+	let t11;
+	if ($[50] !== copiedIcon || $[51] !== copiedLabel || $[52] !== copyFailedIcon || $[53] !== copyFailedLabel || $[54] !== copyIcon || $[55] !== copyLabel || $[56] !== copyable) {
+		t11 = copyable === true && /* @__PURE__ */ jsx(TextInput.Copy, {
 			copiedLabel,
 			failedLabel: copyFailedLabel,
-			copiedIcon,
-			failedIcon: copyFailedIcon,
-			children: copyIcon
+			render: (props, t12) => {
+				const { outcome } = t12;
+				return /* @__PURE__ */ jsx(IconButton, {
+					...props,
+					label: {
+						idle: copyLabel,
+						copied: copiedLabel,
+						failed: copyFailedLabel
+					}[outcome],
+					tone: outcome === "failed" ? "danger" : "brand",
+					variant: "tertiary",
+					size: "sm",
+					children: {
+						idle: copyIcon,
+						copied: copiedIcon ?? copyIcon,
+						failed: copyFailedIcon ?? copyIcon
+					}[outcome]
+				});
+			}
 		});
-		$[47] = copiedIcon;
-		$[48] = copiedLabel;
-		$[49] = copyFailedIcon;
-		$[50] = copyFailedLabel;
-		$[51] = copyIcon;
-		$[52] = copyLabel;
-		$[53] = copyable;
-		$[54] = t10;
-	} else t10 = $[54];
-	let t11;
-	if ($[55] !== t10 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
-			t4,
+		$[50] = copiedIcon;
+		$[51] = copiedLabel;
+		$[52] = copyFailedIcon;
+		$[53] = copyFailedLabel;
+		$[54] = copyIcon;
+		$[55] = copyLabel;
+		$[56] = copyable;
+		$[57] = t11;
+	} else t11 = $[57];
+	let t12;
+	if ($[58] !== t10 || $[59] !== t11 || $[60] !== t5 || $[61] !== t6 || $[62] !== t7 || $[63] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
 			t5,
 			t6,
 			t7,
 			t8,
 			t9,
-			t10
+			t10,
+			t11
 		] });
-		$[55] = t10;
-		$[56] = t4;
-		$[57] = t5;
-		$[58] = t6;
-		$[59] = t7;
-		$[60] = t9;
-		$[61] = t11;
-	} else t11 = $[61];
-	let t12;
-	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(TextInput.Counter, {});
-		$[62] = t12;
-	} else t12 = $[62];
+		$[58] = t10;
+		$[59] = t11;
+		$[60] = t5;
+		$[61] = t6;
+		$[62] = t7;
+		$[63] = t8;
+		$[64] = t12;
+	} else t12 = $[64];
 	let t13;
-	if ($[63] !== description) {
-		t13 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
-		$[63] = description;
-		$[64] = t13;
-	} else t13 = $[64];
-	let t14;
 	if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ jsx(TextInput.Error, {});
-		$[65] = t14;
-	} else t14 = $[65];
+		t13 = /* @__PURE__ */ jsx(TextInput.Counter, {});
+		$[65] = t13;
+	} else t13 = $[65];
+	let t14;
+	if ($[66] !== description) {
+		t14 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[66] = description;
+		$[67] = t14;
+	} else t14 = $[67];
 	let t15;
-	if ($[66] !== className || $[67] !== dirty || $[68] !== disabled || $[69] !== errors || $[70] !== maxLength || $[71] !== onValueChange || $[72] !== optionalLabel || $[73] !== pending || $[74] !== readOnly || $[75] !== requiredness || $[76] !== state || $[77] !== t11 || $[78] !== t13 || $[79] !== t3 || $[80] !== touched || $[81] !== value) {
-		t15 = /* @__PURE__ */ jsxs(TextInput.Root, {
+	if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[68] = t15;
+	} else t15 = $[68];
+	let t16;
+	if ($[69] !== className || $[70] !== dirty || $[71] !== disabled || $[72] !== errors || $[73] !== maxLength || $[74] !== onValueChange || $[75] !== pending || $[76] !== readOnly || $[77] !== requiredness || $[78] !== state || $[79] !== t12 || $[80] !== t14 || $[81] !== t4 || $[82] !== touched || $[83] !== value) {
+		t16 = /* @__PURE__ */ jsxs(TextInput.Root, {
 			value,
 			onValueChange,
 			disabled,
 			readOnly,
 			requiredness,
-			optionalLabel,
 			errors,
 			dirty,
 			touched,
@@ -238,31 +268,30 @@ var TextField = (t0) => {
 			state,
 			className,
 			children: [
-				t3,
-				t11,
+				t4,
 				t12,
 				t13,
-				t14
+				t14,
+				t15
 			]
 		});
-		$[66] = className;
-		$[67] = dirty;
-		$[68] = disabled;
-		$[69] = errors;
-		$[70] = maxLength;
-		$[71] = onValueChange;
-		$[72] = optionalLabel;
-		$[73] = pending;
-		$[74] = readOnly;
-		$[75] = requiredness;
-		$[76] = state;
-		$[77] = t11;
-		$[78] = t13;
-		$[79] = t3;
-		$[80] = touched;
-		$[81] = value;
-		$[82] = t15;
-	} else t15 = $[82];
-	return t15;
+		$[69] = className;
+		$[70] = dirty;
+		$[71] = disabled;
+		$[72] = errors;
+		$[73] = maxLength;
+		$[74] = onValueChange;
+		$[75] = pending;
+		$[76] = readOnly;
+		$[77] = requiredness;
+		$[78] = state;
+		$[79] = t12;
+		$[80] = t14;
+		$[81] = t4;
+		$[82] = touched;
+		$[83] = value;
+		$[84] = t16;
+	} else t16 = $[84];
+	return t16;
 };
 export { TextField };

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

@@ -1,13 +1,13 @@
 import './text-field.css';// src/components/text-field/text-field.module.scss
-var root = "_root_1kpis_3";
-var group = "_group_1kpis_6";
-var control = "_control_1kpis_71";
-var bar = "_bar_1kpis_94";
-var inlay = "_inlay_1kpis_104";
-var action = "_action_1kpis_115";
-var copyStatus = "_copyStatus_1kpis_131";
-var counter = "_counter_1kpis_139";
-var visuallyHidden = "_visuallyHidden_1kpis_163";
+var root = "_root_1qwga_3";
+var group = "_group_1qwga_6";
+var control = "_control_1qwga_136";
+var bar = "_bar_1qwga_171";
+var inlay = "_inlay_1qwga_181";
+var action = "_action_1qwga_192";
+var copyStatus = "_copyStatus_1qwga_208";
+var counter = "_counter_1qwga_216";
+var visuallyHidden = "_visuallyHidden_1qwga_240";
 var text_field_module_default = {
 	root,
 	group,