themelia-react-ui 1.0.1 → 2.0.0

package/dist/features/schema-form.js

@@ -1,31 +1,32 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-C2EKeIw3.js";
-import { n } from "../buttons-Co6GavvM.js";
-import { a as r } from "../typography-Cv8MT-82.js";
-import { t as i } from "../structure-MvKVq-oL.js";
-import { t as a } from "../input-WwYQZJzG.js";
-import { d as o } from "../text-inputs-Dh9XGyiS.js";
-import { n as s } from "../display-CFM5myut.js";
-import { t as c } from "../form-field-Bn7ZH1rA.js";
-import { a as l, c as u, i as d, o as f, r as p } from "../choice-inputs-CC7XqPQO.js";
-import { u as m } from "../value-inputs-DX2dbxjj.js";
-import { d as h } from "../forms-numeric-BUBxELBv.js";
-import { l as g } from "../data-display-cWIRdeaf.js";
-import { Fragment as _, useCallback as v, useEffect as y, useId as b, useMemo as x, useState as S } from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { t } from "../utils-Cospvlj1.js";
+import { s as n } from "../typography-CAr3dQhX.js";
+import { t as r } from "../button-BS3KDg00.js";
+import { t as i } from "../structure-hzCW-XsV.js";
+import { t as a } from "../smart-card-Bek-TwUp.js";
+import { t as o } from "../input-DhQdBnV3.js";
+import { t as s } from "../form-field-VZRULhUK.js";
+import { d as c } from "../text-inputs-BFpku0Qd.js";
+import { a as l, c as u, i as d, o as f, r as p } from "../choice-inputs-DrJ17tpL.js";
+import { n as m } from "../display-DrdvPwF0.js";
+import { u as h } from "../value-inputs-CjfzGMsN.js";
+import { d as g } from "../forms-numeric-D3CO60IF.js";
+import { l as _ } from "../data-display-3xWQUnMA.js";
+import { Fragment as v, useCallback as y, useEffect as b, useId as x, useMemo as S, useState as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/features/schema-form/schema-form.utils.ts
-var T = {
-	1: "grid grid-cols-1 gap-4",
-	2: "grid grid-cols-1 gap-4 @md/schema-form:grid-cols-2",
-	3: "grid grid-cols-1 gap-4 @md/schema-form:grid-cols-2 @xl/schema-form:grid-cols-3"
-}, E = {
+var E = {
+	1: "grid grid-cols-1 gap-space-xl",
+	2: "grid grid-cols-1 gap-space-xl @md/schema-form:grid-cols-2",
+	3: "grid grid-cols-1 gap-space-xl @md/schema-form:grid-cols-2 @xl/schema-form:grid-cols-3"
+}, D = {
 	auto: "",
 	half: "@md/schema-form:col-span-1",
 	third: "@xl/schema-form:col-span-1",
 	full: "@md/schema-form:col-span-full @xl/schema-form:col-span-full"
 };
-function D(e, t, n) {
+function O(e, t, n) {
 	if (typeof e.hidden == "function") try {
 		return e.hidden(t);
 	} catch (e) {
@@ -33,7 +34,7 @@ function D(e, t, n) {
 	}
 	return e.hidden ?? !1;
 }
-function O(e, t, n) {
+function ee(e, t, n) {
 	if (typeof e.disabled == "function") try {
 		return e.disabled(t);
 	} catch (e) {
@@ -42,9 +43,9 @@ function O(e, t, n) {
 	return e.disabled ?? !1;
 }
 function k(e, t, n) {
-	return e.filter((e) => !D(e, t, n));
+	return e.filter((e) => !O(e, t, n));
 }
-function ee(e, t, n, r, i) {
+function te(e, t, n, r, i) {
 	let a = k(e.fields, t, i), o = new Map(a.map((e) => [e.key, e])), s = /* @__PURE__ */ new Set(), c = [];
 	for (let t of e.sections ?? []) {
 		let e = t.fields ? t.fields.map((e) => o.get(e)).filter((e) => e !== void 0) : a.filter((e) => e.sectionId === t.id);
@@ -113,7 +114,7 @@ function F(e) {
 //#endregion
 //#region src/components/features/schema-form/hooks/use-schema-form.ts
 function I(e, t) {
-	let n = { ...t ?? {} };
+	let n = { ...t };
 	for (let t of e) t.defaultValue !== void 0 && n[t.key] === void 0 && (n[t.key] = t.defaultValue);
 	return n;
 }
@@ -125,21 +126,21 @@ function R(e) {
 	for (let [n, r] of Object.entries(e ?? {})) r && (t[n] = r);
 	return t;
 }
-function te({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i, onFieldChange: a, formatRequiredError: o, validationError: s, onError: c }) {
-	let l = t !== void 0, u = x(() => I(e, n), [n, e]), [d, f] = S(() => u), [p, m] = S({}), h = x(() => l ? {
+function ne({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i, onFieldChange: a, formatRequiredError: o, validationError: s, onError: c }) {
+	let l = t !== void 0, u = S(() => I(e, n), [n, e]), [d, f] = C(() => u), [p, m] = C({}), h = S(() => l ? {
 		...u,
-		...t ?? {}
+		...t
 	} : d, [
 		u,
 		d,
 		l,
 		t
-	]), g = x(() => ({
+	]), g = S(() => ({
 		...p,
 		...R(r)
-	}), [r, p]), _ = v((e) => {
+	}), [r, p]), _ = y((e) => {
 		l || f(e), i?.(e);
-	}, [l, i]), y = v((e, t) => {
+	}, [l, i]), v = y((e, t) => {
 		let n = {
 			...h,
 			[e]: t
@@ -154,7 +155,7 @@ function te({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i,
 		a,
 		i,
 		h
-	]), b = v(() => {
+	]), b = y(() => {
 		let t = I(e, n);
 		return l || f(t), m({}), i?.(t), t;
 	}, [
@@ -162,10 +163,10 @@ function te({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i,
 		e,
 		l,
 		i
-	]), C = v(() => {
+	]), x = y(() => {
 		let t = {};
 		for (let n of e) {
-			if (D(n, h, c)) continue;
+			if (O(n, h, c)) continue;
 			let e = h[n.key];
 			if (n.required && L(e)) {
 				t[n.key] = o(n.label);
@@ -194,31 +195,31 @@ function te({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i,
 	return {
 		values: h,
 		errors: g,
-		getFieldError: v((e) => g[e], [g]),
-		getFieldValue: v((e) => h[e], [h]),
-		setFieldValue: y,
+		getFieldError: y((e) => g[e], [g]),
+		getFieldValue: y((e) => h[e], [h]),
+		setFieldValue: v,
 		setValues: _,
 		reset: b,
-		validate: C
+		validate: x
 	};
 }
 //#endregion
 //#region src/components/features/schema-form/partials/schema-form-actions.tsx
-function z({ submitLabel: e, resetLabel: r, showReset: a = !1, disabled: o = !1, submitDisabled: s = !1, resetDisabled: c = !1, submitting: l = !1, onReset: u, className: d }) {
-	return /* @__PURE__ */ w(i, {
+function z({ submitLabel: e, resetLabel: n, showReset: a = !1, disabled: o = !1, submitDisabled: s = !1, resetDisabled: c = !1, submitting: l = !1, onReset: u, className: d }) {
+	return /* @__PURE__ */ T(i, {
 		direction: "horizontal",
 		align: "center",
 		justify: "end",
 		gap: "md",
 		className: t("schema-form-actions--component", d),
-		children: [!!a && /* @__PURE__ */ C(n, {
+		children: [!!a && /* @__PURE__ */ w(r, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "outline",
 			disabled: o || c || l,
 			onClick: u,
-			children: r
-		}), /* @__PURE__ */ C(n, {
+			children: n
+		}), /* @__PURE__ */ w(r, {
 			type: "submit",
 			tone: "primary",
 			loading: l,
@@ -231,7 +232,7 @@ z.displayName = "SchemaFormActions";
 //#endregion
 //#region src/components/features/schema-form/partials/schema-form-empty.tsx
 function B({ title: e, description: n, className: r }) {
-	return /* @__PURE__ */ C(g, {
+	return /* @__PURE__ */ w(_, {
 		title: e,
 		description: n,
 		padding: "md",
@@ -261,7 +262,7 @@ function U(e, t, n, r) {
 	}
 	return t;
 }
-function W(e, t, n, r, i) {
+function re(e, t, n, r, i) {
 	if (e.parseValue) try {
 		return e.parseValue(t, n);
 	} catch (e) {
@@ -269,7 +270,7 @@ function W(e, t, n, r, i) {
 	}
 	return N(t, r);
 }
-function G(e, t, n, r) {
+function W(e, t, n, r) {
 	if (e.type === "json" && e.parseValue) try {
 		return {
 			value: e.parseValue(t, n),
@@ -283,38 +284,38 @@ function G(e, t, n, r) {
 	}
 	return F(t);
 }
-function K(e) {
+function G(e) {
 	if (!e.icon) return;
 	let t = e.icon;
-	return /* @__PURE__ */ C(t, {
+	return /* @__PURE__ */ w(t, {
 		className: "size-icon",
 		"aria-hidden": "true"
 	});
 }
-function q({ field: e, value: n, values: r, error: i, disabled: a, fieldId: s, onValueChange: l, onError: u, strings: d }) {
-	let f = e.type === "json" ? e.jsonIndent ?? 2 : 2, [p, m] = S(() => P(n, f)), [h, g] = S(), [_, v] = S(!1);
-	if (y(() => {
+function K({ field: e, value: n, values: r, error: i, disabled: a, fieldId: o, onValueChange: l, onError: u, strings: d }) {
+	let f = e.type === "json" ? e.jsonIndent ?? 2 : 2, [p, m] = C(() => P(n, f)), [h, g] = C(), [_, v] = C(!1);
+	if (b(() => {
 		_ || m(P(n, f));
 	}, [
 		f,
 		_,
 		n
 	]), e.type !== "json") return null;
-	let b = (t) => {
-		let n = G(e, t, r, u);
+	let y = (t) => {
+		let n = W(e, t, r, u);
 		return g(n.valid ? void 0 : d.jsonParseError), l(n.value), n;
 	};
-	return /* @__PURE__ */ C(c, {
+	return /* @__PURE__ */ w(s, {
 		label: e.label,
 		required: e.required,
 		hint: V(e),
 		helperText: e.helperText,
 		error: i ?? h,
-		htmlFor: s,
-		supportingTextId: `${s}-supporting`,
+		htmlFor: o,
+		supportingTextId: `${o}-supporting`,
 		className: "schema-form-field--component schema-form-field--json",
-		children: /* @__PURE__ */ C(o, {
-			id: s,
+		children: /* @__PURE__ */ w(c, {
+			id: o,
 			name: e.key,
 			value: p,
 			rows: e.rows ?? 6,
@@ -327,23 +328,23 @@ function q({ field: e, value: n, values: r, error: i, disabled: a, fieldId: s, o
 			onChange: (t) => {
 				let n = t.target.value;
 				m(n);
-				let i = G(e, n, r, u);
+				let i = W(e, n, r, u);
 				g(i.valid ? void 0 : d.jsonParseError), l(i.value);
 			},
 			onBlur: () => {
 				v(!1);
-				let e = b(p);
+				let e = y(p);
 				e.valid && m(P(e.value, f));
 			},
 			...e.textareaProps,
-			"aria-describedby": [e.textareaProps?.["aria-describedby"], i || h || e.helperText || V(e) ? `${s}-supporting` : void 0].filter(Boolean).join(" ") || void 0
+			"aria-describedby": [e.textareaProps?.["aria-describedby"], i || h || e.helperText || V(e) ? `${o}-supporting` : void 0].filter(Boolean).join(" ") || void 0
 		})
 	});
 }
-function J({ field: e, value: n, values: r, error: i, disabled: s, required: g, fieldId: _, onValueChange: v, onError: y, strings: b, className: x }) {
-	let S = e.type ?? "text", w = {
+function q({ field: e, value: n, values: r, error: i, disabled: a, required: m, fieldId: _, onValueChange: v, onError: y, strings: b, className: x }) {
+	let S = e.type ?? "text", C = {
 		label: e.label,
-		required: g,
+		required: m,
 		hint: V(e),
 		helperText: e.helperText,
 		error: i,
@@ -351,15 +352,15 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 		supportingTextId: `${_}-supporting`,
 		className: t("schema-form-field--component", x)
 	}, T = e.controlClassName, E = i || e.helperText || V(e) ? `${_}-supporting` : void 0;
-	if (S === "custom" && e.type === "custom") return /* @__PURE__ */ C("div", {
+	if (S === "custom" && e.type === "custom") return /* @__PURE__ */ w("div", {
 		className: t("schema-form-field--component schema-form-field--custom", x),
 		children: e.render({
 			field: e,
 			value: n,
 			values: r,
 			error: i,
-			disabled: s,
-			required: g,
+			disabled: a,
+			required: m,
 			fieldId: _,
 			onValueChange: v,
 			onError: y
@@ -367,33 +368,33 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 	});
 	if (S === "switch" && e.type === "switch") {
 		let r = M(n);
-		return e.switchStyle === "card" ? /* @__PURE__ */ C(c, {
+		return e.switchStyle === "card" ? /* @__PURE__ */ w(s, {
 			error: i,
 			supportingTextId: `${_}-supporting`,
 			className: t("schema-form-field--component schema-form-field--switch-card", x),
-			children: /* @__PURE__ */ C(f, {
+			children: /* @__PURE__ */ w(f, {
 				label: e.label,
 				description: e.description,
 				hint: e.hint,
 				name: e.key,
 				value: r,
-				disabled: s,
+				disabled: a,
 				invalid: !!i,
 				className: T,
 				onValueChange: (e) => v(e),
 				...e.switchCardProps,
 				"aria-describedby": [e.switchCardProps?.["aria-describedby"], i ? `${_}-supporting` : void 0].filter(Boolean).join(" ") || void 0
 			})
-		}) : /* @__PURE__ */ C(c, {
+		}) : /* @__PURE__ */ w(s, {
 			error: i,
 			supportingTextId: `${_}-supporting`,
 			className: t("schema-form-field--component schema-form-field--switch", x),
-			children: /* @__PURE__ */ C(l, {
+			children: /* @__PURE__ */ w(l, {
 				label: e.label,
 				description: e.description ?? e.hint,
 				name: e.key,
 				value: r,
-				disabled: s,
+				disabled: a,
 				invalid: !!i,
 				className: T,
 				onValueChange: (e) => v(e),
@@ -402,13 +403,13 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			})
 		});
 	}
-	if (S === "json") return /* @__PURE__ */ C(q, {
+	if (S === "json") return /* @__PURE__ */ w(K, {
 		field: e,
 		value: n,
 		values: r,
 		error: i,
-		disabled: s,
-		required: g,
+		disabled: a,
+		required: m,
 		fieldId: _,
 		onValueChange: v,
 		onError: y,
@@ -416,16 +417,16 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 	});
 	if (S === "textarea" && e.type === "textarea") {
 		let t = H(e, n, r, y);
-		return /* @__PURE__ */ C(c, {
-			...w,
-			children: /* @__PURE__ */ C(o, {
+		return /* @__PURE__ */ w(s, {
+			...C,
+			children: /* @__PURE__ */ w(c, {
 				"aria-describedby": E,
 				id: _,
 				name: e.key,
 				value: t,
 				rows: e.rows,
-				disabled: s,
-				required: g,
+				disabled: a,
+				required: m,
 				invalid: !!i,
 				placeholder: e.placeholder,
 				className: T,
@@ -435,25 +436,25 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 		});
 	}
 	if ((S === "number" || S === "integer" || S === "decimal") && (e.type === "number" || e.type === "integer" || e.type === "decimal")) {
-		let t = H(e, n, r, y), a = e.type === "integer", o = a ? 0 : e.decimalPlaces ?? (e.type === "decimal" ? 2 : 4);
-		return /* @__PURE__ */ C(c, {
-			...w,
-			children: /* @__PURE__ */ C(h, {
+		let t = H(e, n, r, y), o = e.type === "integer", c = o ? 0 : e.decimalPlaces ?? (e.type === "decimal" ? 2 : 4);
+		return /* @__PURE__ */ w(s, {
+			...C,
+			children: /* @__PURE__ */ w(g, {
 				id: _,
 				name: e.key,
 				value: t,
 				min: e.min,
 				max: e.max,
 				step: e.step,
-				decimalPlaces: o,
-				disabled: s,
-				required: g,
+				decimalPlaces: c,
+				disabled: a,
+				required: m,
 				invalid: !!i,
 				placeholder: e.placeholder,
 				className: T,
 				onChange: (t) => {
 					let n = t.target.value;
-					v(W(e, n, r, a, y));
+					v(re(e, n, r, o, y));
 				},
 				...e.numberProps,
 				"aria-describedby": [e.numberProps?.["aria-describedby"], E].filter(Boolean).join(" ") || void 0
@@ -465,17 +466,17 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			value: e.value,
 			label: e.label,
 			disabled: e.disabled,
-			icon: K(e)
+			icon: G(e)
 		}));
-		return /* @__PURE__ */ C(c, {
-			...w,
-			children: /* @__PURE__ */ C(u, {
+		return /* @__PURE__ */ w(s, {
+			...C,
+			children: /* @__PURE__ */ w(u, {
 				name: e.key,
 				value: A(n),
 				options: t,
 				allowClear: e.allowClear,
-				disabled: s,
-				required: g,
+				disabled: a,
+				required: m,
 				invalid: !!i,
 				placeholder: e.placeholder,
 				"aria-label": e.label,
@@ -486,14 +487,14 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			})
 		});
 	}
-	if (S === "radio-cards" && e.type === "radio-cards") return /* @__PURE__ */ C(c, {
-		...w,
-		children: /* @__PURE__ */ C(p, {
+	if (S === "radio-cards" && e.type === "radio-cards") return /* @__PURE__ */ w(s, {
+		...C,
+		children: /* @__PURE__ */ w(p, {
 			name: e.key,
 			value: A(n),
 			options: e.options,
 			columns: e.columns,
-			disabled: s,
+			disabled: a,
 			invalid: !!i,
 			className: T,
 			onValueChange: (e) => v(e),
@@ -501,14 +502,14 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			"aria-describedby": [e.radioProps?.["aria-describedby"], E].filter(Boolean).join(" ") || void 0
 		})
 	});
-	if (S === "checkbox-cards" && e.type === "checkbox-cards") return /* @__PURE__ */ C(c, {
-		...w,
-		children: /* @__PURE__ */ C(d, {
+	if (S === "checkbox-cards" && e.type === "checkbox-cards") return /* @__PURE__ */ w(s, {
+		...C,
+		children: /* @__PURE__ */ w(d, {
 			name: e.key,
 			value: j(n),
 			options: e.options,
 			columns: e.columns,
-			disabled: s,
+			disabled: a,
 			invalid: !!i,
 			className: T,
 			onValueChange: (e) => v(e),
@@ -516,14 +517,14 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			"aria-describedby": [e.checkboxProps?.["aria-describedby"], E].filter(Boolean).join(" ") || void 0
 		})
 	});
-	if (S === "tags" && e.type === "tags") return /* @__PURE__ */ C(c, {
-		...w,
-		children: /* @__PURE__ */ C(m, {
+	if (S === "tags" && e.type === "tags") return /* @__PURE__ */ w(s, {
+		...C,
+		children: /* @__PURE__ */ w(h, {
 			id: _,
 			value: j(n),
 			recommendations: e.recommendations,
 			maxTags: e.maxTags,
-			disabled: s,
+			disabled: a,
 			invalid: !!i,
 			placeholder: e.placeholder,
 			className: T,
@@ -532,16 +533,16 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 			"aria-describedby": [e.tagsProps?.["aria-describedby"], E].filter(Boolean).join(" ") || void 0
 		})
 	});
-	let D = S === "text" ? "text" : S, O = e.type === void 0 || e.type === "text" || e.type === "email" || e.type === "password" || e.type === "url" || e.type === "tel" || e.type === "search" ? e.inputProps : void 0, k = H(e, n, r, y);
-	return /* @__PURE__ */ C(c, {
-		...w,
-		children: /* @__PURE__ */ C(a, {
+	let D = S === "text" ? "text" : S, O = e.type === void 0 || e.type === "text" || e.type === "email" || e.type === "password" || e.type === "url" || e.type === "tel" || e.type === "search" ? e.inputProps : void 0, ee = H(e, n, r, y);
+	return /* @__PURE__ */ w(s, {
+		...C,
+		children: /* @__PURE__ */ w(o, {
 			id: _,
 			name: e.key,
 			type: D,
-			value: k,
-			disabled: s,
-			required: g,
+			value: ee,
+			disabled: a,
+			required: m,
 			invalid: !!i,
 			placeholder: e.placeholder,
 			className: T,
@@ -551,10 +552,10 @@ function J({ field: e, value: n, values: r, error: i, disabled: s, required: g,
 		})
 	});
 }
-J.displayName = "SchemaFormFieldRenderer";
+q.displayName = "SchemaFormFieldRenderer";
 //#endregion
 //#region src/components/features/schema-form/schema-form.strings.ts
-var ne = {
+var J = {
 	submitLabel: "Save changes",
 	resetLabel: "Reset",
 	defaultSectionTitle: "General",
@@ -566,48 +567,48 @@ var ne = {
 };
 //#endregion
 //#region src/components/features/schema-form/schema-form.tsx
-function re(e) {
+function ie(e) {
 	return e.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function ie({ section: e }) {
-	return !e.title && !e.description ? null : /* @__PURE__ */ w(i, {
+function ae({ section: e }) {
+	return !e.title && !e.description ? null : /* @__PURE__ */ T(i, {
 		gap: "normal",
-		className: "schema-form--section-heading mb-space-lg",
-		children: [!!e.title && /* @__PURE__ */ C(r, {
+		className: "schema-form--section-heading",
+		children: [!!e.title && /* @__PURE__ */ w(n, {
 			weight: "semibold",
 			className: "schema-form--section-title",
 			children: e.title
-		}), !!e.description && /* @__PURE__ */ C(r, {
+		}), !!e.description && /* @__PURE__ */ w(n, {
 			type: "secondary",
 			className: "schema-form--section-description",
 			children: e.description
 		})]
 	});
 }
-function Y({ schema: n, value: a, defaultValue: o, errors: c, disabled: l = !1, layout: u = "form", columns: d = 2, id: f, name: p, title: m, description: h, headerSlot: g, footerSlot: v, actionsSlot: y, emptySlot: S, showActions: D, submitLabel: k, resetLabel: A, submitDisabled: j = !1, resetDisabled: M = !1, submitting: N = !1, onValueChange: P, onFieldChange: F, onSubmit: I, onReset: L, onError: R, renderField: V, renderSection: H, strings: U, className: W, contentClassName: G, sectionClassName: K, fieldClassName: q }) {
-	let Y = b(), ae = f ?? `schema-form-${Y}`, X = e(ne, U), Z = te({
-		fields: n.fields,
-		value: a,
-		defaultValue: o,
+function Y({ schema: r, value: o, defaultValue: s, errors: c, disabled: l = !1, layout: u = "form", columns: d = 2, id: f, name: p, title: h, description: g, headerSlot: _, footerSlot: y, actionsSlot: b, emptySlot: C, showActions: O, submitLabel: k, resetLabel: A, submitDisabled: j = !1, resetDisabled: M = !1, submitting: N = !1, onValueChange: P, onFieldChange: F, onSubmit: I, onReset: L, onError: R, renderField: V, renderSection: H, strings: U, className: re, contentClassName: W, sectionClassName: G, fieldClassName: K }) {
+	let Y = x(), oe = f ?? `schema-form-${Y}`, X = e(J, U), Z = ne({
+		fields: r.fields,
+		value: o,
+		defaultValue: s,
 		errors: c,
 		onValueChange: P,
 		onFieldChange: F,
 		formatRequiredError: X.formatRequiredError,
 		validationError: X.validationError,
 		onError: R
-	}), Q = x(() => ee(n, Z.values, X.defaultSectionTitle, d, R), [
+	}), Q = S(() => te(r, Z.values, X.defaultSectionTitle, d, R), [
 		d,
 		Z.values,
 		R,
-		n,
+		r,
 		X.defaultSectionTitle
-	]), oe = Q.some((e) => e.fields.length > 0), se = {
+	]), se = Q.some((e) => e.fields.length > 0), ce = {
 		setFieldValue: Z.setFieldValue,
 		setValues: Z.setValues,
 		reset: Z.reset,
 		validate: Z.validate
-	}, ce = D ?? !!(I || L || y), le = k ?? X.submitLabel, ue = A ?? X.resetLabel, de = (e) => {
-		let n = `${ae}-${re(e.key)}`, r = l || O(e, Z.values, R), i = {
+	}, le = O ?? !!(I || L || b), ue = k ?? X.submitLabel, de = A ?? X.resetLabel, fe = (e) => {
+		let n = `${oe}-${ie(e.key)}`, r = l || ee(e, Z.values, R), i = {
 			field: e,
 			value: Z.getFieldValue(e.key),
 			values: Z.values,
@@ -617,55 +618,56 @@ function Y({ schema: n, value: a, defaultValue: o, errors: c, disabled: l = !1,
 			fieldId: n,
 			onValueChange: (t) => Z.setFieldValue(e.key, t),
 			onError: R
-		}, a = /* @__PURE__ */ C(J, {
+		}, a = /* @__PURE__ */ w(q, {
 			...i,
 			strings: X
 		});
-		return /* @__PURE__ */ C("div", {
-			className: t("schema-form--field", E[e.width ?? "auto"], e.className, q),
+		return /* @__PURE__ */ w("div", {
+			className: t("schema-form--field", D[e.width ?? "auto"], e.className, K),
 			children: V?.({
 				...i,
 				defaultField: a
 			}) ?? a
 		}, e.key);
-	}, fe = (e) => /* @__PURE__ */ C("div", {
-		className: t("schema-form--section-fields", T[e.columns]),
-		children: e.fields.map(de)
-	}), pe = (e) => {
-		let n = fe(e), r = H?.({
+	}, pe = (e) => /* @__PURE__ */ w("div", {
+		className: t("schema-form--section-fields", E[e.columns]),
+		children: e.fields.map(fe)
+	}), me = (e) => {
+		let n = pe(e), r = H?.({
 			section: e,
 			fields: n,
 			values: Z.values
 		});
-		return r == null ? /* @__PURE__ */ w("section", {
-			className: t("schema-form--section", e.className, K),
+		return r == null ? /* @__PURE__ */ T(i, {
+			render: /* @__PURE__ */ w("section", {}),
+			gap: "lg",
+			className: t("schema-form--section", e.className, G),
 			children: [
-				/* @__PURE__ */ C(ie, { section: e }),
+				/* @__PURE__ */ w(ae, { section: e }),
 				n,
-				!!e.footerSlot && /* @__PURE__ */ C("div", {
-					className: "schema-form--section-footer mt-space-lg",
+				!!e.footerSlot && /* @__PURE__ */ w("div", {
+					className: "schema-form--section-footer",
 					children: e.footerSlot
 				})
 			]
-		}, e.id) : /* @__PURE__ */ C(_, { children: r }, e.id);
-	}, me = (e) => {
-		let n = fe(e), r = H?.({
+		}, e.id) : /* @__PURE__ */ w(v, { children: r }, e.id);
+	}, he = (e) => {
+		let n = pe(e), r = H?.({
 			section: e,
 			fields: n,
 			values: Z.values
 		});
-		return r == null ? /* @__PURE__ */ C(s, {
-			className: t("schema-form--section-card", e.className, K),
+		return r == null ? /* @__PURE__ */ w(m, {
+			className: t("schema-form--section-card", e.className, G),
 			icon: e.icon,
 			title: e.title,
 			description: e.description,
 			footerSlot: e.footerSlot,
-			headerDivider: !0,
 			children: n
-		}, e.id) : /* @__PURE__ */ C(_, { children: r }, e.id);
-	}, $ = y ?? (ce ? /* @__PURE__ */ C(z, {
-		submitLabel: le,
-		resetLabel: ue,
+		}, e.id) : /* @__PURE__ */ w(v, { children: r }, e.id);
+	}, $ = b ?? (le ? /* @__PURE__ */ w(z, {
+		submitLabel: ue,
+		resetLabel: de,
 		showReset: !!L,
 		disabled: l,
 		submitDisabled: j,
@@ -673,72 +675,74 @@ function Y({ schema: n, value: a, defaultValue: o, errors: c, disabled: l = !1,
 		submitting: N,
 		onReset: () => {
 			let e = Z.reset();
-			L?.(e, se);
+			L?.(e, ce);
 		}
-	}) : null), he = S ?? /* @__PURE__ */ C(B, {
+	}) : null), ge = C ?? /* @__PURE__ */ w(B, {
 		title: X.emptyTitle,
 		description: X.emptyDescription
 	});
-	return /* @__PURE__ */ C("form", {
-		id: ae,
+	return /* @__PURE__ */ w("form", {
+		id: oe,
 		name: p,
 		noValidate: !0,
-		className: t("schema-form--component @container/schema-form", W),
+		className: t("schema-form--component @container/schema-form", re),
 		onSubmit: async (e) => {
 			if (e.preventDefault(), !(l || j || N) && Z.validate()) try {
-				await I?.(Z.values, se, e);
+				await I?.(Z.values, ce, e);
 			} catch (e) {
 				R?.(e);
 			}
 		},
-		children: u === "cards" ? /* @__PURE__ */ w(i, {
-			gap: "xl",
-			className: t("schema-form--cards", G),
+		children: u === "cards" ? /* @__PURE__ */ T(i, {
+			gap: "2xl",
+			className: t("schema-form--cards", W),
 			children: [
-				!!(m ?? n.title ?? h ?? n.description ?? g) && /* @__PURE__ */ w(i, {
+				!!(h ?? r.title ?? g ?? r.description ?? _) && /* @__PURE__ */ T(i, {
 					direction: "horizontal",
 					align: "start",
 					justify: "between",
 					gap: "xl",
 					className: "schema-form--header",
-					children: [/* @__PURE__ */ w(i, {
+					children: [/* @__PURE__ */ T(i, {
 						gap: "normal",
 						className: "min-w-0",
-						children: [!!(m ?? n.title) && /* @__PURE__ */ C(r, {
+						children: [!!(h ?? r.title) && /* @__PURE__ */ w(n, {
+							size: "base",
 							weight: "semibold",
 							className: "schema-form--title",
-							children: m ?? n.title
-						}), !!(h ?? n.description) && /* @__PURE__ */ C(r, {
+							children: h ?? r.title
+						}), !!(g ?? r.description) && /* @__PURE__ */ w(n, {
 							type: "secondary",
 							className: "schema-form--description",
-							children: h ?? n.description
+							children: g ?? r.description
 						})]
-					}), g]
+					}), _]
 				}),
-				oe ? Q.map(me) : he,
-				v,
+				se ? Q.map(he) : ge,
+				y,
 				$
 			]
-		}) : /* @__PURE__ */ C(s, {
+		}) : /* @__PURE__ */ w(a, {
+			surface: "flat",
+			padding: "none",
 			className: "schema-form--surface",
+			gap: "2xl",
 			contentGap: "2xl",
-			contentClassName: t("schema-form--content", G),
-			title: m ?? n.title,
-			description: h ?? n.description,
-			headerEnd: g,
-			footerSlot: v || $ ? /* @__PURE__ */ w(i, {
+			contentClassName: t("schema-form--content", W),
+			title: h ?? r.title,
+			description: g ?? r.description,
+			headerEnd: _,
+			footerSlot: y || $ ? /* @__PURE__ */ T(i, {
 				gap: "lg",
 				className: "schema-form--footer",
-				children: [v, $]
+				children: [y, $]
 			}) : void 0,
-			headerDivider: !!(m ?? n.title ?? h ?? n.description ?? g),
-			footerDivider: !!(v || $),
-			children: oe ? Q.map(pe) : he
+			children: se ? Q.map(me) : ge
 		})
 	});
 }
 Y.displayName = "SchemaForm";
 //#endregion
-export { Y as SchemaForm, z as SchemaFormActions, B as SchemaFormEmpty, J as SchemaFormFieldRenderer, ne as defaultSchemaFormStrings, te as useSchemaForm };
+export { Y as SchemaForm, z as SchemaFormActions, B as SchemaFormEmpty, q as SchemaFormFieldRenderer, J as defaultSchemaFormStrings, ne as useSchemaForm };
 
 //# sourceMappingURL=schema-form.js.map