@kanso-labs/kanso-ui 0.26.5 → 0.26.6

package/dist/field/index.js

@@ -1,160 +1,12 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../styles/merge.js";
 import { useInsideForm } from "./root.js";
+import { fieldChromeStyles, groupStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, FieldError, FieldErrorContext, Group, Input, InputContext, Label, SelectStateContext, Text, TextArea, TextAreaContext, useSlottedContext } from "react-aria-components";
+import { Button, FieldError, FieldErrorContext, Group, Input, InputContext, Label, SelectStateContext, Text, TextArea, TextAreaContext, VisuallyHidden, useSlottedContext } from "react-aria-components";
 //#region src/field/index.tsx
-const styles = {
-	autosizeCell: {
-		kJuA4N: "x1b1wf8y",
-		$$css: true
-	},
-	box: {
-		kGNEyG: "x1cy8zhl",
-		kWkggS: "x1rrhr5q",
-		kZKoxP: "xnnlda6",
-		kT0f0o: "x16uus16",
-		kVL7Gh: "xbiv7yw",
-		kfmiAY: "xirz1nw",
-		krdFHd: "xzcck0f",
-		kGVxlE: "x89kqus x18rfq6m",
-		kB7OPa: "x9f619",
-		k1xSpc: "x78zum5",
-		kOIVth: "xxj4525",
-		kGO01o: "x18d9i69",
-		kLKAdn: "xi7mcox",
-		kg3NbH: "x790zyz",
-		kVAEAm: "x1n2onr6",
-		kIyJzY: "x1qno0dh",
-		k1ekBW: "xkdsq27",
-		kAMwcw: "xpc4ca7",
-		$$css: true
-	},
-	boxDisabled: {
-		kWkggS: "xepofeg",
-		kGVxlE: "x1pqbjc1",
-		$$css: true
-	},
-	boxError: {
-		kGVxlE: "x1lxxh4i x1d6xoej",
-		$$css: true
-	},
-	boxFixed: {
-		kMv6JI: "xp6n8n2",
-		kGuDYH: "xkucv67",
-		k63SB2: "x14hhc5u",
-		kb6lSQ: "x12utw95",
-		kLWn49: "xvzb9hk",
-		$$css: true
-	},
-	boxFloating: {
-		kMv6JI: "x1ps135g xnc7ww3 x16svsjw",
-		kGuDYH: "x52kfa xys1t9b x1848etk",
-		k63SB2: "xz4f7ai xn9xqko x1c52epr",
-		kb6lSQ: "x19wmx12 x1t00fh7 x1qn8t5l",
-		kLWn49: "xsv50tp x1f5c3pk x181fmp8",
-		$$css: true
-	},
-	boxLeading: {
-		kZCmMZ: "xwde665",
-		$$css: true
-	},
-	boxMultiline: {
-		kZKoxP: "xt7dq6l",
-		kAzted: "xbktkl8",
-		kGO01o: "xqf7pud",
-		$$css: true
-	},
-	boxOutlined: {
-		kWkggS: "xjbqb8w",
-		kT0f0o: "x4gcak0",
-		kVL7Gh: "xqs30sb",
-		kGVxlE: "x1gnnqk1",
-		kMwMTN: "x158cnre x1igw6b7 x1sa41d3",
-		kGO01o: "xzfxn0k",
-		kLKAdn: "x1clyivc",
-		kVAEAm: "x1n2onr6",
-		$$css: true
-	},
-	boxOutlinedDisabled: {
-		kWkggS: "xjbqb8w",
-		kGVxlE: "x1gnnqk1",
-		kMwMTN: "x1ldq0ta",
-		$$css: true
-	},
-	boxOutlinedError: {
-		kMwMTN: "x12voer2 x1h298ve x4ii1qj",
-		$$css: true
-	},
-	boxOutlinedFloating: {
-		kLWn49: "xsv50tp x1f5c3pk xay82u3",
-		$$css: true
-	},
-	boxTrailing: {
-		kwRFfy: "xk163s",
-		$$css: true
-	},
-	column: {
-		kMwMTN: "x1w5n3ug",
-		kzQI83: "x1iyjqo2",
-		k7Eaqz: "xeuugli",
-		kVAEAm: "x1n2onr6",
-		$$css: true
-	},
-	columnDisabled: {
-		kMwMTN: "x1xj74d8",
-		$$css: true
-	},
-	columnDisabledFloating: {
-		kMwMTN: "xspc5gk x19co3pv",
-		$$css: true
-	},
-	columnFloating: {
-		kMwMTN: "x1dfuzvz x6phwhp x19co3pv",
-		$$css: true
-	},
-	input: {
-		k8Qsv1: "x1hgeflb",
-		kWkggS: "xjbqb8w",
-		kMzoRj: "xc342km",
-		kB7OPa: "x9f619",
-		kMwMTN: "x139gbkf",
-		kMv6JI: "x16svsjw",
-		kGuDYH: "x1848etk",
-		k63SB2: "x1c52epr",
-		kzqmXN: "xh8yej3",
-		kb6lSQ: "x1qn8t5l",
-		kLWn49: "xh7dzej",
-		k3XXqK: "x1t137rt",
-		kmVPX3: "x1717udv",
-		$$css: true
-	},
-	inputDisabled: {
-		k8Qsv1: "x7ip5l3",
-		kMwMTN: "x1xj74d8",
-		$$css: true
-	},
-	inputUnderFloatingLabel: {
-		k8Qsv1: "x1mvm7v4 xxqzaim",
-		$$css: true
-	},
-	inputUnderLabel: {
-		keoZOQ: "xwuztrq",
-		$$css: true
-	},
-	textArea: {
-		k1xSpc: "x1lliihq",
-		kVQacm: "xysyzu8",
-		kHenm0: "xtt52l0",
-		$$css: true
-	},
-	textAreaAutosize: {
-		kVQacm: "xb3r6kr",
-		$$css: true
-	}
-};
 const OUTSIDE_BOX = {
 	label: "none",
 	underLabel: false
@@ -203,7 +55,7 @@ function boxContent(label, children, floatingLabel, isPopulated, leading, traili
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(32);
+	const $ = c(35);
 	const { children, floatingLabel, isPopulated, label, leading, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
@@ -214,17 +66,9 @@ function BoxContent(t0) {
 	if ($[0] !== floated || $[1] !== label || $[2] !== leading || $[3] !== outlined || $[4] !== state.isFocusWithin) {
 		t2 = outlined ? /* @__PURE__ */ jsx("fieldset", {
 			"aria-hidden": "true",
-			...{
-				0: { className: "x1r7ld26 x1tfhd1 x1y0btm7 xmkeg23 x9f619 x1yicsit x1b35g6e x9d6959 x10a8y8t xwth0xh x1ghz6dp xeuugli xt970qd x1mhv0kc x47corl x10l6tqk x1qno0dh x1aqzbqr xpc4ca7" },
-				2: { className: "x1r7ld26 x1tfhd1 x1y0btm7 xmkeg23 x9f619 x1yicsit x1b35g6e x9d6959 x10a8y8t xwth0xh x1ghz6dp xeuugli xt970qd x1mhv0kc x47corl x10l6tqk x1qno0dh x1aqzbqr xpc4ca7 x167ah0f" },
-				1: { className: "x1r7ld26 x1tfhd1 x1y0btm7 x9f619 x1yicsit x1b35g6e x9d6959 x10a8y8t xwth0xh x1ghz6dp xeuugli xt970qd x1mhv0kc x47corl x10l6tqk x1qno0dh x1aqzbqr xpc4ca7 xdh2fpr" },
-				3: { className: "x1r7ld26 x1tfhd1 x1y0btm7 x9f619 x1yicsit x1b35g6e x9d6959 x10a8y8t xwth0xh x1ghz6dp xeuugli xt970qd x1mhv0kc x47corl x10l6tqk x1qno0dh x1aqzbqr xpc4ca7 x167ah0f xdh2fpr" }
-			}[!!(leading !== void 0) << 1 | !!state.isFocusWithin << 0],
+			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, state.isFocusWithin && fieldChromeStyles.outlineFocused),
 			children: /* @__PURE__ */ jsx("legend", {
-				...{
-					0: { className: "xqtp20y x14ju556 x193iq5w xb3r6kr x1717udv xlshs6z xuxw1ft" },
-					1: { className: "xqtp20y x14ju556 x193iq5w xb3r6kr x1717udv xlshs6z xuxw1ft ximhkdq" }
-				}[!!floated << 0],
+				...props(fieldChromeStyles.outlineNotch, floated && fieldChromeStyles.outlineNotchOpen),
 				children: floated ? label : null
 			})
 		}) : null;
@@ -238,10 +82,7 @@ function BoxContent(t0) {
 	let t3;
 	if ($[6] !== leading || $[7] !== state.isDisabled) {
 		t3 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x6s0dn4 xkh2ocl x1w5n3ug x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7" },
-				1: { className: "x6s0dn4 xkh2ocl x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7 x1xj74d8" }
-			}[!!state.isDisabled << 0],
+			...props(fieldChromeStyles.icon, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: leading
 		});
 		$[6] = leading;
@@ -250,90 +91,78 @@ function BoxContent(t0) {
 	} else t3 = $[8];
 	let t4;
 	if ($[9] !== floatingLabel || $[10] !== state.isDisabled) {
-		t4 = props(styles.column, floatingLabel && styles.columnFloating, state.isDisabled && (floatingLabel ? styles.columnDisabledFloating : styles.columnDisabled));
+		t4 = props(fieldChromeStyles.column, floatingLabel && fieldChromeStyles.columnFloating, state.isDisabled && (floatingLabel ? fieldChromeStyles.columnDisabledFloating : fieldChromeStyles.columnDisabled));
 		$[9] = floatingLabel;
 		$[10] = state.isDisabled;
 		$[11] = t4;
 	} else t4 = $[11];
 	let t5;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
-			0: { className: "x13vifvy x1o0tod x10l6tqk" },
-			4: { className: "x13vifvy x1o0tod x10l6tqk x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh" },
-			2: { className: "x13vifvy x10l6tqk x10k232c ximhkdq" },
-			6: { className: "x13vifvy x10l6tqk x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10k232c ximhkdq" },
-			1: { className: "x1o0tod x10l6tqk x1qjp6zz" },
-			5: { className: "x1o0tod x10l6tqk x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x1qjp6zz" },
-			3: { className: "x10l6tqk x10k232c ximhkdq x1qjp6zz" },
-			7: { className: "x10l6tqk x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10k232c ximhkdq x1qjp6zz" }
-		};
-		$[12] = t5;
-	} else t5 = $[12];
-	const t6 = t5[!!(floatingLabel && floated) << 2 | !!outlined << 1 | !!(outlined && floated) << 0];
-	let t7;
-	if ($[13] !== label || $[14] !== state || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsx(FieldLabel, {
+	if ($[12] !== floated || $[13] !== floatingLabel || $[14] !== outlined) {
+		t5 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
+		$[12] = floated;
+		$[13] = floatingLabel;
+		$[14] = outlined;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== label || $[17] !== state || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx(FieldLabel, {
 			state,
-			...t6,
+			...t5,
 			children: label
 		});
-		$[13] = label;
-		$[14] = state;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] !== children || $[18] !== t4 || $[19] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[16] = label;
+		$[17] = state;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== children || $[21] !== t4 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
 			...t4,
-			children: [t7, children]
+			children: [t6, children]
 		});
-		$[17] = children;
-		$[18] = t4;
-		$[19] = t7;
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
-	if ($[21] !== state.isDisabled || $[22] !== state.isInvalid || $[23] !== trailing) {
-		t9 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x6s0dn4 xkh2ocl x1w5n3ug x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7" },
-				2: { className: "x6s0dn4 xkh2ocl x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7 x4ii1qj" },
-				1: { className: "x6s0dn4 xkh2ocl x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7 x1xj74d8" },
-				3: { className: "x6s0dn4 xkh2ocl x78zum5 x2lah0s x1pvqxga xl56j7k x1motrhk xkzkux9 xt3l3uh xpc4ca7 x1xj74d8" }
-			}[!!state.isInvalid << 1 | !!state.isDisabled << 0],
+		$[20] = children;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== state.isDisabled || $[25] !== state.isInvalid || $[26] !== trailing) {
+		t8 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...props(fieldChromeStyles.icon, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[21] = state.isDisabled;
-		$[22] = state.isInvalid;
-		$[23] = trailing;
-		$[24] = t9;
-	} else t9 = $[24];
-	let t10;
-	if ($[25] !== t1 || $[26] !== t2 || $[27] !== t3 || $[28] !== t8 || $[29] !== t9 || $[30] !== trigger) {
-		t10 = /* @__PURE__ */ jsxs(BoxContext, {
+		$[24] = state.isDisabled;
+		$[25] = state.isInvalid;
+		$[26] = trailing;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t1 || $[29] !== t2 || $[30] !== t3 || $[31] !== t7 || $[32] !== t8 || $[33] !== trigger) {
+		t9 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
 				t2,
 				trigger,
 				t3,
-				t8,
-				t9
+				t7,
+				t8
 			]
 		});
-		$[25] = t1;
-		$[26] = t2;
-		$[27] = t3;
-		$[28] = t8;
-		$[29] = t9;
-		$[30] = trigger;
-		$[31] = t10;
-	} else t10 = $[31];
-	return t10;
+		$[28] = t1;
+		$[29] = t2;
+		$[30] = t3;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = trigger;
+		$[34] = t9;
+	} else t9 = $[34];
+	return t9;
 }
 function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 	const outlined = variant === "outlined";
-	return (state) => props(styles.box, floatingLabel ? styles.boxFloating : styles.boxFixed, multiline && styles.boxMultiline, leading && styles.boxLeading, trailing && styles.boxTrailing, outlined && styles.boxOutlined, outlined && floatingLabel && styles.boxOutlinedFloating, state.isInvalid && (outlined ? styles.boxOutlinedError : styles.boxError), state.isDisabled && (outlined ? styles.boxOutlinedDisabled : styles.boxDisabled));
+	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
 }
 /**
 * The box a control sits in, filled or outlined, with its label. React
@@ -435,46 +264,29 @@ function FieldBox(t0) {
 * placeholder it was given in every state.
 */
 function FieldInput(t0) {
-	const $ = c(18);
-	const { numeric: t1, placeholder, prefix, suffix, ...props } = t0;
+	const $ = c(19);
+	const { numeric: t1, placeholder, prefix, suffix, ...props$2 } = t0;
 	const numeric = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const T0 = Input;
 	const t2 = placeholder ?? (box.label === "floating" ? " " : void 0);
 	let t3;
 	if ($[0] !== box || $[1] !== numeric) {
-		t3 = (state) => ({
-			0: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv" },
-			8: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq" },
-			4: { className: "xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x1mvm7v4 xxqzaim" },
-			12: { className: "xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq x1mvm7v4 xxqzaim" },
-			2: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xbppi91 xss6m8b" },
-			10: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq xbppi91 xss6m8b" },
-			6: { className: "xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x1mvm7v4 xxqzaim xbppi91 xss6m8b" },
-			14: { className: "xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq x1mvm7v4 xxqzaim xbppi91 xss6m8b" },
-			1: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x7ip5l3 x1xj74d8" },
-			9: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq x7ip5l3 x1xj74d8" },
-			5: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x7ip5l3 x1xj74d8" },
-			13: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq x7ip5l3 x1xj74d8" },
-			3: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xbppi91 xss6m8b x7ip5l3 x1xj74d8" },
-			11: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq xbppi91 xss6m8b x7ip5l3 x1xj74d8" },
-			7: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xbppi91 xss6m8b x7ip5l3 x1xj74d8" },
-			15: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq xbppi91 xss6m8b x7ip5l3 x1xj74d8" }
-		})[!!box.underLabel << 3 | !!(box.label === "floating") << 2 | !!numeric << 1 | !!state.isDisabled << 0];
+		t3 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, numeric && fieldChromeStyles.numeric, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = box;
 		$[1] = numeric;
 		$[2] = t3;
 	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props);
+	const t4 = mergeStatefulStyles(t3, props$2);
 	let t5;
-	if ($[3] !== T0 || $[4] !== props || $[5] !== t2 || $[6] !== t4) {
+	if ($[3] !== T0 || $[4] !== props$2 || $[5] !== t2 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props,
+			...props$2,
 			...t4
 		});
 		$[3] = T0;
-		$[4] = props;
+		$[4] = props$2;
 		$[5] = t2;
 		$[6] = t4;
 		$[7] = t5;
@@ -482,47 +294,46 @@ function FieldInput(t0) {
 	const control = t5;
 	if (prefix === void 0 && suffix === void 0) return control;
 	let t6;
-	if ($[8] !== box || $[9] !== prefix) {
-		t6 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x2lah0s x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej xkzkux9 xt3l3uh xpc4ca7 xuxw1ft" },
-				1: { className: "x2lah0s x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej xkzkux9 xt3l3uh xpc4ca7 xuxw1ft xwuztrq" }
-			}[!!box.underLabel << 0],
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(fieldChromeStyles.affixLine);
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== box || $[10] !== prefix) {
+		t7 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: prefix
 		});
-		$[8] = box;
-		$[9] = prefix;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== box || $[12] !== suffix) {
-		t7 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x2lah0s x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej xkzkux9 xt3l3uh xpc4ca7 xuxw1ft" },
-				1: { className: "x2lah0s x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej xkzkux9 xt3l3uh xpc4ca7 xuxw1ft xwuztrq" }
-			}[!!box.underLabel << 0],
+		$[9] = box;
+		$[10] = prefix;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== box || $[13] !== suffix) {
+		t8 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: suffix
 		});
-		$[11] = box;
-		$[12] = suffix;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== control || $[15] !== t6 || $[16] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("span", {
-			className: "x1pha0wt x78zum5 x14qo01y",
+		$[12] = box;
+		$[13] = suffix;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== control || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("span", {
+			...t6,
 			children: [
-				t6,
+				t7,
 				control,
-				t7
+				t8
 			]
 		});
-		$[14] = control;
-		$[15] = t6;
+		$[15] = control;
 		$[16] = t7;
 		$[17] = t8;
-	} else t8 = $[17];
-	return t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
 }
 /**
 * A field's multi-line text control, in a {@link FieldBox} drawn `multiline`.
@@ -537,8 +348,8 @@ function FieldInput(t0) {
 * of the two is taller.
 */
 function FieldTextArea(t0) {
-	const $ = c(15);
-	const { autosize: t1, placeholder, ...props$1 } = t0;
+	const $ = c(17);
+	const { autosize: t1, placeholder, ...props$5 } = t0;
 	const autosize = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const context = useSlottedContext(TextAreaContext);
@@ -547,21 +358,21 @@ function FieldTextArea(t0) {
 	const t2 = placeholder ?? (box.label === "floating" ? " " : void 0);
 	let t3;
 	if ($[0] !== autosize || $[1] !== box) {
-		t3 = (state) => props(styles.input, box.underLabel && styles.inputUnderLabel, box.label === "floating" && styles.inputUnderFloatingLabel, styles.textArea, autosize && styles.textAreaAutosize, autosize && styles.autosizeCell, state.isDisabled && styles.inputDisabled);
+		t3 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, fieldChromeStyles.textArea, autosize && fieldChromeStyles.textAreaAutosize, autosize && fieldChromeStyles.autosizeCell, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = autosize;
 		$[1] = box;
 		$[2] = t3;
 	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$1);
+	const t4 = mergeStatefulStyles(t3, props$5);
 	let t5;
-	if ($[3] !== T0 || $[4] !== props$1 || $[5] !== t2 || $[6] !== t4) {
+	if ($[3] !== T0 || $[4] !== props$5 || $[5] !== t2 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props$1,
+			...props$5,
 			...t4
 		});
 		$[3] = T0;
-		$[4] = props$1;
+		$[4] = props$5;
 		$[5] = t2;
 		$[6] = t4;
 		$[7] = t5;
@@ -570,34 +381,36 @@ function FieldTextArea(t0) {
 	if (!autosize) return control;
 	let t6;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
-			0: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x1mzt3pk xlshs6z x126k92a x1b1wf8y" },
-			1: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv xwuztrq x1mzt3pk xlshs6z x126k92a x1b1wf8y" }
-		};
+		t6 = props(fieldChromeStyles.autosize);
 		$[8] = t6;
 	} else t6 = $[8];
-	const t7 = t6[!!box.underLabel << 0];
+	let t7;
+	if ($[9] !== box.underLabel) {
+		t7 = props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, fieldChromeStyles.replica, fieldChromeStyles.autosizeCell);
+		$[9] = box.underLabel;
+		$[10] = t7;
+	} else t7 = $[10];
 	let t8;
-	if ($[9] !== t7 || $[10] !== value) {
+	if ($[11] !== t7 || $[12] !== value) {
 		t8 = /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
 			...t7,
 			children: [value, " "]
 		});
-		$[9] = t7;
-		$[10] = value;
-		$[11] = t8;
-	} else t8 = $[11];
+		$[11] = t7;
+		$[12] = value;
+		$[13] = t8;
+	} else t8 = $[13];
 	let t9;
-	if ($[12] !== control || $[13] !== t8) {
+	if ($[14] !== control || $[15] !== t8) {
 		t9 = /* @__PURE__ */ jsxs("div", {
-			className: "xrvj5dj",
+			...t6,
 			children: [control, t8]
 		});
-		$[12] = control;
-		$[13] = t8;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[14] = control;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
 	return t9;
 }
 /**
@@ -610,21 +423,21 @@ function FieldTextArea(t0) {
 * the fill, the underline and the focus indicator, and it lights up while
 * this has focus because the indicator follows focus within.
 */
-function FieldTrigger(props) {
+function FieldTrigger(props$1) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStatefulStyles({ className: "xjbqb8w xc342km x9f619 x1ypdohk x10a8y8t x1t137rt x1717udv x10l6tqk" }, props);
-		$[0] = props;
+	if ($[0] !== props$1) {
+		t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$1);
+		$[0] = props$1;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props || $[3] !== t0) {
+	if ($[2] !== props$1 || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(Button, {
-			...props,
+			...props$1,
 			...t0
 		});
-		$[2] = props;
+		$[2] = props$1;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -647,28 +460,19 @@ function FieldTrigger(props) {
 */
 function FieldValue(t0) {
 	const $ = c(3);
-	const { isFocused: t1, isPlaceholder: t2, ...props } = t0;
+	const { isFocused: t1, isPlaceholder: t2, ...props$4 } = t0;
 	const isFocused = t1 === void 0 ? false : t1;
 	const isPlaceholder = t2 === void 0 ? false : t2;
 	const box = useContext(BoxContext);
 	const hidden = isPlaceholder && box.label === "floating" && !isFocused;
-	const t3 = mergeStyles({
-		0: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft" },
-		4: { className: "x1hgeflb xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft xwuztrq" },
-		2: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft x1w5n3ug" },
-		6: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft xwuztrq x1w5n3ug" },
-		1: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft x19co3pv" },
-		5: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft xwuztrq x19co3pv" },
-		3: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft x19co3pv" },
-		7: { className: "x1hgeflb xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1t137rt x1717udv x6s0dn4 x78zum5 xb3r6kr xlyipyv xuxw1ft xwuztrq x19co3pv" }
-	}[!!box.underLabel << 2 | !!isPlaceholder << 1 | !!hidden << 0], props);
+	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$4);
 	let t4;
-	if ($[0] !== props || $[1] !== t3) {
+	if ($[0] !== props$4 || $[1] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
-			...props,
+			...props$4,
 			...t3
 		});
-		$[0] = props;
+		$[0] = props$4;
 		$[1] = t3;
 		$[2] = t4;
 	} else t4 = $[2];
@@ -700,23 +504,16 @@ function FieldLabel(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { state: t3, ...props } = t0;
-		const { isDisabled: t4, isFocusWithin: t5, isInvalid: t6 } = t3 === void 0 ? NO_STATE : t3;
-		const isDisabled = t4 === void 0 ? false : t4;
-		const isFocusWithin = t5 === void 0 ? false : t5;
-		const isInvalid = t6 === void 0 ? false : t6;
+		const { state: t3, variant: t4, ...props$3 } = t0;
+		const state = t3 === void 0 ? NO_STATE : t3;
+		const variant = t4 === void 0 ? "field" : t4;
+		const { isDisabled: t5, isFocusWithin: t6, isInvalid: t7 } = state;
+		const isDisabled = t5 === void 0 ? false : t5;
+		const isFocusWithin = t6 === void 0 ? false : t6;
+		const isInvalid = t7 === void 0 ? false : t7;
 		T0 = Label;
-		t1 = props;
-		t2 = mergeStyles({
-			0: { className: "x1w5n3ug xkzkux9 xixa3zk xpc4ca7" },
-			4: { className: "xkzkux9 xixa3zk xpc4ca7 x1xj74d8" },
-			2: { className: "xkzkux9 xixa3zk xpc4ca7 x4ii1qj" },
-			6: { className: "xkzkux9 xixa3zk xpc4ca7 x4ii1qj" },
-			1: { className: "xkzkux9 xixa3zk xpc4ca7 x1mxwv8y" },
-			5: { className: "xkzkux9 xixa3zk xpc4ca7 x1mxwv8y" },
-			3: { className: "xkzkux9 xixa3zk xpc4ca7 x1mxwv8y" },
-			7: { className: "xkzkux9 xixa3zk xpc4ca7 x1mxwv8y" }
-		}[!!isDisabled << 2 | !!isInvalid << 1 | !!(!isDisabled && !isInvalid && isFocusWithin) << 0], props);
+		t1 = props$3;
+		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$3);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = t1;
@@ -749,8 +546,8 @@ function FieldLabel(t0) {
 * the field's validation state is read for.
 */
 function FieldMessage(t0) {
-	const $ = c(17);
-	const { characterCount: t1, description, error, inset: t2, maxLength } = t0;
+	const $ = c(21);
+	const { characterCount: t1, characterLimitLabel, description, error, inset: t2, maxLength } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const inset = t2 === void 0 ? true : t2;
 	const validation = useContext(FieldErrorContext);
@@ -758,73 +555,88 @@ function FieldMessage(t0) {
 	const input = useSlottedContext(InputContext);
 	const textArea = useSlottedContext(TextAreaContext);
 	const insideForm = useInsideForm();
-	if (!invalid && description === void 0 && !characterCount && !insideForm) return null;
+	const limit = maxLength === void 0 ? void 0 : characterLimitLabel ?? `Up to ${maxLength} character${maxLength === 1 ? "" : "s"}`;
+	let t3;
+	if ($[0] !== limit) {
+		t3 = limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
+			elementType: "span",
+			children: /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				children: limit
+			})
+		});
+		$[0] = limit;
+		$[1] = t3;
+	} else t3 = $[1];
+	const hidden = t3;
+	if (!invalid && description === void 0 && !characterCount && !insideForm) return hidden;
 	const value = input?.value ?? textArea?.value ?? "";
 	const length = String(value).length;
-	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = {
-			0: { className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1pha0wt x78zum5 xxj4525 x1y88zpp x17jz683" },
-			1: { className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1pha0wt x78zum5 xxj4525 x1y88zpp x17jz683 xboopgi" }
-		};
-		$[0] = t3;
-	} else t3 = $[0];
-	const t4 = t3[!!inset << 0];
+	const hint = invalid ? void 0 : description;
+	let t4;
+	if ($[2] !== hidden || $[3] !== hint || $[4] !== limit) {
+		t4 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
+			slot: "description",
+			...props(fieldChromeStyles.message),
+			children: [hint, limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
+				elementType: "span",
+				children: ` ${limit}`
+			})]
+		});
+		$[2] = hidden;
+		$[3] = hint;
+		$[4] = limit;
+		$[5] = t4;
+	} else t4 = $[5];
+	const described = t4;
 	let t5;
-	if ($[1] !== error || $[2] !== validation) {
-		t5 = validation === null && error !== void 0 ? /* @__PURE__ */ jsx("span", {
-			className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x4ii1qj",
+	if ($[6] !== inset) {
+		t5 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
+		$[6] = inset;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== error || $[9] !== validation) {
+		t6 = validation === null && error !== void 0 ? /* @__PURE__ */ jsx("span", {
+			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
 			children: error
 		}) : /* @__PURE__ */ jsx(FieldError, {
-			className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x4ii1qj",
+			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
 			children: error
 		});
-		$[1] = error;
-		$[2] = validation;
-		$[3] = t5;
-	} else t5 = $[3];
-	let t6;
-	if ($[4] !== description || $[5] !== invalid) {
-		t6 = !invalid && description !== void 0 ? /* @__PURE__ */ jsx(Text, {
-			slot: "description",
-			className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j",
-			children: description
-		}) : null;
-		$[4] = description;
-		$[5] = invalid;
-		$[6] = t6;
-	} else t6 = $[6];
+		$[8] = error;
+		$[9] = validation;
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[7] !== characterCount || $[8] !== invalid || $[9] !== length || $[10] !== maxLength) {
+	if ($[11] !== characterCount || $[12] !== invalid || $[13] !== length || $[14] !== maxLength) {
 		t7 = characterCount ? /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x2lah0s xss6m8b xvc5jky xuxw1ft" },
-				1: { className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x2lah0s xss6m8b xvc5jky xuxw1ft x4ii1qj" }
-			}[!!invalid << 0],
+			"aria-hidden": "true",
+			...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
 			children: maxLength === void 0 ? length : `${length}/${maxLength}`
 		}) : null;
-		$[7] = characterCount;
-		$[8] = invalid;
-		$[9] = length;
-		$[10] = maxLength;
-		$[11] = t7;
-	} else t7 = $[11];
+		$[11] = characterCount;
+		$[12] = invalid;
+		$[13] = length;
+		$[14] = maxLength;
+		$[15] = t7;
+	} else t7 = $[15];
 	let t8;
-	if ($[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+	if ($[16] !== described || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
 		t8 = /* @__PURE__ */ jsxs("div", {
-			...t4,
+			...t5,
 			children: [
-				t5,
 				t6,
+				described,
 				t7
 			]
 		});
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[16] = described;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
 	return t8;
 }
 //#endregion