@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/datasink/ImportDataSinkDialog.js

@@ -1,401 +1,406 @@
-import e from "../../hooks/useBigConsoleAnalytics.js";
-import t from "../../hooks/useImportDataSink.js";
+import { Section as e, SectionStack as t } from "../common/Section.js";
+import "../common/index.js";
+import n from "../../hooks/useBigConsoleAnalytics.js";
+import r from "../../hooks/useImportDataSink.js";
 import "../../hooks/index.js";
-import { memo as n, useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import { ArrowLeft as s, Check as c, FileJson as l, Info as u, RefreshCw as d, Upload as f, XCircle as p } from "lucide-react";
-import { Badge as m, Button as h, Card as g, CardContent as _, Dialog as v, DialogContent as y, DialogDescription as b, DialogFooter as ee, DialogHeader as te, DialogTitle as x, Input as S, Label as C, Spinner as w } from "@burdenoff/fe-libs/ui";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { memo as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { ArrowLeft as l, Check as ee, FileJson as u, Info as d, RefreshCw as te, Upload as f, XCircle as p } from "lucide-react";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Badge as h, Button as g, Dialog as _, DialogContent as v, DialogDescription as y, DialogFooter as b, DialogHeader as ne, DialogTitle as re, Input as x, Label as S, Spinner as C } from "@burdenoff/fe-libs/ui";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/ImportDataSinkDialog.tsx
-var O = n(function({ isOpen: n, onClose: O, onSuccess: k }) {
-	let [A, j] = o("select"), [, M] = o(null), [N, P] = o(null), [F, I] = o(""), [L, R] = o(""), z = a(null), { loading: B, error: V, validationResult: H, importResult: U, validateImport: W, importDataSink: G, extractDataSinkId: K, clearState: q } = t(), J = e();
-	i(() => {
-		n && (j("select"), M(null), P(null), I(""), R(""), q());
-	}, [n, q]);
-	let Y = r(async (e) => {
+var D = [
+	{
+		id: "select",
+		label: "Choose file"
+	},
+	{
+		id: "preview",
+		label: "Review"
+	},
+	{
+		id: "complete",
+		label: "Done"
+	}
+];
+function O(e) {
+	return e === "select" ? 0 : e === "complete" ? 2 : 1;
+}
+var k = i(function({ isOpen: i, onClose: k, onSuccess: A }) {
+	let { t: j } = m(), [M, N] = c("select"), [, P] = c(null), [F, I] = c(null), [L, R] = c(""), [z, B] = c(""), V = s(null), { loading: H, error: U, validationResult: W, importResult: G, validateImport: K, importDataSink: q, extractDataSinkId: J, clearState: Y } = r(), X = n();
+	o(() => {
+		i && (N("select"), P(null), I(null), R(""), B(""), Y());
+	}, [i, Y]);
+	let ie = a(async (e) => {
 		let t = e.target.files?.[0];
 		if (!t) return;
 		if (!t.name.endsWith(".json")) {
-			alert("Please select a JSON file");
+			alert(j("bigconsole.dataSinks.import.selectJsonFile", "Please select a JSON file"));
 			return;
 		}
-		M(t);
+		P(t);
 		let n = new FileReader();
 		n.onload = async (e) => {
 			let t = e.target?.result;
-			P(t);
-			let n = W(t);
-			n.isValid && n.dataSinkInfo ? (j("preview"), I(n.dataSinkInfo.name || ""), R(n.dataSinkInfo.key || "")) : j("preview");
+			I(t);
+			let n = K(t);
+			n.isValid && n.dataSinkInfo ? (N("preview"), R(n.dataSinkInfo.name || ""), B(n.dataSinkInfo.key || "")) : N("preview");
 		}, n.onerror = () => {
-			alert("Failed to read file");
+			alert(j("bigconsole.dataSinks.import.readFileError", "Failed to read file"));
 		}, n.readAsText(t);
-	}, [W]), X = r((e) => {
+	}, [K, j]), ae = a((e) => {
 		e.preventDefault();
 		let t = e.dataTransfer.files?.[0];
 		if (t) {
 			let e = new DataTransfer();
-			e.items.add(t), z.current && (z.current.files = e.files, z.current.dispatchEvent(new Event("change", { bubbles: !0 })));
+			e.items.add(t), V.current && (V.current.files = e.files, V.current.dispatchEvent(new Event("change", { bubbles: !0 })));
 		}
-	}, []), Z = r(async () => {
-		if (!N) return;
-		j("importing");
+	}, []), oe = a(async () => {
+		if (!F) return;
+		N("importing");
 		let e = {
-			name: F.trim() || void 0,
-			key: L.trim() || void 0
+			name: L.trim() || void 0,
+			key: z.trim() || void 0
 		};
-		J("bigconsole.data_sink.import_clicked", { source: "import" });
-		let t = await G(N, e);
-		t?.success && t.dataSink ? (j("complete"), J("bigconsole.data_sink.imported", {
+		X("bigconsole.data_sink.import_clicked", { source: "import" });
+		let t = await q(F, e);
+		t?.success && t.dataSink ? (N("complete"), X("bigconsole.data_sink.imported", {
 			dataSinkId: t.dataSink.id,
 			source: "import",
 			originalUpdated: t.originalUpdated ?? !1
-		}), k?.(t.dataSink.id, t.dataSink.name, t.originalUpdated ?? !1)) : j("preview");
+		}), A?.(t.dataSink.id, t.dataSink.name, t.originalUpdated ?? !1)) : N("preview");
 	}, [
-		J,
-		N,
-		G,
-		L,
+		X,
 		F,
-		k
-	]), Q = !B && A !== "importing", $ = N ? K(N) : null;
-	return /* @__PURE__ */ E(v, {
-		open: n,
-		onOpenChange: (e) => !e && Q && O(),
-		children: /* @__PURE__ */ D(y, {
-			className: "sm:max-w-lg max-h-[85vh] flex flex-col",
+		q,
+		z,
+		L,
+		A
+	]), Z = !H && M !== "importing", Q = F ? J(F) : null, $ = O(M);
+	return /* @__PURE__ */ T(_, {
+		open: i,
+		onOpenChange: (e) => !e && Z && k(),
+		children: /* @__PURE__ */ E(v, {
+			className: "flex max-h-[85vh] flex-col sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ D(te, { children: [/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ E(ne, { children: [/* @__PURE__ */ E("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ E("div", {
-						className: "flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-						children: /* @__PURE__ */ E(f, { className: "size-5 text-primary" })
-					}), /* @__PURE__ */ E(x, { children: "Import DataSink" })]
-				}), /* @__PURE__ */ E(b, { children: "Upload a DataSink export file to restore it into this workspace." })] }),
-				/* @__PURE__ */ D("div", {
-					className: "flex-1 overflow-y-auto py-4 space-y-4",
-					children: [
-						A === "select" && /* @__PURE__ */ D("div", {
-							onDragOver: (e) => e.preventDefault(),
-							onDrop: X,
-							className: "border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors",
-							children: [
-								/* @__PURE__ */ E(l, { className: "size-12 mx-auto text-text-secondary mb-4" }),
-								/* @__PURE__ */ E("p", {
-									className: "text-sm mb-2",
-									children: "Drag and drop a DataSink export file here"
-								}),
-								/* @__PURE__ */ E("p", {
-									className: "text-xs text-text-secondary mb-4",
-									children: "or"
-								}),
-								/* @__PURE__ */ E("input", {
-									ref: z,
-									type: "file",
-									accept: ".json",
-									onChange: Y,
-									className: "hidden"
-								}),
-								/* @__PURE__ */ E(h, {
-									onClick: () => z.current?.click(),
-									disabled: B,
-									children: "Browse Files"
-								}),
-								/* @__PURE__ */ E("p", {
-									className: "text-xs text-text-secondary mt-4",
-									children: "Only .json files exported from BigConsole are supported"
-								})
-							]
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex size-10 items-center justify-center rounded-card bg-bg-accentSubtle",
+						children: /* @__PURE__ */ T(f, { className: "size-5 text-text-link" })
+					}), /* @__PURE__ */ T(re, { children: j("bigconsole.dataSinks.import.title", "Import DataSink") })]
+				}), /* @__PURE__ */ T(y, { children: j("bigconsole.dataSinks.import.description", "Upload a DataSink export file to restore it into this workspace.") })] }),
+				/* @__PURE__ */ T("ol", {
+					className: "flex flex-wrap items-center gap-x-icon-gap gap-y-1 text-xs",
+					"aria-label": "Import progress",
+					children: D.map((e, t) => /* @__PURE__ */ E("li", {
+						"aria-current": t === $ ? "step" : void 0,
+						className: `flex items-center gap-icon-gap ${t === $ ? "font-semibold text-text-primary" : "text-text-muted"}`,
+						children: [
+							/* @__PURE__ */ T("span", {
+								className: `inline-flex size-5 items-center justify-center rounded-pill text-[10px] ${t <= $ ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken"}`,
+								children: t + 1
+							}),
+							e.label,
+							t < D.length - 1 && /* @__PURE__ */ T("span", {
+								"aria-hidden": "true",
+								className: "text-text-muted",
+								children: "›"
+							})
+						]
+					}, e.id))
+				}),
+				/* @__PURE__ */ T("div", {
+					className: "min-w-0 flex-1 overflow-y-auto py-4",
+					children: /* @__PURE__ */ E(t, { children: [
+						M === "select" && /* @__PURE__ */ T(e, {
+							title: "Choose an export file",
+							description: j("bigconsole.dataSinks.import.supportedFilesHint", "Only .json files exported from BigConsole are supported"),
+							headingLevel: 3,
+							bodyClassName: "mt-form-gap",
+							children: /* @__PURE__ */ E("div", {
+								onDragOver: (e) => e.preventDefault(),
+								onDrop: ae,
+								className: "rounded-card border-2 border-dashed border-[var(--color-border-default)] p-8 text-center hover:border-[var(--color-action-primary-bg)] motion-safe:transition-colors",
+								children: [
+									/* @__PURE__ */ T(u, { className: "mx-auto mb-4 size-12 text-text-secondary" }),
+									/* @__PURE__ */ T("p", {
+										className: "mb-2 text-sm",
+										children: j("bigconsole.dataSinks.import.dropzoneText", "Drag and drop a DataSink export file here")
+									}),
+									/* @__PURE__ */ T("p", {
+										className: "mb-4 text-xs text-text-secondary",
+										children: j("bigconsole.dataSinks.import.or", "or")
+									}),
+									/* @__PURE__ */ T("input", {
+										ref: V,
+										type: "file",
+										accept: ".json",
+										onChange: ie,
+										className: "hidden"
+									}),
+									/* @__PURE__ */ T(g, {
+										onClick: () => V.current?.click(),
+										disabled: H,
+										children: j("bigconsole.dataSinks.import.browseFiles", "Browse Files")
+									})
+								]
+							})
 						}),
-						(A === "preview" || A === "importing") && H && /* @__PURE__ */ D(T, { children: [
-							H.dataSinkInfo && /* @__PURE__ */ E(g, { children: /* @__PURE__ */ D(_, {
-								className: "p-4 space-y-2",
+						(M === "preview" || M === "importing") && W && /* @__PURE__ */ E(w, { children: [
+							W.dataSinkInfo && /* @__PURE__ */ E(e, {
+								emphasis: "muted",
+								padding: "compact",
+								headingLevel: 3,
+								title: "File contents",
+								description: "What this export file describes.",
+								bodyClassName: "space-y-2",
 								children: [
-									/* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Name"
-										}), /* @__PURE__ */ E("span", {
-											className: "text-sm font-medium",
-											children: H.dataSinkInfo.name || "Unnamed"
+											children: j("bigconsole.dataSinks.import.nameLabel", "Name")
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 truncate text-sm font-medium",
+											children: W.dataSinkInfo.name || j("bigconsole.dataSinks.import.unnamed", "Unnamed")
 										})]
 									}),
-									/* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Key"
-										}), /* @__PURE__ */ E("span", {
-											className: "text-xs font-mono",
-											children: H.dataSinkInfo.key
+											children: j("bigconsole.dataSinks.import.keyLabel", "Key")
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 truncate font-mono text-xs",
+											children: W.dataSinkInfo.key
 										})]
 									}),
-									/* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Status"
-										}), /* @__PURE__ */ E(m, {
+											children: j("bigconsole.dataSinks.import.statusLabel", "Status")
+										}), /* @__PURE__ */ T(h, {
 											variant: "secondary",
-											children: H.dataSinkInfo.status
+											children: W.dataSinkInfo.status
 										})]
 									}),
-									/* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Setup State"
-										}), /* @__PURE__ */ E(m, {
+											children: j("bigconsole.dataSinks.import.setupStateLabel", "Setup State")
+										}), /* @__PURE__ */ T(h, {
 											variant: "outline",
-											children: H.dataSinkInfo.setupState
+											children: W.dataSinkInfo.setupState
 										})]
 									}),
-									H.dataSinkInfo.exportedFrom && /* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									W.dataSinkInfo.exportedFrom && /* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Source ID"
-										}), /* @__PURE__ */ E("span", {
-											className: "text-xs text-text-secondary font-mono truncate max-w-[180px]",
-											children: H.dataSinkInfo.exportedFrom
+											children: j("bigconsole.dataSinks.import.sourceIdLabel", "Source ID")
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 max-w-[180px] truncate font-mono text-xs text-text-secondary",
+											children: W.dataSinkInfo.exportedFrom
 										})]
 									}),
-									/* @__PURE__ */ D("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ E("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
-											children: "Schema Version"
-										}), /* @__PURE__ */ E("span", {
+											children: j("bigconsole.dataSinks.import.schemaVersionLabel", "Schema Version")
+										}), /* @__PURE__ */ T("span", {
 											className: "text-xs text-text-secondary",
-											children: H.dataSinkInfo.schemaVersion
+											children: W.dataSinkInfo.schemaVersion
 										})]
 									})
 								]
-							}) }),
-							H.errors.length > 0 && /* @__PURE__ */ E(g, {
-								className: "border-status-error-border/50 bg-status-error-bg/5",
-								children: /* @__PURE__ */ D(_, {
-									className: "p-3",
-									children: [/* @__PURE__ */ D("div", {
-										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ E(p, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ D("span", {
-											className: "text-sm font-medium text-status-error-text",
+							}),
+							W.errors.length > 0 && /* @__PURE__ */ T(e, {
+								tone: "danger",
+								padding: "compact",
+								headingLevel: 3,
+								title: j("bigconsole.dataSinks.import.errorsHeading", "Errors ({{count}})", { count: W.errors.length }),
+								icon: /* @__PURE__ */ T(p, { className: "size-4" }),
+								children: /* @__PURE__ */ T("ul", {
+									className: "space-y-1 text-xs text-status-error-text",
+									children: W.errors.map((e, t) => /* @__PURE__ */ E("li", { children: [
+										/* @__PURE__ */ E("span", {
+											className: "font-mono",
 											children: [
-												"Errors (",
-												H.errors.length,
-												")"
+												"[",
+												e.code,
+												"]"
 											]
-										})]
-									}), /* @__PURE__ */ E("ul", {
-										className: "text-xs text-status-error-text space-y-1",
-										children: H.errors.map((e, t) => /* @__PURE__ */ D("li", { children: [
-											/* @__PURE__ */ D("span", {
-												className: "font-mono",
-												children: [
-													"[",
-													e.code,
-													"]"
-												]
-											}),
-											" ",
-											e.message
-										] }, t))
-									})]
+										}),
+										" ",
+										e.message
+									] }, t))
 								})
 							}),
-							H.isValid && /* @__PURE__ */ D("div", {
-								className: "space-y-4",
+							W.isValid && /* @__PURE__ */ E(e, {
+								title: j("bigconsole.dataSinks.import.optionsHeading", "Import Options"),
+								description: "Rename the sink or give it a different key before importing.",
+								headingLevel: 3,
+								bodyClassName: "space-y-form-gap",
 								children: [
-									/* @__PURE__ */ E("p", {
-										className: "text-sm font-medium",
-										children: "Import Options"
-									}),
-									/* @__PURE__ */ E(g, {
-										className: "border-blue-500/50 bg-blue-500/5",
-										children: /* @__PURE__ */ E(_, {
-											className: "p-3",
-											children: /* @__PURE__ */ D("div", {
-												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ E(u, { className: "size-4 text-blue-600 mt-0.5 shrink-0" }), /* @__PURE__ */ E("div", {
-													className: "text-xs text-blue-700 dark:text-blue-400",
-													children: $ ? /* @__PURE__ */ D(T, { children: [
-														/* @__PURE__ */ E("p", {
-															className: "font-medium mb-1",
-															children: "Import will check for existing DataSink"
-														}),
-														/* @__PURE__ */ D("p", { children: [
-															"If the original DataSink (ID:",
-															" ",
-															/* @__PURE__ */ D("code", {
-																className: "font-mono bg-blue-200/50 px-1 rounded",
-																children: [$.slice(0, 8), "..."]
-															}),
-															") exists:"
-														] }),
-														/* @__PURE__ */ D("ul", {
-															className: "list-disc list-inside mt-1 space-y-0.5",
-															children: [/* @__PURE__ */ E("li", { children: "With changes → Update the existing DataSink" }), /* @__PURE__ */ E("li", { children: "No changes → Show \"already exists\" message" })]
-														}),
-														/* @__PURE__ */ E("p", {
-															className: "mt-1",
-															children: "If original doesn't exist → Create a new DataSink"
-														})
-													] }) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("p", {
-														className: "font-medium mb-1",
-														children: "A new DataSink will be created"
-													}), /* @__PURE__ */ E("p", { children: "Import as a new DataSink with the specified configuration." })] })
-												})]
-											})
+									/* @__PURE__ */ T(e, {
+										tone: "info",
+										emphasis: "muted",
+										padding: "compact",
+										headingLevel: 4,
+										icon: /* @__PURE__ */ T(d, { className: "size-4" }),
+										title: Q ? j("bigconsole.dataSinks.import.checkExistingHeading", "Import will check for existing DataSink") : j("bigconsole.dataSinks.import.newWillBeCreatedHeading", "A new DataSink will be created"),
+										children: /* @__PURE__ */ T("div", {
+											className: "text-xs text-[var(--color-status-info-text)]",
+											children: Q ? /* @__PURE__ */ E(w, { children: [
+												/* @__PURE__ */ E("p", { children: [
+													j("bigconsole.dataSinks.import.ifOriginalExistsPrefix", "If the original DataSink (ID:"),
+													" ",
+													/* @__PURE__ */ E("code", {
+														className: "rounded-input bg-bg-surface px-1 font-mono",
+														children: [Q.slice(0, 8), "..."]
+													}),
+													j("bigconsole.dataSinks.import.ifOriginalExistsSuffix", ") exists:")
+												] }),
+												/* @__PURE__ */ E("ul", {
+													className: "mt-1 list-inside list-disc space-y-0.5",
+													children: [/* @__PURE__ */ T("li", { children: j("bigconsole.dataSinks.import.withChangesUpdate", "With changes → Update the existing DataSink") }), /* @__PURE__ */ T("li", { children: j("bigconsole.dataSinks.import.noChangesMessage", "No changes → Show \"already exists\" message") })]
+												}),
+												/* @__PURE__ */ T("p", {
+													className: "mt-1",
+													children: j("bigconsole.dataSinks.import.ifNotExistsCreate", "If original doesn't exist → Create a new DataSink")
+												})
+											] }) : /* @__PURE__ */ T("p", { children: j("bigconsole.dataSinks.import.newWillBeCreatedBody", "Import as a new DataSink with the specified configuration.") })
 										})
 									}),
-									/* @__PURE__ */ D("div", {
+									/* @__PURE__ */ E("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ E(C, {
+										children: [/* @__PURE__ */ T(S, {
 											htmlFor: "import-name",
-											children: "DataSink Name"
-										}), /* @__PURE__ */ E(S, {
+											children: j("bigconsole.dataSinks.import.nameFieldLabel", "DataSink Name")
+										}), /* @__PURE__ */ T(x, {
 											id: "import-name",
 											type: "text",
-											value: F,
-											onChange: (e) => I(e.target.value),
-											placeholder: H.dataSinkInfo?.name || "DataSink name",
-											disabled: A === "importing"
+											value: L,
+											onChange: (e) => R(e.target.value),
+											placeholder: W.dataSinkInfo?.name || j("bigconsole.dataSinks.import.namePlaceholder", "DataSink name"),
+											disabled: M === "importing"
 										})]
 									}),
-									/* @__PURE__ */ D("div", {
+									/* @__PURE__ */ E("div", {
 										className: "space-y-2",
 										children: [
-											/* @__PURE__ */ E(C, {
+											/* @__PURE__ */ T(S, {
 												htmlFor: "import-key",
-												children: "DataSink Key"
+												children: j("bigconsole.dataSinks.import.keyFieldLabel", "DataSink Key")
 											}),
-											/* @__PURE__ */ E(S, {
+											/* @__PURE__ */ T(x, {
 												id: "import-key",
 												type: "text",
-												value: L,
-												onChange: (e) => R(e.target.value),
-												placeholder: H.dataSinkInfo?.key || "datasink-key",
-												disabled: A === "importing"
+												value: z,
+												onChange: (e) => B(e.target.value),
+												placeholder: W.dataSinkInfo?.key || j("bigconsole.dataSinks.import.keyPlaceholder", "datasink-key"),
+												disabled: M === "importing"
 											}),
-											/* @__PURE__ */ E("p", {
+											/* @__PURE__ */ T("p", {
 												className: "text-xs text-text-secondary",
-												children: "Use a unique key to avoid conflicts with existing DataSinks."
+												children: j("bigconsole.dataSinks.import.keyHelp", "Use a unique key to avoid conflicts with existing DataSinks.")
 											})
 										]
 									})
 								]
 							})
 						] }),
-						A === "complete" && U?.success && /* @__PURE__ */ D("div", {
-							className: "text-center py-6",
-							children: [
-								U.alreadyExists && /* @__PURE__ */ D(T, { children: [
-									/* @__PURE__ */ E("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ E(u, { className: "size-8 text-blue-600" })
-									}),
-									/* @__PURE__ */ E("h3", {
-										className: "text-lg font-medium mb-2",
-										children: "DataSink Already Exists"
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										children: [
-											"DataSink \"",
-											U.dataSink?.name || U.dataSink?.key,
-											"\" already exists with the same data. No changes were made."
-										]
-									})
-								] }),
-								U.originalUpdated && !U.alreadyExists && /* @__PURE__ */ D(T, { children: [
-									/* @__PURE__ */ E("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ E(d, { className: "size-8 text-green-600" })
-									}),
-									/* @__PURE__ */ E("h3", {
-										className: "text-lg font-medium mb-2",
-										children: "DataSink Updated!"
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										children: [
-											"DataSink \"",
-											U.dataSink?.name || U.dataSink?.key,
-											"\" has been updated with the imported data."
-										]
-									})
-								] }),
-								!U.originalUpdated && !U.alreadyExists && /* @__PURE__ */ D(T, { children: [
-									/* @__PURE__ */ E("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ E(c, { className: "size-8 text-green-600" })
-									}),
-									/* @__PURE__ */ E("h3", {
-										className: "text-lg font-medium mb-2",
-										children: "Import Successful!"
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										children: [
-											"DataSink \"",
-											U.dataSink?.name || U.dataSink?.key,
-											"\" has been created."
-										]
-									})
-								] })
-							]
-						}),
-						V && /* @__PURE__ */ E(g, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ E(_, {
-								className: "p-3",
-								children: /* @__PURE__ */ E("p", {
-									className: "text-sm text-status-error-text",
-									children: V.message
+						M === "complete" && G?.success && /* @__PURE__ */ E(w, { children: [
+							G.alreadyExists && /* @__PURE__ */ T(e, {
+								tone: "info",
+								headingLevel: 3,
+								title: j("bigconsole.dataSinks.import.alreadyExistsTitle", "DataSink Already Exists"),
+								icon: /* @__PURE__ */ T(d, { className: "h-icon-sm w-icon-sm" }),
+								children: /* @__PURE__ */ T("p", {
+									className: "text-sm text-text-secondary",
+									children: j("bigconsole.dataSinks.import.alreadyExistsBody", "DataSink \"{{name}}\" already exists with the same data. No changes were made.", { name: G.dataSink?.name || G.dataSink?.key || "" })
+								})
+							}),
+							G.originalUpdated && !G.alreadyExists && /* @__PURE__ */ T(e, {
+								tone: "success",
+								headingLevel: 3,
+								title: j("bigconsole.dataSinks.import.updatedTitle", "DataSink Updated!"),
+								icon: /* @__PURE__ */ T(te, { className: "h-icon-sm w-icon-sm" }),
+								children: /* @__PURE__ */ T("p", {
+									className: "text-sm text-text-secondary",
+									children: j("bigconsole.dataSinks.import.updatedBody", "DataSink \"{{name}}\" has been updated with the imported data.", { name: G.dataSink?.name || G.dataSink?.key || "" })
+								})
+							}),
+							!G.originalUpdated && !G.alreadyExists && /* @__PURE__ */ T(e, {
+								tone: "success",
+								headingLevel: 3,
+								title: j("bigconsole.dataSinks.import.successTitle", "Import Successful!"),
+								icon: /* @__PURE__ */ T(ee, { className: "h-icon-sm w-icon-sm" }),
+								children: /* @__PURE__ */ T("p", {
+									className: "text-sm text-text-secondary",
+									children: j("bigconsole.dataSinks.import.successBody", "DataSink \"{{name}}\" has been created.", { name: G.dataSink?.name || G.dataSink?.key || "" })
 								})
 							})
+						] }),
+						U && /* @__PURE__ */ T(e, {
+							tone: "danger",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Import failed",
+							children: /* @__PURE__ */ T("p", {
+								className: "text-sm text-status-error-text",
+								children: U.message
+							})
 						}),
-						U && !U.success && U.errorMessage && /* @__PURE__ */ E(g, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ E(_, {
-								className: "p-3",
-								children: /* @__PURE__ */ E("p", {
-									className: "text-sm text-status-error-text",
-									children: U.errorMessage
-								})
+						G && !G.success && G.errorMessage && /* @__PURE__ */ T(e, {
+							tone: "danger",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Import failed",
+							children: /* @__PURE__ */ T("p", {
+								className: "text-sm text-status-error-text",
+								children: G.errorMessage
 							})
 						})
-					]
+					] })
 				}),
-				/* @__PURE__ */ D(ee, {
-					className: "flex-row justify-between sm:justify-between",
-					children: [/* @__PURE__ */ E("div", { children: A === "preview" && /* @__PURE__ */ D(h, {
+				/* @__PURE__ */ E(b, {
+					className: "flex flex-col-reverse gap-control-gap sm:flex-row sm:justify-between",
+					children: [M === "preview" ? /* @__PURE__ */ E(g, {
 						variant: "ghost",
 						onClick: () => {
-							j("select"), M(null), P(null), q();
+							N("select"), P(null), I(null), Y();
 						},
-						disabled: B,
-						children: [/* @__PURE__ */ E(s, { className: "size-4" }), "Back"]
-					}) }), /* @__PURE__ */ D("div", {
-						className: "flex items-center gap-2",
+						disabled: H,
+						children: [/* @__PURE__ */ T(l, { className: "size-4" }), j("bigconsole.dataSinks.import.back", "Back")]
+					}) : /* @__PURE__ */ T("span", {
+						"aria-hidden": "true",
+						className: "hidden sm:block"
+					}), /* @__PURE__ */ E("div", {
+						className: "flex flex-wrap items-center gap-2",
 						children: [
-							A !== "complete" && /* @__PURE__ */ E(h, {
+							M !== "complete" && /* @__PURE__ */ T(g, {
 								variant: "outline",
-								onClick: O,
-								disabled: !Q,
-								children: "Cancel"
+								onClick: k,
+								disabled: !Z,
+								children: j("bigconsole.dataSinks.import.cancel", "Cancel")
 							}),
-							A === "preview" && H?.isValid && /* @__PURE__ */ D(h, {
-								onClick: Z,
-								disabled: B,
-								children: [/* @__PURE__ */ E(f, { className: "size-4" }), "Import DataSink"]
+							M === "preview" && W?.isValid && /* @__PURE__ */ E(g, {
+								onClick: oe,
+								disabled: H,
+								children: [/* @__PURE__ */ T(f, { className: "size-4" }), j("bigconsole.dataSinks.import.importButton", "Import DataSink")]
 							}),
-							A === "importing" && /* @__PURE__ */ D("div", {
+							M === "importing" && /* @__PURE__ */ E("div", {
 								className: "flex items-center gap-2 text-sm text-text-secondary",
-								children: [/* @__PURE__ */ E(w, { className: "size-4" }), "Importing..."]
+								children: [/* @__PURE__ */ T(C, { className: "size-4" }), j("bigconsole.dataSinks.import.importing", "Importing...")]
 							}),
-							A === "complete" && /* @__PURE__ */ E(h, {
-								onClick: O,
-								children: "Done"
+							M === "complete" && /* @__PURE__ */ T(g, {
+								onClick: k,
+								children: j("bigconsole.dataSinks.import.done", "Done")
 							})
 						]
 					})]
@@ -405,6 +410,6 @@ var O = n(function({ isOpen: n, onClose: O, onSuccess: k }) {
 	});
 });
 //#endregion
-export { O as default };
+export { k as default };
 
 //# sourceMappingURL=ImportDataSinkDialog.js.map