@burdenoff/microfe-auth 2026.624.2 → 2026.625.1

package/dist/auth/pages/UsersPage.js

@@ -4,33 +4,35 @@ import { useUserOperations as r } from "../hooks/useUserOperations.js";
 import { useAuthPermissions as i } from "../hooks/useAuthPermissions.js";
 import { ConfirmActionDialog as a } from "../components/ConfirmActionDialog.js";
 import { nativeImpact as o, nativeNotify as s } from "../../utils/nativeBridge.js";
-import { useCallback as ee, useEffect as c, useId as l, useState as u } from "react";
-import { useNavigate as te } from "react-router-dom";
-import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useCallback as ee, useEffect as te, useId as c, useState as l } from "react";
+import { useNavigate as ne } from "react-router-dom";
+import { useI18n as re } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Button as p } from "@burdenoff/fe-libs/button";
+import { EmphasisPanel as ie, IllustratedEmptyState as m, NextSteps as ae, PagePurpose as oe } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/UsersPage.tsx
-var m = [
+var h = [
 	"TENANT_ADMIN",
 	"ORG_ADMIN",
 	"WORKSPACE_ADMIN",
 	"MEMBER",
 	"GUEST"
-], h = [
+], g = [
 	"ACTIVE",
 	"INACTIVE",
 	"SUSPENDED",
 	"DELETED"
 ];
-function g() {
-	let g = te(), { t: re } = ne(), _ = (e, t) => {
-		let n = re(e);
+function _() {
+	let _ = ne(), { t: se } = re(), v = (e, t) => {
+		let n = se(e);
 		return n === e ? t : n;
-	}, v = e((e) => e.isAuthenticated), ie = e((e) => e.user), { canViewUsers: ae, canUpdateUsers: oe, canDeleteUsers: y, isLoading: se } = i(), { listUsers: b, updateUser: ce, deleteUser: le, hardDeleteUser: ue, isLoading: x } = r(), S = l(), C = l(), w = l(), T = l(), de = l(), [E, D] = u(!1), fe = async () => {
-		D(!0);
+	}, y = e((e) => e.isAuthenticated), ce = e((e) => e.user), { canViewUsers: le, canUpdateUsers: ue, canDeleteUsers: b, isLoading: de } = i(), { listUsers: x, updateUser: fe, deleteUser: pe, hardDeleteUser: me, isLoading: S } = r(), C = c(), w = c(), T = c(), E = c(), he = c(), [D, O] = l(!1), k = async () => {
+		O(!0);
 		try {
 			let e = {};
-			U && (e.search = U), W && (e.role = W), G && (e.status = G);
-			let t = (await b(e, {
+			W && (e.search = W), G && (e.role = G), K && (e.status = K);
+			let t = (await x(e, {
 				offset: 0,
 				limit: 1e4
 			})).users, n = [
@@ -66,11 +68,11 @@ function g() {
 			].join(","))], a = new Blob([i.join("\n")], { type: "text/csv;charset=utf-8;" }), o = URL.createObjectURL(a), s = document.createElement("a");
 			s.href = o, s.download = `users-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.csv`, s.click(), URL.revokeObjectURL(o);
 		} catch (e) {
-			L(e instanceof Error ? e.message : "Failed to export users");
+			R(e instanceof Error ? e.message : "Failed to export users");
 		} finally {
-			D(!1);
+			O(!1);
 		}
-	}, [O, pe] = u([]), [k, me] = u(0), [he, ge] = u(!1), [A, j] = u("list"), [M, N] = u(null), [P, F] = u({
+	}, [A, ge] = l([]), [j, _e] = l(0), [ve, ye] = l(!1), [be, M] = l("list"), [N, P] = l(null), [F, I] = l({
 		username: "",
 		firstName: "",
 		lastName: "",
@@ -79,34 +81,34 @@ function g() {
 		role: "MEMBER",
 		status: "ACTIVE",
 		emailVerified: !1
-	}), [I, L] = u(null), [_e, R] = u(!1), [z, B] = u(null), [V, H] = u(null), [U, ve] = u(""), [W, ye] = u(""), [G, be] = u(""), [K, q] = u(0), J = ee(async () => {
-		if (v) try {
-			R(!1);
+	}), [L, R] = l(null), [xe, z] = l(!1), [B, V] = l(null), [H, U] = l(null), [W, Se] = l(""), [G, Ce] = l(""), [K, we] = l(""), [q, J] = l(0), Y = ee(async () => {
+		if (y) try {
+			z(!1);
 			let e = {};
-			U && (e.search = U), W && (e.role = W), G && (e.status = G);
-			let t = await b(e, {
-				offset: K * 10,
+			W && (e.search = W), G && (e.role = G), K && (e.status = K);
+			let t = await x(e, {
+				offset: q * 10,
 				limit: 10
 			});
-			pe(t.users), me(t.totalCount), ge(t.hasMore), L(null);
+			ge(t.users), _e(t.totalCount), ye(t.hasMore), R(null);
 		} catch (e) {
 			if (e instanceof Error && (e.name === "AbortError" || e.message.includes("aborted"))) return;
 			let t = e instanceof Error ? e.message : "Failed to fetch users";
-			t.toLowerCase().includes("not authorized") || t.toLowerCase().includes("forbidden") ? (R(!0), L(null)) : L(t);
+			t.toLowerCase().includes("not authorized") || t.toLowerCase().includes("forbidden") ? (z(!0), R(null)) : R(t);
 		}
 	}, [
-		b,
-		U,
+		x,
 		W,
 		G,
 		K,
-		v
+		q,
+		y
 	]);
-	c(() => {
-		J();
-	}, [J]);
-	let Y = () => {
-		F({
+	te(() => {
+		Y();
+	}, [Y]);
+	let X = () => {
+		I({
 			username: "",
 			firstName: "",
 			lastName: "",
@@ -115,42 +117,42 @@ function g() {
 			role: "MEMBER",
 			status: "ACTIVE",
 			emailVerified: !1
-		}), N(null), L(null), B(null);
-	}, xe = async (e) => {
-		if (e.preventDefault(), M) {
-			L(null);
+		}), P(null), R(null), V(null);
+	}, Te = async (e) => {
+		if (e.preventDefault(), N) {
+			R(null);
 			try {
-				await ce(M.id, {
-					username: P.username || void 0,
-					firstName: P.firstName || void 0,
-					lastName: P.lastName || void 0,
-					name: P.name || void 0,
-					phoneNumber: P.phoneNumber || void 0,
-					role: P.role,
-					status: P.status,
-					emailVerified: P.emailVerified
-				}), B(_("auth.users.updateSuccess", "User updated successfully!")), j("list"), Y(), J();
+				await fe(N.id, {
+					username: F.username || void 0,
+					firstName: F.firstName || void 0,
+					lastName: F.lastName || void 0,
+					name: F.name || void 0,
+					phoneNumber: F.phoneNumber || void 0,
+					role: F.role,
+					status: F.status,
+					emailVerified: F.emailVerified
+				}), V(v("auth.users.updateSuccess", "User updated successfully!")), M("list"), X(), Y();
 			} catch (e) {
-				L(e instanceof Error ? e.message : "Failed to update user");
+				R(e instanceof Error ? e.message : "Failed to update user");
 			}
 		}
-	}, Se = async (e) => {
+	}, Ee = async (e) => {
 		o("medium");
 		try {
-			let t = await le(e.id);
-			t.success ? (s("success"), B(_("auth.users.userDeactivated", `User "${e.email}" has been deactivated.`)), H(null), J()) : (s("error"), L(t.message));
+			let t = await pe(e.id);
+			t.success ? (s("success"), V(v("auth.users.userDeactivated", `User "${e.email}" has been deactivated.`)), U(null), Y()) : (s("error"), R(t.message));
 		} catch (e) {
-			s("error"), L(e instanceof Error ? e.message : "Failed to delete user");
+			s("error"), R(e instanceof Error ? e.message : "Failed to delete user");
 		}
-	}, Ce = async (e) => {
+	}, De = async (e) => {
 		try {
-			let t = await ue(e.id);
-			t.success ? (B(_("auth.users.userPermanentlyDeleted", `User "${e.email}" has been permanently deleted.`)), H(null), J()) : L(t.message);
+			let t = await me(e.id);
+			t.success ? (V(v("auth.users.userPermanentlyDeleted", `User "${e.email}" has been permanently deleted.`)), U(null), Y()) : R(t.message);
 		} catch (e) {
-			L(e instanceof Error ? e.message : "Failed to hard delete user");
+			R(e instanceof Error ? e.message : "Failed to hard delete user");
 		}
-	}, X = (e) => {
-		N(e), F({
+	}, Z = (e) => {
+		P(e), I({
 			username: e.username || "",
 			firstName: e.firstName || "",
 			lastName: e.lastName || "",
@@ -159,26 +161,26 @@ function g() {
 			role: e.role,
 			status: e.status,
 			emailVerified: e.emailVerified
-		}), j("edit"), L(null);
-	}, Z = /* @__PURE__ */ f(a, {
-		open: V !== null,
+		}), M("edit"), R(null);
+	}, Q = /* @__PURE__ */ d(a, {
+		open: H !== null,
 		onOpenChange: (e) => {
-			e || H(null);
+			e || U(null);
 		},
-		title: V?.type === "hard-delete" ? _("auth.users.hardDeleteTitle", "Permanently delete user?") : _("auth.users.deactivateTitle", "Deactivate user?"),
-		description: V?.type === "hard-delete" ? V ? _("auth.users.hardDeleteDesc", `This permanently deletes "${V.user.email}" and cannot be undone.`) : "" : V ? _("auth.users.deactivateDesc", `"${V.user.email}" will be prevented from signing in until reactivated.`) : "",
-		confirmText: V?.type === "hard-delete" ? _("auth.users.hardDeleteConfirm", "Delete permanently") : _("auth.users.deactivateConfirm", "Deactivate user"),
-		variant: V?.type === "hard-delete" ? "danger" : "warning",
+		title: H?.type === "hard-delete" ? v("auth.users.hardDeleteTitle", "Permanently delete user?") : v("auth.users.deactivateTitle", "Deactivate user?"),
+		description: H?.type === "hard-delete" ? H ? v("auth.users.hardDeleteDesc", `This permanently deletes "${H.user.email}" and cannot be undone.`) : "" : H ? v("auth.users.deactivateDesc", `"${H.user.email}" will be prevented from signing in until reactivated.`) : "",
+		confirmText: H?.type === "hard-delete" ? v("auth.users.hardDeleteConfirm", "Delete permanently") : v("auth.users.deactivateConfirm", "Deactivate user"),
+		variant: H?.type === "hard-delete" ? "danger" : "warning",
 		onConfirm: async () => {
-			if (V) {
-				if (V.type === "hard-delete") {
-					await Ce(V.user);
+			if (H) {
+				if (H.type === "hard-delete") {
+					await De(H.user);
 					return;
 				}
-				await Se(V.user);
+				await Ee(H.user);
 			}
 		}
-	}), Q = (e) => {
+	}), Oe = (e) => {
 		switch (e) {
 			case "SUPER_ADMIN": return "bg-accent-purple-subtle text-accent-purple";
 			case "TENANT_ADMIN": return "bg-status-info-bg-subtle text-status-info-text";
@@ -197,195 +199,193 @@ function g() {
 			default: return "bg-bg-sunken text-text-primary";
 		}
 	};
-	return v ? se ? /* @__PURE__ */ f("div", {
+	return y ? de ? /* @__PURE__ */ d("div", {
 		className: "max-w-6xl mx-auto p-6",
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: "text-center py-16",
-			children: [/* @__PURE__ */ f(n, { className: "size-8 mx-auto text-text-secondary animate-spin" }), /* @__PURE__ */ f("p", {
+			children: [/* @__PURE__ */ d(n, { className: "size-8 mx-auto text-text-secondary animate-spin" }), /* @__PURE__ */ d("p", {
 				className: "mt-4 text-text-secondary",
-				children: _("auth.users.loadingPermissions", "Loading permissions...")
+				children: v("auth.users.loadingPermissions", "Loading permissions...")
 			})]
 		})
-	}) : !ae || _e ? /* @__PURE__ */ f("div", {
+	}) : !le || xe ? /* @__PURE__ */ d("div", {
 		className: "max-w-6xl mx-auto p-6",
-		children: /* @__PURE__ */ p("div", {
-			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-			children: [
-				/* @__PURE__ */ f("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ f("svg", {
-						className: "size-8 text-status-error-text",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						children: /* @__PURE__ */ f("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 1.5,
-							d: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-						})
-					})
-				}),
-				/* @__PURE__ */ f("h2", {
-					className: "text-xl font-semibold text-text-primary mb-2",
-					children: _("auth.users.adminAccessRequired", "Admin Access Required")
-				}),
-				/* @__PURE__ */ f("p", {
-					className: "text-text-secondary mb-4",
-					children: _("auth.users.adminAccessDesc", "You need administrator privileges to view and manage users.")
-				}),
-				/* @__PURE__ */ f("p", {
-					className: "text-sm text-text-secondary",
-					children: _("auth.users.requiredRoles", "Required roles: Super Admin, Tenant Admin, or Org Admin")
-				})
-			]
+		children: /* @__PURE__ */ d(m, {
+			illustration: "empty-generic",
+			title: v("auth.users.adminAccessRequired", "Admin Access Required"),
+			description: /* @__PURE__ */ f(u, { children: [
+				v("auth.users.adminAccessDesc", "You need administrator privileges to view and manage users."),
+				" ",
+				v("auth.users.requiredRoles", "Required roles: Super Admin, Tenant Admin, or Org Admin")
+			] })
 		})
-	}) : A === "list" ? /* @__PURE__ */ p("div", {
+	}) : be === "list" ? /* @__PURE__ */ f("div", {
 		className: "max-w-6xl mx-auto p-6",
 		children: [
-			Z,
-			/* @__PURE__ */ p("div", {
+			Q,
+			/* @__PURE__ */ f("div", {
 				className: "flex items-center justify-between mb-8",
-				children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
+				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
 					className: "text-3xl font-semibold text-text-primary",
-					children: _("auth.users.title", "Users")
-				}), /* @__PURE__ */ p("p", {
+					children: v("auth.users.title", "Users")
+				}), /* @__PURE__ */ f("p", {
 					className: "text-text-secondary mt-2",
 					children: [
-						_("auth.users.subtitle", "Manage users in your organization"),
+						v("auth.users.subtitle", "Manage users in your organization"),
 						" (",
-						k,
+						j,
 						" ",
-						_("auth.users.paginationUsers", "total"),
+						v("auth.users.paginationUsers", "total"),
 						")"
 					]
-				})] }), /* @__PURE__ */ f("button", {
+				})] }), /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => void fe(),
-					disabled: E,
-					"aria-label": _("auth.users.exportAriaLabel", "Export user list"),
+					onClick: () => void k(),
+					disabled: D,
+					"aria-label": v("auth.users.exportAriaLabel", "Export user 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: E ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, {
+					children: D ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, {
 						className: "size-4 animate-spin",
 						"aria-hidden": "true"
-					}), _("auth.users.exporting", "Exporting...")] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+					}), v("auth.users.exporting", "Exporting...")] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
 						className: "size-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ f("path", {
+						children: /* @__PURE__ */ d("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"
 						})
-					}), _("auth.users.export", "Export")] })
+					}), v("auth.users.export", "Export")] })
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d(oe, {
+				className: "mb-6",
+				children: v("auth.users.purpose", "Manage everyone with access to your organization. Search and filter accounts, review their role and status, edit details, or deactivate people who should no longer have access.")
+			}),
+			/* @__PURE__ */ f(ie, {
+				className: "mb-6",
+				children: [
+					/* @__PURE__ */ d("p", {
+						className: "text-sm font-medium text-text-secondary",
+						children: v("auth.users.summaryLabel", "People in this organization")
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "mt-1 text-3xl font-semibold text-text-primary",
+						children: j
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: v("auth.users.summaryHint", "Use the filters below to find a specific person or role.")
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: z
+				children: B
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				role: "alert",
 				"aria-live": "assertive",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: I
+				children: L
 			}),
-			z && /* @__PURE__ */ p("output", {
-				id: de,
+			B && /* @__PURE__ */ f("output", {
+				id: he,
 				className: "block mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
-				children: [/* @__PURE__ */ f("p", {
+				children: [/* @__PURE__ */ d("p", {
 					className: "text-status-success-text",
-					children: z
-				}), /* @__PURE__ */ f("button", {
+					children: B
+				}), /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => B(null),
+					onClick: () => V(null),
 					className: "mt-2 text-sm text-status-success-text hover:underline",
-					children: _("auth.users.dismiss", "Dismiss")
+					children: v("auth.users.dismiss", "Dismiss")
 				})]
 			}),
-			I && /* @__PURE__ */ p("div", {
-				id: T,
+			L && /* @__PURE__ */ f("div", {
+				id: E,
 				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(t, {
+				children: [/* @__PURE__ */ d(t, {
 					className: "size-5 text-status-error-text flex-shrink-0 mt-0.5",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ f("div", {
 					className: "flex-1",
-					children: [/* @__PURE__ */ f("p", {
+					children: [/* @__PURE__ */ d("p", {
 						className: "text-sm text-status-error-text",
-						children: I
-					}), /* @__PURE__ */ f("button", {
+						children: L
+					}), /* @__PURE__ */ d("button", {
 						type: "button",
-						onClick: () => L(null),
+						onClick: () => R(null),
 						className: "mt-2 text-sm text-status-error-text hover:underline",
-						children: _("auth.users.dismiss", "Dismiss")
+						children: v("auth.users.dismiss", "Dismiss")
 					})]
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "mb-6 p-4 rounded-xl border border-border-subtle bg-bg-surface",
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "flex flex-wrap gap-4 items-end",
 					children: [
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ f("div", {
 							className: "flex-1 min-w-[200px]",
-							children: [/* @__PURE__ */ f("label", {
-								htmlFor: S,
+							children: [/* @__PURE__ */ d("label", {
+								htmlFor: C,
 								className: "sr-only",
-								children: _("auth.users.searchLabel", "Search users")
-							}), /* @__PURE__ */ f("input", {
-								id: S,
+								children: v("auth.users.searchLabel", "Search users")
+							}), /* @__PURE__ */ d("input", {
+								id: C,
 								type: "search",
-								"aria-label": _("auth.users.searchLabel", "Search users"),
-								placeholder: _("auth.users.searchPlaceholder", "Search by email, username, or name..."),
-								value: U,
+								"aria-label": v("auth.users.searchLabel", "Search users"),
+								placeholder: v("auth.users.searchPlaceholder", "Search by email, username, or name..."),
+								value: W,
 								onChange: (e) => {
-									ve(e.target.value), q(0);
+									Se(e.target.value), J(0);
 								},
 								className: "w-full px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
 							})]
 						}),
-						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-							htmlFor: C,
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							htmlFor: w,
 							className: "sr-only",
-							children: _("auth.users.filterRoleLabel", "Filter by role")
-						}), /* @__PURE__ */ p("select", {
-							id: C,
-							value: W,
+							children: v("auth.users.filterRoleLabel", "Filter by role")
+						}), /* @__PURE__ */ f("select", {
+							id: w,
+							value: G,
 							onChange: (e) => {
-								ye(e.target.value), q(0);
+								Ce(e.target.value), J(0);
 							},
 							className: "px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-							children: [/* @__PURE__ */ f("option", {
+							children: [/* @__PURE__ */ d("option", {
 								value: "",
-								children: _("auth.users.allRoles", "All Roles")
-							}), m.map((e) => /* @__PURE__ */ f("option", {
+								children: v("auth.users.allRoles", "All Roles")
+							}), h.map((e) => /* @__PURE__ */ d("option", {
 								value: e,
 								children: e.replace("_", " ")
 							}, e))]
 						})] }),
-						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-							htmlFor: w,
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							htmlFor: T,
 							className: "sr-only",
-							children: _("auth.users.filterStatusLabel", "Filter by status")
-						}), /* @__PURE__ */ p("select", {
-							id: w,
-							value: G,
+							children: v("auth.users.filterStatusLabel", "Filter by status")
+						}), /* @__PURE__ */ f("select", {
+							id: T,
+							value: K,
 							onChange: (e) => {
-								be(e.target.value), q(0);
+								we(e.target.value), J(0);
 							},
 							className: "px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-							children: [/* @__PURE__ */ f("option", {
+							children: [/* @__PURE__ */ d("option", {
 								value: "",
-								children: _("auth.users.allStatuses", "All Statuses")
-							}), h.map((e) => /* @__PURE__ */ f("option", {
+								children: v("auth.users.allStatuses", "All Statuses")
+							}), g.map((e) => /* @__PURE__ */ d("option", {
 								value: e,
 								children: e
 							}, e))]
@@ -393,613 +393,621 @@ function g() {
 					]
 				})
 			}),
-			x ? /* @__PURE__ */ p("div", {
+			S ? /* @__PURE__ */ f("div", {
 				"aria-live": "polite",
 				"aria-busy": "true",
 				className: "flex items-center justify-center py-12",
-				children: [/* @__PURE__ */ f(n, {
+				children: [/* @__PURE__ */ d(n, {
 					className: "size-8 text-text-link animate-spin",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ f("span", {
+				}), /* @__PURE__ */ d("span", {
 					className: "ml-3 text-text-secondary",
-					children: _("auth.users.loadingUsers", "Loading users...")
-				})]
-			}) : O.length === 0 ? /* @__PURE__ */ p("div", {
-				className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-				children: [/* @__PURE__ */ f("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
-					children: /* @__PURE__ */ f("svg", {
-						className: "size-8 text-text-tertiary",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						children: /* @__PURE__ */ f("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 1.5,
-							d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-						})
-					})
-				}), /* @__PURE__ */ f("p", {
-					className: "text-text-secondary",
-					children: _("auth.users.noUsersFound", "No users found")
+					children: v("auth.users.loadingUsers", "Loading users...")
 				})]
-			}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface overflow-hidden shadow-sm",
-				children: /* @__PURE__ */ f("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ p("table", {
-						className: "w-full min-w-[800px]",
-						"aria-label": _("auth.users.tableAriaLabel", "Users table"),
-						children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", {
-							className: "border-b border-border-subtle bg-bg-canvas",
-							children: [
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-left p-4 text-sm font-medium text-text-secondary w-[280px]",
-									children: _("auth.users.columnUser", "User")
-								}),
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-left p-4 text-sm font-medium text-text-secondary w-[130px]",
-									children: _("auth.users.columnRole", "Role")
-								}),
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
-									children: _("auth.users.columnStatus", "Status")
-								}),
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-left p-4 text-sm font-medium text-text-secondary w-[80px]",
-									children: _("auth.users.columnVerified", "Verified")
-								}),
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
-									children: _("auth.users.columnLastLogin", "Last Login")
-								}),
-								/* @__PURE__ */ f("th", {
-									scope: "col",
-									className: "text-right p-4 text-sm font-medium text-text-secondary w-[180px]",
-									children: _("auth.users.columnActions", "Actions")
-								})
-							]
-						}) }), /* @__PURE__ */ f("tbody", { children: O.map((e) => /* @__PURE__ */ p("tr", {
-							className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken/50 transition-colors",
-							children: [
-								/* @__PURE__ */ f("td", {
-									className: "p-4",
-									children: /* @__PURE__ */ p("div", {
-										className: "flex items-center gap-3 min-w-0",
-										children: [/* @__PURE__ */ f("div", {
-											className: "auth-brand-badge flex size-10 shrink-0 items-center justify-center rounded-full font-medium",
-											children: (e.name || e.username || e.email).charAt(0).toUpperCase()
-										}), /* @__PURE__ */ p("div", {
-											className: "min-w-0 flex-1",
-											children: [/* @__PURE__ */ f("p", {
-												className: "font-medium text-text-primary truncate",
-												children: e.name || e.username
-											}), /* @__PURE__ */ f("p", {
-												className: "text-sm text-text-secondary truncate",
-												children: e.email
-											})]
-										})]
-									})
-								}),
-								/* @__PURE__ */ f("td", {
-									className: "p-4",
-									children: /* @__PURE__ */ f("span", {
-										className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${Q(e.role)}`,
-										children: e.role.replace("_", " ")
-									})
-								}),
-								/* @__PURE__ */ f("td", {
-									className: "p-4",
-									children: /* @__PURE__ */ f("span", {
-										className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${$(e.status)}`,
-										children: e.status
-									})
-								}),
-								/* @__PURE__ */ f("td", {
-									className: "p-4",
-									children: e.emailVerified ? /* @__PURE__ */ p("span", {
-										className: "inline-flex items-center gap-1 text-status-success-text whitespace-nowrap",
-										children: [/* @__PURE__ */ f("svg", {
-											className: "size-4 flex-shrink-0",
-											fill: "currentColor",
-											viewBox: "0 0 20 20",
-											children: /* @__PURE__ */ f("path", {
-												fillRule: "evenodd",
-												d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-												clipRule: "evenodd"
-											})
-										}), /* @__PURE__ */ f("span", {
-											className: "text-sm",
-											children: _("auth.users.verifiedYes", "Yes")
-										})]
-									}) : /* @__PURE__ */ p("span", {
-										className: "inline-flex items-center gap-1 text-status-warning-text whitespace-nowrap",
-										children: [/* @__PURE__ */ f("svg", {
-											className: "size-4 flex-shrink-0",
-											fill: "currentColor",
-											viewBox: "0 0 20 20",
-											children: /* @__PURE__ */ f("path", {
-												fillRule: "evenodd",
-												d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
-												clipRule: "evenodd"
-											})
-										}), /* @__PURE__ */ f("span", {
-											className: "text-sm",
-											children: _("auth.users.verifiedNo", "No")
-										})]
+			}) : A.length === 0 ? /* @__PURE__ */ d(m, {
+				illustration: W || G || K ? "empty-search" : "empty-people",
+				title: v("auth.users.noUsersFound", "No users found"),
+				description: W || G || K ? v("auth.users.noUsersFilteredDesc", "No users match your current search or filters. Try clearing them to see everyone.") : v("auth.users.noUsersDesc", "Once people join your organization they'll show up here for you to manage.")
+			}) : /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ d("div", {
+					className: "rounded-xl border border-border-subtle bg-bg-surface overflow-hidden shadow-sm",
+					children: /* @__PURE__ */ d("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ f("table", {
+							className: "w-full min-w-[800px]",
+							"aria-label": v("auth.users.tableAriaLabel", "Users table"),
+							children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+								className: "border-b border-border-subtle bg-bg-canvas",
+								children: [
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-left p-4 text-sm font-medium text-text-secondary w-[280px]",
+										children: v("auth.users.columnUser", "User")
+									}),
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-left p-4 text-sm font-medium text-text-secondary w-[130px]",
+										children: v("auth.users.columnRole", "Role")
+									}),
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
+										children: v("auth.users.columnStatus", "Status")
+									}),
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-left p-4 text-sm font-medium text-text-secondary w-[80px]",
+										children: v("auth.users.columnVerified", "Verified")
+									}),
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
+										children: v("auth.users.columnLastLogin", "Last Login")
+									}),
+									/* @__PURE__ */ d("th", {
+										scope: "col",
+										className: "text-right p-4 text-sm font-medium text-text-secondary w-[180px]",
+										children: v("auth.users.columnActions", "Actions")
 									})
-								}),
-								/* @__PURE__ */ f("td", {
-									className: "p-4 text-sm text-text-secondary whitespace-nowrap",
-									children: e.lastLoginAt ? new Date(e.lastLoginAt).toLocaleDateString() : _("auth.users.lastLoginNever", "Never")
-								}),
-								/* @__PURE__ */ f("td", {
-									className: "p-4",
-									children: /* @__PURE__ */ p("div", {
-										className: "flex justify-end gap-1.5 flex-nowrap",
-										children: [
-											/* @__PURE__ */ f("button", {
-												type: "button",
-												onClick: () => g(`/auth/users/${e.id}`),
-												"aria-label": `${_("auth.users.actionView", "View")} ${e.name || e.username || e.email}`,
-												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken transition-colors whitespace-nowrap flex-shrink-0",
-												children: _("auth.users.actionView", "View")
-											}),
-											oe && /* @__PURE__ */ f("button", {
-												type: "button",
-												onClick: () => X(e),
-												"aria-label": `${_("auth.users.actionEdit", "Edit")} ${e.name || e.username || e.email}`,
-												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-info-border text-text-link bg-bg-surface hover:bg-status-info-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
-												children: _("auth.users.actionEdit", "Edit")
-											}),
-											y && e.status !== "DELETED" && /* @__PURE__ */ f("button", {
-												type: "button",
-												onClick: () => H({
-													type: "deactivate",
-													user: e
+								]
+							}) }), /* @__PURE__ */ d("tbody", { children: A.map((e) => /* @__PURE__ */ f("tr", {
+								className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken/50 transition-colors",
+								children: [
+									/* @__PURE__ */ d("td", {
+										className: "p-4",
+										children: /* @__PURE__ */ f("div", {
+											className: "flex items-center gap-3 min-w-0",
+											children: [/* @__PURE__ */ d("div", {
+												className: "auth-brand-badge flex size-10 shrink-0 items-center justify-center rounded-full font-medium",
+												children: (e.name || e.username || e.email).charAt(0).toUpperCase()
+											}), /* @__PURE__ */ f("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ d("p", {
+													className: "font-medium text-text-primary truncate",
+													children: e.name || e.username
+												}), /* @__PURE__ */ d("p", {
+													className: "text-sm text-text-secondary truncate",
+													children: e.email
+												})]
+											})]
+										})
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "p-4",
+										children: /* @__PURE__ */ d("span", {
+											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${Oe(e.role)}`,
+											children: e.role.replace("_", " ")
+										})
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "p-4",
+										children: /* @__PURE__ */ d("span", {
+											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${$(e.status)}`,
+											children: e.status
+										})
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "p-4",
+										children: e.emailVerified ? /* @__PURE__ */ f("span", {
+											className: "inline-flex items-center gap-1 text-status-success-text whitespace-nowrap",
+											children: [/* @__PURE__ */ d("svg", {
+												className: "size-4 flex-shrink-0",
+												fill: "currentColor",
+												viewBox: "0 0 20 20",
+												children: /* @__PURE__ */ d("path", {
+													fillRule: "evenodd",
+													d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+													clipRule: "evenodd"
+												})
+											}), /* @__PURE__ */ d("span", {
+												className: "text-sm",
+												children: v("auth.users.verifiedYes", "Yes")
+											})]
+										}) : /* @__PURE__ */ f("span", {
+											className: "inline-flex items-center gap-1 text-status-warning-text whitespace-nowrap",
+											children: [/* @__PURE__ */ d("svg", {
+												className: "size-4 flex-shrink-0",
+												fill: "currentColor",
+												viewBox: "0 0 20 20",
+												children: /* @__PURE__ */ d("path", {
+													fillRule: "evenodd",
+													d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+													clipRule: "evenodd"
+												})
+											}), /* @__PURE__ */ d("span", {
+												className: "text-sm",
+												children: v("auth.users.verifiedNo", "No")
+											})]
+										})
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "p-4 text-sm text-text-secondary whitespace-nowrap",
+										children: e.lastLoginAt ? new Date(e.lastLoginAt).toLocaleDateString() : v("auth.users.lastLoginNever", "Never")
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "p-4",
+										children: /* @__PURE__ */ f("div", {
+											className: "flex justify-end gap-1.5 flex-nowrap",
+											children: [
+												/* @__PURE__ */ d("button", {
+													type: "button",
+													onClick: () => _(`/auth/users/${e.id}`),
+													"aria-label": `${v("auth.users.actionView", "View")} ${e.name || e.username || e.email}`,
+													className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken transition-colors whitespace-nowrap flex-shrink-0",
+													children: v("auth.users.actionView", "View")
+												}),
+												ue && /* @__PURE__ */ d("button", {
+													type: "button",
+													onClick: () => Z(e),
+													"aria-label": `${v("auth.users.actionEdit", "Edit")} ${e.name || e.username || e.email}`,
+													className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-info-border text-text-link bg-bg-surface hover:bg-status-info-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
+													children: v("auth.users.actionEdit", "Edit")
 												}),
-												"aria-label": `${_("auth.users.actionDelete", "Delete")} ${e.name || e.username || e.email}`,
-												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
-												children: _("auth.users.actionDelete", "Delete")
-											})
-										]
+												b && e.status !== "DELETED" && /* @__PURE__ */ d("button", {
+													type: "button",
+													onClick: () => U({
+														type: "deactivate",
+														user: e
+													}),
+													"aria-label": `${v("auth.users.actionDelete", "Delete")} ${e.name || e.username || e.email}`,
+													className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
+													children: v("auth.users.actionDelete", "Delete")
+												})
+											]
+										})
 									})
-								})
-							]
-						}, e.id)) })]
+								]
+							}, e.id)) })]
+						})
 					})
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "mt-6 flex items-center justify-between",
+					children: [/* @__PURE__ */ f("p", {
+						className: "text-sm text-text-secondary",
+						children: [
+							v("auth.users.showing", "Showing"),
+							" ",
+							q * 10 + 1,
+							" ",
+							v("auth.users.to", "to"),
+							" ",
+							Math.min((q + 1) * 10, j),
+							" ",
+							v("auth.users.of", "of"),
+							" ",
+							j,
+							" ",
+							v("auth.users.paginationUsers", "users")
+						]
+					}), /* @__PURE__ */ d("nav", {
+						"aria-label": v("auth.users.paginationAriaLabel", "User list pagination"),
+						children: /* @__PURE__ */ f("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => J((e) => Math.max(0, e - 1)),
+								disabled: q === 0,
+								"aria-label": v("auth.users.previousPageAriaLabel", "Go to previous page"),
+								className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
+								children: v("auth.users.previousPage", "Previous")
+							}), /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => J((e) => e + 1),
+								disabled: !ve,
+								"aria-label": v("auth.users.nextPageAriaLabel", "Go to next page"),
+								className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
+								children: v("auth.users.nextPage", "Next")
+							})]
+						})
+					})]
+				}),
+				/* @__PURE__ */ d(ae, {
+					className: "mt-8",
+					storageKey: "auth-users",
+					steps: [{
+						id: "search-user",
+						label: v("auth.users.nextSearch", "Find a specific person"),
+						description: v("auth.users.nextSearchDesc", "Use the search and role / status filters above to narrow the list."),
+						onClick: () => {
+							let e = document.getElementById(C);
+							e instanceof HTMLInputElement && e.focus();
+						}
+					}, {
+						id: "export-users",
+						label: v("auth.users.nextExport", "Export the user list"),
+						description: v("auth.users.nextExportDesc", "Download a CSV of users matching your current filters."),
+						onClick: () => void k()
+					}]
 				})
-			}), /* @__PURE__ */ p("div", {
-				className: "mt-6 flex items-center justify-between",
-				children: [/* @__PURE__ */ p("p", {
-					className: "text-sm text-text-secondary",
-					children: [
-						_("auth.users.showing", "Showing"),
-						" ",
-						K * 10 + 1,
-						" ",
-						_("auth.users.to", "to"),
-						" ",
-						Math.min((K + 1) * 10, k),
-						" ",
-						_("auth.users.of", "of"),
-						" ",
-						k,
-						" ",
-						_("auth.users.paginationUsers", "users")
-					]
-				}), /* @__PURE__ */ f("nav", {
-					"aria-label": _("auth.users.paginationAriaLabel", "User list pagination"),
-					children: /* @__PURE__ */ p("div", {
-						className: "flex gap-2",
-						children: [/* @__PURE__ */ f("button", {
-							type: "button",
-							onClick: () => q((e) => Math.max(0, e - 1)),
-							disabled: K === 0,
-							"aria-label": _("auth.users.previousPageAriaLabel", "Go to previous page"),
-							className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
-							children: _("auth.users.previousPage", "Previous")
-						}), /* @__PURE__ */ f("button", {
-							type: "button",
-							onClick: () => q((e) => e + 1),
-							disabled: !he,
-							"aria-label": _("auth.users.nextPageAriaLabel", "Go to next page"),
-							className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
-							children: _("auth.users.nextPage", "Next")
-						})]
-					})
-				})]
-			})] })
+			] })
 		]
-	}) : A === "view" && M ? /* @__PURE__ */ p("div", {
+	}) : be === "view" && N ? /* @__PURE__ */ f("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
-			Z,
-			/* @__PURE__ */ p("button", {
+			Q,
+			/* @__PURE__ */ f("button", {
 				type: "button",
 				onClick: () => {
-					j("list"), Y();
+					M("list"), X();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
-				children: [/* @__PURE__ */ f("svg", {
+				children: [/* @__PURE__ */ d("svg", {
 					className: "size-4",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
-					children: /* @__PURE__ */ f("path", {
+					children: /* @__PURE__ */ d("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 					})
-				}), _("auth.users.backToUsers", "Back to Users")]
+				}), v("auth.users.backToUsers", "Back to Users")]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f("div", {
 				className: "p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
 				children: [
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-4 mb-8",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "auth-brand-badge flex size-20 items-center justify-center rounded-full text-3xl font-semibold",
-							children: (M.name || M.username || M.email).charAt(0).toUpperCase()
-						}), /* @__PURE__ */ p("div", { children: [
-							/* @__PURE__ */ f("h1", {
+							children: (N.name || N.username || N.email).charAt(0).toUpperCase()
+						}), /* @__PURE__ */ f("div", { children: [
+							/* @__PURE__ */ d("h1", {
 								className: "text-2xl font-semibold text-text-primary",
-								children: M.name || M.username
+								children: N.name || N.username
 							}),
-							/* @__PURE__ */ f("p", {
+							/* @__PURE__ */ d("p", {
 								className: "text-text-secondary",
-								children: M.email
+								children: N.email
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "flex items-center gap-2 mt-2",
-								children: [/* @__PURE__ */ f("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${Q(M.role)}`,
-									children: M.role.replace("_", " ")
-								}), /* @__PURE__ */ f("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${$(M.status)}`,
-									children: M.status
+								children: [/* @__PURE__ */ d("span", {
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${Oe(N.role)}`,
+									children: N.role.replace("_", " ")
+								}), /* @__PURE__ */ d("span", {
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${$(N.status)}`,
+									children: N.status
 								})]
 							})
 						] })]
 					}),
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ f("div", {
 						className: "grid grid-cols-2 gap-6",
 						children: [
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsUsername", "Username")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsUsername", "Username")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.username
+									children: N.username
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsEmail", "Email")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsEmail", "Email")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.email
+									children: N.email
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsEmailVerified", "Email Verified")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsEmailVerified", "Email Verified")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.emailVerified ? /* @__PURE__ */ f("span", {
+									children: N.emailVerified ? /* @__PURE__ */ d("span", {
 										className: "text-status-success-text",
-										children: _("auth.users.verifiedYes", "Yes")
-									}) : /* @__PURE__ */ f("span", {
+										children: v("auth.users.verifiedYes", "Yes")
+									}) : /* @__PURE__ */ d("span", {
 										className: "text-status-warning-text",
-										children: _("auth.users.verifiedNo", "No")
+										children: v("auth.users.verifiedNo", "No")
 									})
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsMfaEnabled", "MFA Enabled")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsMfaEnabled", "MFA Enabled")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.mfaEnabled ? /* @__PURE__ */ f("span", {
+									children: N.mfaEnabled ? /* @__PURE__ */ d("span", {
 										className: "text-status-success-text",
-										children: _("auth.users.verifiedYes", "Yes")
-									}) : /* @__PURE__ */ f("span", {
+										children: v("auth.users.verifiedYes", "Yes")
+									}) : /* @__PURE__ */ d("span", {
 										className: "text-text-secondary",
-										children: _("auth.users.verifiedNo", "No")
+										children: v("auth.users.verifiedNo", "No")
 									})
 								})]
 							}),
-							M.phoneNumber && /* @__PURE__ */ p("div", {
+							N.phoneNumber && /* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsPhoneNumber", "Phone Number")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsPhoneNumber", "Phone Number")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.phoneNumber
+									children: N.phoneNumber
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsLastLogin", "Last Login")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsLastLogin", "Last Login")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: M.lastLoginAt ? new Date(M.lastLoginAt).toLocaleString() : _("auth.users.lastLoginNever", "Never")
+									children: N.lastLoginAt ? new Date(N.lastLoginAt).toLocaleString() : v("auth.users.lastLoginNever", "Never")
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsCreated", "Created")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsCreated", "Created")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: new Date(M.createdAt).toLocaleString()
+									children: new Date(N.createdAt).toLocaleString()
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ d("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
-									children: _("auth.users.viewDetailsLastUpdated", "Last Updated")
-								}), /* @__PURE__ */ f("p", {
+									children: v("auth.users.viewDetailsLastUpdated", "Last Updated")
+								}), /* @__PURE__ */ d("p", {
 									className: "text-text-primary font-medium",
-									children: new Date(M.updatedAt).toLocaleString()
+									children: new Date(N.updatedAt).toLocaleString()
 								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ f("div", {
 						className: "mt-8 pt-6 border-t border-border-subtle flex gap-3",
 						children: [
-							/* @__PURE__ */ f("button", {
+							/* @__PURE__ */ d(p, {
 								type: "button",
-								onClick: () => X(M),
-								className: "auth-primary-button px-4 py-2.5 font-medium",
-								children: _("auth.users.editUser", "Edit User")
+								onClick: () => Z(N),
+								variant: "default",
+								className: "font-semibold",
+								children: v("auth.users.editUser", "Edit User")
 							}),
-							M.status !== "DELETED" && /* @__PURE__ */ f("button", {
+							N.status !== "DELETED" && /* @__PURE__ */ d("button", {
 								type: "button",
-								onClick: () => H({
+								onClick: () => U({
 									type: "deactivate",
-									user: M
+									user: N
 								}),
 								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",
-								children: _("auth.users.deleteUser", "Delete User")
+								children: v("auth.users.deleteUser", "Delete User")
 							}),
-							y && M.status === "DELETED" && ie?.role === "SUPER_ADMIN" && /* @__PURE__ */ f("button", {
+							b && N.status === "DELETED" && ce?.role === "SUPER_ADMIN" && /* @__PURE__ */ d("button", {
 								type: "button",
-								onClick: () => H({
+								onClick: () => U({
 									type: "hard-delete",
-									user: M
+									user: N
 								}),
 								className: "px-4 py-2.5 rounded-xl bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover transition-colors",
-								children: _("auth.users.permanentlyDelete", "Permanently Delete")
+								children: v("auth.users.permanentlyDelete", "Permanently Delete")
 							})
 						]
 					})
 				]
 			})
 		]
-	}) : /* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ f("div", {
 		className: "max-w-2xl mx-auto p-6",
 		children: [
-			Z,
-			/* @__PURE__ */ p("button", {
+			Q,
+			/* @__PURE__ */ f("button", {
 				type: "button",
 				onClick: () => {
-					j("list"), Y();
+					M("list"), X();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
-				children: [/* @__PURE__ */ f("svg", {
+				children: [/* @__PURE__ */ d("svg", {
 					className: "size-4",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
-					children: /* @__PURE__ */ f("path", {
+					children: /* @__PURE__ */ d("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 					})
-				}), _("auth.users.backToUsers", "Back to Users")]
+				}), v("auth.users.backToUsers", "Back to Users")]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f("div", {
 				className: "p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
 				children: [
-					/* @__PURE__ */ f("h1", {
+					/* @__PURE__ */ d("h1", {
 						className: "text-2xl font-semibold text-text-primary mb-2",
-						children: _("auth.users.editUser", "Edit User")
+						children: v("auth.users.editUser", "Edit User")
 					}),
-					M && /* @__PURE__ */ p("p", {
+					N && /* @__PURE__ */ f("p", {
 						className: "text-text-secondary mb-6",
 						children: [
-							_("auth.users.editingUser", "Editing:"),
+							v("auth.users.editingUser", "Editing:"),
 							" ",
-							/* @__PURE__ */ f("strong", { children: M.email })
+							/* @__PURE__ */ d("strong", { children: N.email })
 						]
 					}),
-					I && /* @__PURE__ */ p("div", {
+					L && /* @__PURE__ */ f("div", {
 						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(t, { className: "size-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d(t, { className: "size-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", {
 							className: "flex-1",
-							children: /* @__PURE__ */ f("p", {
+							children: /* @__PURE__ */ d("p", {
 								className: "text-sm text-status-error-text",
-								children: I
+								children: L
 							})
 						})]
 					}),
-					/* @__PURE__ */ p("form", {
-						onSubmit: xe,
+					/* @__PURE__ */ f("form", {
+						onSubmit: Te,
 						className: "space-y-6",
-						"aria-describedby": I ? T : void 0,
+						"aria-describedby": L ? E : void 0,
 						noValidate: !0,
 						children: [
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-username",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldUsername", "Username")
-								}), /* @__PURE__ */ f("input", {
+									children: v("auth.users.fieldUsername", "Username")
+								}), /* @__PURE__ */ d("input", {
 									id: "edit-username",
 									type: "text",
-									"aria-label": _("auth.users.fieldUsername", "Username"),
-									value: P.username,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldUsername", "Username"),
+									value: F.username,
+									onChange: (e) => I({
+										...F,
 										username: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
-								})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-name",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldName", "Name")
-								}), /* @__PURE__ */ f("input", {
+									children: v("auth.users.fieldName", "Name")
+								}), /* @__PURE__ */ d("input", {
 									id: "edit-name",
 									type: "text",
-									"aria-label": _("auth.users.fieldName", "Name"),
-									value: P.name,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldName", "Name"),
+									value: F.name,
+									onChange: (e) => I({
+										...F,
 										name: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
 								})] })]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-firstName",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldFirstName", "First Name")
-								}), /* @__PURE__ */ f("input", {
+									children: v("auth.users.fieldFirstName", "First Name")
+								}), /* @__PURE__ */ d("input", {
 									id: "edit-firstName",
 									type: "text",
-									"aria-label": _("auth.users.fieldFirstName", "First Name"),
-									value: P.firstName,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldFirstName", "First Name"),
+									value: F.firstName,
+									onChange: (e) => I({
+										...F,
 										firstName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
-								})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-lastName",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldLastName", "Last Name")
-								}), /* @__PURE__ */ f("input", {
+									children: v("auth.users.fieldLastName", "Last Name")
+								}), /* @__PURE__ */ d("input", {
 									id: "edit-lastName",
 									type: "text",
-									"aria-label": _("auth.users.fieldLastName", "Last Name"),
-									value: P.lastName,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldLastName", "Last Name"),
+									value: F.lastName,
+									onChange: (e) => I({
+										...F,
 										lastName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
 								})] })]
 							}),
-							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 								htmlFor: "edit-phoneNumber",
 								className: "block text-sm font-medium text-text-primary mb-2",
-								children: _("auth.users.fieldPhoneNumber", "Phone Number")
-							}), /* @__PURE__ */ f("input", {
+								children: v("auth.users.fieldPhoneNumber", "Phone Number")
+							}), /* @__PURE__ */ d("input", {
 								id: "edit-phoneNumber",
 								type: "tel",
-								"aria-label": _("auth.users.fieldPhoneNumber", "Phone Number"),
-								value: P.phoneNumber,
-								onChange: (e) => F({
-									...P,
+								"aria-label": v("auth.users.fieldPhoneNumber", "Phone Number"),
+								value: F.phoneNumber,
+								onChange: (e) => I({
+									...F,
 									phoneNumber: e.target.value
 								}),
 								className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
 							})] }),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-role",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldRole", "Role")
-								}), /* @__PURE__ */ f("select", {
+									children: v("auth.users.fieldRole", "Role")
+								}), /* @__PURE__ */ d("select", {
 									id: "edit-role",
-									"aria-label": _("auth.users.fieldRole", "Role"),
-									value: P.role,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldRole", "Role"),
+									value: F.role,
+									onChange: (e) => I({
+										...F,
 										role: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-									children: m.map((e) => /* @__PURE__ */ f("option", {
+									children: h.map((e) => /* @__PURE__ */ d("option", {
 										value: e,
 										children: e.replace("_", " ")
 									}, e))
-								})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "edit-status",
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: _("auth.users.fieldStatus", "Status")
-								}), /* @__PURE__ */ f("select", {
+									children: v("auth.users.fieldStatus", "Status")
+								}), /* @__PURE__ */ d("select", {
 									id: "edit-status",
-									"aria-label": _("auth.users.fieldStatus", "Status"),
-									value: P.status,
-									onChange: (e) => F({
-										...P,
+									"aria-label": v("auth.users.fieldStatus", "Status"),
+									value: F.status,
+									onChange: (e) => I({
+										...F,
 										status: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-									children: h.map((e) => /* @__PURE__ */ f("option", {
+									children: g.map((e) => /* @__PURE__ */ d("option", {
 										value: e,
 										children: e
 									}, e))
 								})] })]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "flex items-center gap-3 p-4 rounded-xl bg-bg-canvas/50",
-								children: [/* @__PURE__ */ f("input", {
+								children: [/* @__PURE__ */ d("input", {
 									type: "checkbox",
 									id: "emailVerified",
-									checked: P.emailVerified,
-									onChange: (e) => F({
-										...P,
+									checked: F.emailVerified,
+									onChange: (e) => I({
+										...F,
 										emailVerified: e.target.checked
 									}),
 									className: "size-5 rounded border-border-default text-text-link focus:ring-action-primary-bg"
-								}), /* @__PURE__ */ f("label", {
+								}), /* @__PURE__ */ d("label", {
 									htmlFor: "emailVerified",
 									className: "text-sm font-medium text-text-primary",
-									children: _("auth.users.fieldEmailVerified", "Email Verified")
+									children: v("auth.users.fieldEmailVerified", "Email Verified")
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "flex gap-3 pt-4",
-								children: [/* @__PURE__ */ f("button", {
+								children: [/* @__PURE__ */ d(p, {
 									type: "submit",
-									disabled: x,
-									className: "auth-primary-button flex items-center gap-2 px-6 py-3 font-medium",
-									children: x ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, { className: "size-4 animate-spin" }), _("auth.users.saving", "Saving...")] }) : _("auth.users.saveChanges", "Save Changes")
-								}), /* @__PURE__ */ f("button", {
+									disabled: S,
+									variant: "default",
+									size: "lg",
+									className: "font-semibold",
+									children: S ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, { className: "size-4 animate-spin" }), v("auth.users.saving", "Saving...")] }) : v("auth.users.saveChanges", "Save Changes")
+								}), /* @__PURE__ */ d("button", {
 									type: "button",
 									onClick: () => {
-										j("list"), Y();
+										M("list"), X();
 									},
 									className: "px-6 py-3 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
-									children: _("auth.users.cancel", "Cancel")
+									children: v("auth.users.cancel", "Cancel")
 								})]
 							})
 						]
@@ -1007,28 +1015,16 @@ function g() {
 				]
 			})
 		]
-	}) : /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ d("div", {
 		className: "max-w-6xl mx-auto p-6",
-		children: /* @__PURE__ */ p("div", {
-			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-			children: [
-				/* @__PURE__ */ f("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ f(t, { className: "size-8 text-status-warning-text" })
-				}),
-				/* @__PURE__ */ f("h2", {
-					className: "text-xl font-semibold text-text-primary mb-2",
-					children: _("auth.users.authRequired", "Authentication Required")
-				}),
-				/* @__PURE__ */ f("p", {
-					className: "text-text-secondary",
-					children: _("auth.users.signInToManage", "Please sign in to manage users")
-				})
-			]
+		children: /* @__PURE__ */ d(m, {
+			illustration: "empty-generic",
+			title: v("auth.users.authRequired", "Authentication Required"),
+			description: v("auth.users.signInToManage", "Please sign in to manage users")
 		})
 	});
 }
 //#endregion
-export { g as UsersPage };
+export { _ as UsersPage };
 
 //# sourceMappingURL=UsersPage.js.map