@declarion/react 0.81.0 → 0.82.0

package/dist-lib/components/params/ParamsBlock.js

@@ -1,108 +1,108 @@
 import { Icon as e } from "../primitives/Icons.js";
 import { Btn as t } from "../primitives/Btn.js";
-import { IconBtn as n } from "../primitives/IconBtn.js";
-import { Pill as r } from "../primitives/Pill.js";
-import { useText as i } from "../../hooks/useText.js";
-import { SectionCard as a } from "../primitives/SectionCard.js";
-import { Spinner as o } from "../primitives/Spinner.js";
-import { useAllParams as s, useCarrierParamOverrides as c } from "../../hooks/useParams.js";
-import { EditParamDialog as l, ErrorLine as u, ValuePreview as d, paramSourceName as f } from "./param-editors.js";
-import { useMemo as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Pill as n } from "../primitives/Pill.js";
+import { useText as r } from "../../hooks/useText.js";
+import { SectionCard as i } from "../primitives/SectionCard.js";
+import { Spinner as a } from "../primitives/Spinner.js";
+import { useAllParams as o, useCarrierParamOverrides as s } from "../../hooks/useParams.js";
+import { EditParamDialog as c, ErrorLine as l, ResetParamControl as u, ValuePreview as d, paramSourceName as f, useParamRefLabels as p } from "./param-editors.js";
+import { useMemo as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/params/ParamsBlock.tsx
-function _(e) {
+function v(e) {
 	return e === "tenant" || e === "role" || e === "user" ? e : "object";
 }
-function v(e, t) {
+function y(e, t) {
 	return e ? e.filter((e) => e.scopes?.includes(t)) : [];
 }
-function y({ carrierEntityCode: y, carrierScope: b, rowId: x, title: S, icon: C }) {
-	let w = i(), T = i("errors"), E = s(), D = p(() => v(E.data, b), [E.data, b]), [O, k] = m(null), { overrideByCode: A, missingParams: j, isLoading: M, error: N, clearError: P, save: F, reset: I } = c({
-		carrierEntityCode: y,
-		rowId: x,
-		enabled: D.length > 0
-	}), L = async (e, t) => {
-		await F(e, t) && k((t) => t === e ? null : t);
+function b({ carrierEntityCode: b, carrierScope: x, rowId: S, title: C, icon: w }) {
+	let T = r(), E = r("errors"), D = o(), O = m(() => y(D.data, x), [D.data, x]), [k, A] = h(null), j = p(O), { overrideByCode: M, missingParams: N, isLoading: P, error: F, clearError: I, save: L, reset: R } = s({
+		carrierEntityCode: b,
+		rowId: S,
+		enabled: O.length > 0
+	}), z = async (e, t) => {
+		await L(e, t) && A((t) => t === e ? null : t);
 	};
-	return D.length === 0 ? null : /* @__PURE__ */ g(a, {
-		title: S ?? w("params.title", "Parameters"),
-		icon: C ?? /* @__PURE__ */ h(e.settings, { size: 14 }),
-		children: [j ? /* @__PURE__ */ h(u, { text: T("param.overrides_unreadable", "The current parameter overrides could not be read.") }) : M ? /* @__PURE__ */ h("div", {
+	return O.length === 0 ? null : /* @__PURE__ */ _(i, {
+		title: C ?? T("params.title", "Parameters"),
+		icon: w ?? /* @__PURE__ */ g(e.settings, { size: 14 }),
+		children: [N ? /* @__PURE__ */ g(l, { text: E("param.overrides_unreadable", "The current parameter overrides could not be read.") }) : P ? /* @__PURE__ */ g("div", {
 			style: { padding: "8px 0" },
-			children: /* @__PURE__ */ h(o, { size: 16 })
-		}) : /* @__PURE__ */ g("div", {
+			children: /* @__PURE__ */ g(a, { size: 16 })
+		}) : /* @__PURE__ */ _("div", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
 				gap: 10
 			},
-			children: [N && !O && /* @__PURE__ */ h(u, { text: N }), D.map((i) => {
-				let a = A.get(i.code), o = a !== void 0, s = o && i.source === _(b);
-				return /* @__PURE__ */ g("div", {
-					"data-testid": `param-row-${i.code}`,
+			children: [F && !k && /* @__PURE__ */ g(l, { text: F }), O.map((r) => {
+				let i = M.get(r.code), a = i !== void 0, o = a && r.source === v(x);
+				return /* @__PURE__ */ _("div", {
+					"data-testid": `param-row-${r.code}`,
 					style: {
 						display: "flex",
 						alignItems: "center",
 						gap: 10
 					},
 					children: [
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ g("div", {
 							style: {
 								flex: 1,
 								minWidth: 0,
 								fontSize: 12.5,
 								fontWeight: 500
 							},
-							children: w(i.name) || i.code
+							children: T(r.name) || r.code
 						}),
-						/* @__PURE__ */ h(d, {
-							type: i.type,
-							value: i.value,
-							values: i.values
+						/* @__PURE__ */ g(d, {
+							type: r.type,
+							value: r.value,
+							values: r.values,
+							label: j(r)
 						}),
-						s && /* @__PURE__ */ h(r, {
+						o && /* @__PURE__ */ g(n, {
 							tone: "violet",
 							size: "xs",
-							children: w("params.overridden", "overridden")
+							children: T("params.overridden", "overridden")
 						}),
-						o && !s && /* @__PURE__ */ h("span", {
-							"data-testid": `param-not-applied-${i.code}`,
-							title: w("params.block.not_applied_hint", "You set {value}, and it no longer satisfies this parameter's declaration. Source of the value in effect: {source}. Reset to remove what you set, or edit it to a value the declaration accepts.", {
-								value: JSON.stringify(a.value),
-								source: f(w, i.source)
+						a && !o && /* @__PURE__ */ g("span", {
+							"data-testid": `param-not-applied-${r.code}`,
+							title: T("params.block.not_applied_hint", "You set {value}, and it no longer satisfies this parameter's declaration. Source of the value in effect: {source}. Reset to remove what you set, or edit it to a value the declaration accepts.", {
+								value: JSON.stringify(i.value),
+								source: f(T, r.source)
 							}),
-							children: /* @__PURE__ */ h(r, {
+							children: /* @__PURE__ */ g(n, {
 								tone: "amber",
 								size: "xs",
-								children: w("params.not_applied", "not applied")
+								children: T("params.not_applied", "not applied")
 							})
 						}),
-						/* @__PURE__ */ h(t, {
+						/* @__PURE__ */ g(t, {
 							size: "xs",
-							icon: /* @__PURE__ */ h(e.edit, { size: 12 }),
+							icon: /* @__PURE__ */ g(e.edit, { size: 12 }),
 							onClick: () => {
-								P(), k(i);
+								I(), A(r);
 							},
-							children: w("params.edit", "Edit")
+							children: T("params.edit", "Edit")
 						}),
-						o && /* @__PURE__ */ h(n, {
-							icon: /* @__PURE__ */ h(e.refresh, { size: 13 }),
-							title: w("params.reset", "Reset to default"),
-							onClick: () => I(i)
+						a && /* @__PURE__ */ g(u, {
+							param: r,
+							description: T("params.reset_confirm.block_description", "The value set here is removed, and the value it inherits applies again."),
+							onReset: (e) => void R(e)
 						})
 					]
-				}, i.code);
+				}, r.code);
 			})]
-		}), O && /* @__PURE__ */ h(l, {
-			param: O,
-			current: A.get(O.code)?.value ?? O.value,
-			error: N,
+		}), k && /* @__PURE__ */ g(c, {
+			param: k,
+			current: M.get(k.code)?.value ?? k.value,
+			error: F,
 			onCancel: () => {
-				k(null), P();
+				A(null), I();
 			},
-			onSave: (e) => L(O, e)
+			onSave: (e) => z(k, e)
 		})]
 	});
 }
 //#endregion
-export { y as ParamsBlock };
+export { b as ParamsBlock };

package/dist-lib/components/params/param-editors.js

@@ -1,15 +1,19 @@
 import { coerceDisplayString as e } from "../../lib/display-value.js";
-import { pluralText as t } from "../../lib/language.js";
-import { Icon as n } from "../primitives/Icons.js";
-import { Btn as r } from "../primitives/Btn.js";
-import { useText as i } from "../../hooks/useText.js";
-import { Spinner as a } from "../primitives/Spinner.js";
-import { FieldLabel as o } from "../primitives/Fields.js";
-import { renderField as s } from "../fields/index.js";
-import { useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useSchema as t } from "../../hooks/useSchema.js";
+import { pluralText as n } from "../../lib/language.js";
+import { Icon as r } from "../primitives/Icons.js";
+import { Btn as i } from "../primitives/Btn.js";
+import { useText as a } from "../../hooks/useText.js";
+import { Spinner as o } from "../primitives/Spinner.js";
+import { FieldLabel as s } from "../primitives/Fields.js";
+import { ModalFrame as c } from "../shared/ModalFrame.js";
+import { ConfirmDialog as l } from "../shared/ConfirmDialog.js";
+import { renderField as u } from "../fields/index.js";
+import { refLabel as d, useRefRecords as f } from "../../hooks/useRefRecords.js";
+import { useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/params/param-editors.tsx
-var f = {
+var _ = {
 	object: ["params.source.object", "Record"],
 	user: ["params.source.user", "User"],
 	role: ["params.source.role", "Role"],
@@ -18,12 +22,29 @@ var f = {
 	yaml: ["params.source.yaml", "Default"],
 	none: ["params.source.none", "Not set"]
 };
-function p(e, t) {
-	let n = f[t];
+function v(e, t) {
+	let n = _[t];
 	return n ? e(n[0], n[1]) : t;
 }
-function m({ text: e }) {
-	return /* @__PURE__ */ d("div", {
+var y = r["undo-2"];
+function b({ param: e, description: t, onReset: n }) {
+	let r = a(), [o, s] = p(!1);
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(i, {
+		size: "xs",
+		icon: /* @__PURE__ */ h(y, { size: 12 }),
+		onClick: () => s(!0),
+		children: r("params.reset", "Reset to default")
+	}), /* @__PURE__ */ h(l, {
+		open: o,
+		onOpenChange: s,
+		title: r("params.reset_confirm.title", "Reset {name} to default?", { name: r(e.name) || e.code }),
+		description: t,
+		confirmLabel: r("params.reset", "Reset to default"),
+		onConfirm: () => n(e)
+	})] });
+}
+function x({ text: e }) {
+	return /* @__PURE__ */ g("div", {
 		style: {
 			padding: "8px 10px",
 			background: "var(--danger-soft)",
@@ -33,153 +54,147 @@ function m({ text: e }) {
 			display: "flex",
 			gap: 6
 		},
-		children: [/* @__PURE__ */ u(n.info, { size: 13 }), /* @__PURE__ */ u("span", { children: e })]
+		children: [/* @__PURE__ */ h(r.info, { size: 13 }), /* @__PURE__ */ h("span", { children: e })]
 	});
 }
-function h({ type: n, value: r, values: a }) {
-	let o = i(), s = (t) => {
-		let n = a?.find((e) => e.code === t);
-		return n && o(n.name) || e(t);
-	}, c;
-	if (r == null) c = "—";
-	else if (a && a.length > 0) c = (Array.isArray(r) ? r.map(s).join(", ") : s(r)) || "—";
-	else if (n === "bool") c = r ? o("params.value.on", "On") : o("params.value.off", "Off");
-	else if (n === "multilang" || n === "multilang_text") c = o(r) || "—";
-	else if (n === "multilang_array" && Array.isArray(r)) c = r.map((e) => o(e)).join(", ") || "—";
-	else if (n === "json" || n === "structure") {
+function S(e) {
+	let n = a(), { data: r } = t(), i = e.flatMap((e) => e.ref?.entity && e.value != null && e.value !== "" ? [{
+		ref: e.ref,
+		value: e.value
+	}] : []), { refs: o } = f(i, void 0, r?.entities);
+	return (e) => e.ref?.entity ? d(n, o, e.ref, e.value, r?.entities) : void 0;
+}
+function C({ type: t, value: r, values: i, label: o, maxWidth: s = 180 }) {
+	let c = a(), l = (t) => {
+		let n = i?.find((e) => e.code === t);
+		return n && c(n.name) || e(t);
+	}, u;
+	if (o !== void 0) u = o;
+	else if (r == null) u = "—";
+	else if (i && i.length > 0) u = (Array.isArray(r) ? r.map(l).join(", ") : l(r)) || "—";
+	else if (t === "bool") u = r ? c("params.value.on", "On") : c("params.value.off", "Off");
+	else if (t === "multilang" || t === "multilang_text") u = c(r) || "—";
+	else if (t === "multilang_array" && Array.isArray(r)) u = r.map((e) => c(e)).join(", ") || "—";
+	else if (t === "json" || t === "structure") {
 		if (r && typeof r == "object") {
 			let e = Array.isArray(r) ? r.length : Object.keys(r).length;
-			c = `{${t(o, "params.value.keys", e, {
+			u = `{${n(c, "params.value.keys", e, {
 				one: "{count} key",
 				other: "{count} keys"
 			})}}`;
-		} else c = e(r);
-	} else c = e(r);
-	return /* @__PURE__ */ u("span", {
+		} else u = e(r);
+	} else u = e(r);
+	return /* @__PURE__ */ h("span", {
 		className: "mono",
+		title: u,
 		style: {
+			display: "inline-block",
+			verticalAlign: "middle",
 			fontSize: 11.5,
 			color: "var(--text-2)",
-			maxWidth: 180,
+			maxWidth: s,
 			overflow: "hidden",
 			textOverflow: "ellipsis",
 			whiteSpace: "nowrap"
 		},
-		children: c
+		children: u
 	});
 }
-function g({ param: e, current: t, error: s, onCancel: f, onSave: p }) {
-	let h = i(), [g, b] = c(() => v(e, t)), [x, S] = c(!1), [C, w] = c(null);
-	async function T() {
-		w(null);
+function w({ param: e, current: t, error: n, onCancel: l, onSave: u }) {
+	let d = a(), [f, m] = p(() => E(e, t)), [_, v] = p(!1), [y, b] = p(null);
+	async function S() {
+		b(null);
 		let e;
 		try {
-			e = y(h, g);
+			e = D(d, f);
 		} catch (e) {
-			w(String(e instanceof Error ? e.message : e));
+			b(String(e instanceof Error ? e.message : e));
 			return;
 		}
-		S(!0);
+		v(!0);
 		try {
-			await p(e);
+			await u(e);
 		} finally {
-			S(!1);
+			v(!1);
 		}
 	}
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
-		onClick: f,
-		style: {
-			position: "fixed",
-			inset: 0,
-			background: "var(--scrim)",
-			zIndex: 60
-		}
-	}), /* @__PURE__ */ d("div", {
-		"data-testid": "param-edit-dialog",
-		style: {
-			position: "fixed",
-			top: "50%",
-			left: "50%",
-			transform: "translate(-50%, -50%)",
-			zIndex: 61,
-			width: 440,
-			maxWidth: "calc(100vw - 24px)",
-			background: "var(--surface)",
-			borderRadius: "var(--radius-lg)",
-			boxShadow: "var(--shadow-lg)",
-			border: "1px solid var(--border)",
-			overflow: "hidden"
-		},
+	return /* @__PURE__ */ g(c, {
+		label: d(e.name) || e.code,
+		maxWidth: 440,
+		onClose: l,
+		testId: "param-edit-dialog",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ g("div", {
 				style: { padding: "14px 18px 0" },
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ h("div", {
 					style: {
 						fontSize: 14,
 						fontWeight: 600
 					},
-					children: h(e.name) || e.code
-				}), e.description && /* @__PURE__ */ u("div", {
+					children: d(e.name) || e.code
+				}), e.description && /* @__PURE__ */ h("div", {
 					style: {
 						fontSize: 11.5,
 						color: "var(--text-3)",
 						marginTop: 2
 					},
-					children: h(e.description)
+					children: d(e.description)
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ g("div", {
 				style: {
 					padding: "12px 18px 16px",
 					display: "flex",
 					flexDirection: "column",
-					gap: 10
+					gap: 10,
+					overflowY: "auto"
 				},
 				children: [
-					/* @__PURE__ */ u(o, { children: h("params.value", "Value") }),
-					/* @__PURE__ */ u(_, {
+					/* @__PURE__ */ h(s, { children: d("params.value", "Value") }),
+					/* @__PURE__ */ h(T, {
 						param: e,
-						value: g,
-						onChange: b
+						value: f,
+						onChange: m
 					}),
-					(C || s) && /* @__PURE__ */ u(m, { text: C || s })
+					(y || n) && /* @__PURE__ */ h(x, { text: y || n })
 				]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ g("div", {
 				style: {
 					padding: "10px 16px",
 					borderTop: "1px solid var(--divider)",
 					display: "flex",
 					gap: 8,
-					background: "var(--surface-2)"
+					background: "var(--surface-2)",
+					flexShrink: 0
 				},
 				children: [
-					/* @__PURE__ */ u("div", { style: { flex: 1 } }),
-					/* @__PURE__ */ u(r, {
-						onClick: f,
-						children: h("dialog.cancel", "Cancel")
+					/* @__PURE__ */ h("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ h(i, {
+						onClick: l,
+						children: d("dialog.cancel", "Cancel")
 					}),
-					/* @__PURE__ */ u(r, {
+					/* @__PURE__ */ h(i, {
 						kind: "primary",
-						icon: u(x ? a : n.check, { size: 13 }),
-						onClick: T,
-						disabled: x,
-						children: x ? h("dialog.saving", "Saving…") : h("dialog.save", "Save")
+						icon: h(_ ? o : r.check, { size: 13 }),
+						onClick: S,
+						disabled: _,
+						children: _ ? d("dialog.saving", "Saving…") : d("dialog.save", "Save")
 					})
 				]
 			})
 		]
-	})] });
+	});
 }
-function _({ param: e, value: t, onChange: n }) {
-	let r = i(), a = {
+function T({ param: e, value: t, onChange: n }) {
+	let r = a(), i = {
 		type: e.type,
 		structure: e.structure,
 		values: e.values,
 		ref: e.ref
 	};
-	return /* @__PURE__ */ u(l, { children: s({
-		field: a,
+	return /* @__PURE__ */ h(m, { children: u({
+		field: i,
 		fieldName: e.code,
 		value: t,
 		mode: "edit",
@@ -187,23 +202,23 @@ function _({ param: e, value: t, onChange: n }) {
 		t: r
 	}) });
 }
-function v(e, t) {
+function E(e, t) {
 	return e.type === "bool" ? t === !0 : e.type === "structure" ? t ?? {} : t ?? null;
 }
-function y(e, t) {
+function D(e, t) {
 	if (t == null) throw Error(e("params.value.required", "Enter a value."));
 	return t;
 }
-var b = /* @__PURE__ */ new Set([
+var O = /* @__PURE__ */ new Set([
 	"server",
 	"database",
 	"auth",
 	"sso",
 	"seeder"
 ]);
-function x(e) {
+function k(e) {
 	let t = e.scopes ?? [];
-	return t.length === 0 ? !b.has(e.category ?? "") : t.includes("tenant");
+	return t.length === 0 ? !O.has(e.category ?? "") : t.includes("tenant");
 }
 //#endregion
-export { g as EditParamDialog, m as ErrorLine, h as ValuePreview, p as paramSourceName, x as paramTenantEditable };
+export { w as EditParamDialog, x as ErrorLine, b as ResetParamControl, C as ValuePreview, v as paramSourceName, k as paramTenantEditable, S as useParamRefLabels };

package/dist-lib/components/shared/ConfirmDialog.js

@@ -2,50 +2,16 @@ import { Icon as e } from "../primitives/Icons.js";
 import { Btn as t } from "../primitives/Btn.js";
 import { IconBtn as n } from "../primitives/IconBtn.js";
 import { useText as r } from "../../hooks/useText.js";
-import { useEffect as i, useRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ModalFrame as i } from "./ModalFrame.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/shared/ConfirmDialog.tsx
-function l({ open: l, onOpenChange: u, title: d, description: f, confirmLabel: p, onConfirm: m, destructive: h = !1 }) {
-	let g = r(), _ = a(null);
-	return i(() => {
-		l && _.current?.focus();
-	}, [l]), l ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
-		onClick: () => u(!1),
-		style: {
-			position: "fixed",
-			inset: 0,
-			background: "var(--scrim)",
-			zIndex: 60,
-			backdropFilter: "blur(2px)"
-		}
-	}), /* @__PURE__ */ c("div", {
-		ref: _,
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": d,
-		tabIndex: -1,
-		onKeyDown: (e) => {
-			e.key === "Escape" && u(!1);
-		},
-		style: {
-			position: "fixed",
-			top: "50%",
-			left: "50%",
-			transform: "translate(-50%, -50%)",
-			zIndex: 61,
-			width: "calc(100vw - 24px)",
-			maxWidth: 460,
-			maxHeight: "calc(var(--app-height) - var(--safe-area-top) - var(--safe-area-bottom) - 16px)",
-			background: "var(--surface)",
-			borderRadius: "var(--radius-lg)",
-			boxShadow: "var(--shadow-lg)",
-			border: "1px solid var(--border)",
-			overflow: "hidden",
-			display: "flex",
-			flexDirection: "column",
-			outline: "none"
-		},
-		children: [/* @__PURE__ */ c("div", {
+function s({ open: s, onOpenChange: c, title: l, description: u, confirmLabel: d, onConfirm: f, destructive: p = !1 }) {
+	let m = r();
+	return s ? /* @__PURE__ */ o(i, {
+		label: l,
+		maxWidth: 460,
+		onClose: () => c(!1),
+		children: [/* @__PURE__ */ o("div", {
 			style: {
 				padding: "14px 18px",
 				display: "flex",
@@ -55,47 +21,48 @@ function l({ open: l, onOpenChange: u, title: d, description: f, confirmLabel: p
 				overflowY: "auto"
 			},
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ a("span", {
 					style: {
 						width: 28,
 						height: 28,
 						borderRadius: "var(--radius-md)",
-						background: h ? "var(--danger-soft)" : "var(--accent-soft)",
-						color: h ? "var(--danger)" : "var(--accent)",
+						background: p ? "var(--danger-soft)" : "var(--accent-soft)",
+						color: p ? "var(--danger)" : "var(--accent)",
 						display: "inline-flex",
 						alignItems: "center",
 						justifyContent: "center",
 						flexShrink: 0
 					},
-					children: s(h ? e.trash : e.info, { size: 15 })
+					children: a(p ? e.trash : e.info, { size: 15 })
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ o("div", {
 					style: {
 						flex: 1,
 						minWidth: 0
 					},
-					children: [/* @__PURE__ */ s("div", {
+					children: [/* @__PURE__ */ a("div", {
 						style: {
 							fontSize: 14,
 							fontWeight: 600,
 							color: "var(--text)"
 						},
-						children: d
-					}), /* @__PURE__ */ s("div", {
+						children: l
+					}), /* @__PURE__ */ a("div", {
 						style: {
 							fontSize: 11.5,
 							color: "var(--text-3)",
 							marginTop: 2
 						},
-						children: f
+						children: u
 					})]
 				}),
-				/* @__PURE__ */ s(n, {
-					icon: /* @__PURE__ */ s(e.x, { size: 14 }),
-					onClick: () => u(!1)
+				/* @__PURE__ */ a(n, {
+					icon: /* @__PURE__ */ a(e.x, { size: 14 }),
+					title: m("dialog.close", "Close"),
+					onClick: () => c(!1)
 				})
 			]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ o("div", {
 			style: {
 				padding: "10px 16px",
 				borderTop: "1px solid var(--divider)",
@@ -108,22 +75,22 @@ function l({ open: l, onOpenChange: u, title: d, description: f, confirmLabel: p
 				flexShrink: 0
 			},
 			children: [
-				/* @__PURE__ */ s("div", { style: { flex: 1 } }),
-				/* @__PURE__ */ s(t, {
-					onClick: () => u(!1),
-					children: g("dialog.cancel", "Cancel")
+				/* @__PURE__ */ a("div", { style: { flex: 1 } }),
+				/* @__PURE__ */ a(t, {
+					onClick: () => c(!1),
+					children: m("dialog.cancel", "Cancel")
 				}),
-				/* @__PURE__ */ s(t, {
+				/* @__PURE__ */ a(t, {
 					kind: "primary",
-					danger: h,
+					danger: p,
 					onClick: () => {
-						m(), u(!1);
+						f(), c(!1);
 					},
-					children: p ?? g("dialog.confirm", "Confirm")
+					children: d ?? m("dialog.confirm", "Confirm")
 				})
 			]
 		})]
-	})] }) : null;
+	}) : null;
 }
 //#endregion
-export { l as ConfirmDialog };
+export { s as ConfirmDialog };