@burdenoff/microfe-auth 2026.511.1 → 2026.514.1

package/dist/auth/pages/SessionsPage.js

@@ -3,256 +3,368 @@ import { useSessionOperations as t } from "../hooks/useSessionOperations.js";
 import "../hooks/index.js";
 import { AlertIcon as n, SpinnerIcon as r } from "../components/AuthIcons.js";
 import { formatRelativeTime as i, parseBrowserName as a, parseDeviceName as o } from "../utils/formatters.js";
-import { ConfirmActionDialog as s } from "../components/ConfirmActionDialog.js";
-import { useState as c } from "react";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useCreateAuthExportJobMutation as s } from "../../generated/wspace-operations.js";
+import { ConfirmActionDialog as c } from "../components/ConfirmActionDialog.js";
+import { useState as l } from "react";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/auth/pages/SessionsPage.tsx
-function f() {
-	let { t: f } = l(), p = (e, t) => {
-		let n = f(e);
+function m() {
+	let { t: m } = u(), h = (e, t) => {
+		let n = m(e);
 		return n === e ? t : n;
-	}, m = e((e) => e.isAuthenticated), { activeSessions: h, revokeSession: g, revokeAllSessions: _, isLoading: v } = t({ disableTokenInfoQuery: !0 }), [y, b] = c(null), [x, S] = c(null), [C, w] = c(null), [T, E] = c(!1), D = async (e) => {
+	}, g = e((e) => e.isAuthenticated), { activeSessions: _, revokeSession: v, revokeAllSessions: y, isLoading: b } = t({ disableTokenInfoQuery: !0 }), [x, S] = l(null), [C, w] = l(null), [T, E] = l(null), [D, O] = l(!1), [k, { loading: A }] = s(), [j, M] = l(null), N = async () => {
+		M(null);
 		try {
-			await g(e), S("Session revoked successfully"), w(null);
+			await k({ variables: { input: {
+				name: "Sessions Export",
+				entityTypes: ["vibecontrols_sessions"],
+				format: "CSV",
+				exportScope: "INDIVIDUAL",
+				includeMetadata: !0
+			} } });
 		} catch (e) {
-			b(e instanceof Error ? e.message : "Failed to revoke session");
+			M(e instanceof Error ? e.message : "Failed to start export");
+		}
+	}, P = async (e) => {
+		try {
+			await v(e), w("Session revoked successfully"), E(null);
+		} catch (e) {
+			S(e instanceof Error ? e.message : "Failed to revoke session");
 		}
 	};
-	return m ? /* @__PURE__ */ d("div", {
+	return g ? /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
-			/* @__PURE__ */ u(s, {
-				open: C !== null,
+			/* @__PURE__ */ f(c, {
+				open: T !== null,
 				onOpenChange: (e) => {
-					e || w(null);
+					e || E(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: v,
+				isPending: b,
 				onConfirm: async () => {
-					C && await D(C);
+					T && await P(T);
 				}
 			}),
-			/* @__PURE__ */ u(s, {
-				open: T,
-				onOpenChange: E,
+			/* @__PURE__ */ f(c, {
+				open: D,
+				onOpenChange: O,
 				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: v,
+				isPending: b,
 				onConfirm: async () => {
 					try {
-						await _(), S("All other sessions have been revoked"), E(!1);
+						await y(), w("All other sessions have been revoked"), O(!1);
 					} catch (e) {
-						b(e instanceof Error ? e.message : "Failed to revoke all sessions");
+						S(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: C
+			}),
+			/* @__PURE__ */ f("div", {
+				role: "alert",
+				"aria-live": "assertive",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: x
+			}),
+			/* @__PURE__ */ p("div", {
 				className: "flex items-center justify-between mb-8",
-				children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
-					className: "text-3xl font-semibold text-[var(--color-text-primary)]",
-					children: p("auth.sessions.title", "Active Sessions")
-				}), /* @__PURE__ */ d("p", {
-					className: "text-[var(--color-text-secondary)] mt-2",
+				children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
+					className: "text-3xl font-semibold text-text-primary",
+					children: h("auth.sessions.title", "Active Sessions")
+				}), /* @__PURE__ */ p("p", {
+					className: "text-text-secondary mt-2",
 					children: [
-						"You have ",
-						h.length,
-						" active session",
-						h.length === 1 ? "" : "s"
+						h("auth.sessions.sessionCount", "You have"),
+						" ",
+						_.length,
+						" ",
+						h(_.length === 1 ? "auth.sessions.sessionsSingular" : "auth.sessions.sessionsPlural", _.length === 1 ? "active session" : "active sessions")
 					]
-				})] }), h.length > 1 && /* @__PURE__ */ u("button", {
-					onClick: () => E(!0),
-					className: "px-4 py-2.5 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium hover:bg-[var(--color-status-error-bg-subtle)] transition-colors duration-200",
-					children: p("auth.sessions.revokeAll", "Revoke All Sessions")
+				})] }), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: () => void N(),
+						disabled: A,
+						"aria-label": h("auth.sessions.exportAriaLabel", "Export sessions list"),
+						className: "flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
+						children: A ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, {
+							className: "w-4 h-4 animate-spin",
+							"aria-hidden": "true"
+						}), h("auth.sessions.exporting", "Exporting...")] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+							})
+						}), h("auth.sessions.export", "Export")] })
+					}), _.length > 1 && /* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: () => O(!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: h("auth.sessions.revokeAll", "Revoke All Sessions")
+					})]
+				})]
+			}),
+			j && /* @__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__ */ f(n, {
+					className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ f("p", {
+					className: "text-sm text-status-error-text",
+					children: j
 				})]
 			}),
-			x && /* @__PURE__ */ d("div", {
-				className: "mb-6 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]",
-				children: [/* @__PURE__ */ u("p", {
-					className: "text-[var(--color-status-success-text)]",
-					children: x
-				}), /* @__PURE__ */ u("button", {
-					onClick: () => S(null),
-					className: "mt-2 text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200",
+			C && /* @__PURE__ */ p("div", {
+				role: "status",
+				className: "mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
+				children: [/* @__PURE__ */ f("p", {
+					className: "text-status-success-text",
+					children: C
+				}), /* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: () => w(null),
+					className: "mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200",
 					children: "Dismiss"
 				})]
 			}),
-			y && /* @__PURE__ */ d("div", {
-				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
-				children: [/* @__PURE__ */ u(n, { className: "w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", {
+			x && /* @__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__ */ f(n, {
+					className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ p("div", {
 					className: "flex-1",
-					children: [/* @__PURE__ */ u("p", {
-						className: "text-sm text-[var(--color-status-error-text)]",
-						children: y
-					}), /* @__PURE__ */ u("button", {
-						onClick: () => b(null),
-						className: "mt-2 text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200",
+					children: [/* @__PURE__ */ f("p", {
+						className: "text-sm text-status-error-text",
+						children: x
+					}), /* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: () => S(null),
+						className: "mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200",
 						children: "Dismiss"
 					})]
 				})]
 			}),
-			v ? /* @__PURE__ */ d("div", {
+			b ? /* @__PURE__ */ p("div", {
+				"aria-live": "polite",
+				"aria-busy": "true",
 				className: "flex items-center justify-center py-12",
-				children: [/* @__PURE__ */ u(r, { className: "w-8 h-8 text-text-link animate-spin" }), /* @__PURE__ */ u("span", {
-					className: "ml-3 text-[var(--color-text-secondary)]",
-					children: p("auth.sessions.loading", "Loading sessions...")
+				children: [/* @__PURE__ */ f(r, {
+					className: "w-8 h-8 text-text-link animate-spin",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ f("span", {
+					className: "ml-3 text-text-secondary",
+					children: h("auth.sessions.loading", "Loading sessions...")
 				})]
-			}) : h.length === 0 ? /* @__PURE__ */ d("div", {
-				className: "text-center py-16 border-2 border-dashed border-[var(--color-border-default)] rounded-xl",
-				children: [/* @__PURE__ */ u("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center",
-					children: /* @__PURE__ */ u("svg", {
-						className: "w-8 h-8 text-[var(--color-text-tertiary)]",
+			}) : _.length === 0 ? /* @__PURE__ */ p("div", {
+				className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
+				role: "status",
+				children: [/* @__PURE__ */ f("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ f("svg", {
+						className: "w-8 h-8 text-text-tertiary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ u("path", {
+						"aria-hidden": "true",
+						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__ */ u("p", {
-					className: "text-[var(--color-text-secondary)]",
-					children: p("auth.sessions.noSessions", "No active sessions found")
+				}), /* @__PURE__ */ f("p", {
+					className: "text-text-secondary",
+					children: h("auth.sessions.noSessions", "No active sessions found")
 				})]
-			}) : /* @__PURE__ */ u("div", {
+			}) : /* @__PURE__ */ f("div", {
 				className: "space-y-4",
-				children: h.map((e) => /* @__PURE__ */ u("div", {
-					className: "p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm hover:shadow-md transition-shadow",
-					children: /* @__PURE__ */ d("div", {
+				"aria-live": "polite",
+				"aria-busy": b,
+				children: _.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__ */ p("div", {
 						className: "flex items-start justify-between",
-						children: [/* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex items-start gap-4",
-							children: [/* @__PURE__ */ u("div", {
-								className: "w-12 h-12 rounded-xl bg-[var(--color-bg-accent)] flex items-center justify-center flex-shrink-0",
-								children: /* @__PURE__ */ u("svg", {
-									className: "w-6 h-6 text-[var(--color-text-link)]",
+							children: [/* @__PURE__ */ f("div", {
+								className: "w-12 h-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ f("svg", {
+									className: "w-6 h-6 text-text-link",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
-									children: /* @__PURE__ */ u("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__ */ d("div", {
+							}), /* @__PURE__ */ p("div", {
 								className: "flex-1",
 								children: [
-									/* @__PURE__ */ d("div", {
+									/* @__PURE__ */ p("div", {
 										className: "flex items-center gap-3 mb-1",
-										children: [/* @__PURE__ */ u("h3", {
-											className: "text-lg font-semibold text-[var(--color-text-primary)]",
-											children: e.isCurrent && o(e.userAgent) === "Unknown Device" ? p("auth.sessions.thisDevice", "This Device") : o(e.userAgent)
-										}), e.isCurrent && /* @__PURE__ */ u("span", {
-											className: "px-2.5 py-1 rounded-full bg-[var(--color-status-success-bg-subtle)] text-[var(--color-status-success-text)] text-xs font-medium",
-											children: p("auth.sessions.currentSession", "Current Session")
+										children: [/* @__PURE__ */ f("h3", {
+											className: "text-lg font-semibold text-text-primary",
+											children: e.isCurrent && o(e.userAgent) === "Unknown Device" ? h("auth.sessions.thisDevice", "This Device") : o(e.userAgent)
+										}), e.isCurrent && /* @__PURE__ */ f("span", {
+											role: "status",
+											className: "px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium",
+											children: h("auth.sessions.currentSession", "Current Session")
 										})]
 									}),
-									/* @__PURE__ */ u("p", {
-										className: "text-sm text-[var(--color-text-secondary)] mb-2",
-										children: a(e.userAgent) === "Unknown Browser" && e.isCurrent ? p("auth.sessions.currentBrowser", "Current Browser") : a(e.userAgent)
+									/* @__PURE__ */ f("p", {
+										className: "text-sm text-text-secondary mb-2",
+										children: a(e.userAgent) === "Unknown Browser" && e.isCurrent ? h("auth.sessions.currentBrowser", "Current Browser") : a(e.userAgent)
 									}),
-									/* @__PURE__ */ d("div", {
-										className: "flex flex-wrap gap-4 text-sm text-[var(--color-text-secondary)]",
+									/* @__PURE__ */ p("dl", {
+										className: "flex flex-wrap gap-4 text-sm text-text-secondary",
 										children: [
-											e.ipAddress && e.ipAddress !== "unknown" && /* @__PURE__ */ d("span", {
+											e.ipAddress && e.ipAddress !== "unknown" && /* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
-												children: [/* @__PURE__ */ u("svg", {
-													className: "w-4 h-4",
-													fill: "none",
-													viewBox: "0 0 24 24",
-													stroke: "currentColor",
-													children: /* @__PURE__ */ u("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"
-													})
-												}), e.ipAddress]
+												children: [
+													/* @__PURE__ */ f("svg", {
+														className: "w-4 h-4",
+														fill: "none",
+														viewBox: "0 0 24 24",
+														stroke: "currentColor",
+														"aria-hidden": "true",
+														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__ */ f("dt", {
+														className: "sr-only",
+														children: "IP address"
+													}),
+													/* @__PURE__ */ f("dd", { children: e.ipAddress })
+												]
 											}),
-											e.location && /* @__PURE__ */ d("span", {
+											e.location && /* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
-												children: [/* @__PURE__ */ d("svg", {
-													className: "w-4 h-4",
-													fill: "none",
-													viewBox: "0 0 24 24",
-													stroke: "currentColor",
-													children: [/* @__PURE__ */ u("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__ */ u("path", {
-														strokeLinecap: "round",
-														strokeLinejoin: "round",
-														strokeWidth: 2,
-														d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-													})]
-												}), e.location]
+												children: [
+													/* @__PURE__ */ p("svg", {
+														className: "w-4 h-4",
+														fill: "none",
+														viewBox: "0 0 24 24",
+														stroke: "currentColor",
+														"aria-hidden": "true",
+														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__ */ f("path", {
+															strokeLinecap: "round",
+															strokeLinejoin: "round",
+															strokeWidth: 2,
+															d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+														})]
+													}),
+													/* @__PURE__ */ f("dt", {
+														className: "sr-only",
+														children: "Location"
+													}),
+													/* @__PURE__ */ f("dd", { children: e.location })
+												]
 											}),
-											/* @__PURE__ */ d("span", {
+											/* @__PURE__ */ p("div", {
 												className: "flex items-center gap-1.5",
 												children: [
-													/* @__PURE__ */ u("svg", {
+													/* @__PURE__ */ f("svg", {
 														className: "w-4 h-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
-														children: /* @__PURE__ */ u("path", {
+														"aria-hidden": "true",
+														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"
 														})
 													}),
-													"Last active ",
-													i(e.lastActivityAt)
+													/* @__PURE__ */ f("dt", {
+														className: "sr-only",
+														children: "Last active"
+													}),
+													/* @__PURE__ */ p("dd", { children: [
+														h("auth.sessions.lastActive", "Last active"),
+														" ",
+														i(e.lastActivityAt)
+													] })
 												]
 											})
 										]
 									})
 								]
 							})]
-						}), !e.isCurrent && /* @__PURE__ */ u("button", {
-							onClick: () => w(e.id),
-							className: "ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] transition-colors duration-200",
-							children: p("auth.sessions.revoke", "Revoke")
+						}), !e.isCurrent && /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => E(e.id),
+							"aria-label": `${h("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: h("auth.sessions.revoke", "Revoke")
 						})]
 					})
 				}, e.id))
 			})
 		]
-	}) : /* @__PURE__ */ u("div", {
+	}) : /* @__PURE__ */ f("div", {
 		className: "max-w-4xl mx-auto p-6",
-		children: /* @__PURE__ */ d("div", {
-			className: "text-center py-16 border-2 border-dashed border-[var(--color-border-default)] rounded-xl",
+		children: /* @__PURE__ */ p("div", {
+			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 			children: [
-				/* @__PURE__ */ u("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-status-warning-bg-subtle)] flex items-center justify-center",
-					children: /* @__PURE__ */ u(n, { className: "w-8 h-8 text-[var(--color-status-warning-text)]" })
+				/* @__PURE__ */ f("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ f(n, {
+						className: "w-8 h-8 text-status-warning-text",
+						"aria-hidden": "true"
+					})
 				}),
-				/* @__PURE__ */ u("h2", {
-					className: "text-xl font-semibold text-[var(--color-text-primary)] mb-2",
-					children: p("auth.sessions.authRequired", "Authentication Required")
+				/* @__PURE__ */ f("h2", {
+					className: "text-xl font-semibold text-text-primary mb-2",
+					children: h("auth.sessions.authRequired", "Authentication Required")
 				}),
-				/* @__PURE__ */ u("p", {
-					className: "text-[var(--color-text-secondary)]",
-					children: p("auth.sessions.signInToView", "Please sign in to view your active sessions")
+				/* @__PURE__ */ f("p", {
+					className: "text-text-secondary",
+					children: h("auth.sessions.signInToView", "Please sign in to view your active sessions")
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { f as SessionsPage };
+export { m as SessionsPage };
 
 //# sourceMappingURL=SessionsPage.js.map