@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/field/index.js

@@ -1,11 +1,12 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../styles/merge.js";
+import { useMessages } from "../i18n/index.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, TextContext, VisuallyHidden, useSlottedContext } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button, FieldError, FieldErrorContext, Group, Input, InputContext, Label, SelectStateContext, Text, TextArea, TextAreaContext, TextContext, VisuallyHidden, useLocale, useSlottedContext } from "react-aria-components";
 //#region src/field/index.tsx
 const OUTSIDE_BOX = {
 	label: "none",
@@ -34,10 +35,11 @@ const BOX_CONTROLS = {
 	}
 };
 const BoxContext = createContext(OUTSIDE_BOX);
-function boxContent(label, children, floatingLabel, isPopulated, leading, multiline, trailing, trigger, variant) {
+function boxContent(label, children, floatingLabel, isPopulated, isRequired, leading, multiline, trailing, trigger, variant) {
 	return (state) => /* @__PURE__ */ jsx(BoxContent, {
 		floatingLabel,
 		isPopulated,
+		isRequired,
 		label,
 		leading,
 		multiline,
@@ -56,96 +58,99 @@ function boxContent(label, children, floatingLabel, isPopulated, leading, multil
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(40);
-	const { children, floatingLabel, isPopulated, label, leading, multiline, state, trailing, trigger, variant } = t0;
+	const $ = c(42);
+	const { children, floatingLabel, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
 	const outlined = variant === "outlined";
 	const floated = !floatingLabel || state.isFocusWithin || populated;
 	const t1 = BOX_CONTROLS[variant][floatingLabel ? "floating" : "fixed"];
 	let t2;
-	if ($[0] !== floated || $[1] !== label || $[2] !== leading || $[3] !== outlined || $[4] !== state.isFocusWithin || $[5] !== trailing) {
+	if ($[0] !== floated || $[1] !== isRequired || $[2] !== label || $[3] !== leading || $[4] !== outlined || $[5] !== state.isFocusWithin || $[6] !== trailing) {
 		t2 = outlined ? /* @__PURE__ */ jsx("fieldset", {
 			"aria-hidden": "true",
 			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, trailing !== void 0 && fieldChromeStyles.outlineTrailing, state.isFocusWithin && fieldChromeStyles.outlineFocused),
 			children: /* @__PURE__ */ jsx("legend", {
 				...props(fieldChromeStyles.outlineNotch, floated && fieldChromeStyles.outlineNotchOpen),
-				children: floated ? label : null
+				children: floated ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, isRequired ? REQUIRED_MARK : null] }) : null
 			})
 		}) : null;
 		$[0] = floated;
-		$[1] = label;
-		$[2] = leading;
-		$[3] = outlined;
-		$[4] = state.isFocusWithin;
-		$[5] = trailing;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[1] = isRequired;
+		$[2] = label;
+		$[3] = leading;
+		$[4] = outlined;
+		$[5] = state.isFocusWithin;
+		$[6] = trailing;
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[7] !== leading || $[8] !== multiline || $[9] !== outlined || $[10] !== state.isDisabled) {
+	if ($[8] !== leading || $[9] !== multiline || $[10] !== outlined || $[11] !== state.isDisabled) {
 		t3 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: leading
 		});
-		$[7] = leading;
-		$[8] = multiline;
-		$[9] = outlined;
-		$[10] = state.isDisabled;
-		$[11] = t3;
-	} else t3 = $[11];
+		$[8] = leading;
+		$[9] = multiline;
+		$[10] = outlined;
+		$[11] = state.isDisabled;
+		$[12] = t3;
+	} else t3 = $[12];
 	let t4;
-	if ($[12] !== floatingLabel || $[13] !== state.isDisabled) {
+	if ($[13] !== floatingLabel || $[14] !== state.isDisabled) {
 		t4 = props(fieldChromeStyles.column, floatingLabel && fieldChromeStyles.columnFloating, state.isDisabled && (floatingLabel ? fieldChromeStyles.columnDisabledFloating : fieldChromeStyles.columnDisabled));
-		$[12] = floatingLabel;
-		$[13] = state.isDisabled;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[13] = floatingLabel;
+		$[14] = state.isDisabled;
+		$[15] = t4;
+	} else t4 = $[15];
 	let t5;
-	if ($[15] !== floated || $[16] !== floatingLabel || $[17] !== outlined) {
+	if ($[16] !== floated || $[17] !== floatingLabel || $[18] !== outlined) {
 		t5 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
-		$[15] = floated;
-		$[16] = floatingLabel;
-		$[17] = outlined;
-		$[18] = t5;
-	} else t5 = $[18];
+		$[16] = floated;
+		$[17] = floatingLabel;
+		$[18] = outlined;
+		$[19] = t5;
+	} else t5 = $[19];
 	let t6;
-	if ($[19] !== label || $[20] !== state || $[21] !== t5) {
+	if ($[20] !== isRequired || $[21] !== label || $[22] !== state || $[23] !== t5) {
 		t6 = /* @__PURE__ */ jsx(FieldLabel, {
+			isRequired,
 			state,
 			...t5,
 			children: label
 		});
-		$[19] = label;
-		$[20] = state;
-		$[21] = t5;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[20] = isRequired;
+		$[21] = label;
+		$[22] = state;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
 	let t7;
-	if ($[23] !== children || $[24] !== t4 || $[25] !== t6) {
+	if ($[25] !== children || $[26] !== t4 || $[27] !== t6) {
 		t7 = /* @__PURE__ */ jsxs("div", {
 			...t4,
 			children: [t6, children]
 		});
-		$[23] = children;
-		$[24] = t4;
-		$[25] = t6;
-		$[26] = t7;
-	} else t7 = $[26];
+		$[25] = children;
+		$[26] = t4;
+		$[27] = t6;
+		$[28] = t7;
+	} else t7 = $[28];
 	let t8;
-	if ($[27] !== multiline || $[28] !== outlined || $[29] !== state.isDisabled || $[30] !== state.isInvalid || $[31] !== trailing) {
+	if ($[29] !== multiline || $[30] !== outlined || $[31] !== state.isDisabled || $[32] !== state.isInvalid || $[33] !== trailing) {
 		t8 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[27] = multiline;
-		$[28] = outlined;
-		$[29] = state.isDisabled;
-		$[30] = state.isInvalid;
-		$[31] = trailing;
-		$[32] = t8;
-	} else t8 = $[32];
+		$[29] = multiline;
+		$[30] = outlined;
+		$[31] = state.isDisabled;
+		$[32] = state.isInvalid;
+		$[33] = trailing;
+		$[34] = t8;
+	} else t8 = $[34];
 	let t9;
-	if ($[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t7 || $[37] !== t8 || $[38] !== trigger) {
+	if ($[35] !== t1 || $[36] !== t2 || $[37] !== t3 || $[38] !== t7 || $[39] !== t8 || $[40] !== trigger) {
 		t9 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
@@ -156,19 +161,19 @@ function BoxContent(t0) {
 				t8
 			]
 		});
-		$[33] = t1;
-		$[34] = t2;
-		$[35] = t3;
-		$[36] = t7;
-		$[37] = t8;
-		$[38] = trigger;
-		$[39] = t9;
-	} else t9 = $[39];
+		$[35] = t1;
+		$[36] = t2;
+		$[37] = t3;
+		$[38] = t7;
+		$[39] = t8;
+		$[40] = trigger;
+		$[41] = t9;
+	} else t9 = $[41];
 	return t9;
 }
 function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 	const outlined = variant === "outlined";
-	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, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.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, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), outlined && state.isHovered && (state.isInvalid ? fieldChromeStyles.boxOutlinedErrorHovered : fieldChromeStyles.boxOutlinedHovered), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
 }
 /**
 * The box a control sits in, filled or outlined, with its label. React
@@ -179,11 +184,12 @@ function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 * on a button rather than an input — passes the two states itself.
 */
 function FieldBox(t0) {
-	const $ = c(28);
+	const $ = c(30);
 	let T0;
 	let children;
 	let floatingLabel;
 	let isPopulated;
+	let isRequired;
 	let label;
 	let leading;
 	let multiline;
@@ -193,16 +199,17 @@ function FieldBox(t0) {
 	let trigger;
 	let variant;
 	if ($[0] !== t0) {
-		const { children: t3, floatingLabel: t4, isPopulated: t5, label: t6, leading: t7, multiline: t8, trailing: t9, trigger: t10, variant: t11, ...props } = t0;
+		const { children: t3, floatingLabel: t4, isPopulated: t5, isRequired: t6, label: t7, leading: t8, multiline: t9, trailing: t10, trigger: t11, variant: t12, ...props } = t0;
 		children = t3;
 		isPopulated = t5;
-		label = t6;
-		leading = t7;
-		trailing = t9;
-		trigger = t10;
+		label = t7;
+		leading = t8;
+		trailing = t10;
+		trigger = t11;
 		floatingLabel = t4 === void 0 ? true : t4;
-		multiline = t8 === void 0 ? false : t8;
-		variant = t11 === void 0 ? "filled" : t11;
+		isRequired = t6 === void 0 ? false : t6;
+		multiline = t9 === void 0 ? false : t9;
+		variant = t12 === void 0 ? "filled" : t12;
 		T0 = Group;
 		t1 = props;
 		t2 = mergeStatefulStyles(boxStyles(floatingLabel, multiline, leading !== void 0, trailing !== void 0, variant), props);
@@ -211,55 +218,58 @@ function FieldBox(t0) {
 		$[2] = children;
 		$[3] = floatingLabel;
 		$[4] = isPopulated;
-		$[5] = label;
-		$[6] = leading;
-		$[7] = multiline;
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = trailing;
-		$[11] = trigger;
-		$[12] = variant;
+		$[5] = isRequired;
+		$[6] = label;
+		$[7] = leading;
+		$[8] = multiline;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = trailing;
+		$[12] = trigger;
+		$[13] = variant;
 	} else {
 		T0 = $[1];
 		children = $[2];
 		floatingLabel = $[3];
 		isPopulated = $[4];
-		label = $[5];
-		leading = $[6];
-		multiline = $[7];
-		t1 = $[8];
-		t2 = $[9];
-		trailing = $[10];
-		trigger = $[11];
-		variant = $[12];
+		isRequired = $[5];
+		label = $[6];
+		leading = $[7];
+		multiline = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		trailing = $[11];
+		trigger = $[12];
+		variant = $[13];
 	}
 	let t3;
-	if ($[13] !== children || $[14] !== floatingLabel || $[15] !== isPopulated || $[16] !== label || $[17] !== leading || $[18] !== multiline || $[19] !== trailing || $[20] !== trigger || $[21] !== variant) {
-		t3 = boxContent(label, children, floatingLabel, isPopulated, leading, multiline, trailing, trigger, variant);
-		$[13] = children;
-		$[14] = floatingLabel;
-		$[15] = isPopulated;
-		$[16] = label;
-		$[17] = leading;
-		$[18] = multiline;
-		$[19] = trailing;
-		$[20] = trigger;
-		$[21] = variant;
-		$[22] = t3;
-	} else t3 = $[22];
+	if ($[14] !== children || $[15] !== floatingLabel || $[16] !== isPopulated || $[17] !== isRequired || $[18] !== label || $[19] !== leading || $[20] !== multiline || $[21] !== trailing || $[22] !== trigger || $[23] !== variant) {
+		t3 = boxContent(label, children, floatingLabel, isPopulated, isRequired, leading, multiline, trailing, trigger, variant);
+		$[14] = children;
+		$[15] = floatingLabel;
+		$[16] = isPopulated;
+		$[17] = isRequired;
+		$[18] = label;
+		$[19] = leading;
+		$[20] = multiline;
+		$[21] = trailing;
+		$[22] = trigger;
+		$[23] = variant;
+		$[24] = t3;
+	} else t3 = $[24];
 	let t4;
-	if ($[23] !== T0 || $[24] !== t1 || $[25] !== t2 || $[26] !== t3) {
+	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t3) {
 		t4 = /* @__PURE__ */ jsx(T0, {
 			...t1,
 			...t2,
 			children: t3
 		});
-		$[23] = T0;
-		$[24] = t1;
-		$[25] = t2;
-		$[26] = t3;
-		$[27] = t4;
-	} else t4 = $[27];
+		$[25] = T0;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+	} else t4 = $[29];
 	return t4;
 }
 /**
@@ -275,7 +285,7 @@ function FieldBox(t0) {
 */
 function FieldInput(t0) {
 	const $ = c(19);
-	const { numeric: t1, placeholder, prefix, suffix, ...props$1 } = t0;
+	const { numeric: t1, placeholder, prefix, suffix, ...props$3 } = t0;
 	const numeric = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const T0 = Input;
@@ -287,16 +297,16 @@ function FieldInput(t0) {
 		$[1] = numeric;
 		$[2] = t3;
 	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$1);
+	const t4 = mergeStatefulStyles(t3, props$3);
 	let t5;
-	if ($[3] !== T0 || $[4] !== props$1 || $[5] !== t2 || $[6] !== t4) {
+	if ($[3] !== T0 || $[4] !== props$3 || $[5] !== t2 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props$1,
+			...props$3,
 			...t4
 		});
 		$[3] = T0;
-		$[4] = props$1;
+		$[4] = props$3;
 		$[5] = t2;
 		$[6] = t4;
 		$[7] = t5;
@@ -469,21 +479,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$4) {
+function FieldTrigger(props$5) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props$4) {
-		t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$4);
-		$[0] = props$4;
+	if ($[0] !== props$5) {
+		t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$5);
+		$[0] = props$5;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props$4 || $[3] !== t0) {
+	if ($[2] !== props$5 || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(Button, {
-			...props$4,
+			...props$5,
 			...t0
 		});
-		$[2] = props$4;
+		$[2] = props$5;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -507,19 +517,19 @@ function FieldTrigger(props$4) {
 */
 function FieldValue(t0) {
 	const $ = c(3);
-	const { isFocused: t1, isPlaceholder: t2, ...props$5 } = t0;
+	const { isFocused: t1, isPlaceholder: t2, ...props$1 } = 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(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$5);
+	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$1);
 	let t4;
-	if ($[0] !== props$5 || $[1] !== t3) {
+	if ($[0] !== props$1 || $[1] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
-			...props$5,
+			...props$1,
 			...t3
 		});
-		$[0] = props$5;
+		$[0] = props$1;
 		$[1] = t3;
 		$[2] = t4;
 	} else t4 = $[2];
@@ -548,43 +558,59 @@ function useFieldPopulated() {
 * its control through context.
 */
 const NO_STATE = {};
+const REQUIRED_MARK = /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	children: "*"
+});
 function FieldLabel(t0) {
-	const $ = c(8);
+	const $ = c(12);
 	let T0;
+	let children;
+	let isRequired;
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		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;
+		const { children: t3, isRequired: t4, state: t5, variant: t6, ...props$4 } = t0;
+		children = t3;
+		isRequired = t4 === void 0 ? false : t4;
+		const state = t5 === void 0 ? NO_STATE : t5;
+		const variant = t6 === void 0 ? "field" : t6;
+		const { isDisabled: t7, isFocusWithin: t8, isInvalid: t9 } = state;
+		const isDisabled = t7 === void 0 ? false : t7;
+		const isFocusWithin = t8 === void 0 ? false : t8;
+		const isInvalid = t9 === void 0 ? false : t9;
 		T0 = Label;
-		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);
+		t1 = props$4;
+		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$4);
 		$[0] = t0;
 		$[1] = T0;
-		$[2] = t1;
-		$[3] = t2;
+		$[2] = children;
+		$[3] = isRequired;
+		$[4] = t1;
+		$[5] = t2;
 	} else {
 		T0 = $[1];
-		t1 = $[2];
-		t2 = $[3];
+		children = $[2];
+		isRequired = $[3];
+		t1 = $[4];
+		t2 = $[5];
 	}
-	let t3;
-	if ($[4] !== T0 || $[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsx(T0, {
+	const t3 = isRequired ? REQUIRED_MARK : null;
+	let t4;
+	if ($[6] !== T0 || $[7] !== children || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(T0, {
 			...t1,
-			...t2
+			...t2,
+			children: [children, t3]
 		});
-		$[4] = T0;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+		$[6] = T0;
+		$[7] = children;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 }
 /**
 * The line under a field: the error while there is one, the description
@@ -596,37 +622,47 @@ function FieldLabel(t0) {
 * the field's validation state is read for.
 */
 function FieldMessage(t0) {
-	const $ = c(27);
+	const $ = c(32);
 	const { characterCount: t1, characterLimitLabel, description, error, errorId, inset: t2, maxLength } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const inset = t2 === void 0 ? true : t2;
 	const validation = useContext(FieldErrorContext);
 	const invalid = error !== void 0 || (validation?.isInvalid ?? false);
+	const { locale } = useLocale();
+	const messages = useMessages();
 	const input = useSlottedContext(InputContext);
 	const textArea = useSlottedContext(TextAreaContext);
 	const insideForm = useInsideForm();
 	const text = useContext(TextContext);
-	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, {
+	if ($[0] !== characterLimitLabel || $[1] !== maxLength || $[2] !== messages) {
+		t3 = maxLength === void 0 ? void 0 : characterLimitLabel ?? messages.characterLimit(maxLength);
+		$[0] = characterLimitLabel;
+		$[1] = maxLength;
+		$[2] = messages;
+		$[3] = t3;
+	} else t3 = $[3];
+	const limit = t3;
+	let t4;
+	if ($[4] !== limit) {
+		t4 = 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;
+		$[4] = limit;
+		$[5] = t4;
+	} else t4 = $[5];
+	const hidden = t4;
 	if (!invalid && description === void 0 && !characterCount && !insideForm) return hidden;
 	const value = input?.value ?? textArea?.value ?? "";
 	const length = String(value).length;
 	const hint = invalid ? void 0 : description;
-	let t4;
-	if ($[2] !== hidden || $[3] !== hint || $[4] !== limit) {
-		t4 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
+	let t5;
+	if ($[6] !== hidden || $[7] !== hint || $[8] !== limit) {
+		t5 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
 			slot: "description",
 			...props(fieldChromeStyles.message),
 			children: [hint, limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
@@ -634,22 +670,22 @@ function FieldMessage(t0) {
 				children: ` ${limit}`
 			})]
 		});
-		$[2] = hidden;
-		$[3] = hint;
-		$[4] = limit;
-		$[5] = t4;
-	} else t4 = $[5];
-	const described = t4;
+		$[6] = hidden;
+		$[7] = hint;
+		$[8] = limit;
+		$[9] = t5;
+	} else t5 = $[9];
+	const described = t5;
 	const errorSlot = text !== null && typeof text === "object" && "slots" in text && text.slots?.errorMessage !== void 0;
-	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
-		$[6] = t5;
-	} else t5 = $[6];
-	const messageStyles = t5;
 	let t6;
-	if ($[7] !== error || $[8] !== errorId || $[9] !== errorSlot) {
-		t6 = errorSlot ? /* @__PURE__ */ jsx(Text, {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
+		$[10] = t6;
+	} else t6 = $[10];
+	const messageStyles = t6;
+	let t7;
+	if ($[11] !== error || $[12] !== errorId || $[13] !== errorSlot) {
+		t7 = errorSlot ? /* @__PURE__ */ jsx(Text, {
 			slot: "errorMessage",
 			...messageStyles,
 			children: error
@@ -658,59 +694,69 @@ function FieldMessage(t0) {
 			...messageStyles,
 			children: error
 		});
-		$[7] = error;
-		$[8] = errorId;
-		$[9] = errorSlot;
-		$[10] = t6;
-	} else t6 = $[10];
-	const written = t6;
-	let t7;
-	if ($[11] !== inset) {
-		t7 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
-		$[11] = inset;
-		$[12] = t7;
-	} else t7 = $[12];
+		$[11] = error;
+		$[12] = errorId;
+		$[13] = errorSlot;
+		$[14] = t7;
+	} else t7 = $[14];
+	const written = t7;
 	let t8;
-	if ($[13] !== error || $[14] !== validation || $[15] !== written) {
-		t8 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
-			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
-			children: error
-		});
-		$[13] = error;
-		$[14] = validation;
-		$[15] = written;
+	if ($[15] !== inset) {
+		t8 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
+		$[15] = inset;
 		$[16] = t8;
 	} else t8 = $[16];
 	let t9;
-	if ($[17] !== characterCount || $[18] !== invalid || $[19] !== length || $[20] !== maxLength) {
-		t9 = characterCount ? /* @__PURE__ */ jsx("span", {
+	if ($[17] !== error || $[18] !== validation || $[19] !== written) {
+		t9 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
+			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
+			children: error
+		});
+		$[17] = error;
+		$[18] = validation;
+		$[19] = written;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== characterCount || $[22] !== invalid || $[23] !== length || $[24] !== locale || $[25] !== maxLength) {
+		t10 = characterCount ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
-			children: maxLength === void 0 ? length : `${length}/${maxLength}`
+			children: countIn(locale, length, maxLength)
 		}) : null;
-		$[17] = characterCount;
-		$[18] = invalid;
-		$[19] = length;
-		$[20] = maxLength;
-		$[21] = t9;
-	} else t9 = $[21];
-	let t10;
-	if ($[22] !== described || $[23] !== t7 || $[24] !== t8 || $[25] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			...t7,
+		$[21] = characterCount;
+		$[22] = invalid;
+		$[23] = length;
+		$[24] = locale;
+		$[25] = maxLength;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== described || $[28] !== t10 || $[29] !== t8 || $[30] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			...t8,
 			children: [
-				t8,
+				t9,
 				described,
-				t9
+				t10
 			]
 		});
-		$[22] = described;
-		$[23] = t7;
-		$[24] = t8;
-		$[25] = t9;
-		$[26] = t10;
-	} else t10 = $[26];
-	return t10;
+		$[27] = described;
+		$[28] = t10;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
+	return t11;
+}
+const counterFormatters = /* @__PURE__ */ new Map();
+function countIn(locale, length, maxLength) {
+	let formatter = counterFormatters.get(locale);
+	if (formatter === void 0) {
+		formatter = new Intl.NumberFormat(locale);
+		counterFormatters.set(locale, formatter);
+	}
+	return maxLength === void 0 ? formatter.format(length) : `${formatter.format(length)}/${formatter.format(maxLength)}`;
 }
 //#endregion
 export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldSegments, FieldTextArea, FieldTrigger, FieldValue };