themelia-react-ui 2.0.1 → 2.0.3

package/dist/base/repeaters.js

@@ -1,20 +1,21 @@
 "use client";
-import { s as e } from "../ui-provider-1D_NSYzO.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-l5LpDw2z.js";
-import { n as r } from "../buttons-SbIcm1HJ.js";
-import { i, s as a } from "../typography-DTRkE9zL.js";
-import { t as o } from "../structure-DC2dygdA.js";
-import { t as s } from "../interaction-recipes-CHr0dJUs.js";
-import { t as c } from "../input-DWhBBBww.js";
-import { t as l } from "../form-field-DUt4UxSV.js";
-import { d as u } from "../text-inputs-aaK9wcDT.js";
-import { forwardRef as d, memo as f, useCallback as p, useId as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { GripVertical as x, Plus as S, Trash2 as C, X as w } from "lucide-react";
-import { useController as T, useFieldArray as E, useFormContext as D } from "react-hook-form";
-import { DndContext as O, KeyboardSensor as k, PointerSensor as A, closestCenter as ee, useSensor as j, useSensors as M } from "@dnd-kit/core";
-import { SortableContext as N, sortableKeyboardCoordinates as P, useSortable as F, verticalListSortingStrategy as te } 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 = {
@@ -27,15 +28,15 @@ var L = {
 	removeAriaLabel: L.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, hideRemove: c, disabled: l, strings: u, actionSize: d, onRemove: f, renderRow: p }) {
+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: l || !i
-	}), h = i ? m.isDragging : !1, g = i ? {
+		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, _ = i ? m.setNodeRef : void 0, v = i ? m.attributes : {}, S = i ? m.listeners : void 0, T = i ? /* @__PURE__ */ y(r, {
+	} : 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",
@@ -43,14 +44,14 @@ function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, h
 		iconOnly: !0,
 		"aria-label": u.dragHandleAriaLabel,
 		disabled: l,
-		className: n("repeater--drag-handle", "shrink-0", `text-muted-foreground ${s.rowHover}`, "cursor-grab active:cursor-grabbing"),
+		className: n("repeater--drag-handle", "shrink-0", `text-muted-foreground ${c.rowHover}`, "cursor-grab active:cursor-grabbing"),
 		...v,
-		...S,
-		children: /* @__PURE__ */ y(x, {
+		...y,
+		children: /* @__PURE__ */ b(S, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : null, E = c ? null : o === "icon-button" ? /* @__PURE__ */ y(r, {
+	}) : null, E = s ? null : o === "icon-button" ? /* @__PURE__ */ b(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
@@ -60,11 +61,11 @@ function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, h
 		disabled: l,
 		onClick: () => f(t),
 		className: "repeater--remove shrink-0",
-		children: /* @__PURE__ */ y(C, {
+		children: /* @__PURE__ */ b(w, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : /* @__PURE__ */ y(r, {
+	}) : /* @__PURE__ */ b(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
@@ -74,21 +75,21 @@ function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, h
 		disabled: l,
 		onClick: () => f(t),
 		className: n("repeater--remove", "shrink-0", "text-muted-foreground hover:text-destructive"),
-		children: /* @__PURE__ */ y(w, {
+		children: /* @__PURE__ */ b(T, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
 	});
-	return a === "card" ? /* @__PURE__ */ y("div", {
+	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__ */ b("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "flex items-start gap-space-md",
 			children: [
-				T,
-				/* @__PURE__ */ y("div", {
+				C,
+				/* @__PURE__ */ b("div", {
 					className: "min-w-0 flex-1",
 					children: p(e, {
 						index: t,
@@ -98,14 +99,14 @@ function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, h
 				E
 			]
 		})
-	}) : /* @__PURE__ */ b("div", {
+	}) : /* @__PURE__ */ x("div", {
 		ref: _,
 		style: g,
 		"data-repeater-item-id": e.id,
 		className: "repeater--item flex items-start gap-space-md",
 		children: [
-			T,
-			/* @__PURE__ */ y("div", {
+			C,
+			/* @__PURE__ */ b("div", {
 				className: "min-w-0 flex-1",
 				children: p(e, {
 					index: t,
@@ -116,55 +117,55 @@ function ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, h
 		]
 	});
 }
-function z({ items: i, renderRow: s, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: f = "inline", removeVariant: m = "ghost", hideRemove: g = !1, hideAdd: _ = !1, disabled: v = !1, strings: x, className: C }) {
-	let w = t(R, x), { defaultScale: T } = e(), E = T ?? "md", D = M(j(A, { activationConstraint: { distance: 4 } }), j(k, { coordinateGetter: P })), F = p((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 r = i.findIndex((e) => e.id === t.id), a = i.findIndex((e) => e.id === n.id);
-		r < 0 || a < 0 || u?.(r, a);
-	}, [i, u]), I = h(() => i.map((e) => e.id), [i]), L = /* @__PURE__ */ y(o, {
+		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, {
 		gap: "md",
 		className: "repeater--list",
-		children: i.map((e, t) => /* @__PURE__ */ y(ne, {
+		children: r.map((e, t) => /* @__PURE__ */ b(re, {
 			item: e,
 			index: t,
 			sortable: d,
 			rowVariant: f,
-			removeVariant: m,
-			hideRemove: g,
+			removeVariant: p,
+			hideRemove: h,
 			disabled: v,
 			strings: w,
 			actionSize: E,
 			onRemove: l,
-			renderRow: s
+			renderRow: a
 		}, e.id))
 	});
-	return /* @__PURE__ */ b(o, {
+	return /* @__PURE__ */ x(s, {
 		gap: "lg",
-		className: n("repeater--component", C),
-		children: [i.length === 0 ? /* @__PURE__ */ y("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__ */ y(a, {
+			children: /* @__PURE__ */ b(o, {
 				type: "secondary",
 				children: w.emptyState
 			})
-		}) : d ? /* @__PURE__ */ y(O, {
+		}) : d ? /* @__PURE__ */ b(k, {
 			sensors: D,
-			collisionDetection: ee,
-			onDragEnd: F,
-			children: /* @__PURE__ */ y(N, {
-				items: I,
-				strategy: te,
-				children: L
+			collisionDetection: M,
+			onDragEnd: O,
+			children: /* @__PURE__ */ b(ee, {
+				items: F,
+				strategy: ne,
+				children: I
 			})
-		}) : L, !_ && /* @__PURE__ */ b(r, {
+		}) : I, !_ && /* @__PURE__ */ x(i, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "outline",
 			disabled: v,
 			onClick: c,
 			className: "repeater--add self-start",
-			children: [/* @__PURE__ */ y(S, { className: "size-icon" }), w.addButton]
+			children: [/* @__PURE__ */ b(C, { className: "size-icon" }), w.addButton]
 		})]
 	});
 }
@@ -180,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 re(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];
@@ -216,7 +217,7 @@ function U(e, t) {
 		lastExternalValues: [...t.values],
 		pendingInternalValues: null
 	};
-	let n = re(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],
@@ -226,8 +227,8 @@ function U(e, t) {
 		pendingInternalValues: null
 	};
 }
-function ie(e, t, n) {
-	let [r, i] = g(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
@@ -243,12 +244,12 @@ var W = {
 	dragHandleAriaLabel: "Drag to reorder",
 	...L
 };
-function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderField: o, strings: s, className: l }) {
-	let u = t(W, s), { control: d } = D(), { field: f, fieldState: p } = T({
+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 || p.invalid), _ = m().replace(/:/g, ""), { state: v, dispatch: b } = ie(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,
@@ -262,20 +263,20 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 		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));
-	}, E = (e, t) => {
+	}, T = (e, t) => {
 		let n = B(v.values, e, t), r = B(v.ids, e, t);
 		x(n, r);
-	}, O = v.values.map((e, t) => ({
+	}, D = v.values.map((e, t) => ({
 		id: v.ids[t],
 		value: e
 	}));
-	return /* @__PURE__ */ y(z, {
+	return /* @__PURE__ */ b(z, {
 		...a ? {
 			sortable: !0,
-			onMove: E
+			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: w,
@@ -297,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__ */ y(c, {
+			return o ? o(r) : /* @__PURE__ */ b(l, {
 				ref: r.ref,
 				name: r.name,
 				value: r.value,
@@ -318,22 +319,22 @@ var K = {
 	dragHandleAriaLabel: "Drag to reorder",
 	...L
 };
-function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: s = !1, renderField: d, strings: f, className: m }) {
-	let h = t(K, f), { control: g, register: _ } = D(), { fields: v, append: b, remove: x, move: S } = E({
+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 = p(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
-	return /* @__PURE__ */ y(z, {
-		...s ? {
+	}), 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),
+		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,
@@ -341,33 +342,33 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: s = !1,
 			removeAriaLabel: h.removeAriaLabel,
 			dragHandleAriaLabel: h.dragHandleAriaLabel
 		},
-		renderRow: (t, { index: n }) => /* @__PURE__ */ y(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__ */ y("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__ */ y(l, {
+				}, t.name) : /* @__PURE__ */ b(u, {
 					label: t.label,
 					required: t.required,
 					hint: t.hint,
 					htmlFor: r,
-					children: t.type === "textarea" ? /* @__PURE__ */ y(u, {
+					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
 						...o,
 						id: r,
 						placeholder: t.placeholder,
 						minRows: 3,
 						invalid: i,
 						disabled: a
-					}) : /* @__PURE__ */ y(c, {
+					}) : /* @__PURE__ */ b(l, {
 						...o,
 						id: r,
 						type: t.type || "text",
@@ -383,7 +384,7 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: s = !1,
 q.displayName = "ObjectRepeater";
 //#endregion
 //#region src/components/base/repeaters/key-value-editor.tsx
-var ae = {
+var oe = {
 	keyLabel: "Key",
 	valueLabel: "Value",
 	keyPlaceholder: "key",
@@ -391,31 +392,31 @@ var ae = {
 	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), oe = f(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: a, valueLabel: o, invalid: s, 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__ */ b("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__ */ b("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!a && /* @__PURE__ */ y(i, {
+			children: [!!i && /* @__PURE__ */ b(a, {
 				htmlFor: `${d}-key`,
-				className: "@md/key-value-editor:sr-only",
-				children: a
-			}), /* @__PURE__ */ y(c, {
+				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),
+				onChange: (e) => c(d, e.target.value),
 				invalid: s
 			})]
-		}), /* @__PURE__ */ b("div", {
+		}), /* @__PURE__ */ x("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!o && /* @__PURE__ */ y(i, {
+			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__ */ y(c, {
+			}), /* @__PURE__ */ b(l, {
 				id: `${d}-value`,
 				"aria-label": o || r,
 				value: p ?? "",
@@ -425,8 +426,8 @@ var ae = {
 			})]
 		})]
 	});
-}), Y = d(function({ value: r, onValueChange: a, invalid: o, sortable: s = !1, strings: c }, l) {
-	let u = t(ae, c), { defaultScale: d } = e(), f = _(!1), [m, h] = v(() => r && Object.keys(r).length > 0 ? Object.entries(r).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 ?? "")
@@ -434,97 +435,91 @@ var ae = {
 		id: J(),
 		key: "",
 		value: ""
-	}]), g = p((e) => {
+	}]), _ = m((e) => {
 		let t = {};
 		e.forEach(({ key: e, value: n }) => {
 			e.trim() !== "" && (t[e] = n ?? "");
-		}), f.current = !0, a?.(t), queueMicrotask(() => {
-			f.current = !1;
+		}), p.current = !0, o?.(t), queueMicrotask(() => {
+			p.current = !1;
 		});
-	}, [a]), x = p((e, t) => {
-		h((n) => {
+	}, [o]), S = m((e, t) => {
+		g((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				key: t
 			} : n);
-			return g(r), r;
+			return _(r), r;
 		});
-	}, [g]), S = p((e, t) => {
-		h((n) => {
+	}, [_]), C = m((e, t) => {
+		g((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				value: t
 			} : n);
-			return g(r), r;
+			return _(r), r;
 		});
-	}, [g]), C = p(() => {
-		h((e) => {
+	}, [_]), w = m(() => {
+		g((e) => {
 			let t = [...e, {
 				id: J(),
 				key: "",
 				value: ""
 			}];
-			return g(t), t;
+			return _(t), t;
 		});
-	}, [g]), w = p((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 g(r), r;
+			return _(r), r;
 		});
-	}, [g]), T = p((e, t) => {
-		h((n) => {
+	}, [_]), E = m((e, t) => {
+		g((n) => {
 			let r = [...n], [i] = r.splice(e, 1);
-			return r.splice(t, 0, i), g(r), r;
+			return r.splice(t, 0, i), _(r), r;
 		});
-	}, [g]), 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__ */ b("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__ */ b("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__ */ y("div", { children: !!u.keyLabel && /* @__PURE__ */ y(i, {
-				className: "flex items-center",
-				children: u.keyLabel
-			}) }), /* @__PURE__ */ y("div", { children: !!u.valueLabel && /* @__PURE__ */ y(i, {
-				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__ */ y(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__ */ y(oe, {
+			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
 			})
 		})]
 	});
@@ -532,50 +527,50 @@ var ae = {
 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: s, className: l }) {
-	let { register: d } = D(), f = `${e}.${o === "primary" ? i : a}`;
-	return t === "textarea" ? /* @__PURE__ */ y(u, {
-		...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: s,
-		className: n("localized-string-field--component", l)
-	}, f) : /* @__PURE__ */ y(c, {
-		...d(f),
+		className: n("localized-string-field--component", c)
+	}, f) : /* @__PURE__ */ b(l, {
+		...u(f),
 		type: t === "number" ? "number" : "text",
 		placeholder: r,
 		invalid: s,
-		className: n("localized-string-field--component", l)
+		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: s, className: d }) {
-	let { register: f } = D(), p = a === "primary" ? r : i;
-	return /* @__PURE__ */ y("div", {
-		className: n("localized-object-field--component w-full rounded-radius border border-border p-surface", d),
-		children: /* @__PURE__ */ y(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__ */ y(l, {
+				return /* @__PURE__ */ b(u, {
 					label: t.label,
 					htmlFor: n,
 					required: t.required,
 					className: "w-full",
-					children: t.type === "textarea" ? /* @__PURE__ */ y(u, {
+					children: t.type === "textarea" ? /* @__PURE__ */ b(d, {
 						...f(n),
 						id: n,
 						placeholder: t.placeholder,
 						minRows: 3,
-						invalid: s
-					}) : /* @__PURE__ */ y(c, {
+						invalid: o
+					}) : /* @__PURE__ */ b(l, {
 						...f(n),
 						id: n,
 						type: t.type === "number" ? "number" : "text",
 						placeholder: t.placeholder,
-						invalid: s
+						invalid: o
 					})
 				}, n);
 			})
@@ -592,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: l, className: d }) {
+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__ */ y(G, {
+	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__ */ y(u, {
+		renderField: (e) => /* @__PURE__ */ b(d, {
 			ref: e.ref,
 			name: e.name,
 			value: e.value,