themelia-react-ui 2.0.5 → 2.0.6

package/dist/base/repeaters.js

@@ -1,42 +1,43 @@
 "use client";
 import { d as e } from "../ui-provider-C-74NVLc.js";
 import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-B6kKb8jB.js";
+import { t as n } from "../utils-DhuoqFy4.js";
 import { t as r } from "../affordance-geometry.generated-P-aVJisu.js";
-import { n as i } from "../buttons-BedGfygC.js";
-import { a, c as o } from "../typography-BQnine1k.js";
-import { t as s } from "../structure-DuxKl954.js";
-import { t as c } from "../interaction-recipes-XR9ZpVYL.js";
-import { t as l } from "../input-CvyDQlY7.js";
-import { t as u } from "../form-field-BriWAXyg.js";
-import { d } from "../text-inputs-B1culiSK.js";
-import { forwardRef as f, memo as p, useCallback as m, useId as h, useMemo as g, useReducer as _, useRef as v, useState as y } from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GripVertical as S, Plus as C, Trash2 as w, X as T } from "lucide-react";
-import { useController as E, useFieldArray as D, useFormContext as O } from "react-hook-form";
-import { DndContext as k, KeyboardSensor as A, PointerSensor as j, closestCenter as M, useSensor as N, useSensors as P } from "@dnd-kit/core";
-import { SortableContext as ee, sortableKeyboardCoordinates as te, useSortable as F, verticalListSortingStrategy as ne } from "@dnd-kit/sortable";
-import { CSS as I } from "@dnd-kit/utilities";
+import { n as i } from "../buttons-DeW0bQeK.js";
+import { a, c as o } from "../typography-C7-YMW1S.js";
+import { t as s } from "../structure-DZJ2wbAU.js";
+import { t as c } from "../interaction-recipes-4wZ2tvfb.js";
+import { t as l } from "../input-7KAc7XQL.js";
+import { t as u } from "../form-field-CAPdwdnZ.js";
+import { d } from "../text-inputs-jdkS3ReG.js";
+import { n as f } from "../field-control-attributes-B6i335wr.js";
+import { forwardRef as p, memo as m, useCallback as h, useId as g, useMemo as _, useReducer as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { GripVertical as C, Plus as w, Trash2 as T, X as E } from "lucide-react";
+import { useController as D, useFieldArray as O, useFormContext as k } from "react-hook-form";
+import { DndContext as A, KeyboardSensor as j, PointerSensor as M, closestCenter as N, useSensor as P, useSensors as F } from "@dnd-kit/core";
+import { SortableContext as I, sortableKeyboardCoordinates as L, useSortable as R, verticalListSortingStrategy as z } from "@dnd-kit/sortable";
+import { CSS as B } from "@dnd-kit/utilities";
 //#region src/components/base/repeaters/repeaters.strings.ts
-var L = {
+var V = {
 	emptyState: "No items added yet.",
 	addItem: "Add item",
 	removeAriaLabel: "Remove item"
-}, R = {
-	emptyState: L.emptyState,
-	addButton: L.addItem,
-	removeAriaLabel: L.removeAriaLabel,
+}, H = {
+	emptyState: V.emptyState,
+	addButton: V.addItem,
+	removeAriaLabel: V.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function re({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, hideRemove: s, disabled: l, strings: u, actionSize: d, onRemove: f, renderRow: p }) {
-	let m = F({
+function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, hideRemove: s, disabled: l, strings: u, actionSize: d, onRemove: f, renderRow: p }) {
+	let m = R({
 		id: e.id,
 		disabled: l || !r
 	}), h = r ? m.isDragging : !1, g = r ? {
-		transform: I.Transform.toString(m.transform),
+		transform: B.Transform.toString(m.transform),
 		transition: m.transition,
 		opacity: h ? .6 : 1
-	} : void 0, _ = r ? m.setNodeRef : void 0, v = r ? m.attributes : {}, y = r ? m.listeners : void 0, C = r ? /* @__PURE__ */ b(i, {
+	} : void 0, _ = r ? m.setNodeRef : void 0, v = r ? m.attributes : {}, y = r ? m.listeners : void 0, b = r ? /* @__PURE__ */ x(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
@@ -47,11 +48,11 @@ function re({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 		className: n("repeater--drag-handle", "shrink-0", `text-muted-foreground ${c.rowHover}`, "cursor-grab active:cursor-grabbing"),
 		...v,
 		...y,
-		children: /* @__PURE__ */ b(S, {
+		children: /* @__PURE__ */ x(C, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : null, E = s ? null : o === "icon-button" ? /* @__PURE__ */ b(i, {
+	}) : null, w = s ? null : o === "icon-button" ? /* @__PURE__ */ x(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
@@ -61,11 +62,11 @@ function re({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 		disabled: l,
 		onClick: () => f(t),
 		className: "repeater--remove shrink-0",
-		children: /* @__PURE__ */ b(w, {
+		children: /* @__PURE__ */ x(T, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : /* @__PURE__ */ b(i, {
+	}) : /* @__PURE__ */ x(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
@@ -75,113 +76,113 @@ function re({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 		disabled: l,
 		onClick: () => f(t),
 		className: n("repeater--remove", "shrink-0", "text-muted-foreground hover:text-destructive"),
-		children: /* @__PURE__ */ b(T, {
+		children: /* @__PURE__ */ x(E, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
 	});
-	return a === "card" ? /* @__PURE__ */ b("div", {
+	return a === "card" ? /* @__PURE__ */ x("div", {
 		ref: _,
 		style: g,
 		"data-repeater-item-id": e.id,
 		className: n("repeater--item", "relative rounded-surface border border-border bg-card text-card-foreground p-surface"),
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "flex items-start gap-space-md",
 			children: [
-				C,
-				/* @__PURE__ */ b("div", {
+				b,
+				/* @__PURE__ */ x("div", {
 					className: "min-w-0 flex-1",
 					children: p(e, {
 						index: t,
 						isDragging: h
 					})
 				}),
-				E
+				w
 			]
 		})
-	}) : /* @__PURE__ */ x("div", {
+	}) : /* @__PURE__ */ S("div", {
 		ref: _,
 		style: g,
 		"data-repeater-item-id": e.id,
 		className: "repeater--item flex items-start gap-space-md",
 		children: [
-			C,
-			/* @__PURE__ */ b("div", {
+			b,
+			/* @__PURE__ */ x("div", {
 				className: "min-w-0 flex-1",
 				children: p(e, {
 					index: t,
 					isDragging: h
 				})
 			}),
-			E
+			w
 		]
 	});
 }
-function z({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: f = "inline", removeVariant: p = "ghost", hideRemove: h = !1, hideAdd: _ = !1, disabled: v = !1, strings: y, className: S }) {
-	let w = t(R, y), { defaultScale: T } = e(), E = T ?? "md", D = P(N(j, { activationConstraint: { distance: 4 } }), N(A, { coordinateGetter: te })), O = m((e) => {
+function U({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: f = "inline", removeVariant: p = "ghost", hideRemove: m = !1, hideAdd: g = !1, disabled: v = !1, strings: y, className: b }) {
+	let C = t(H, y), { defaultScale: T } = e(), E = T ?? "md", D = F(P(M, { activationConstraint: { distance: 4 } }), P(j, { coordinateGetter: L })), O = h((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
 		let i = r.findIndex((e) => e.id === t.id), a = r.findIndex((e) => e.id === n.id);
 		i < 0 || a < 0 || u?.(i, a);
-	}, [r, u]), F = g(() => r.map((e) => e.id), [r]), I = /* @__PURE__ */ b(s, {
+	}, [r, u]), k = _(() => r.map((e) => e.id), [r]), R = /* @__PURE__ */ x(s, {
 		gap: "md",
 		className: "repeater--list",
-		children: r.map((e, t) => /* @__PURE__ */ b(re, {
+		children: r.map((e, t) => /* @__PURE__ */ x(ee, {
 			item: e,
 			index: t,
 			sortable: d,
 			rowVariant: f,
 			removeVariant: p,
-			hideRemove: h,
+			hideRemove: m,
 			disabled: v,
-			strings: w,
+			strings: C,
 			actionSize: E,
 			onRemove: l,
 			renderRow: a
 		}, e.id))
 	});
-	return /* @__PURE__ */ x(s, {
+	return /* @__PURE__ */ S(s, {
 		gap: "lg",
-		className: n("repeater--component", S),
-		children: [r.length === 0 ? /* @__PURE__ */ b("div", {
+		className: n("repeater--component", b),
+		children: [r.length === 0 ? /* @__PURE__ */ x("div", {
 			className: "repeater--empty rounded-surface border border-dashed border-border p-surface",
-			children: /* @__PURE__ */ b(o, {
+			children: /* @__PURE__ */ x(o, {
 				type: "secondary",
-				children: w.emptyState
+				children: C.emptyState
 			})
-		}) : d ? /* @__PURE__ */ b(k, {
+		}) : d ? /* @__PURE__ */ x(A, {
 			sensors: D,
-			collisionDetection: M,
+			collisionDetection: N,
 			onDragEnd: O,
-			children: /* @__PURE__ */ b(ee, {
-				items: F,
-				strategy: ne,
-				children: I
+			children: /* @__PURE__ */ x(I, {
+				items: k,
+				strategy: z,
+				children: R
 			})
-		}) : I, !_ && /* @__PURE__ */ x(i, {
+		}) : R, !g && /* @__PURE__ */ S(i, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "outline",
 			disabled: v,
 			onClick: c,
 			className: "repeater--add self-start",
-			children: [/* @__PURE__ */ b(C, { className: "size-icon" }), w.addButton]
+			children: [/* @__PURE__ */ x(w, { className: "size-icon" }), C.addButton]
 		})]
 	});
 }
-z.displayName = "Repeater";
+U.displayName = "Repeater";
 //#endregion
 //#region src/components/base/repeaters/string-repeater.utils.ts
-function B(e, t, n) {
+function W(e, t, n) {
 	let r = [...e], [i] = r.splice(t, 1);
 	return i === void 0 ? [...e] : (r.splice(n, 0, i), r);
 }
 //#endregion
 //#region src/components/base/repeaters/string-repeater.tsx
-function V(e, t) {
+function G(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function ie(e, t, n, r, i) {
+function te(e, t, n, r, i) {
 	let a = /* @__PURE__ */ new Map(), o = i;
 	return e.forEach((e, n) => {
 		let r = a.get(e) ?? [], i = t[n];
@@ -191,7 +192,7 @@ function ie(e, t, n, r, i) {
 		nextId: o
 	};
 }
-function H(e, t, n, r = 0) {
+function K(e, t, n, r = 0) {
 	let i = t.map((e, t) => `${n}-row-${r + t}`);
 	return {
 		name: e,
@@ -203,7 +204,7 @@ function H(e, t, n, r = 0) {
 		pendingInternalValues: null
 	};
 }
-function U(e, t) {
+function q(e, t) {
 	if (t.type === "commit") return {
 		...e,
 		values: t.values,
@@ -211,13 +212,13 @@ function U(e, t) {
 		nextId: t.nextId ?? e.nextId,
 		pendingInternalValues: t.values
 	};
-	if (t.name !== e.name) return H(t.name, t.values, e.prefix, e.nextId);
-	if (e.pendingInternalValues && V(t.values, e.pendingInternalValues)) return {
+	if (t.name !== e.name) return K(t.name, t.values, e.prefix, e.nextId);
+	if (e.pendingInternalValues && G(t.values, e.pendingInternalValues)) return {
 		...e,
 		lastExternalValues: [...t.values],
 		pendingInternalValues: null
 	};
-	let n = ie(e.values, e.ids, t.values, e.prefix, e.nextId);
+	let n = te(e.values, e.ids, t.values, e.prefix, e.nextId);
 	return {
 		...e,
 		values: [...t.values],
@@ -227,28 +228,28 @@ function U(e, t) {
 		pendingInternalValues: null
 	};
 }
-function ae(e, t, n) {
-	let [r, i] = _(U, void 0, () => H(e, t, n)), a = r.name !== e || !V(t, r.lastExternalValues), o = {
+function ne(e, t, n) {
+	let [r, i] = v(q, void 0, () => K(e, t, n)), a = r.name !== e || !G(t, r.lastExternalValues), o = {
 		type: "sync",
 		name: e,
 		values: t
-	}, s = a ? U(r, o) : r;
+	}, s = a ? q(r, o) : r;
 	return a && i(o), {
 		state: s,
 		dispatch: i
 	};
 }
-var W = {
+var J = {
 	placeholder: "Enter value",
 	addButton: "Add item",
 	dragHandleAriaLabel: "Drag to reorder",
-	...L
+	...V
 };
-function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderField: o, strings: s, className: c }) {
-	let u = t(W, s), { control: d } = O(), { field: f, fieldState: p } = E({
+function Y({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderField: o, strings: s, className: c }) {
+	let u = t(J, s), { control: d } = k(), { field: f, fieldState: p } = D({
 		control: d,
 		name: e
-	}), m = Array.isArray(f.value) ? f.value : [], g = !!(r || p.invalid), _ = h().replace(/:/g, ""), { state: v, dispatch: y } = ae(e, m, _), x = (e, t, n) => {
+	}), m = Array.isArray(f.value) ? f.value : [], h = !!(r || p.invalid), _ = g().replace(/:/g, ""), { state: v, dispatch: y } = ne(e, m, _), b = (e, t, n) => {
 		y({
 			type: "commit",
 			values: e,
@@ -257,26 +258,26 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 		}), f.onChange(e);
 	}, S = (e, t) => {
 		let n = [...v.values];
-		n[e] = t, x(n, v.ids);
+		n[e] = t, b(n, v.ids);
 	}, C = () => {
 		let e = `${_}-row-${v.nextId}`;
-		x([...v.values, ""], [...v.ids, e], v.nextId + 1);
+		b([...v.values, ""], [...v.ids, e], v.nextId + 1);
 	}, w = (e) => {
-		x(v.values.filter((t, n) => n !== e), v.ids.filter((t, n) => n !== e));
+		b(v.values.filter((t, n) => n !== e), v.ids.filter((t, n) => n !== e));
 	}, T = (e, t) => {
-		let n = B(v.values, e, t), r = B(v.ids, e, t);
-		x(n, r);
-	}, D = v.values.map((e, t) => ({
+		let n = W(v.values, e, t), r = W(v.ids, e, t);
+		b(n, r);
+	}, E = v.values.map((e, t) => ({
 		id: v.ids[t],
 		value: e
 	}));
-	return /* @__PURE__ */ b(z, {
+	return /* @__PURE__ */ x(U, {
 		...a ? {
 			sortable: !0,
 			onMove: T
 		} : { sortable: !1 },
 		className: n("string-repeater--component", c),
-		items: D,
+		items: E,
 		disabled: i,
 		onAdd: C,
 		onRemove: w,
@@ -292,13 +293,13 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 				index: n,
 				name: `${e}.${n}`,
 				value: t.value,
-				invalid: g,
+				invalid: h,
 				disabled: i,
 				onValueChange: (e) => S(n, e),
 				onBlur: f.onBlur,
 				ref: n === 0 ? f.ref : void 0
 			};
-			return o ? o(r) : /* @__PURE__ */ b(l, {
+			return o ? o(r) : /* @__PURE__ */ x(l, {
 				ref: r.ref,
 				name: r.name,
 				value: r.value,
@@ -311,20 +312,20 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 		}
 	});
 }
-G.displayName = "StringRepeater";
+Y.displayName = "StringRepeater";
 //#endregion
 //#region src/components/base/repeaters/object-repeater.tsx
-var K = {
+var X = {
 	addButton: "Add item",
 	dragHandleAriaLabel: "Drag to reorder",
-	...L
+	...V
 };
-function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1, renderField: c, strings: f, className: p }) {
-	let h = t(K, f), { control: g, register: _ } = O(), { fields: v, append: y, remove: x, move: S } = D({
+function Z({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1, renderField: c, strings: f, className: p }) {
+	let m = t(X, f), { control: g, register: _ } = k(), { fields: v, append: y, remove: b, move: S } = O({
 		control: g,
 		name: e
-	}), C = m(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
-	return /* @__PURE__ */ b(z, {
+	}), C = h(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
+	return /* @__PURE__ */ x(U, {
 		...o ? {
 			sortable: !0,
 			onMove: (e, t) => S(e, t)
@@ -335,19 +336,19 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1,
 		removeVariant: "ghost",
 		disabled: a,
 		onAdd: () => y(C()),
-		onRemove: (e) => x(e),
+		onRemove: (e) => b(e),
 		strings: {
-			emptyState: h.emptyState,
-			addButton: h.addButton,
-			removeAriaLabel: h.removeAriaLabel,
-			dragHandleAriaLabel: h.dragHandleAriaLabel
+			emptyState: m.emptyState,
+			addButton: m.addButton,
+			removeAriaLabel: m.removeAriaLabel,
+			dragHandleAriaLabel: m.dragHandleAriaLabel
 		},
-		renderRow: (t, { index: n }) => /* @__PURE__ */ b(s, {
+		renderRow: (t, { index: n }) => /* @__PURE__ */ x(s, {
 			gap: "lg",
 			className: "object-repeater--fields",
 			children: r.map((t) => {
 				let r = `${e}.${n}.${t.name}`, o = _(r);
-				return c ? /* @__PURE__ */ b("div", {
+				return c ? /* @__PURE__ */ x("div", {
 					className: "object-repeater--field",
 					children: c(t, {
 						index: n,
@@ -356,19 +357,19 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1,
 						invalid: !!i,
 						disabled: a
 					})
-				}, t.name) : /* @__PURE__ */ b(u, {
+				}, t.name) : /* @__PURE__ */ x(u, {
 					label: t.label,
 					required: t.required,
 					hint: t.hint,
 					htmlFor: r,
-					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
+					children: t.type === "textarea" ? /* @__PURE__ */ x(d, {
 						...o,
 						id: r,
 						placeholder: t.placeholder,
 						minRows: 3,
 						invalid: i,
 						disabled: a
-					}) : /* @__PURE__ */ b(l, {
+					}) : /* @__PURE__ */ x(l, {
 						...o,
 						id: r,
 						type: t.type || "text",
@@ -381,10 +382,10 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1,
 		})
 	});
 }
-q.displayName = "ObjectRepeater";
+Z.displayName = "ObjectRepeater";
 //#endregion
 //#region src/components/base/repeaters/key-value-editor.tsx
-var oe = {
+var re = {
 	keyLabel: "Key",
 	valueLabel: "Value",
 	keyPlaceholder: "key",
@@ -392,17 +393,17 @@ var oe = {
 	addButton: "Add row",
 	removeRowAriaLabel: "Remove row",
 	emptyState: "No rows yet."
-}, J = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2, 10), se = p(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: i, valueLabel: o, invalid: s, onKeyChange: c, onValueChange: u }) {
+}, Q = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2, 10), ie = m(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: i, valueLabel: o, invalid: s, onKeyChange: c, onValueChange: u }) {
 	let { id: d, key: f, value: p } = e;
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ S("div", {
 		className: n("key-value-editor--row", "grid grid-cols-1 @md/key-value-editor:grid-cols-2 gap-space-md"),
-		children: [/* @__PURE__ */ x("div", {
+		children: [/* @__PURE__ */ S("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!i && /* @__PURE__ */ b(a, {
+			children: [!!i && /* @__PURE__ */ x(a, {
 				htmlFor: `${d}-key`,
 				className: "text-inherit @md/key-value-editor:sr-only",
 				children: i
-			}), /* @__PURE__ */ b(l, {
+			}), /* @__PURE__ */ x(l, {
 				id: `${d}-key`,
 				"aria-label": i || t,
 				value: f ?? "",
@@ -410,13 +411,13 @@ var oe = {
 				onChange: (e) => c(d, e.target.value),
 				invalid: s
 			})]
-		}), /* @__PURE__ */ x("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!o && /* @__PURE__ */ b(a, {
+			children: [!!o && /* @__PURE__ */ x(a, {
 				htmlFor: `${d}-value`,
 				className: "text-inherit @md/key-value-editor:sr-only",
 				children: o
-			}), /* @__PURE__ */ b(l, {
+			}), /* @__PURE__ */ x(l, {
 				id: `${d}-value`,
 				"aria-label": o || r,
 				value: p ?? "",
@@ -426,116 +427,122 @@ var oe = {
 			})]
 		})]
 	});
-}), Y = f(function({ value: i, onValueChange: o, invalid: s, sortable: c = !1, strings: l }, u) {
-	let d = t(oe, l), { defaultScale: f } = e(), p = v(!1), [h, g] = y(() => i && Object.keys(i).length > 0 ? Object.entries(i).map(([e, t]) => ({
-		id: J(),
+}), $ = p(function({ value: i, onValueChange: o, invalid: s, sortable: c = !1, strings: l, id: u, "aria-label": d, "aria-labelledby": p, "aria-describedby": m, "aria-invalid": g }, _) {
+	let v = t(re, l), { invalid: C, ariaInvalid: w } = f(s, g), { defaultScale: T } = e(), E = y(!1), [D, O] = b(() => i && Object.keys(i).length > 0 ? Object.entries(i).map(([e, t]) => ({
+		id: Q(),
 		key: e,
 		value: String(t ?? "")
 	})) : [{
-		id: J(),
+		id: Q(),
 		key: "",
 		value: ""
-	}]), _ = m((e) => {
+	}]), k = h((e) => {
 		let t = {};
 		e.forEach(({ key: e, value: n }) => {
 			e.trim() !== "" && (t[e] = n ?? "");
-		}), p.current = !0, o?.(t), queueMicrotask(() => {
-			p.current = !1;
+		}), E.current = !0, o?.(t), queueMicrotask(() => {
+			E.current = !1;
 		});
-	}, [o]), S = m((e, t) => {
-		g((n) => {
+	}, [o]), A = h((e, t) => {
+		O((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				key: t
 			} : n);
-			return _(r), r;
+			return k(r), r;
 		});
-	}, [_]), C = m((e, t) => {
-		g((n) => {
+	}, [k]), j = h((e, t) => {
+		O((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				value: t
 			} : n);
-			return _(r), r;
+			return k(r), r;
 		});
-	}, [_]), w = m(() => {
-		g((e) => {
+	}, [k]), M = h(() => {
+		O((e) => {
 			let t = [...e, {
-				id: J(),
+				id: Q(),
 				key: "",
 				value: ""
 			}];
-			return _(t), t;
+			return k(t), t;
 		});
-	}, [_]), T = m((e) => {
-		g((t) => {
+	}, [k]), N = h((e) => {
+		O((t) => {
 			let n = t.filter((t, n) => n !== e), r = n.length ? n : [{
-				id: J(),
+				id: Q(),
 				key: "",
 				value: ""
 			}];
-			return _(r), r;
+			return k(r), r;
 		});
-	}, [_]), E = m((e, t) => {
-		g((n) => {
+	}, [k]), P = h((e, t) => {
+		O((n) => {
 			let r = [...n], [i] = r.splice(e, 1);
-			return r.splice(t, 0, i), _(r), r;
+			return r.splice(t, 0, i), k(r), r;
 		});
-	}, [_]), D = !!d.keyLabel || !!d.valueLabel, O = r.actionGutter[f === "sm" || f === "lg" ? f : "md"], k = {
-		left: O.start,
-		right: O.end
-	}, A = c ? k.left : "", j = k.right, M = c ? {
+	}, [k]), F = !!v.keyLabel || !!v.valueLabel, I = r.actionGutter[T === "sm" || T === "lg" ? T : "md"], L = {
+		left: I.start,
+		right: I.end
+	}, R = c ? L.left : "", z = L.right, B = c ? {
 		sortable: !0,
-		onMove: E
+		onMove: P
 	} : { sortable: !1 };
-	return /* @__PURE__ */ x("div", {
-		ref: u,
+	return /* @__PURE__ */ S("div", {
+		ref: _,
+		id: u,
+		role: "group",
+		"aria-label": d,
+		"aria-labelledby": p,
+		"aria-describedby": m,
+		"aria-invalid": w,
 		className: "key-value-editor--component @container/key-value-editor space-y-space-sm",
-		children: [D && /* @__PURE__ */ x("div", {
+		children: [F && /* @__PURE__ */ S("div", {
 			"data-action-gutter": !0,
-			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", A, j),
-			children: [/* @__PURE__ */ b("div", { children: !!d.keyLabel && /* @__PURE__ */ b(a, {
+			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", R, z),
+			children: [/* @__PURE__ */ x("div", { children: !!v.keyLabel && /* @__PURE__ */ x(a, {
 				className: "flex items-center text-inherit",
-				children: d.keyLabel
-			}) }), /* @__PURE__ */ b("div", { children: !!d.valueLabel && /* @__PURE__ */ b(a, {
+				children: v.keyLabel
+			}) }), /* @__PURE__ */ x("div", { children: !!v.valueLabel && /* @__PURE__ */ x(a, {
 				className: "flex items-center text-inherit",
-				children: d.valueLabel
+				children: v.valueLabel
 			}) })]
-		}), /* @__PURE__ */ b(z, {
-			...M,
-			items: h,
-			onAdd: w,
-			onRemove: T,
+		}), /* @__PURE__ */ x(U, {
+			...B,
+			items: D,
+			onAdd: M,
+			onRemove: N,
 			strings: {
-				emptyState: d.emptyState,
-				addButton: d.addButton,
-				removeAriaLabel: d.removeRowAriaLabel
+				emptyState: v.emptyState,
+				addButton: v.addButton,
+				removeAriaLabel: v.removeRowAriaLabel
 			},
-			renderRow: (e) => /* @__PURE__ */ b(se, {
+			renderRow: (e) => /* @__PURE__ */ x(ie, {
 				row: e,
-				keyPlaceholder: d.keyPlaceholder,
-				valuePlaceholder: d.valuePlaceholder,
-				keyLabel: d.keyLabel,
-				valueLabel: d.valueLabel,
-				invalid: s,
-				onKeyChange: S,
-				onValueChange: C
+				keyPlaceholder: v.keyPlaceholder,
+				valuePlaceholder: v.valuePlaceholder,
+				keyLabel: v.keyLabel,
+				valueLabel: v.valueLabel,
+				invalid: C,
+				onKeyChange: A,
+				onValueChange: j
 			})
 		})]
 	});
 });
-Y.displayName = "KeyValueEditor";
+$.displayName = "KeyValueEditor";
 //#endregion
 //#region src/components/base/repeaters/localized-string-field.tsx
-function X({ name: e, type: t = "text", placeholder: r, primaryLocale: i, secondaryLocale: a, activeLocale: o, invalid: s, className: c }) {
-	let { register: u } = O(), f = `${e}.${o === "primary" ? i : a}`;
-	return t === "textarea" ? /* @__PURE__ */ b(d, {
+function ae({ name: e, type: t = "text", placeholder: r, primaryLocale: i, secondaryLocale: a, activeLocale: o, invalid: s, className: c }) {
+	let { register: u } = k(), f = `${e}.${o === "primary" ? i : a}`;
+	return t === "textarea" ? /* @__PURE__ */ x(d, {
 		...u(f),
 		placeholder: r,
 		minRows: 3,
 		invalid: s,
 		className: n("localized-string-field--component", c)
-	}, f) : /* @__PURE__ */ b(l, {
+	}, f) : /* @__PURE__ */ x(l, {
 		...u(f),
 		type: t === "number" ? "number" : "text",
 		placeholder: r,
@@ -543,29 +550,29 @@ function X({ name: e, type: t = "text", placeholder: r, primaryLocale: i, second
 		className: n("localized-string-field--component", c)
 	}, f);
 }
-X.displayName = "LocalizedStringField";
+ae.displayName = "LocalizedStringField";
 //#endregion
 //#region src/components/base/repeaters/localized-object-field.tsx
-function Z({ name: e, fields: t, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, className: c }) {
-	let { register: f } = O(), p = a === "primary" ? r : i;
-	return /* @__PURE__ */ b("div", {
+function oe({ name: e, fields: t, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, className: c }) {
+	let { register: f } = k(), p = a === "primary" ? r : i;
+	return /* @__PURE__ */ x("div", {
 		className: n("localized-object-field--component w-full rounded-surface border border-border p-surface", c),
-		children: /* @__PURE__ */ b(s, {
+		children: /* @__PURE__ */ x(s, {
 			gap: "lg",
 			children: t.map((t) => {
 				let n = `${e}.${p}.${t.name}`;
-				return /* @__PURE__ */ b(u, {
+				return /* @__PURE__ */ x(u, {
 					label: t.label,
 					htmlFor: n,
 					required: t.required,
 					className: "w-full",
-					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
+					children: t.type === "textarea" ? /* @__PURE__ */ x(d, {
 						...f(n),
 						id: n,
 						placeholder: t.placeholder,
 						minRows: 3,
 						invalid: o
-					}) : /* @__PURE__ */ b(l, {
+					}) : /* @__PURE__ */ x(l, {
 						...f(n),
 						id: n,
 						type: t.type === "number" ? "number" : "text",
@@ -577,26 +584,26 @@ function Z({ name: e, fields: t, primaryLocale: r, secondaryLocale: i, activeLoc
 		})
 	});
 }
-Z.displayName = "LocalizedObjectField";
+oe.displayName = "LocalizedObjectField";
 //#endregion
 //#region src/components/base/repeaters/localized-string-repeater.tsx
-var Q = {
+var se = {
 	placeholder: "Enter value",
-	addButton: L.addItem,
-	emptyState: L.emptyState,
-	removeAriaLabel: L.removeAriaLabel,
+	addButton: V.addItem,
+	emptyState: V.emptyState,
+	removeAriaLabel: V.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function $({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, disabled: s = !1, sortable: c = !1, strings: l, className: u }) {
-	let f = t(Q, l), p = `${e}.${a === "primary" ? r : i}`;
-	return /* @__PURE__ */ b(G, {
+function ce({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, disabled: s = !1, sortable: c = !1, strings: l, className: u }) {
+	let f = t(se, l), p = `${e}.${a === "primary" ? r : i}`;
+	return /* @__PURE__ */ x(Y, {
 		name: p,
 		sortable: c,
 		invalid: o,
 		disabled: s,
 		className: n("localized-string-repeater--component", u),
 		strings: f,
-		renderField: (e) => /* @__PURE__ */ b(d, {
+		renderField: (e) => /* @__PURE__ */ x(d, {
 			ref: e.ref,
 			name: e.name,
 			value: e.value,
@@ -609,8 +616,8 @@ function $({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, inv
 		})
 	});
 }
-$.displayName = "LocalizedStringRepeater";
+ce.displayName = "LocalizedStringRepeater";
 //#endregion
-export { Y as KeyValueEditor, Z as LocalizedObjectField, X as LocalizedStringField, $ as LocalizedStringRepeater, q as ObjectRepeater, z as Repeater, G as StringRepeater, Q as defaultLocalizedStringRepeaterStrings, K as defaultObjectRepeaterStrings, R as defaultRepeaterPrimitiveStrings, L as defaultRepeaterStrings, W as defaultStringRepeaterStrings };
+export { $ as KeyValueEditor, oe as LocalizedObjectField, ae as LocalizedStringField, ce as LocalizedStringRepeater, Z as ObjectRepeater, U as Repeater, Y as StringRepeater, se as defaultLocalizedStringRepeaterStrings, X as defaultObjectRepeaterStrings, H as defaultRepeaterPrimitiveStrings, V as defaultRepeaterStrings, J as defaultStringRepeaterStrings };
 
 //# sourceMappingURL=repeaters.js.map