@burdenoff/microfe-auth 2026.624.3 → 2026.625.1

package/dist/auth/pages/SessionsPage.js

@@ -4,281 +4,290 @@ import { useSessionOperations as r } from "../hooks/useSessionOperations.js";
 import { formatRelativeTime as i, parseBrowserName as a, parseDeviceName as o } from "../utils/formatters.js";
 import { ConfirmActionDialog as s } from "../components/ConfirmActionDialog.js";
 import { useMemo as c, useState as l } from "react";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useNavigate as u } from "react-router-dom";
+import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { EmphasisPanel as m, IllustratedEmptyState as h, NextSteps as g, PagePurpose as _ } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/SessionsPage.tsx
-function p() {
-	let { t: p } = u(), m = (e, t) => {
-		let n = p(e);
+function v() {
+	let v = u(), { t: y } = d(), b = (e, t) => {
+		let n = y(e);
 		return n === e ? t : n;
-	}, h = e((e) => e.isAuthenticated), { activeSessions: g, revokeSession: _, revokeAllSessions: v, isLoading: y, page: b, totalPages: x, totalCount: S, hasMore: C, goToNextPage: w, goToPrevPage: T } = r({
+	}, x = e((e) => e.isAuthenticated), { activeSessions: S, revokeSession: C, revokeAllSessions: w, isLoading: T, page: E, totalPages: D, totalCount: O, hasMore: k, goToNextPage: A, goToPrevPage: j } = r({
 		disableTokenInfoQuery: !0,
 		pageSize: 20
-	}), E = c(() => {
+	}), M = c(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of g) {
+		for (let t of S) {
 			let n = o(t.userAgent ?? ""), r = e.get(n);
 			(!r || new Date(t.lastActivityAt) > new Date(r.lastActivityAt)) && e.set(n, t);
 		}
 		return [...e.values()];
-	}, [g]), [D, O] = l(null), [k, A] = l(null), [j, M] = l(null), [N, P] = l(!1), F = async (e) => {
+	}, [S]), [N, P] = l(null), [F, I] = l(null), [L, R] = l(null), [z, B] = l(!1), V = async (e) => {
 		try {
-			await _(e), A("Session revoked successfully"), M(null);
+			await C(e), I("Session revoked successfully"), R(null);
 		} catch (e) {
-			O(e instanceof Error ? e.message : "Failed to revoke session");
+			P(e instanceof Error ? e.message : "Failed to revoke session");
 		}
 	};
-	return h ? /* @__PURE__ */ f("div", {
+	return x ? /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
-			/* @__PURE__ */ d(s, {
-				open: j !== null,
+			/* @__PURE__ */ f(s, {
+				open: L !== null,
 				onOpenChange: (e) => {
-					e || M(null);
+					e || R(null);
 				},
 				title: "Revoke this session?",
 				description: "The selected device will be signed out immediately and will need to authenticate again.",
 				confirmText: "Revoke session",
 				variant: "danger",
-				isPending: y,
+				isPending: T,
 				onConfirm: async () => {
-					j && await F(j);
+					L && await V(L);
 				}
 			}),
-			/* @__PURE__ */ d(s, {
-				open: N,
-				onOpenChange: P,
+			/* @__PURE__ */ f(s, {
+				open: z,
+				onOpenChange: B,
 				title: "Revoke every other session?",
 				description: "All devices except your current one will be signed out immediately.",
 				confirmText: "Revoke all other sessions",
 				variant: "warning",
-				isPending: y,
+				isPending: T,
 				onConfirm: async () => {
 					try {
-						await v(), A("All other sessions have been revoked"), P(!1);
+						await w(), I("All other sessions have been revoked"), B(!1);
 					} catch (e) {
-						O(e instanceof Error ? e.message : "Failed to revoke all sessions");
+						P(e instanceof Error ? e.message : "Failed to revoke all sessions");
 					}
 				}
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: k
+				children: F
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				role: "alert",
 				"aria-live": "assertive",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: D
+				children: N
 			}),
-			/* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between mb-8",
-				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+			/* @__PURE__ */ p("div", {
+				className: "flex items-center justify-between mb-4",
+				children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
 					className: "text-3xl font-semibold text-text-primary",
-					children: m("auth.sessions.title", "Active Sessions")
-				}), /* @__PURE__ */ f("p", {
+					children: b("auth.sessions.title", "Active Sessions")
+				}), /* @__PURE__ */ p("p", {
 					className: "text-text-secondary mt-2",
 					children: [
-						m("auth.sessions.sessionCount", "You have"),
+						b("auth.sessions.sessionCount", "You have"),
 						" ",
-						S,
+						O,
 						" ",
-						m(S === 1 ? "auth.sessions.sessionsSingular" : "auth.sessions.sessionsPlural", S === 1 ? "active session" : "active sessions")
+						b(O === 1 ? "auth.sessions.sessionsSingular" : "auth.sessions.sessionsPlural", O === 1 ? "active session" : "active sessions")
 					]
-				})] }), /* @__PURE__ */ d("div", {
-					className: "flex items-center gap-3",
-					children: S > 1 && /* @__PURE__ */ d("button", {
+				})] }), /* @__PURE__ */ f("div", { className: "flex items-center gap-3" })]
+			}),
+			/* @__PURE__ */ f(_, {
+				className: "mb-6",
+				children: b("auth.sessions.purpose", "This is every device currently signed in to your account. Recognise them all? If a device looks unfamiliar or you've lost it, revoke its session to sign it out immediately.")
+			}),
+			/* @__PURE__ */ f(m, {
+				className: "mb-8",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ p("div", { children: [
+						/* @__PURE__ */ f("p", {
+							className: "text-sm font-medium text-text-secondary",
+							children: b("auth.sessions.summaryLabel", "Devices signed in")
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "mt-1 text-3xl font-semibold text-text-primary",
+							children: O
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "mt-1 text-sm text-text-secondary",
+							children: b("auth.sessions.summaryHint", "Keep this list trimmed to devices you trust.")
+						})
+					] }), O > 1 && /* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => P(!0),
-						className: "px-4 py-2.5 rounded-xl border border-status-error-border text-status-error-text font-medium hover:bg-status-error-bg-subtle transition-colors duration-200",
-						children: m("auth.sessions.revokeAll", "Revoke All Sessions")
-					})
-				})]
+						onClick: () => B(!0),
+						className: "shrink-0 px-4 py-2.5 rounded-xl border border-status-error-border text-status-error-text font-medium hover:bg-status-error-bg-subtle transition-colors duration-200",
+						children: b("auth.sessions.revokeAllOthers", "Revoke all other sessions")
+					})]
+				})
 			}),
-			k && /* @__PURE__ */ f("output", {
+			F && /* @__PURE__ */ p("output", {
 				className: "block mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
-				children: [/* @__PURE__ */ d("p", {
+				children: [/* @__PURE__ */ f("p", {
 					className: "text-status-success-text",
-					children: k
-				}), /* @__PURE__ */ d("button", {
+					children: F
+				}), /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: () => A(null),
+					onClick: () => I(null),
 					className: "mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200",
 					children: "Dismiss"
 				})]
 			}),
-			D && /* @__PURE__ */ f("div", {
+			N && /* @__PURE__ */ p("div", {
 				role: "alert",
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
-				children: [/* @__PURE__ */ d(t, {
+				children: [/* @__PURE__ */ f(t, {
 					className: "size-5 text-status-error-text flex-shrink-0 mt-0.5",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ p("div", {
 					className: "flex-1",
-					children: [/* @__PURE__ */ d("p", {
+					children: [/* @__PURE__ */ f("p", {
 						className: "text-sm text-status-error-text",
-						children: D
-					}), /* @__PURE__ */ d("button", {
+						children: N
+					}), /* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => O(null),
+						onClick: () => P(null),
 						className: "mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200",
 						children: "Dismiss"
 					})]
 				})]
 			}),
-			y ? /* @__PURE__ */ f("div", {
+			T ? /* @__PURE__ */ p("div", {
 				"aria-live": "polite",
 				"aria-busy": "true",
 				className: "flex items-center justify-center py-12",
-				children: [/* @__PURE__ */ d(n, {
+				children: [/* @__PURE__ */ f(n, {
 					className: "size-8 text-text-link animate-spin",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ d("span", {
+				}), /* @__PURE__ */ f("span", {
 					className: "ml-3 text-text-secondary",
-					children: m("auth.sessions.loading", "Loading sessions...")
+					children: b("auth.sessions.loading", "Loading sessions...")
 				})]
-			}) : E.length === 0 ? /* @__PURE__ */ f("output", {
-				className: "block text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-				children: [/* @__PURE__ */ d("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
-					children: /* @__PURE__ */ d("svg", {
-						className: "size-8 text-text-tertiary",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ d("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 1.5,
-							d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-						})
-					})
-				}), /* @__PURE__ */ d("p", {
-					className: "text-text-secondary",
-					children: m("auth.sessions.noSessions", "No active sessions found")
-				})]
-			}) : /* @__PURE__ */ d("div", {
+			}) : M.length === 0 ? /* @__PURE__ */ f("output", {
+				className: "block",
+				children: /* @__PURE__ */ f(h, {
+					illustration: "empty-sessions",
+					title: b("auth.sessions.noSessions", "No active sessions found"),
+					description: b("auth.sessions.noSessionsDesc", "When you sign in on a device it will appear here so you can review and manage it.")
+				})
+			}) : /* @__PURE__ */ f("div", {
 				className: "space-y-4",
 				"aria-live": "polite",
-				"aria-busy": y,
-				children: E.map((e) => /* @__PURE__ */ d("div", {
+				"aria-busy": T,
+				children: M.map((e) => /* @__PURE__ */ f("div", {
 					className: "p-6 rounded-xl border border-border-default bg-bg-surface shadow-sm hover:shadow-md transition-shadow",
-					children: /* @__PURE__ */ f("div", {
+					children: /* @__PURE__ */ p("div", {
 						className: "flex items-start justify-between",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex items-start gap-4",
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ f("div", {
 								className: "size-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0",
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ d("svg", {
+								children: /* @__PURE__ */ f("svg", {
 									className: "size-6 text-text-link",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
-									children: /* @__PURE__ */ d("path", {
+									children: /* @__PURE__ */ f("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 1.5,
 										d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
 									})
 								})
-							}), /* @__PURE__ */ f("div", {
+							}), /* @__PURE__ */ p("div", {
 								className: "flex-1",
 								children: [
-									/* @__PURE__ */ f("div", {
+									/* @__PURE__ */ p("div", {
 										className: "flex items-center gap-3 mb-1",
-										children: [/* @__PURE__ */ d("h3", {
+										children: [/* @__PURE__ */ f("h3", {
 											className: "text-lg font-semibold text-text-primary",
-											children: e.isCurrent && o(e.userAgent) === "Unknown Device" ? m("auth.sessions.thisDevice", "This Device") : o(e.userAgent)
-										}), e.isCurrent && /* @__PURE__ */ d("output", {
+											children: e.isCurrent && o(e.userAgent) === "Unknown Device" ? b("auth.sessions.thisDevice", "This Device") : o(e.userAgent)
+										}), e.isCurrent && /* @__PURE__ */ f("output", {
 											className: "px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium",
-											children: m("auth.sessions.currentSession", "Current Session")
+											children: b("auth.sessions.currentSession", "Current Session")
 										})]
 									}),
-									/* @__PURE__ */ d("p", {
+									/* @__PURE__ */ f("p", {
 										className: "text-sm text-text-secondary mb-2",
-										children: a(e.userAgent) === "Unknown Browser" && e.isCurrent ? m("auth.sessions.currentBrowser", "Current Browser") : a(e.userAgent)
+										children: a(e.userAgent) === "Unknown Browser" && e.isCurrent ? b("auth.sessions.currentBrowser", "Current Browser") : a(e.userAgent)
 									}),
-									/* @__PURE__ */ f("dl", {
+									/* @__PURE__ */ p("dl", {
 										className: "flex flex-wrap gap-4 text-sm text-text-secondary",
 										children: [
-											e.ipAddress && e.ipAddress !== "unknown" && /* @__PURE__ */ f("div", {
+											e.ipAddress && e.ipAddress !== "unknown" && /* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
 												children: [
-													/* @__PURE__ */ d("svg", {
+													/* @__PURE__ */ f("svg", {
 														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
 														"aria-hidden": "true",
-														children: /* @__PURE__ */ d("path", {
+														children: /* @__PURE__ */ f("path", {
 															strokeLinecap: "round",
 															strokeLinejoin: "round",
 															strokeWidth: 2,
 															d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
 														})
 													}),
-													/* @__PURE__ */ d("dt", {
+													/* @__PURE__ */ f("dt", {
 														className: "sr-only",
 														children: "IP address"
 													}),
-													/* @__PURE__ */ d("dd", { children: e.ipAddress })
+													/* @__PURE__ */ f("dd", { children: e.ipAddress })
 												]
 											}),
-											e.location && /* @__PURE__ */ f("div", {
+											e.location && /* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
 												children: [
-													/* @__PURE__ */ f("svg", {
+													/* @__PURE__ */ p("svg", {
 														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
 														"aria-hidden": "true",
-														children: [/* @__PURE__ */ d("path", {
+														children: [/* @__PURE__ */ f("path", {
 															strokeLinecap: "round",
 															strokeLinejoin: "round",
 															strokeWidth: 2,
 															d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-														}), /* @__PURE__ */ d("path", {
+														}), /* @__PURE__ */ f("path", {
 															strokeLinecap: "round",
 															strokeLinejoin: "round",
 															strokeWidth: 2,
 															d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
 														})]
 													}),
-													/* @__PURE__ */ d("dt", {
+													/* @__PURE__ */ f("dt", {
 														className: "sr-only",
 														children: "Location"
 													}),
-													/* @__PURE__ */ d("dd", { children: e.location })
+													/* @__PURE__ */ f("dd", { children: e.location })
 												]
 											}),
-											/* @__PURE__ */ f("div", {
+											/* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
 												children: [
-													/* @__PURE__ */ d("svg", {
+													/* @__PURE__ */ f("svg", {
 														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
 														"aria-hidden": "true",
-														children: /* @__PURE__ */ d("path", {
+														children: /* @__PURE__ */ f("path", {
 															strokeLinecap: "round",
 															strokeLinejoin: "round",
 															strokeWidth: 2,
 															d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
 														})
 													}),
-													/* @__PURE__ */ d("dt", {
+													/* @__PURE__ */ f("dt", {
 														className: "sr-only",
 														children: "Last active"
 													}),
-													/* @__PURE__ */ f("dd", { children: [
-														m("auth.sessions.lastActive", "Last active"),
+													/* @__PURE__ */ p("dd", { children: [
+														b("auth.sessions.lastActive", "Last active"),
 														" ",
 														i(e.lastActivityAt)
 													] })
@@ -288,70 +297,70 @@ function p() {
 									})
 								]
 							})]
-						}), !e.isCurrent && /* @__PURE__ */ d("button", {
+						}), !e.isCurrent && /* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: () => M(e.id),
-							"aria-label": `${m("auth.sessions.revoke", "Revoke")} ${o(e.userAgent)} session`,
+							onClick: () => R(e.id),
+							"aria-label": `${b("auth.sessions.revoke", "Revoke")} ${o(e.userAgent)} session`,
 							className: "ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors duration-200",
-							children: m("auth.sessions.revoke", "Revoke")
+							children: b("auth.sessions.revoke", "Revoke")
 						})]
 					})
 				}, e.id))
 			}),
-			!y && x > 1 && /* @__PURE__ */ f("div", {
+			!T && D > 1 && /* @__PURE__ */ p("div", {
 				className: "flex items-center justify-between mt-6 pt-4 border-t border-border-subtle",
 				children: [
-					/* @__PURE__ */ f("button", {
+					/* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: T,
-						disabled: b === 0,
+						onClick: j,
+						disabled: E === 0,
 						className: "flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm",
-						"aria-label": m("auth.sessions.prevPage", "Previous page"),
-						children: [/* @__PURE__ */ d("svg", {
+						"aria-label": b("auth.sessions.prevPage", "Previous page"),
+						children: [/* @__PURE__ */ f("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
 							"aria-hidden": "true",
-							children: /* @__PURE__ */ d("path", {
+							children: /* @__PURE__ */ f("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M15 19l-7-7 7-7"
 							})
-						}), m("auth.sessions.prev", "Previous")]
+						}), b("auth.sessions.prev", "Previous")]
 					}),
-					/* @__PURE__ */ f("span", {
+					/* @__PURE__ */ p("span", {
 						className: "text-sm text-text-secondary",
 						children: [
-							m("auth.sessions.pageOf", "Page"),
+							b("auth.sessions.pageOf", "Page"),
 							" ",
-							/* @__PURE__ */ d("span", {
+							/* @__PURE__ */ f("span", {
 								className: "font-medium text-text-primary",
-								children: b + 1
+								children: E + 1
 							}),
 							" ",
-							m("auth.sessions.of", "of"),
+							b("auth.sessions.of", "of"),
 							" ",
-							/* @__PURE__ */ d("span", {
+							/* @__PURE__ */ f("span", {
 								className: "font-medium text-text-primary",
-								children: x
+								children: D
 							})
 						]
 					}),
-					/* @__PURE__ */ f("button", {
+					/* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: w,
-						disabled: !C,
+						onClick: A,
+						disabled: !k,
 						className: "flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm",
-						"aria-label": m("auth.sessions.nextPage", "Next page"),
-						children: [m("auth.sessions.next", "Next"), /* @__PURE__ */ d("svg", {
+						"aria-label": b("auth.sessions.nextPage", "Next page"),
+						children: [b("auth.sessions.next", "Next"), /* @__PURE__ */ f("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
 							"aria-hidden": "true",
-							children: /* @__PURE__ */ d("path", {
+							children: /* @__PURE__ */ f("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -360,33 +369,33 @@ function p() {
 						})]
 					})
 				]
+			}),
+			!T && M.length > 0 && /* @__PURE__ */ f(g, {
+				className: "mt-8",
+				storageKey: "auth-sessions",
+				steps: [{
+					id: "enable-mfa",
+					label: b("auth.sessions.nextEnableMfa", "Turn on two-factor authentication"),
+					description: b("auth.sessions.nextEnableMfaDesc", "Add a second sign-in step so a stolen password isn't enough."),
+					onClick: () => v("/auth/mfa")
+				}, {
+					id: "security-center",
+					label: b("auth.sessions.nextSecurityCenter", "Open the Security Center"),
+					description: b("auth.sessions.nextSecurityCenterDesc", "Review your password and overall account protection."),
+					onClick: () => v("/auth/security")
+				}]
 			})
 		]
-	}) : /* @__PURE__ */ d("div", {
+	}) : /* @__PURE__ */ f("div", {
 		className: "max-w-4xl mx-auto p-6",
-		children: /* @__PURE__ */ f("div", {
-			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-			children: [
-				/* @__PURE__ */ d("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ d(t, {
-						className: "size-8 text-status-warning-text",
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ d("h2", {
-					className: "text-xl font-semibold text-text-primary mb-2",
-					children: m("auth.sessions.authRequired", "Authentication Required")
-				}),
-				/* @__PURE__ */ d("p", {
-					className: "text-text-secondary",
-					children: m("auth.sessions.signInToView", "Please sign in to view your active sessions")
-				})
-			]
+		children: /* @__PURE__ */ f(h, {
+			illustration: "empty-generic",
+			title: b("auth.sessions.authRequired", "Authentication Required"),
+			description: b("auth.sessions.signInToView", "Please sign in to view your active sessions")
 		})
 	});
 }
 //#endregion
-export { p as SessionsPage };
+export { v as SessionsPage };
 
 //# sourceMappingURL=SessionsPage.js.map