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

package/dist/components/number-field/number-input.js

@@ -1,4 +1,3 @@
-import { Button } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
@@ -6,6 +5,7 @@ import { useFieldState } from "../field/use-field-state.js";
 import { detachHiddenInput } from "../field/hidden-input.js";
 import { focusControlOnRim } from "../field/rim-focus.js";
 import { InputError, InputLabel, InputPartsContext, InputPending, useInputPartsContext } from "../field/input-parts.js";
+import { renderAs } from "../../lib/render-as.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import number_field_module_default from "./number-field.module.js";
 import { c } from "react/compiler-runtime";
@@ -18,11 +18,11 @@ import { NumberField } from "@base-ui/react/number-field";
 * and projecting its state onto every part.
 *
 * @example
-* <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">…</NumberInput.Root>
+* <NumberInput.Root value={hours} onValueChange={setHours}>…</NumberInput.Root>
 */
 var NumberInputRoot = (t0) => {
 	const $ = c(44);
-	const { value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending: t1, state, name, id, className, children } = t0;
+	const { value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, errors, dirty, touched, pending: t1, state, name, id, className, children } = t0;
 	const pending = t1 === void 0 ? false : t1;
 	const ids = Field.useIds();
 	const locale = useLocale();
@@ -53,38 +53,37 @@ var NumberInputRoot = (t0) => {
 	} else t3 = $[9];
 	const field = useFieldState(t3);
 	let t4;
-	if ($[10] !== errors || $[11] !== field.phase || $[12] !== field.state || $[13] !== optionalLabel) {
+	if ($[10] !== errors || $[11] !== field.phase || $[12] !== field.state) {
 		t4 = {
 			state: field.state,
 			errors,
-			optionalLabel,
 			phase: field.phase
 		};
 		$[10] = errors;
 		$[11] = field.phase;
 		$[12] = field.state;
-		$[13] = optionalLabel;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[13] = t4;
+	} else t4 = $[13];
 	const t5 = field.disabled;
 	const t6 = field.invalid;
-	let t7;
-	if ($[15] !== className) {
-		t7 = clsx(number_field_module_default.root, className);
-		$[15] = className;
-		$[16] = t7;
-	} else t7 = $[16];
+	const t7 = field.state.requiredness;
 	let t8;
-	if ($[17] !== field.state) {
-		t8 = fieldStateAttributes(field.state);
-		$[17] = field.state;
-		$[18] = t8;
-	} else t8 = $[18];
-	const t9 = requiredness === "required";
-	const t10 = name ?? ids.controlId;
-	let t11;
-	if ($[19] !== children || $[20] !== field.disabled || $[21] !== format || $[22] !== id || $[23] !== locale || $[24] !== max || $[25] !== min || $[26] !== onValueChange || $[27] !== readOnly || $[28] !== step || $[29] !== t10 || $[30] !== t9 || $[31] !== value) {
-		t11 = /* @__PURE__ */ jsx(NumberField.Root, {
+	if ($[14] !== className) {
+		t8 = clsx(number_field_module_default.root, className);
+		$[14] = className;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== field.state) {
+		t9 = fieldStateAttributes(field.state);
+		$[16] = field.state;
+		$[17] = t9;
+	} else t9 = $[17];
+	const t10 = requiredness === "required";
+	const t11 = name ?? ids.controlId;
+	let t12;
+	if ($[18] !== children || $[19] !== field.disabled || $[20] !== format || $[21] !== id || $[22] !== locale || $[23] !== max || $[24] !== min || $[25] !== onValueChange || $[26] !== readOnly || $[27] !== step || $[28] !== t10 || $[29] !== t11 || $[30] !== value) {
+		t12 = /* @__PURE__ */ jsx(NumberField.Root, {
 			value,
 			onValueChange,
 			locale,
@@ -94,59 +93,61 @@ var NumberInputRoot = (t0) => {
 			step,
 			disabled: field.disabled,
 			readOnly,
-			required: t9,
-			name: t10,
+			required: t10,
+			name: t11,
 			inputRef: detachHiddenInput,
 			id,
 			className: number_field_module_default.wrapper,
 			children
 		});
-		$[19] = children;
-		$[20] = field.disabled;
-		$[21] = format;
-		$[22] = id;
-		$[23] = locale;
-		$[24] = max;
-		$[25] = min;
-		$[26] = onValueChange;
-		$[27] = readOnly;
-		$[28] = step;
-		$[29] = t10;
-		$[30] = t9;
-		$[31] = value;
-		$[32] = t11;
-	} else t11 = $[32];
-	let t12;
-	if ($[33] !== dirty || $[34] !== field.disabled || $[35] !== field.invalid || $[36] !== t11 || $[37] !== t7 || $[38] !== t8 || $[39] !== touched) {
-		t12 = /* @__PURE__ */ jsx(Field.Root, {
+		$[18] = children;
+		$[19] = field.disabled;
+		$[20] = format;
+		$[21] = id;
+		$[22] = locale;
+		$[23] = max;
+		$[24] = min;
+		$[25] = onValueChange;
+		$[26] = readOnly;
+		$[27] = step;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = value;
+		$[31] = t12;
+	} else t12 = $[31];
+	let t13;
+	if ($[32] !== dirty || $[33] !== field.disabled || $[34] !== field.invalid || $[35] !== field.state.requiredness || $[36] !== t12 || $[37] !== t8 || $[38] !== t9 || $[39] !== touched) {
+		t13 = /* @__PURE__ */ jsx(Field.Root, {
 			disabled: t5,
 			invalid: t6,
+			requiredness: t7,
 			dirty,
 			touched,
-			className: t7,
-			...t8,
-			children: t11
+			className: t8,
+			...t9,
+			children: t12
 		});
-		$[33] = dirty;
-		$[34] = field.disabled;
-		$[35] = field.invalid;
-		$[36] = t11;
-		$[37] = t7;
-		$[38] = t8;
+		$[32] = dirty;
+		$[33] = field.disabled;
+		$[34] = field.invalid;
+		$[35] = field.state.requiredness;
+		$[36] = t12;
+		$[37] = t8;
+		$[38] = t9;
 		$[39] = touched;
-		$[40] = t12;
-	} else t12 = $[40];
-	let t13;
-	if ($[41] !== t12 || $[42] !== t4) {
-		t13 = /* @__PURE__ */ jsx(InputPartsContext, {
+		$[40] = t13;
+	} else t13 = $[40];
+	let t14;
+	if ($[41] !== t13 || $[42] !== t4) {
+		t14 = /* @__PURE__ */ jsx(InputPartsContext, {
 			value: t4,
-			children: t12
+			children: t13
 		});
-		$[41] = t12;
+		$[41] = t13;
 		$[42] = t4;
-		$[43] = t13;
-	} else t13 = $[43];
-	return t13;
+		$[43] = t14;
+	} else t14 = $[43];
+	return t14;
 };
 /**
 * The bordered box holding the control, its stepper buttons and its inlays.
@@ -317,80 +318,125 @@ var NumberInputInput = (t0) => {
 	return t2;
 };
 /**
-* The icon-only button that steps the value down.
+* Hands a stepper's props to the button it renders, without the name the
+* stepper gives itself when the caller gave none, so the button names itself.
 *
 * @example
-* <NumberInput.Decrement label="Decrease"><RemoveIcon /></NumberInput.Decrement>
+* <BaseNumberField.Decrement render={stepRender(render, props["aria-label"])} />
+*/
+var stepRender = (render, ownLabel) => ({ "aria-label": stepperLabel, ...props }) => renderAs(render)(ownLabel === void 0 ? props : {
+	...props,
+	"aria-label": stepperLabel
+});
+/**
+* The button that steps the value down. It renders whichever button it is
+* given.
+*
+* @example
+* <NumberInput.Decrement
+* 	render={
+* 		<IconButton label="Decrease" variant="tertiary" size="sm">
+* 			<RemoveIcon />
+* 		</IconButton>
+* 	}
+* />
 */
 var NumberInputDecrement = (t0) => {
-	const $ = c(7);
-	const { label, className, children } = t0;
+	const $ = c(12);
+	let T0;
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(number_field_module_default.action, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(NumberField.Decrement, {});
-		$[2] = t2;
-	} else t2 = $[2];
 	let t3;
-	if ($[3] !== children || $[4] !== label || $[5] !== t1) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: children,
-			label,
-			variant: "tertiary",
-			size: "sm",
+	if ($[0] !== t0) {
+		const { render, className, ...props } = t0;
+		T0 = NumberField.Decrement;
+		if ($[5] !== className) {
+			t1 = clsx(number_field_module_default.action, className);
+			$[5] = className;
+			$[6] = t1;
+		} else t1 = $[6];
+		t2 = props;
+		t3 = stepRender(render, props["aria-label"]);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		T0 = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
 			className: t1,
-			render: t2
+			...t2,
+			render: t3
 		});
-		$[3] = children;
-		$[4] = label;
-		$[5] = t1;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
 /**
-* The icon-only button that steps the value up.
+* The button that steps the value up. It renders whichever button it is
+* given.
 *
 * @example
-* <NumberInput.Increment label="Increase"><AddIcon /></NumberInput.Increment>
+* <NumberInput.Increment
+* 	render={
+* 		<IconButton label="Increase" variant="tertiary" size="sm">
+* 			<AddIcon />
+* 		</IconButton>
+* 	}
+* />
 */
 var NumberInputIncrement = (t0) => {
-	const $ = c(7);
-	const { label, className, children } = t0;
+	const $ = c(12);
+	let T0;
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(number_field_module_default.action, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(NumberField.Increment, {});
-		$[2] = t2;
-	} else t2 = $[2];
 	let t3;
-	if ($[3] !== children || $[4] !== label || $[5] !== t1) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: children,
-			label,
-			variant: "tertiary",
-			size: "sm",
+	if ($[0] !== t0) {
+		const { render, className, ...props } = t0;
+		T0 = NumberField.Increment;
+		if ($[5] !== className) {
+			t1 = clsx(number_field_module_default.action, className);
+			$[5] = className;
+			$[6] = t1;
+		} else t1 = $[6];
+		t2 = props;
+		t3 = stepRender(render, props["aria-label"]);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		T0 = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
 			className: t1,
-			render: t2
+			...t2,
+			render: t3
 		});
-		$[3] = children;
-		$[4] = label;
-		$[5] = t1;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
 /**
 * The parts of a number input: the field frame, a group carrying the border
@@ -400,16 +446,24 @@ var NumberInputIncrement = (t0) => {
 * description too. `Error` renders the errors `Root` was given.
 *
 * @example
-* <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
-* 	<NumberInput.Label>Hours</NumberInput.Label>
+* <NumberInput.Root value={hours} onValueChange={setHours} requiredness="optional">
+* 	<NumberInput.Label>Hours <Field.Requiredness optionalLabel="optional" /></NumberInput.Label>
 * 	<NumberInput.Group>
-* 		<NumberInput.Decrement label="Decrease">
-* 			<RemoveIcon />
-* 		</NumberInput.Decrement>
+* 		<NumberInput.Decrement
+* 			render={
+* 				<IconButton label="Decrease" variant="tertiary" size="sm">
+* 					<RemoveIcon />
+* 				</IconButton>
+* 			}
+* 		/>
 * 		<NumberInput.Input aria-roledescription="Number field" />
-* 		<NumberInput.Increment label="Increase">
-* 			<AddIcon />
-* 		</NumberInput.Increment>
+* 		<NumberInput.Increment
+* 			render={
+* 				<IconButton label="Increase" variant="tertiary" size="sm">
+* 					<AddIcon />
+* 				</IconButton>
+* 			}
+* 		/>
 * 	</NumberInput.Group>
 * 	<NumberInput.Error />
 * </NumberInput.Root>

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

@@ -1,97 +1,190 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_8k2z3_3 {
+  ._root_1dlq9_3 {
     min-inline-size: 0;
   }
-  ._group_8k2z3_6 {
+  ._group_1dlq9_6 {
     display: flex;
     flex-wrap: wrap;
     gap: var(--otp-field-gap, var(--sys-unit-4));
     align-items: center;
   }
-  ._slot_8k2z3_12 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._slot_1dlq9_12 {
+    --_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);
+  }
+  ._slot_1dlq9_12 {
+    --_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);
-  }
-  ._slot_8k2z3_12 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._slot_8k2z3_12[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);
+  }
+  ._slot_1dlq9_12 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._slot_1dlq9_12[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._slot_8k2z3_12 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._slot_1dlq9_12 {
+      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);
     }
   }
-  ._slot_8k2z3_12:hover:not([data-disabled], [data-readonly]), ._slot_8k2z3_12[data-focused], ._slot_8k2z3_12[data-popup-open] {
-    border-color: var(--sys-color-primary);
-  }
-  ._slot_8k2z3_12[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);
-  }
-  ._slot_8k2z3_12[data-pending] {
+  ._slot_1dlq9_12:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._slot_1dlq9_12[data-focused], ._slot_1dlq9_12[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));
+  }
+  ._slot_1dlq9_12:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._slot_1dlq9_12[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);
+  }
+  ._slot_1dlq9_12[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._slot_8k2z3_12[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);
-  }
-  ._slot_8k2z3_12[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));
+  }
+  ._slot_1dlq9_12[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));
+  }
+  ._slot_1dlq9_12[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)
+    );
   }
-  ._slot_8k2z3_12::-webkit-search-cancel-button {
+  ._slot_1dlq9_12::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._slot_8k2z3_12::-webkit-search-decoration {
+  ._slot_1dlq9_12::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._slot_8k2z3_12 {
+  ._slot_1dlq9_12 {
     display: inline-flex;
   }
-  ._slot_8k2z3_12::placeholder {
-    color: var(--field-placeholder-fg);
-  }
-  ._slot_8k2z3_12 {
+  ._slot_1dlq9_12::placeholder {
+    color: var(--_field-placeholder-fg);
+  }
+  ._slot_1dlq9_12:autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._slot_1dlq9_12:-webkit-autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._slot_1dlq9_12: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;
+  }
+  ._slot_1dlq9_12:-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;
+  }
+  ._slot_1dlq9_12 {
     justify-content: center;
     inline-size: var(--otp-field-slot-size, var(--sys-unit-24));
     min-block-size: var(--otp-field-slot-size, var(--sys-unit-24));
-    padding-inline: 0;
+    padding-inline: var(--otp-field-slot-pad-x, 0);
     font-variant-numeric: tabular-nums;
     text-align: center;
     cursor: text;
     line-height: normal;
   }
-  ._separator_8k2z3_92 {
-    inline-size: var(--sys-unit-8);
-    block-size: 1px;
+  ._separator_1dlq9_185 {
+    inline-size: var(--otp-field-separator-inline-size, var(--sys-unit-8));
+    block-size: var(--otp-field-separator-block-size, 1px);
     background: var(--otp-field-separator-bg, var(--sys-color-border));
   }
 }

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { FieldProps } from "../field/index.ts";
+import { type FieldProps } from "../field/index.ts";
 import { type OtpInputRootProps, type OtpSlotLabel } from "./otp-input.tsx";
 export type OtpFieldProps = FieldProps & Omit<OtpInputRootProps, keyof FieldProps | "children"> & Readonly<{
     /** Names a slot past the first by its 1-based position, such as "character 2 of 6". */
@@ -19,4 +19,4 @@ export type OtpFieldProps = FieldProps & Omit<OtpInputRootProps, keyof FieldProp
  * 	length={6}
  * />
  */
-export declare const OtpField: ({ label, description, slotLabel, ...rootProps }: OtpFieldProps) => ReactNode;
+export declare const OtpField: ({ label, description, slotLabel, optionalLabel, ...rootProps }: OtpFieldProps) => ReactNode;