@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,18 +1,37 @@
-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 ee } from "lucide-react";
-import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Badge as p, Button as m, Card as h, CardContent as g, Dialog as _, DialogContent as v, DialogDescription as y, DialogFooter as b, DialogHeader as x, DialogTitle as S, Input as C, Label as w, Spinner as T } from "@burdenoff/fe-libs/ui";
-import { Fragment as E, jsx as D, jsxs as O } 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 k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
-	let { t: j } = te(), [M, N] = o("select"), [, P] = o(null), [F, I] = o(null), [L, R] = o(""), [z, B] = o(""), V = a(null), { loading: H, error: U, validationResult: W, importResult: G, validateImport: K, importDataSink: q, extractDataSinkId: J, clearState: Y } = t(), X = e();
-	i(() => {
-		n && (N("select"), P(null), I(null), R(""), B(""), Y());
-	}, [n, Y]);
-	let Z = 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")) {
@@ -29,14 +48,14 @@ var k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
 		}, n.onerror = () => {
 			alert(j("bigconsole.dataSinks.import.readFileError", "Failed to read file"));
 		}, n.readAsText(t);
-	}, [K, j]), ne = 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), V.current && (V.current.files = e.files, V.current.dispatchEvent(new Event("change", { bubbles: !0 })));
 		}
-	}, []), re = r(async () => {
+	}, []), oe = a(async () => {
 		if (!F) return;
 		N("importing");
 		let e = {
@@ -57,199 +76,212 @@ var k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
 		z,
 		L,
 		A
-	]), Q = !H && M !== "importing", $ = F ? J(F) : null;
-	return /* @__PURE__ */ D(_, {
-		open: n,
-		onOpenChange: (e) => !e && Q && k(),
-		children: /* @__PURE__ */ O(v, {
-			className: "sm:max-w-lg max-h-[85vh] flex flex-col",
+	]), 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__ */ O(x, { children: [/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ E(ne, { children: [/* @__PURE__ */ E("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ D("div", {
-						className: "flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-						children: /* @__PURE__ */ D(f, { className: "size-5 text-primary" })
-					}), /* @__PURE__ */ D(S, { children: j("bigconsole.dataSinks.import.title", "Import DataSink") })]
-				}), /* @__PURE__ */ D(y, { children: j("bigconsole.dataSinks.import.description", "Upload a DataSink export file to restore it into this workspace.") })] }),
-				/* @__PURE__ */ O("div", {
-					className: "flex-1 overflow-y-auto py-4 space-y-4",
-					children: [
-						M === "select" && /* @__PURE__ */ O("div", {
-							onDragOver: (e) => e.preventDefault(),
-							onDrop: ne,
-							className: "border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors",
-							children: [
-								/* @__PURE__ */ D(l, { className: "size-12 mx-auto text-text-secondary mb-4" }),
-								/* @__PURE__ */ D("p", {
-									className: "text-sm mb-2",
-									children: j("bigconsole.dataSinks.import.dropzoneText", "Drag and drop a DataSink export file here")
-								}),
-								/* @__PURE__ */ D("p", {
-									className: "text-xs text-text-secondary mb-4",
-									children: j("bigconsole.dataSinks.import.or", "or")
-								}),
-								/* @__PURE__ */ D("input", {
-									ref: V,
-									type: "file",
-									accept: ".json",
-									onChange: Z,
-									className: "hidden"
-								}),
-								/* @__PURE__ */ D(m, {
-									onClick: () => V.current?.click(),
-									disabled: H,
-									children: j("bigconsole.dataSinks.import.browseFiles", "Browse Files")
-								}),
-								/* @__PURE__ */ D("p", {
-									className: "text-xs text-text-secondary mt-4",
-									children: j("bigconsole.dataSinks.import.supportedFilesHint", "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")
+									})
+								]
+							})
 						}),
-						(M === "preview" || M === "importing") && W && /* @__PURE__ */ O(E, { children: [
-							W.dataSinkInfo && /* @__PURE__ */ D(h, { children: /* @__PURE__ */ O(g, {
-								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__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
 											children: j("bigconsole.dataSinks.import.nameLabel", "Name")
-										}), /* @__PURE__ */ D("span", {
-											className: "text-sm font-medium",
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 truncate text-sm font-medium",
 											children: W.dataSinkInfo.name || j("bigconsole.dataSinks.import.unnamed", "Unnamed")
 										})]
 									}),
-									/* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
 											children: j("bigconsole.dataSinks.import.keyLabel", "Key")
-										}), /* @__PURE__ */ D("span", {
-											className: "text-xs font-mono",
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 truncate font-mono text-xs",
 											children: W.dataSinkInfo.key
 										})]
 									}),
-									/* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
 											children: j("bigconsole.dataSinks.import.statusLabel", "Status")
-										}), /* @__PURE__ */ D(p, {
+										}), /* @__PURE__ */ T(h, {
 											variant: "secondary",
 											children: W.dataSinkInfo.status
 										})]
 									}),
-									/* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
 											children: j("bigconsole.dataSinks.import.setupStateLabel", "Setup State")
-										}), /* @__PURE__ */ D(p, {
+										}), /* @__PURE__ */ T(h, {
 											variant: "outline",
 											children: W.dataSinkInfo.setupState
 										})]
 									}),
-									W.dataSinkInfo.exportedFrom && /* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("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: j("bigconsole.dataSinks.import.sourceIdLabel", "Source ID")
-										}), /* @__PURE__ */ D("span", {
-											className: "text-xs text-text-secondary font-mono truncate max-w-[180px]",
+										}), /* @__PURE__ */ T("span", {
+											className: "min-w-0 max-w-[180px] truncate font-mono text-xs text-text-secondary",
 											children: W.dataSinkInfo.exportedFrom
 										})]
 									}),
-									/* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-icon-gap",
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-sm text-text-secondary",
 											children: j("bigconsole.dataSinks.import.schemaVersionLabel", "Schema Version")
-										}), /* @__PURE__ */ D("span", {
+										}), /* @__PURE__ */ T("span", {
 											className: "text-xs text-text-secondary",
 											children: W.dataSinkInfo.schemaVersion
 										})]
 									})
 								]
-							}) }),
-							W.errors.length > 0 && /* @__PURE__ */ D(h, {
-								className: "border-status-error-border/50 bg-status-error-bg/5",
-								children: /* @__PURE__ */ O(g, {
-									className: "p-3",
-									children: [/* @__PURE__ */ O("div", {
-										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ D(ee, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ D("span", {
-											className: "text-sm font-medium text-status-error-text",
-											children: j("bigconsole.dataSinks.import.errorsHeading", "Errors ({{count}})", { count: W.errors.length })
-										})]
-									}), /* @__PURE__ */ D("ul", {
-										className: "text-xs text-status-error-text space-y-1",
-										children: W.errors.map((e, t) => /* @__PURE__ */ O("li", { children: [
-											/* @__PURE__ */ O("span", {
-												className: "font-mono",
-												children: [
-													"[",
-													e.code,
-													"]"
-												]
-											}),
-											" ",
-											e.message
-										] }, t))
-									})]
+							}),
+							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: [
+												"[",
+												e.code,
+												"]"
+											]
+										}),
+										" ",
+										e.message
+									] }, t))
 								})
 							}),
-							W.isValid && /* @__PURE__ */ O("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__ */ D("p", {
-										className: "text-sm font-medium",
-										children: j("bigconsole.dataSinks.import.optionsHeading", "Import Options")
-									}),
-									/* @__PURE__ */ D(h, {
-										className: "border-blue-500/50 bg-blue-500/5",
-										children: /* @__PURE__ */ D(g, {
-											className: "p-3",
-											children: /* @__PURE__ */ O("div", {
-												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ D(u, { className: "size-4 text-blue-600 mt-0.5 shrink-0" }), /* @__PURE__ */ D("div", {
-													className: "text-xs text-blue-700 dark:text-blue-400",
-													children: $ ? /* @__PURE__ */ O(E, { children: [
-														/* @__PURE__ */ D("p", {
-															className: "font-medium mb-1",
-															children: j("bigconsole.dataSinks.import.checkExistingHeading", "Import will check for existing DataSink")
-														}),
-														/* @__PURE__ */ O("p", { children: [
-															j("bigconsole.dataSinks.import.ifOriginalExistsPrefix", "If the original DataSink (ID:"),
-															" ",
-															/* @__PURE__ */ O("code", {
-																className: "font-mono bg-blue-200/50 px-1 rounded",
-																children: [$.slice(0, 8), "..."]
-															}),
-															j("bigconsole.dataSinks.import.ifOriginalExistsSuffix", ") exists:")
-														] }),
-														/* @__PURE__ */ O("ul", {
-															className: "list-disc list-inside mt-1 space-y-0.5",
-															children: [/* @__PURE__ */ D("li", { children: j("bigconsole.dataSinks.import.withChangesUpdate", "With changes → Update the existing DataSink") }), /* @__PURE__ */ D("li", { children: j("bigconsole.dataSinks.import.noChangesMessage", "No changes → Show \"already exists\" message") })]
-														}),
-														/* @__PURE__ */ D("p", {
-															className: "mt-1",
-															children: j("bigconsole.dataSinks.import.ifNotExistsCreate", "If original doesn't exist → Create a new DataSink")
-														})
-													] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("p", {
-														className: "font-medium mb-1",
-														children: j("bigconsole.dataSinks.import.newWillBeCreatedHeading", "A new DataSink will be created")
-													}), /* @__PURE__ */ D("p", { children: j("bigconsole.dataSinks.import.newWillBeCreatedBody", "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__ */ O("div", {
+									/* @__PURE__ */ E("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ D(w, {
+										children: [/* @__PURE__ */ T(S, {
 											htmlFor: "import-name",
 											children: j("bigconsole.dataSinks.import.nameFieldLabel", "DataSink Name")
-										}), /* @__PURE__ */ D(C, {
+										}), /* @__PURE__ */ T(x, {
 											id: "import-name",
 											type: "text",
 											value: L,
@@ -258,14 +290,14 @@ var k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
 											disabled: M === "importing"
 										})]
 									}),
-									/* @__PURE__ */ O("div", {
+									/* @__PURE__ */ E("div", {
 										className: "space-y-2",
 										children: [
-											/* @__PURE__ */ D(w, {
+											/* @__PURE__ */ T(S, {
 												htmlFor: "import-key",
 												children: j("bigconsole.dataSinks.import.keyFieldLabel", "DataSink Key")
 											}),
-											/* @__PURE__ */ D(C, {
+											/* @__PURE__ */ T(x, {
 												id: "import-key",
 												type: "text",
 												value: z,
@@ -273,7 +305,7 @@ var k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
 												placeholder: W.dataSinkInfo?.key || j("bigconsole.dataSinks.import.keyPlaceholder", "datasink-key"),
 												disabled: M === "importing"
 											}),
-											/* @__PURE__ */ D("p", {
+											/* @__PURE__ */ T("p", {
 												className: "text-xs text-text-secondary",
 												children: j("bigconsole.dataSinks.import.keyHelp", "Use a unique key to avoid conflicts with existing DataSinks.")
 											})
@@ -282,103 +314,91 @@ var k = n(function({ isOpen: n, onClose: k, onSuccess: A }) {
 								]
 							})
 						] }),
-						M === "complete" && G?.success && /* @__PURE__ */ O("div", {
-							className: "text-center py-6",
-							children: [
-								G.alreadyExists && /* @__PURE__ */ O(E, { children: [
-									/* @__PURE__ */ D("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__ */ D(u, { className: "size-8 text-blue-600" })
-									}),
-									/* @__PURE__ */ D("h3", {
-										className: "text-lg font-medium mb-2",
-										children: j("bigconsole.dataSinks.import.alreadyExistsTitle", "DataSink Already Exists")
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										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__ */ O(E, { children: [
-									/* @__PURE__ */ D("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__ */ D(d, { className: "size-8 text-green-600" })
-									}),
-									/* @__PURE__ */ D("h3", {
-										className: "text-lg font-medium mb-2",
-										children: j("bigconsole.dataSinks.import.updatedTitle", "DataSink Updated!")
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										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__ */ O(E, { children: [
-									/* @__PURE__ */ D("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__ */ D(c, { className: "size-8 text-green-600" })
-									}),
-									/* @__PURE__ */ D("h3", {
-										className: "text-lg font-medium mb-2",
-										children: j("bigconsole.dataSinks.import.successTitle", "Import Successful!")
-									}),
-									/* @__PURE__ */ D("p", {
-										className: "text-sm text-text-secondary mb-4",
-										children: j("bigconsole.dataSinks.import.successBody", "DataSink \"{{name}}\" has been created.", { name: G.dataSink?.name || G.dataSink?.key || "" })
-									})
-								] })
-							]
-						}),
-						U && /* @__PURE__ */ D(h, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ D(g, {
-								className: "p-3",
-								children: /* @__PURE__ */ D("p", {
-									className: "text-sm text-status-error-text",
-									children: U.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
+							})
 						}),
-						G && !G.success && G.errorMessage && /* @__PURE__ */ D(h, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ D(g, {
-								className: "p-3",
-								children: /* @__PURE__ */ D("p", {
-									className: "text-sm text-status-error-text",
-									children: G.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__ */ O(b, {
-					className: "flex-row justify-between sm:justify-between",
-					children: [/* @__PURE__ */ D("div", { children: M === "preview" && /* @__PURE__ */ O(m, {
+				/* @__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: () => {
 							N("select"), P(null), I(null), Y();
 						},
 						disabled: H,
-						children: [/* @__PURE__ */ D(s, { className: "size-4" }), j("bigconsole.dataSinks.import.back", "Back")]
-					}) }), /* @__PURE__ */ O("div", {
-						className: "flex items-center gap-2",
+						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: [
-							M !== "complete" && /* @__PURE__ */ D(m, {
+							M !== "complete" && /* @__PURE__ */ T(g, {
 								variant: "outline",
 								onClick: k,
-								disabled: !Q,
+								disabled: !Z,
 								children: j("bigconsole.dataSinks.import.cancel", "Cancel")
 							}),
-							M === "preview" && W?.isValid && /* @__PURE__ */ O(m, {
-								onClick: re,
+							M === "preview" && W?.isValid && /* @__PURE__ */ E(g, {
+								onClick: oe,
 								disabled: H,
-								children: [/* @__PURE__ */ D(f, { className: "size-4" }), j("bigconsole.dataSinks.import.importButton", "Import DataSink")]
+								children: [/* @__PURE__ */ T(f, { className: "size-4" }), j("bigconsole.dataSinks.import.importButton", "Import DataSink")]
 							}),
-							M === "importing" && /* @__PURE__ */ O("div", {
+							M === "importing" && /* @__PURE__ */ E("div", {
 								className: "flex items-center gap-2 text-sm text-text-secondary",
-								children: [/* @__PURE__ */ D(T, { className: "size-4" }), j("bigconsole.dataSinks.import.importing", "Importing...")]
+								children: [/* @__PURE__ */ T(C, { className: "size-4" }), j("bigconsole.dataSinks.import.importing", "Importing...")]
 							}),
-							M === "complete" && /* @__PURE__ */ D(m, {
+							M === "complete" && /* @__PURE__ */ T(g, {
 								onClick: k,
 								children: j("bigconsole.dataSinks.import.done", "Done")
 							})