@openhands/agent-canvas 1.4.0 → 1.5.1

package/dist/components/features/backends/backend-form-modal.js

@@ -3,24 +3,25 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import { useNavigation as r } from "../../../context/navigation-context.js";
 import { ServerClient as i } from "../../../node_modules/@openhands/typescript-client/dist/client/server-client.js";
+import { isOpenHandsCloudHost as a } from "../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.js";
 import "../../../node_modules/@openhands/typescript-client/dist/clients.js";
-import { getLockedCloudHost as a } from "../../../api/agent-server-config.js";
-import { getAgentServerClientOptions as o } from "../../../api/agent-server-client-options.js";
-import { assertAgentServerVersionIsSupported as s, getDisplayAgentServerVersion as c } from "../../../api/agent-server-compatibility.js";
-import { getUserFacingConnectionErrorMessage as l } from "../../../utils/user-facing-error.js";
-import { useQuery as u } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
-import { useActiveBackendContext as d } from "../../../contexts/active-backend-context.js";
-import { useTracking as f } from "../../../hooks/use-tracking.js";
-import { ModalBackdrop as p } from "../../shared/modals/modal-backdrop.js";
-import { MODAL_MAX_WIDTH_VIEWPORT as m, modalWidthClassName as h } from "../../shared/modals/modal-body.js";
-import { modalTitleLgClassName as g, modalTitleLgMediumClassName as _ } from "../../../utils/modal-classes.js";
-import { ModalCloseButton as v } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as y } from "../settings/brand-button.js";
-import { SettingsInput as b } from "../settings/settings-input.js";
-import { useBackendsHealth as x } from "../../../hooks/query/use-backends-health.js";
-import S from "../../../assets/branding/openhands-logo-white.js";
-import { SegmentedToggle as C } from "../files-tab/segmented-toggle.js";
-import { isOpenHandsCloudHost as w } from "../../../api/device-flow-client.js";
+import { getLockedCloudHost as o } from "../../../api/agent-server-config.js";
+import { getAgentServerClientOptions as s } from "../../../api/agent-server-client-options.js";
+import { assertAgentServerVersionIsSupported as c, getDisplayAgentServerVersion as l } from "../../../api/agent-server-compatibility.js";
+import { getUserFacingConnectionErrorMessage as u } from "../../../utils/user-facing-error.js";
+import { useQuery as d } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
+import { useActiveBackendContext as f } from "../../../contexts/active-backend-context.js";
+import "../../../api/device-flow-client.js";
+import { useTracking as p } from "../../../hooks/use-tracking.js";
+import { ModalBackdrop as m } from "../../shared/modals/modal-backdrop.js";
+import { MODAL_MAX_WIDTH_VIEWPORT as h, modalWidthClassName as g } from "../../shared/modals/modal-body.js";
+import { modalTitleLgClassName as _, modalTitleLgMediumClassName as v } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as y } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as b } from "../settings/brand-button.js";
+import { SettingsInput as x } from "../settings/settings-input.js";
+import { useBackendsHealth as S } from "../../../hooks/query/use-backends-health.js";
+import C from "../../../assets/branding/openhands-logo-white.js";
+import { SegmentedToggle as w } from "../files-tab/segmented-toggle.js";
 import T from "../../../icons/chevron-down-small.js";
 import { getBackendStatusLabel as E } from "./backend-status-label.js";
 import { BackendStatusDot as D } from "./backend-status-dot.js";
@@ -29,7 +30,7 @@ import k from "react";
 import { jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/components/features/backends/backend-form-modal.tsx
 function M(e) {
-	return w(e) ? "cloud" : "local";
+	return a(e) ? "cloud" : "local";
 }
 function N(e) {
 	let t = e.toLowerCase().replace(/^\[|\]$/g, "");
@@ -62,42 +63,42 @@ function L(e, n) {
 	});
 }
 function R(e) {
-	return l(e);
+	return u(e);
 }
 function z(e, t) {
 	let n = R(t);
 	return n ? `${e}\n${n}` : e;
 }
 async function B(e) {
-	e.kind === "local" && s(await new i(o({
+	e.kind === "local" && c(await new i(s({
 		host: e.host,
 		sessionApiKey: e.apiKey || null,
 		timeout: 5e3
 	})).getServerInfo());
 }
 function V({ backend: n, testIdRoot: r }) {
-	let { t: a } = e("openhands"), s = x([n])[n.id], l = s?.isConnected ?? null, d = s?.disabled === !0, f = s?.consecutiveFailures ?? 0, p = s?.lastError ?? null, { data: m } = u({
+	let { t: a } = e("openhands"), o = S([n])[n.id], c = o?.isConnected ?? null, u = o?.disabled === !0, f = o?.consecutiveFailures ?? 0, p = o?.lastError ?? null, { data: m } = d({
 		queryKey: [
 			"backend-version",
 			n.host,
 			n.apiKey
 		],
-		queryFn: async () => c(await new i(o({
+		queryFn: async () => l(await new i(s({
 			host: n.host,
 			sessionApiKey: n.apiKey || null,
 			timeout: 5e3
 		})).getServerInfo()),
 		retry: !1,
 		staleTime: 6e4,
-		enabled: n.kind === "local" && !d
-	}), h = E(a, n, s), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
+		enabled: n.kind === "local" && !u
+	}), h = E(a, n, o), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
 	return /* @__PURE__ */ j("div", {
 		className: "flex flex-col gap-2",
 		children: [/* @__PURE__ */ j("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ A(D, { isConnected: l }),
+				/* @__PURE__ */ A(D, { isConnected: c }),
 				/* @__PURE__ */ A("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
@@ -117,7 +118,7 @@ function V({ backend: n, testIdRoot: r }) {
 					children: a(t.BACKEND$VERSION_LABEL, { version: m })
 				}) : null
 			]
-		}), d ? /* @__PURE__ */ j("div", {
+		}), u ? /* @__PURE__ */ j("div", {
 			"data-testid": `${r}-status-error`,
 			className: "flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm",
 			children: [
@@ -184,8 +185,8 @@ function H({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 		])
 	};
 }
-function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, hideConfigurationFields: u = !1, onSubmitOverride: f }) {
-	let { t: p } = e("openhands"), { addBackend: m, updateBackend: h } = d(), g = r === "edit" && i ? i.kind : null, { name: _, setName: v, host: x, setHost: S, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: M } = H({
+function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, hideConfigurationFields: u = !1, onSubmitOverride: d }) {
+	let { t: p } = e("openhands"), { addBackend: m, updateBackend: h } = f(), g = r === "edit" && i ? i.kind : null, { name: _, setName: v, host: y, setHost: S, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: M } = H({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
@@ -193,15 +194,15 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 		onSuccess: async () => {
 			let e = {
 				name: _.trim(),
-				host: P(x),
+				host: P(y),
 				apiKey: C.trim(),
 				kind: g ?? O
 			};
 			r === "edit" && i ? h(i.id, e) : m(e), a();
 		},
 		requireApiKey: l,
-		onSubmitOverride: f
-	}), [N, L] = k.useState(!1), [R, z] = k.useState(!1), U = g ?? O, W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = l || U !== "local", K = _.trim().length > 0 && F(x) && (!G || C.trim().length > 0), q = N && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = R ? x.trim() ? F(x) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
+		onSubmitOverride: d
+	}), [N, L] = k.useState(!1), [R, z] = k.useState(!1), U = g ?? O, W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = l || U !== "local", K = _.trim().length > 0 && F(y) && (!G || C.trim().length > 0), q = N && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = R ? y.trim() ? F(y) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
 	return /* @__PURE__ */ j("form", {
 		"data-testid": `${W}-form`,
 		onSubmit: async (e) => {
@@ -216,7 +217,7 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 			"data-testid": `${W}-configuration-fields`,
 			className: n("flex flex-col gap-4", u && "hidden"),
 			children: [
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ A(x, {
 					testId: `${W}-name`,
 					name: `${W}-name`,
 					type: "text",
@@ -231,12 +232,12 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					showRequiredTag: !0,
 					error: q
 				}),
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ A(x, {
 					testId: `${W}-host`,
 					name: `${W}-host`,
 					type: "text",
 					label: p(t.BACKEND$HOST_LABEL),
-					value: x,
+					value: y,
 					onChange: c ? void 0 : (e) => {
 						S(e), E(null);
 					},
@@ -247,7 +248,7 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					error: J,
 					isDisabled: c
 				}),
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ A(x, {
 					testId: `${W}-api-key`,
 					name: `${W}-api-key`,
 					type: "password",
@@ -276,13 +277,13 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 			testIdRoot: W
 		}) : /* @__PURE__ */ j("div", {
 			className: "flex justify-end gap-2 mt-2 w-full",
-			children: [/* @__PURE__ */ A(y, {
+			children: [/* @__PURE__ */ A(b, {
 				type: "button",
 				variant: "secondary",
 				onClick: a,
 				testId: `${W}-cancel`,
 				children: p(t.BUTTON$CANCEL)
-			}), /* @__PURE__ */ A(y, {
+			}), /* @__PURE__ */ A(b, {
 				type: "submit",
 				variant: "primary",
 				isDisabled: !K || D,
@@ -298,9 +299,9 @@ function W() {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend: i, requireManualApiKey: o = !1, manualSubmitLabel: s, manualSubmittingLabel: c, manualSubmitTestId: l }) {
-	let { t: u } = e("openhands"), d = a();
-	return d ? /* @__PURE__ */ A("div", {
+function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend: i, requireManualApiKey: a = !1, manualSubmitLabel: s, manualSubmittingLabel: c, manualSubmitTestId: l, analyticsSource: u }) {
+	let { t: d } = e("openhands"), f = o();
+	return f ? /* @__PURE__ */ A("div", {
 		"data-testid": `${r}-connection-options`,
 		className: "flex justify-center",
 		children: /* @__PURE__ */ A("div", {
@@ -308,7 +309,8 @@ function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend
 			children: /* @__PURE__ */ A(q, {
 				onConnected: n,
 				testIdRoot: r,
-				lockedHost: d
+				lockedHost: f,
+				analyticsSource: u
 			})
 		})
 	}) : /* @__PURE__ */ j("div", {
@@ -320,22 +322,23 @@ function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend
 				onConnected: n,
 				testIdRoot: r,
 				initialBackend: i,
-				requireApiKey: o,
-				submitLabel: s ?? u(t.BACKEND$CONNECT),
-				submittingLabel: c ?? u(t.ONBOARDING$BACKEND_STATUS_CHECKING),
+				requireApiKey: a,
+				submitLabel: s ?? d(t.BACKEND$CONNECT),
+				submittingLabel: c ?? d(t.ONBOARDING$BACKEND_STATUS_CHECKING),
 				submitTestId: l
 			})
 		}), /* @__PURE__ */ A("div", {
 			className: "flex-1 min-w-0",
 			children: /* @__PURE__ */ A(q, {
 				onConnected: n,
-				testIdRoot: r
+				testIdRoot: r,
+				analyticsSource: u
 			})
 		})]
 	});
 }
 function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a, submitLabel: o, submittingLabel: s, submitTestId: c }) {
-	let { t: l } = e("openhands"), { name: u, setName: d, host: f, setHost: p, apiKey: m, setApiKey: h, connectionError: g, setConnectionError: _, isSubmitting: v, kind: x, setKind: S, canSubmit: w, handleSubmit: T } = H({
+	let { t: l } = e("openhands"), { name: u, setName: d, host: f, setHost: p, apiKey: m, setApiKey: h, connectionError: g, setConnectionError: _, isSubmitting: v, kind: y, setKind: S, canSubmit: C, handleSubmit: T } = H({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
@@ -345,7 +348,7 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 				name: u.trim(),
 				host: P(f),
 				apiKey: m.trim(),
-				kind: x
+				kind: y
 			}, "manual");
 		},
 		requireApiKey: a
@@ -357,7 +360,7 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(b, {
+				children: [/* @__PURE__ */ A(x, {
 					testId: `${r}-name`,
 					name: `${r}-name`,
 					type: "text",
@@ -375,7 +378,7 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 			}),
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(b, {
+				children: [/* @__PURE__ */ A(x, {
 					testId: `${r}-host`,
 					name: `${r}-host`,
 					type: "text",
@@ -397,8 +400,8 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 				children: [/* @__PURE__ */ A("span", {
 					className: "text-sm",
 					children: l(t.BACKEND$KIND_LABEL)
-				}), /* @__PURE__ */ A(C, {
-					value: x,
+				}), /* @__PURE__ */ A(w, {
+					value: y,
 					options: [{
 						value: "local",
 						label: l(t.BACKEND$KIND_LOCAL)
@@ -411,7 +414,7 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 					testId: `${r}-kind`
 				})]
 			}),
-			/* @__PURE__ */ A(b, {
+			/* @__PURE__ */ A(x, {
 				testId: `${r}-api-key`,
 				name: `${r}-api-key`,
 				type: "password",
@@ -429,10 +432,10 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 				className: "rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words",
 				children: g
 			}) : null,
-			/* @__PURE__ */ A(y, {
+			/* @__PURE__ */ A(b, {
 				type: "submit",
 				variant: "secondary",
-				isDisabled: !w || v,
+				isDisabled: !C || v,
 				testId: c ?? `${r}-submit`,
 				className: "w-full text-center",
 				children: v ? s : o
@@ -440,66 +443,67 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 		]
 	});
 }
-function q({ onConnected: r, testIdRoot: i, lockedHost: a }) {
-	let { t: o } = e("openhands"), [s, c] = k.useState(!1), [l, u] = k.useState(""), d = a ?? (l.trim() || I);
+function q({ onConnected: r, testIdRoot: i, lockedHost: a, analyticsSource: o }) {
+	let { t: s } = e("openhands"), [c, l] = k.useState(!1), [u, d] = k.useState(""), f = a ?? (u.trim() || I);
 	return /* @__PURE__ */ j("div", {
 		className: "flex flex-1 min-w-0 flex-col items-center gap-3 pb-8",
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ A(S, {
+				children: [/* @__PURE__ */ A(C, {
 					width: 56,
 					height: 56,
 					"aria-hidden": !0
 				}), /* @__PURE__ */ A("h4", {
-					className: _,
+					className: v,
 					"data-testid": `${i}-cloud-title`,
-					children: o(t.BACKEND$CLOUD_TITLE)
+					children: s(t.BACKEND$CLOUD_TITLE)
 				})]
 			}),
 			/* @__PURE__ */ A("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
-				children: o(t.BACKEND$CLOUD_DESCRIPTION)
+				children: s(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
 			/* @__PURE__ */ A(O, {
-				host: d,
+				host: f,
 				onSuccess: (e) => {
 					r({
 						name: "OpenHands Cloud",
-						host: P(d),
+						host: P(f),
 						apiKey: e,
 						kind: "cloud"
 					}, "cloud_login");
 				},
-				testIdRoot: i
+				testIdRoot: i,
+				analyticsSource: o
 			}),
 			a ? null : /* @__PURE__ */ j("div", {
 				className: "w-full",
 				children: [/* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => c((e) => !e),
-					"aria-expanded": s,
+					onClick: () => l((e) => !e),
+					"aria-expanded": c,
 					"data-testid": `${i}-advanced-toggle`,
 					className: "flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2",
-					children: [/* @__PURE__ */ A("span", { children: o(t.BACKEND$ADVANCED) }), /* @__PURE__ */ A(T, {
-						className: n("h-4 w-4 shrink-0 text-muted transition-transform", s && "rotate-180"),
+					children: [/* @__PURE__ */ A("span", { children: s(t.BACKEND$ADVANCED) }), /* @__PURE__ */ A(T, {
+						className: n("h-4 w-4 shrink-0 text-muted transition-transform", c && "rotate-180"),
 						"aria-hidden": !0
 					})]
 				}), /* @__PURE__ */ j("div", {
-					className: n("pt-2", !s && "pointer-events-none invisible"),
-					"aria-hidden": !s,
-					children: [/* @__PURE__ */ A(b, {
+					className: n("pt-2", !c && "pointer-events-none invisible"),
+					"aria-hidden": !c,
+					children: [/* @__PURE__ */ A(x, {
 						testId: `${i}-cloud-host`,
 						name: `${i}-cloud-host`,
 						type: "text",
-						label: o(t.BACKEND$HOST_LABEL),
-						value: l,
-						onChange: u,
+						label: s(t.BACKEND$HOST_LABEL),
+						value: u,
+						onChange: d,
 						placeholder: I,
 						className: "w-full"
 					}), /* @__PURE__ */ A("p", {
 						className: "mt-1 text-xs text-[var(--oh-muted)]",
-						children: o(t.BACKEND$LOGIN_CLOUD_HINT)
+						children: s(t.BACKEND$LOGIN_CLOUD_HINT)
 					})]
 				})]
 			})
@@ -507,45 +511,48 @@ function q({ onConnected: r, testIdRoot: i, lockedHost: a }) {
 	});
 }
 function J({ onClose: e, source: t }) {
-	let { addBackend: n } = d(), r = W(), { trackBackendAdded: i } = f();
-	return /* @__PURE__ */ A(G, { onConnected: k.useCallback((a, o) => {
-		n(a);
-		let s = a.host === I;
-		i({
-			backendKind: a.kind,
-			connectionMethod: o,
-			isOpenhandsCloud: s,
-			isCustomHost: !s,
-			hasApiKey: !!a.apiKey,
-			source: t
-		}), r(), e();
-	}, [
-		n,
-		r,
-		e,
-		i,
-		t
-	]) });
+	let { addBackend: n } = f(), r = W(), { trackBackendAdded: i } = p();
+	return /* @__PURE__ */ A(G, {
+		onConnected: k.useCallback((o, s) => {
+			n(o);
+			let c = a(o.host);
+			i({
+				backendKind: o.kind,
+				connectionMethod: s,
+				isOpenhandsCloud: c,
+				isCustomHost: !c,
+				hasApiKey: !!o.apiKey,
+				source: t
+			}), r(), e();
+		}, [
+			n,
+			r,
+			e,
+			i,
+			t
+		]),
+		analyticsSource: t
+	});
 }
 function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal", hideCloseButton: s = !1 }) {
 	let { t: c } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ A(p, {
+	if (r === "add") return /* @__PURE__ */ A(m, {
 		onClose: s ? void 0 : a,
 		closeOnEscape: !1,
 		closeOnBackdropClick: !s,
 		"aria-label": c(t.BACKEND$ADD_TITLE),
 		children: /* @__PURE__ */ j("div", {
 			"data-testid": s ? "onboarding-modal" : "add-backend-modal",
-			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", h("xl"), m),
+			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", g("xl"), h),
 			children: [
-				s ? null : /* @__PURE__ */ A(v, {
+				s ? null : /* @__PURE__ */ A(y, {
 					onClose: a,
 					testId: "add-backend-close"
 				}),
 				s ? null : /* @__PURE__ */ A("div", {
 					className: "px-6 pt-6 pb-2 pr-12",
 					children: /* @__PURE__ */ A("h2", {
-						className: g,
+						className: _,
 						children: c(t.BACKEND$ADD_TITLE)
 					})
 				}),
@@ -560,20 +567,20 @@ function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal", h
 		})
 	});
 	let l = "edit-backend";
-	return /* @__PURE__ */ A(p, {
+	return /* @__PURE__ */ A(m, {
 		onClose: a,
 		closeOnEscape: !1,
 		"aria-label": c(t.BACKEND$EDIT_TITLE),
 		children: /* @__PURE__ */ j("div", {
 			"data-testid": `${l}-modal`,
-			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", h("md")),
+			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", g("md")),
 			children: [
-				/* @__PURE__ */ A(v, {
+				/* @__PURE__ */ A(y, {
 					onClose: a,
 					testId: `${l}-close`
 				}),
 				/* @__PURE__ */ A("h2", {
-					className: n("pr-6", g),
+					className: n("pr-6", _),
 					children: c(t.BACKEND$EDIT_TITLE)
 				}),
 				/* @__PURE__ */ A(U, {