themelia-react-ui 2.0.0 → 2.0.2

package/dist/base/repeaters.js

@@ -1,19 +1,21 @@
 "use client";
-import { s as e } from "../ui-provider-D2_TeLqw.js";
+import { s as e } from "../ui-provider-C_U0Xma4.js";
 import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-Cospvlj1.js";
-import { i as r, s as i } from "../typography-CAr3dQhX.js";
-import { t as a } from "../button-BS3KDg00.js";
-import { t as o } from "../structure-hzCW-XsV.js";
-import { t as s } from "../input-DhQdBnV3.js";
-import { t as c } from "../form-field-VZRULhUK.js";
-import { d as l } from "../text-inputs-BFpku0Qd.js";
-import { forwardRef as u, memo as d, useCallback as f, useId as p, useMemo as m, useReducer as h, useRef as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { GripVertical as b, Plus as x, Trash2 as S, X as C } from "lucide-react";
-import { useController as w, useFieldArray as T, useFormContext as E } from "react-hook-form";
-import { DndContext as D, KeyboardSensor as O, PointerSensor as k, closestCenter as A, useSensor as j, useSensors as M } from "@dnd-kit/core";
-import { SortableContext as N, sortableKeyboardCoordinates as P, useSortable as F, verticalListSortingStrategy as ee } from "@dnd-kit/sortable";
+import { t as n } from "../utils-BRhFDwuU.js";
+import { t as r } from "../affordance-geometry.generated-tF36bREk.js";
+import { n as i } from "../buttons-DPZekJFu.js";
+import { a, c as o } from "../typography-UTnveOEy.js";
+import { t as s } from "../structure-BmisBK-3.js";
+import { t as c } from "../interaction-recipes-XR9ZpVYL.js";
+import { t as l } from "../input-DQdEd0YD.js";
+import { t as u } from "../form-field-CwH9y77i.js";
+import { d } from "../text-inputs-f9Ia-aCi.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";
 //#region src/components/base/repeaters/repeaters.strings.ts
 var L = {
@@ -26,144 +28,144 @@ var L = {
 	removeAriaLabel: L.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function te({ item: e, index: t, sortable: r, rowVariant: i, removeVariant: o, hideRemove: s, disabled: c, strings: l, actionSize: u, onRemove: d, renderRow: f }) {
-	let p = F({
+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({
 		id: e.id,
-		disabled: c || !r
-	}), m = r ? p.isDragging : !1, h = r ? {
-		transform: I.Transform.toString(p.transform),
-		transition: p.transition,
-		opacity: m ? .6 : 1
-	} : void 0, g = r ? p.setNodeRef : void 0, _ = r ? p.attributes : {}, x = r ? p.listeners : void 0, w = r ? /* @__PURE__ */ v(a, {
+		disabled: l || !r
+	}), h = r ? m.isDragging : !1, g = r ? {
+		transform: I.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, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
-		size: u,
+		size: d,
 		iconOnly: !0,
-		"aria-label": l.dragHandleAriaLabel,
-		disabled: c,
-		className: n("repeater--drag-handle", "shrink-0", "text-muted-foreground hover:text-foreground hover:bg-muted", "cursor-grab active:cursor-grabbing"),
-		..._,
-		...x,
-		children: /* @__PURE__ */ v(b, {
+		"aria-label": u.dragHandleAriaLabel,
+		disabled: l,
+		className: n("repeater--drag-handle", "shrink-0", `text-muted-foreground ${c.rowHover}`, "cursor-grab active:cursor-grabbing"),
+		...v,
+		...y,
+		children: /* @__PURE__ */ b(S, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : null, T = s ? null : o === "icon-button" ? /* @__PURE__ */ v(a, {
+	}) : null, E = s ? null : o === "icon-button" ? /* @__PURE__ */ b(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
-		size: u,
+		size: d,
 		iconOnly: !0,
-		"aria-label": l.removeAriaLabel,
-		disabled: c,
-		onClick: () => d(t),
+		"aria-label": u.removeAriaLabel,
+		disabled: l,
+		onClick: () => f(t),
 		className: "repeater--remove shrink-0",
-		children: /* @__PURE__ */ v(S, {
+		children: /* @__PURE__ */ b(w, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : /* @__PURE__ */ v(a, {
+	}) : /* @__PURE__ */ b(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
-		size: u,
+		size: d,
 		iconOnly: !0,
-		"aria-label": l.removeAriaLabel,
-		disabled: c,
-		onClick: () => d(t),
-		className: n("repeater--remove", "shrink-0", "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"),
-		children: /* @__PURE__ */ v(C, {
+		"aria-label": u.removeAriaLabel,
+		disabled: l,
+		onClick: () => f(t),
+		className: n("repeater--remove", "shrink-0", "text-muted-foreground hover:text-destructive"),
+		children: /* @__PURE__ */ b(T, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
 	});
-	return i === "card" ? /* @__PURE__ */ v("div", {
-		ref: g,
-		style: h,
+	return a === "card" ? /* @__PURE__ */ b("div", {
+		ref: _,
+		style: g,
 		"data-repeater-item-id": e.id,
 		className: n("repeater--item", "relative rounded-radius border border-border bg-card text-card-foreground p-surface"),
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "flex items-start gap-space-md",
 			children: [
-				w,
-				/* @__PURE__ */ v("div", {
+				C,
+				/* @__PURE__ */ b("div", {
 					className: "min-w-0 flex-1",
-					children: f(e, {
+					children: p(e, {
 						index: t,
-						isDragging: m
+						isDragging: h
 					})
 				}),
-				T
+				E
 			]
 		})
-	}) : /* @__PURE__ */ y("div", {
-		ref: g,
-		style: h,
+	}) : /* @__PURE__ */ x("div", {
+		ref: _,
+		style: g,
 		"data-repeater-item-id": e.id,
 		className: "repeater--item flex items-start gap-space-md",
 		children: [
-			w,
-			/* @__PURE__ */ v("div", {
+			C,
+			/* @__PURE__ */ b("div", {
 				className: "min-w-0 flex-1",
-				children: f(e, {
+				children: p(e, {
 					index: t,
-					isDragging: m
+					isDragging: h
 				})
 			}),
-			T
+			E
 		]
 	});
 }
-function z({ items: r, renderRow: s, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: p = "inline", removeVariant: h = "ghost", hideRemove: g = !1, hideAdd: _ = !1, disabled: b = !1, strings: S, className: C }) {
-	let w = t(R, S), { defaultScale: T } = e(), E = T ?? "md", F = M(j(k, { activationConstraint: { distance: 4 } }), j(O, { coordinateGetter: P })), I = f((e) => {
+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) => {
 		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]), L = m(() => r.map((e) => e.id), [r]), z = /* @__PURE__ */ v(o, {
+	}, [r, u]), F = g(() => r.map((e) => e.id), [r]), I = /* @__PURE__ */ b(s, {
 		gap: "md",
 		className: "repeater--list",
-		children: r.map((e, t) => /* @__PURE__ */ v(te, {
+		children: r.map((e, t) => /* @__PURE__ */ b(re, {
 			item: e,
 			index: t,
 			sortable: d,
-			rowVariant: p,
-			removeVariant: h,
-			hideRemove: g,
-			disabled: b,
+			rowVariant: f,
+			removeVariant: p,
+			hideRemove: h,
+			disabled: v,
 			strings: w,
 			actionSize: E,
 			onRemove: l,
-			renderRow: s
+			renderRow: a
 		}, e.id))
 	});
-	return /* @__PURE__ */ y(o, {
+	return /* @__PURE__ */ x(s, {
 		gap: "lg",
-		className: n("repeater--component", C),
-		children: [r.length === 0 ? /* @__PURE__ */ v("div", {
+		className: n("repeater--component", S),
+		children: [r.length === 0 ? /* @__PURE__ */ b("div", {
 			className: "repeater--empty rounded-radius border border-dashed border-border p-surface",
-			children: /* @__PURE__ */ v(i, {
+			children: /* @__PURE__ */ b(o, {
 				type: "secondary",
 				children: w.emptyState
 			})
-		}) : d ? /* @__PURE__ */ v(D, {
-			sensors: F,
-			collisionDetection: A,
-			onDragEnd: I,
-			children: /* @__PURE__ */ v(N, {
-				items: L,
-				strategy: ee,
-				children: z
+		}) : d ? /* @__PURE__ */ b(k, {
+			sensors: D,
+			collisionDetection: M,
+			onDragEnd: O,
+			children: /* @__PURE__ */ b(ee, {
+				items: F,
+				strategy: ne,
+				children: I
 			})
-		}) : z, !_ && /* @__PURE__ */ y(a, {
+		}) : I, !_ && /* @__PURE__ */ x(i, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "outline",
-			disabled: b,
+			disabled: v,
 			onClick: c,
 			className: "repeater--add self-start",
-			children: [/* @__PURE__ */ v(x, { className: "size-icon" }), w.addButton]
+			children: [/* @__PURE__ */ b(C, { className: "size-icon" }), w.addButton]
 		})]
 	});
 }
@@ -179,7 +181,7 @@ function B(e, t, n) {
 function V(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function ne(e, t, n, r, i) {
+function ie(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];
@@ -215,7 +217,7 @@ function U(e, t) {
 		lastExternalValues: [...t.values],
 		pendingInternalValues: null
 	};
-	let n = ne(e.values, e.ids, t.values, e.prefix, e.nextId);
+	let n = ie(e.values, e.ids, t.values, e.prefix, e.nextId);
 	return {
 		...e,
 		values: [...t.values],
@@ -225,8 +227,8 @@ function U(e, t) {
 		pendingInternalValues: null
 	};
 }
-function re(e, t, n) {
-	let [r, i] = h(U, void 0, () => H(e, t, n)), a = r.name !== e || !V(t, r.lastExternalValues), o = {
+function ae(e, t, n) {
+	let [r, i] = _(U, void 0, () => H(e, t, n)), a = r.name !== e || !V(t, r.lastExternalValues), o = {
 		type: "sync",
 		name: e,
 		values: t
@@ -242,42 +244,42 @@ var W = {
 	dragHandleAriaLabel: "Drag to reorder",
 	...L
 };
-function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderField: o, strings: c, className: l }) {
-	let u = t(W, c), { control: d } = E(), { field: f, fieldState: m } = w({
+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({
 		control: d,
 		name: e
-	}), h = Array.isArray(f.value) ? f.value : [], g = !!(r || m.invalid), _ = p().replace(/:/g, ""), { state: y, dispatch: b } = re(e, h, _), x = (e, t, n) => {
-		b({
+	}), 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) => {
+		y({
 			type: "commit",
 			values: e,
 			ids: t,
 			nextId: n
 		}), f.onChange(e);
 	}, S = (e, t) => {
-		let n = [...y.values];
-		n[e] = t, x(n, y.ids);
+		let n = [...v.values];
+		n[e] = t, x(n, v.ids);
 	}, C = () => {
-		let e = `${_}-row-${y.nextId}`;
-		x([...y.values, ""], [...y.ids, e], y.nextId + 1);
-	}, T = (e) => {
-		x(y.values.filter((t, n) => n !== e), y.ids.filter((t, n) => n !== e));
-	}, D = (e, t) => {
-		let n = B(y.values, e, t), r = B(y.ids, e, t);
+		let e = `${_}-row-${v.nextId}`;
+		x([...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));
+	}, T = (e, t) => {
+		let n = B(v.values, e, t), r = B(v.ids, e, t);
 		x(n, r);
-	}, O = y.values.map((e, t) => ({
-		id: y.ids[t],
+	}, D = v.values.map((e, t) => ({
+		id: v.ids[t],
 		value: e
 	}));
-	return /* @__PURE__ */ v(z, {
+	return /* @__PURE__ */ b(z, {
 		...a ? {
 			sortable: !0,
-			onMove: D
+			onMove: T
 		} : { sortable: !1 },
-		className: n("string-repeater--component", l),
-		items: O,
+		className: n("string-repeater--component", c),
+		items: D,
 		disabled: i,
 		onAdd: C,
-		onRemove: T,
+		onRemove: w,
 		strings: {
 			emptyState: u.emptyState,
 			addButton: u.addButton,
@@ -296,7 +298,7 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 				onBlur: f.onBlur,
 				ref: n === 0 ? f.ref : void 0
 			};
-			return o ? o(r) : /* @__PURE__ */ v(s, {
+			return o ? o(r) : /* @__PURE__ */ b(l, {
 				ref: r.ref,
 				name: r.name,
 				value: r.value,
@@ -317,22 +319,22 @@ var K = {
 	dragHandleAriaLabel: "Drag to reorder",
 	...L
 };
-function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: u = !1, renderField: d, strings: p, className: m }) {
-	let h = t(K, p), { control: g, register: _ } = E(), { fields: y, append: b, remove: x, move: S } = T({
+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({
 		control: g,
 		name: e
-	}), C = f(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
-	return /* @__PURE__ */ v(z, {
-		...u ? {
+	}), C = m(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
+	return /* @__PURE__ */ b(z, {
+		...o ? {
 			sortable: !0,
 			onMove: (e, t) => S(e, t)
 		} : { sortable: !1 },
-		className: n("object-repeater--component", m),
-		items: y,
+		className: n("object-repeater--component", p),
+		items: v,
 		rowVariant: "card",
 		removeVariant: "ghost",
 		disabled: a,
-		onAdd: () => b(C()),
+		onAdd: () => y(C()),
 		onRemove: (e) => x(e),
 		strings: {
 			emptyState: h.emptyState,
@@ -340,33 +342,33 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: u = !1,
 			removeAriaLabel: h.removeAriaLabel,
 			dragHandleAriaLabel: h.dragHandleAriaLabel
 		},
-		renderRow: (t, { index: n }) => /* @__PURE__ */ v(o, {
+		renderRow: (t, { index: n }) => /* @__PURE__ */ b(s, {
 			gap: "lg",
 			className: "object-repeater--fields",
 			children: r.map((t) => {
 				let r = `${e}.${n}.${t.name}`, o = _(r);
-				return d ? /* @__PURE__ */ v("div", {
+				return c ? /* @__PURE__ */ b("div", {
 					className: "object-repeater--field",
-					children: d(t, {
+					children: c(t, {
 						index: n,
 						name: r,
 						inputProps: o,
 						invalid: !!i,
 						disabled: a
 					})
-				}, t.name) : /* @__PURE__ */ v(c, {
+				}, t.name) : /* @__PURE__ */ b(u, {
 					label: t.label,
 					required: t.required,
 					hint: t.hint,
 					htmlFor: r,
-					children: t.type === "textarea" ? /* @__PURE__ */ v(l, {
+					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
 						...o,
 						id: r,
 						placeholder: t.placeholder,
 						minRows: 3,
 						invalid: i,
 						disabled: a
-					}) : /* @__PURE__ */ v(s, {
+					}) : /* @__PURE__ */ b(l, {
 						...o,
 						id: r,
 						type: t.type || "text",
@@ -382,7 +384,7 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: u = !1,
 q.displayName = "ObjectRepeater";
 //#endregion
 //#region src/components/base/repeaters/key-value-editor.tsx
-var ie = {
+var oe = {
 	keyLabel: "Key",
 	valueLabel: "Value",
 	keyPlaceholder: "key",
@@ -390,42 +392,42 @@ var ie = {
 	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), ae = d(function({ row: e, keyPlaceholder: t, valuePlaceholder: i, keyLabel: a, valueLabel: o, invalid: c, onKeyChange: l, onValueChange: u }) {
+}, 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 }) {
 	let { id: d, key: f, value: p } = e;
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ x("div", {
 		className: n("key-value-editor--row", "grid grid-cols-1 @md/key-value-editor:grid-cols-2 gap-space-md"),
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!a && /* @__PURE__ */ v(r, {
+			children: [!!i && /* @__PURE__ */ b(a, {
 				htmlFor: `${d}-key`,
-				className: "@md/key-value-editor:sr-only",
-				children: a
-			}), /* @__PURE__ */ v(s, {
+				className: "text-inherit @md/key-value-editor:sr-only",
+				children: i
+			}), /* @__PURE__ */ b(l, {
 				id: `${d}-key`,
-				"aria-label": a || t,
+				"aria-label": i || t,
 				value: f ?? "",
 				placeholder: t,
-				onChange: (e) => l(d, e.target.value),
-				invalid: c
+				onChange: (e) => c(d, e.target.value),
+				invalid: s
 			})]
-		}), /* @__PURE__ */ y("div", {
+		}), /* @__PURE__ */ x("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!o && /* @__PURE__ */ v(r, {
+			children: [!!o && /* @__PURE__ */ b(a, {
 				htmlFor: `${d}-value`,
-				className: "@md/key-value-editor:sr-only",
+				className: "text-inherit @md/key-value-editor:sr-only",
 				children: o
-			}), /* @__PURE__ */ v(s, {
+			}), /* @__PURE__ */ b(l, {
 				id: `${d}-value`,
-				"aria-label": o || i,
+				"aria-label": o || r,
 				value: p ?? "",
-				placeholder: i,
+				placeholder: r,
 				onChange: (e) => u(d, e.target.value),
-				invalid: c
+				invalid: s
 			})]
 		})]
 	});
-}), Y = u(function({ value: i, onValueChange: a, invalid: o, sortable: s = !1, strings: c }, l) {
-	let u = t(ie, c), { defaultScale: d } = e(), p = g(!1), [m, h] = _(() => i && Object.keys(i).length > 0 ? Object.entries(i).map(([e, t]) => ({
+}), 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(),
 		key: e,
 		value: String(t ?? "")
@@ -433,97 +435,91 @@ var ie = {
 		id: J(),
 		key: "",
 		value: ""
-	}]), b = f((e) => {
+	}]), _ = m((e) => {
 		let t = {};
 		e.forEach(({ key: e, value: n }) => {
 			e.trim() !== "" && (t[e] = n ?? "");
-		}), p.current = !0, a?.(t), queueMicrotask(() => {
+		}), p.current = !0, o?.(t), queueMicrotask(() => {
 			p.current = !1;
 		});
-	}, [a]), x = f((e, t) => {
-		h((n) => {
+	}, [o]), S = m((e, t) => {
+		g((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				key: t
 			} : n);
-			return b(r), r;
+			return _(r), r;
 		});
-	}, [b]), S = f((e, t) => {
-		h((n) => {
+	}, [_]), C = m((e, t) => {
+		g((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				value: t
 			} : n);
-			return b(r), r;
+			return _(r), r;
 		});
-	}, [b]), C = f(() => {
-		h((e) => {
+	}, [_]), w = m(() => {
+		g((e) => {
 			let t = [...e, {
 				id: J(),
 				key: "",
 				value: ""
 			}];
-			return b(t), t;
+			return _(t), t;
 		});
-	}, [b]), w = f((e) => {
-		h((t) => {
+	}, [_]), T = m((e) => {
+		g((t) => {
 			let n = t.filter((t, n) => n !== e), r = n.length ? n : [{
 				id: J(),
 				key: "",
 				value: ""
 			}];
-			return b(r), r;
+			return _(r), r;
 		});
-	}, [b]), T = f((e, t) => {
-		h((n) => {
+	}, [_]), E = m((e, t) => {
+		g((n) => {
 			let r = [...n], [i] = r.splice(e, 1);
-			return r.splice(t, 0, i), b(r), r;
+			return r.splice(t, 0, i), _(r), r;
 		});
-	}, [b]), E = !!u.keyLabel || !!u.valueLabel, D = d === "sm" ? {
-		left: "ps-[calc(var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]",
-		right: "pe-[calc(var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]"
-	} : d === "lg" ? {
-		left: "ps-[calc(var(--height-action)*10/9*var(--density-scale)+0.5rem*var(--space-scale))]",
-		right: "pe-[calc(var(--height-action)*10/9*var(--density-scale)+0.5rem*var(--space-scale))]"
-	} : {
-		left: "ps-[calc(var(--height-action)*var(--density-scale)+0.5rem*var(--space-scale))]",
-		right: "pe-[calc(var(--height-action)*var(--density-scale)+0.5rem*var(--space-scale))]"
-	}, O = s ? D.left : "", k = D.right, A = s ? {
+	}, [_]), 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 ? {
 		sortable: !0,
-		onMove: T
+		onMove: E
 	} : { sortable: !1 };
-	return /* @__PURE__ */ y("div", {
-		ref: l,
+	return /* @__PURE__ */ x("div", {
+		ref: u,
 		className: "key-value-editor--component @container/key-value-editor space-y-space-sm",
-		children: [E && /* @__PURE__ */ y("div", {
+		children: [D && /* @__PURE__ */ x("div", {
 			"data-action-gutter": !0,
-			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", O, k),
-			children: [/* @__PURE__ */ v("div", { children: !!u.keyLabel && /* @__PURE__ */ v(r, {
-				className: "flex items-center",
-				children: u.keyLabel
-			}) }), /* @__PURE__ */ v("div", { children: !!u.valueLabel && /* @__PURE__ */ v(r, {
-				className: "flex items-center",
-				children: u.valueLabel
+			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: "flex items-center text-inherit",
+				children: d.keyLabel
+			}) }), /* @__PURE__ */ b("div", { children: !!d.valueLabel && /* @__PURE__ */ b(a, {
+				className: "flex items-center text-inherit",
+				children: d.valueLabel
 			}) })]
-		}), /* @__PURE__ */ v(z, {
-			...A,
-			items: m,
-			onAdd: C,
-			onRemove: w,
+		}), /* @__PURE__ */ b(z, {
+			...M,
+			items: h,
+			onAdd: w,
+			onRemove: T,
 			strings: {
-				emptyState: u.emptyState,
-				addButton: u.addButton,
-				removeAriaLabel: u.removeRowAriaLabel
+				emptyState: d.emptyState,
+				addButton: d.addButton,
+				removeAriaLabel: d.removeRowAriaLabel
 			},
-			renderRow: (e) => /* @__PURE__ */ v(ae, {
+			renderRow: (e) => /* @__PURE__ */ b(se, {
 				row: e,
-				keyPlaceholder: u.keyPlaceholder,
-				valuePlaceholder: u.valuePlaceholder,
-				keyLabel: u.keyLabel,
-				valueLabel: u.valueLabel,
-				invalid: o,
-				onKeyChange: x,
-				onValueChange: S
+				keyPlaceholder: d.keyPlaceholder,
+				valuePlaceholder: d.valuePlaceholder,
+				keyLabel: d.keyLabel,
+				valueLabel: d.valueLabel,
+				invalid: s,
+				onKeyChange: S,
+				onValueChange: C
 			})
 		})]
 	});
@@ -531,50 +527,50 @@ var ie = {
 Y.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: c, className: u }) {
-	let { register: d } = E(), f = `${e}.${o === "primary" ? i : a}`;
-	return t === "textarea" ? /* @__PURE__ */ v(l, {
-		...d(f),
+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, {
+		...u(f),
 		placeholder: r,
 		minRows: 3,
-		invalid: c,
-		className: n("localized-string-field--component", u)
-	}, f) : /* @__PURE__ */ v(s, {
-		...d(f),
+		invalid: s,
+		className: n("localized-string-field--component", c)
+	}, f) : /* @__PURE__ */ b(l, {
+		...u(f),
 		type: t === "number" ? "number" : "text",
 		placeholder: r,
-		invalid: c,
-		className: n("localized-string-field--component", u)
+		invalid: s,
+		className: n("localized-string-field--component", c)
 	}, f);
 }
 X.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: u, className: d }) {
-	let { register: f } = E(), p = a === "primary" ? r : i;
-	return /* @__PURE__ */ v("div", {
-		className: n("localized-object-field--component w-full rounded-radius border border-border p-surface", d),
-		children: /* @__PURE__ */ v(o, {
+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", {
+		className: n("localized-object-field--component w-full rounded-radius border border-border p-surface", c),
+		children: /* @__PURE__ */ b(s, {
 			gap: "lg",
 			children: t.map((t) => {
 				let n = `${e}.${p}.${t.name}`;
-				return /* @__PURE__ */ v(c, {
+				return /* @__PURE__ */ b(u, {
 					label: t.label,
 					htmlFor: n,
 					required: t.required,
 					className: "w-full",
-					children: t.type === "textarea" ? /* @__PURE__ */ v(l, {
+					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
 						...f(n),
 						id: n,
 						placeholder: t.placeholder,
 						minRows: 3,
-						invalid: u
-					}) : /* @__PURE__ */ v(s, {
+						invalid: o
+					}) : /* @__PURE__ */ b(l, {
 						...f(n),
 						id: n,
 						type: t.type === "number" ? "number" : "text",
 						placeholder: t.placeholder,
-						invalid: u
+						invalid: o
 					})
 				}, n);
 			})
@@ -591,16 +587,16 @@ var Q = {
 	removeAriaLabel: L.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function $({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, disabled: s = !1, sortable: c = !1, strings: u, className: d }) {
-	let f = t(Q, u), p = `${e}.${a === "primary" ? r : i}`;
-	return /* @__PURE__ */ v(G, {
+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, {
 		name: p,
 		sortable: c,
 		invalid: o,
 		disabled: s,
-		className: n("localized-string-repeater--component", d),
+		className: n("localized-string-repeater--component", u),
 		strings: f,
-		renderField: (e) => /* @__PURE__ */ v(l, {
+		renderField: (e) => /* @__PURE__ */ b(d, {
 			ref: e.ref,
 			name: e.name,
 			value: e.value,