themelia-react-ui 1.0.2 → 2.0.1

package/dist/base/repeaters.js

@@ -1,19 +1,20 @@
 "use client";
-import { s as e } from "../ui-provider-DRPn3qNl.js";
+import { s as e } from "../ui-provider-1D_NSYzO.js";
 import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-BvH9PSmq.js";
-import { a as r, n as i } from "../typography-BxQgiZyw.js";
-import { t as a } from "../button-BZDasD04.js";
-import { t as o } from "../structure-CRdqVawd.js";
-import { t as s } from "../input-SX9V0AL3.js";
-import { d as c } from "../text-inputs-DsR56TR-.js";
-import { t as l } from "../form-field-CZwrkP7m.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-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 { CSS as I } from "@dnd-kit/utilities";
 //#region src/components/base/repeaters/repeaters.strings.ts
 var L = {
@@ -26,144 +27,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 ne({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, hideRemove: c, 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 || !i
+	}), h = i ? m.isDragging : !1, g = i ? {
+		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, {
 		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 ${s.rowHover}`, "cursor-grab active:cursor-grabbing"),
+		...v,
+		...S,
+		children: /* @__PURE__ */ y(x, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : null, T = s ? null : o === "icon-button" ? /* @__PURE__ */ v(a, {
+	}) : null, E = c ? null : o === "icon-button" ? /* @__PURE__ */ y(r, {
 		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__ */ y(C, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : /* @__PURE__ */ v(a, {
+	}) : /* @__PURE__ */ y(r, {
 		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__ */ y(w, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
 	});
-	return i === "card" ? /* @__PURE__ */ v("div", {
-		ref: g,
-		style: h,
+	return a === "card" ? /* @__PURE__ */ y("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__ */ b("div", {
 			className: "flex items-start gap-space-md",
 			children: [
-				w,
-				/* @__PURE__ */ v("div", {
+				T,
+				/* @__PURE__ */ y("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__ */ b("div", {
+		ref: _,
+		style: g,
 		"data-repeater-item-id": e.id,
 		className: "repeater--item flex items-start gap-space-md",
 		children: [
-			w,
-			/* @__PURE__ */ v("div", {
+			T,
+			/* @__PURE__ */ y("div", {
 				className: "min-w-0 flex-1",
-				children: f(e, {
+				children: p(e, {
 					index: t,
-					isDragging: m
+					isDragging: h
 				})
 			}),
-			T
+			E
 		]
 	});
 }
-function z({ items: i, 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: 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) => {
 		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]), L = m(() => i.map((e) => e.id), [i]), z = /* @__PURE__ */ v(o, {
+	}, [i, u]), I = h(() => i.map((e) => e.id), [i]), L = /* @__PURE__ */ y(o, {
 		gap: "md",
 		className: "repeater--list",
-		children: i.map((e, t) => /* @__PURE__ */ v(te, {
+		children: i.map((e, t) => /* @__PURE__ */ y(ne, {
 			item: e,
 			index: t,
 			sortable: d,
-			rowVariant: p,
-			removeVariant: h,
+			rowVariant: f,
+			removeVariant: m,
 			hideRemove: g,
-			disabled: b,
+			disabled: v,
 			strings: w,
 			actionSize: E,
 			onRemove: l,
 			renderRow: s
 		}, e.id))
 	});
-	return /* @__PURE__ */ y(o, {
+	return /* @__PURE__ */ b(o, {
 		gap: "lg",
 		className: n("repeater--component", C),
-		children: [i.length === 0 ? /* @__PURE__ */ v("div", {
-			className: "repeater--empty rounded-radius border border-dashed border-input p-surface",
-			children: /* @__PURE__ */ v(r, {
+		children: [i.length === 0 ? /* @__PURE__ */ y("div", {
+			className: "repeater--empty rounded-radius border border-dashed border-border p-surface",
+			children: /* @__PURE__ */ y(a, {
 				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__ */ y(O, {
+			sensors: D,
+			collisionDetection: ee,
+			onDragEnd: F,
+			children: /* @__PURE__ */ y(N, {
+				items: I,
+				strategy: te,
+				children: L
 			})
-		}) : z, !_ && /* @__PURE__ */ y(a, {
+		}) : L, !_ && /* @__PURE__ */ b(r, {
 			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__ */ y(S, { className: "size-icon" }), w.addButton]
 		})]
 	});
 }
@@ -179,7 +180,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 re(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 +216,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 = re(e.values, e.ids, t.values, e.prefix, e.nextId);
 	return {
 		...e,
 		values: [...t.values],
@@ -225,8 +226,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 ie(e, t, n) {
+	let [r, i] = g(U, void 0, () => H(e, t, n)), a = r.name !== e || !V(t, r.lastExternalValues), o = {
 		type: "sync",
 		name: e,
 		values: t
@@ -242,11 +243,11 @@ 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: l }) {
+	let u = t(W, s), { control: d } = D(), { field: f, fieldState: p } = T({
 		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) => {
+	}), 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({
 			type: "commit",
 			values: e,
@@ -254,30 +255,30 @@ function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderFiel
 			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));
+	}, E = (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],
+	}, O = v.values.map((e, t) => ({
+		id: v.ids[t],
 		value: e
 	}));
-	return /* @__PURE__ */ v(z, {
+	return /* @__PURE__ */ y(z, {
 		...a ? {
 			sortable: !0,
-			onMove: D
+			onMove: E
 		} : { sortable: !1 },
 		className: n("string-repeater--component", l),
 		items: O,
 		disabled: i,
 		onAdd: C,
-		onRemove: T,
+		onRemove: w,
 		strings: {
 			emptyState: u.emptyState,
 			addButton: u.addButton,
@@ -296,7 +297,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__ */ y(c, {
 				ref: r.ref,
 				name: r.name,
 				value: r.value,
@@ -317,18 +318,18 @@ 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: 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({
 		control: g,
 		name: e
-	}), C = f(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
-	return /* @__PURE__ */ v(z, {
-		...u ? {
+	}), C = p(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
+	return /* @__PURE__ */ y(z, {
+		...s ? {
 			sortable: !0,
 			onMove: (e, t) => S(e, t)
 		} : { sortable: !1 },
 		className: n("object-repeater--component", m),
-		items: y,
+		items: v,
 		rowVariant: "card",
 		removeVariant: "ghost",
 		disabled: a,
@@ -340,12 +341,12 @@ 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__ */ y(o, {
 			gap: "lg",
 			className: "object-repeater--fields",
 			children: r.map((t) => {
 				let r = `${e}.${n}.${t.name}`, o = _(r);
-				return d ? /* @__PURE__ */ v("div", {
+				return d ? /* @__PURE__ */ y("div", {
 					className: "object-repeater--field",
 					children: d(t, {
 						index: n,
@@ -354,19 +355,19 @@ function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: u = !1,
 						invalid: !!i,
 						disabled: a
 					})
-				}, t.name) : /* @__PURE__ */ v(l, {
+				}, t.name) : /* @__PURE__ */ y(l, {
 					label: t.label,
 					required: t.required,
 					hint: t.hint,
 					htmlFor: r,
-					children: t.type === "textarea" ? /* @__PURE__ */ v(c, {
+					children: t.type === "textarea" ? /* @__PURE__ */ y(u, {
 						...o,
 						id: r,
 						placeholder: t.placeholder,
 						minRows: 3,
 						invalid: i,
 						disabled: a
-					}) : /* @__PURE__ */ v(s, {
+					}) : /* @__PURE__ */ y(c, {
 						...o,
 						id: r,
 						type: t.type || "text",
@@ -382,7 +383,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 ae = {
 	keyLabel: "Key",
 	valueLabel: "Value",
 	keyPlaceholder: "key",
@@ -390,42 +391,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: r, 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), oe = f(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: a, valueLabel: o, invalid: s, onKeyChange: l, onValueChange: u }) {
 	let { id: d, key: f, value: p } = e;
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ b("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__ */ b("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!a && /* @__PURE__ */ v(i, {
+			children: [!!a && /* @__PURE__ */ y(i, {
 				htmlFor: `${d}-key`,
 				className: "@md/key-value-editor:sr-only",
 				children: a
-			}), /* @__PURE__ */ v(s, {
+			}), /* @__PURE__ */ y(c, {
 				id: `${d}-key`,
 				"aria-label": a || t,
 				value: f ?? "",
 				placeholder: t,
 				onChange: (e) => l(d, e.target.value),
-				invalid: c
+				invalid: s
 			})]
-		}), /* @__PURE__ */ y("div", {
+		}), /* @__PURE__ */ b("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!o && /* @__PURE__ */ v(i, {
+			children: [!!o && /* @__PURE__ */ y(i, {
 				htmlFor: `${d}-value`,
 				className: "@md/key-value-editor:sr-only",
 				children: o
-			}), /* @__PURE__ */ v(s, {
+			}), /* @__PURE__ */ y(c, {
 				id: `${d}-value`,
 				"aria-label": o || r,
 				value: p ?? "",
 				placeholder: r,
 				onChange: (e) => u(d, e.target.value),
-				invalid: c
+				invalid: s
 			})]
 		})]
 	});
-}), Y = u(function({ value: r, onValueChange: a, invalid: o, sortable: s = !1, strings: c }, l) {
-	let u = t(ie, c), { defaultScale: d } = e(), p = g(!1), [m, h] = _(() => r && Object.keys(r).length > 0 ? Object.entries(r).map(([e, t]) => ({
+}), 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]) => ({
 		id: J(),
 		key: e,
 		value: String(t ?? "")
@@ -433,79 +434,79 @@ var ie = {
 		id: J(),
 		key: "",
 		value: ""
-	}]), b = f((e) => {
+	}]), g = p((e) => {
 		let t = {};
 		e.forEach(({ key: e, value: n }) => {
 			e.trim() !== "" && (t[e] = n ?? "");
-		}), p.current = !0, a?.(t), queueMicrotask(() => {
-			p.current = !1;
+		}), f.current = !0, a?.(t), queueMicrotask(() => {
+			f.current = !1;
 		});
-	}, [a]), x = f((e, t) => {
+	}, [a]), x = p((e, t) => {
 		h((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				key: t
 			} : n);
-			return b(r), r;
+			return g(r), r;
 		});
-	}, [b]), S = f((e, t) => {
+	}, [g]), S = p((e, t) => {
 		h((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				value: t
 			} : n);
-			return b(r), r;
+			return g(r), r;
 		});
-	}, [b]), C = f(() => {
+	}, [g]), C = p(() => {
 		h((e) => {
 			let t = [...e, {
 				id: J(),
 				key: "",
 				value: ""
 			}];
-			return b(t), t;
+			return g(t), t;
 		});
-	}, [b]), w = f((e) => {
+	}, [g]), w = p((e) => {
 		h((t) => {
 			let n = t.filter((t, n) => n !== e), r = n.length ? n : [{
 				id: J(),
 				key: "",
 				value: ""
 			}];
-			return b(r), r;
+			return g(r), r;
 		});
-	}, [b]), T = f((e, t) => {
+	}, [g]), T = p((e, t) => {
 		h((n) => {
 			let r = [...n], [i] = r.splice(e, 1);
-			return r.splice(t, 0, i), b(r), r;
+			return r.splice(t, 0, i), g(r), r;
 		});
-	}, [b]), E = !!u.keyLabel || !!u.valueLabel, D = d === "sm" ? {
-		left: "pl-[calc(var(--spacing-action-sm)+var(--spacing-space-md))]",
-		right: "pr-[calc(var(--spacing-action-sm)+var(--spacing-space-md))]"
+	}, [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: "pl-[calc(var(--spacing-action-lg)+var(--spacing-space-md))]",
-		right: "pr-[calc(var(--spacing-action-lg)+var(--spacing-space-md))]"
+		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: "pl-[calc(var(--spacing-action)+var(--spacing-space-md))]",
-		right: "pr-[calc(var(--spacing-action)+var(--spacing-space-md))]"
+		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 ? {
 		sortable: !0,
 		onMove: T
 	} : { sortable: !1 };
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ b("div", {
 		ref: l,
 		className: "key-value-editor--component @container/key-value-editor space-y-space-sm",
-		children: [E && /* @__PURE__ */ y("div", {
+		children: [E && /* @__PURE__ */ b("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(i, {
+			children: [/* @__PURE__ */ y("div", { children: !!u.keyLabel && /* @__PURE__ */ y(i, {
 				className: "flex items-center",
 				children: u.keyLabel
-			}) }), /* @__PURE__ */ v("div", { children: !!u.valueLabel && /* @__PURE__ */ v(i, {
+			}) }), /* @__PURE__ */ y("div", { children: !!u.valueLabel && /* @__PURE__ */ y(i, {
 				className: "flex items-center",
 				children: u.valueLabel
 			}) })]
-		}), /* @__PURE__ */ v(z, {
+		}), /* @__PURE__ */ y(z, {
 			...A,
 			items: m,
 			onAdd: C,
@@ -515,7 +516,7 @@ var ie = {
 				addButton: u.addButton,
 				removeAriaLabel: u.removeRowAriaLabel
 			},
-			renderRow: (e) => /* @__PURE__ */ v(ae, {
+			renderRow: (e) => /* @__PURE__ */ y(oe, {
 				row: e,
 				keyPlaceholder: u.keyPlaceholder,
 				valuePlaceholder: u.valuePlaceholder,
@@ -531,50 +532,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: l, className: u }) {
-	let { register: d } = E(), f = `${e}.${o === "primary" ? i : a}`;
-	return t === "textarea" ? /* @__PURE__ */ v(c, {
+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),
 		placeholder: r,
 		minRows: 3,
-		invalid: l,
-		className: n("localized-string-field--component", u)
-	}, f) : /* @__PURE__ */ v(s, {
+		invalid: s,
+		className: n("localized-string-field--component", l)
+	}, f) : /* @__PURE__ */ y(c, {
 		...d(f),
 		type: t === "number" ? "number" : "text",
 		placeholder: r,
-		invalid: l,
-		className: n("localized-string-field--component", u)
+		invalid: s,
+		className: n("localized-string-field--component", l)
 	}, 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", {
+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__ */ v(o, {
+		children: /* @__PURE__ */ y(o, {
 			gap: "lg",
 			children: t.map((t) => {
 				let n = `${e}.${p}.${t.name}`;
-				return /* @__PURE__ */ v(l, {
+				return /* @__PURE__ */ y(l, {
 					label: t.label,
 					htmlFor: n,
 					required: t.required,
 					className: "w-full",
-					children: t.type === "textarea" ? /* @__PURE__ */ v(c, {
+					children: t.type === "textarea" ? /* @__PURE__ */ y(u, {
 						...f(n),
 						id: n,
 						placeholder: t.placeholder,
 						minRows: 3,
-						invalid: u
-					}) : /* @__PURE__ */ v(s, {
+						invalid: s
+					}) : /* @__PURE__ */ y(c, {
 						...f(n),
 						id: n,
 						type: t.type === "number" ? "number" : "text",
 						placeholder: t.placeholder,
-						invalid: u
+						invalid: s
 					})
 				}, n);
 			})
@@ -591,16 +592,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: l = !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: d }) {
+	let f = t(Q, l), p = `${e}.${a === "primary" ? r : i}`;
+	return /* @__PURE__ */ y(G, {
 		name: p,
-		sortable: l,
+		sortable: c,
 		invalid: o,
 		disabled: s,
 		className: n("localized-string-repeater--component", d),
 		strings: f,
-		renderField: (e) => /* @__PURE__ */ v(c, {
+		renderField: (e) => /* @__PURE__ */ y(u, {
 			ref: e.ref,
 			name: e.name,
 			value: e.value,