@chemmangat/msal-next 4.1.0 → 4.2.0

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client.ts
 var client_exports = {};
 __export(client_exports, {
+  AccountList: () => AccountList,
+  AccountSwitcher: () => AccountSwitcher,
   AuthGuard: () => AuthGuard,
   AuthStatus: () => AuthStatus,
   ErrorBoundary: () => ErrorBoundary,
@@ -45,11 +47,12 @@ __export(client_exports, {
   retryWithBackoff: () => retryWithBackoff,
   safeJsonParse: () => safeJsonParse,
   sanitizeError: () => sanitizeError,
-  useAccount: () => import_msal_react3.useAccount,
+  useAccount: () => import_msal_react4.useAccount,
   useGraphApi: () => useGraphApi,
-  useIsAuthenticated: () => import_msal_react3.useIsAuthenticated,
-  useMsal: () => import_msal_react3.useMsal,
+  useIsAuthenticated: () => import_msal_react4.useIsAuthenticated,
+  useMsal: () => import_msal_react4.useMsal,
   useMsalAuth: () => useMsalAuth,
+  useMultiAccount: () => useMultiAccount,
   useRoles: () => useRoles,
   useTokenRefresh: () => useTokenRefresh,
   useUserProfile: () => useUserProfile,
@@ -1747,8 +1750,673 @@ var ErrorBoundary = class extends import_react10.Component {
   }
 };
 
-// src/hooks/useRoles.ts
+// src/hooks/useMultiAccount.ts
+var import_msal_react3 = require("@azure/msal-react");
+var import_msal_browser4 = require("@azure/msal-browser");
 var import_react11 = require("react");
+function useMultiAccount(defaultScopes = ["User.Read"]) {
+  const { instance, accounts, inProgress } = (0, import_msal_react3.useMsal)();
+  const [activeAccount, setActiveAccount] = (0, import_react11.useState)(
+    instance.getActiveAccount()
+  );
+  (0, import_react11.useEffect)(() => {
+    const currentActive = instance.getActiveAccount();
+    if (currentActive?.homeAccountId !== activeAccount?.homeAccountId) {
+      setActiveAccount(currentActive);
+    }
+  }, [instance, accounts, activeAccount]);
+  const hasMultipleAccounts = (0, import_react11.useMemo)(() => accounts.length > 1, [accounts]);
+  const accountCount = (0, import_react11.useMemo)(() => accounts.length, [accounts]);
+  const switchAccount = (0, import_react11.useCallback)(
+    (account) => {
+      try {
+        instance.setActiveAccount(account);
+        setActiveAccount(account);
+        if (process.env.NODE_ENV === "development") {
+          console.log("[MSAL Multi-Account] Switched to account:", account.username);
+        }
+      } catch (error) {
+        const msalError = wrapMsalError(error);
+        console.error("[MSAL Multi-Account] Failed to switch account:", msalError.message);
+        throw msalError;
+      }
+    },
+    [instance]
+  );
+  const addAccount = (0, import_react11.useCallback)(
+    async (scopes = defaultScopes) => {
+      if (inProgress !== import_msal_browser4.InteractionStatus.None) {
+        console.warn("[MSAL Multi-Account] Interaction already in progress");
+        return;
+      }
+      try {
+        const request = {
+          scopes,
+          prompt: "select_account",
+          // Force account selection
+          loginHint: void 0
+          // Don't hint any account
+        };
+        await instance.loginRedirect(request);
+      } catch (error) {
+        const msalError = wrapMsalError(error);
+        if (msalError.isUserCancellation()) {
+          console.log("[MSAL Multi-Account] User cancelled adding account");
+          return;
+        }
+        if (process.env.NODE_ENV === "development") {
+          console.error(msalError.toConsoleString());
+        } else {
+          console.error("[MSAL Multi-Account] Failed to add account:", msalError.message);
+        }
+        throw msalError;
+      }
+    },
+    [instance, defaultScopes, inProgress]
+  );
+  const removeAccount = (0, import_react11.useCallback)(
+    async (account) => {
+      try {
+        if (activeAccount?.homeAccountId === account.homeAccountId) {
+          const otherAccounts = accounts.filter(
+            (acc) => acc.homeAccountId !== account.homeAccountId
+          );
+          if (otherAccounts.length > 0) {
+            instance.setActiveAccount(otherAccounts[0]);
+            setActiveAccount(otherAccounts[0]);
+          } else {
+            instance.setActiveAccount(null);
+            setActiveAccount(null);
+          }
+        }
+        await instance.clearCache({
+          account
+        });
+        if (process.env.NODE_ENV === "development") {
+          console.log("[MSAL Multi-Account] Removed account:", account.username);
+        }
+      } catch (error) {
+        const msalError = wrapMsalError(error);
+        console.error("[MSAL Multi-Account] Failed to remove account:", msalError.message);
+        throw msalError;
+      }
+    },
+    [instance, activeAccount, accounts]
+  );
+  const signOutAccount = (0, import_react11.useCallback)(
+    async (account) => {
+      try {
+        await instance.logoutRedirect({
+          account
+        });
+      } catch (error) {
+        const msalError = wrapMsalError(error);
+        console.error("[MSAL Multi-Account] Failed to sign out account:", msalError.message);
+        throw msalError;
+      }
+    },
+    [instance]
+  );
+  const signOutAll = (0, import_react11.useCallback)(async () => {
+    try {
+      await instance.logoutRedirect({
+        account: activeAccount || void 0
+      });
+      instance.setActiveAccount(null);
+      await instance.clearCache();
+    } catch (error) {
+      const msalError = wrapMsalError(error);
+      console.error("[MSAL Multi-Account] Failed to sign out all accounts:", msalError.message);
+      throw msalError;
+    }
+  }, [instance, activeAccount]);
+  const getAccountByUsername = (0, import_react11.useCallback)(
+    (username) => {
+      return accounts.find((acc) => acc.username === username);
+    },
+    [accounts]
+  );
+  const getAccountById = (0, import_react11.useCallback)(
+    (homeAccountId) => {
+      return accounts.find((acc) => acc.homeAccountId === homeAccountId);
+    },
+    [accounts]
+  );
+  const isActiveAccount = (0, import_react11.useCallback)(
+    (account) => {
+      return activeAccount?.homeAccountId === account.homeAccountId;
+    },
+    [activeAccount]
+  );
+  return {
+    accounts,
+    activeAccount,
+    hasMultipleAccounts,
+    accountCount,
+    inProgress: inProgress !== import_msal_browser4.InteractionStatus.None,
+    switchAccount,
+    addAccount,
+    removeAccount,
+    signOutAccount,
+    signOutAll,
+    getAccountByUsername,
+    getAccountById,
+    isActiveAccount
+  };
+}
+
+// src/components/AccountSwitcher.tsx
+var import_react12 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function AccountSwitcher({
+  showAvatars = true,
+  maxAccounts = 5,
+  onSwitch,
+  onAdd,
+  onRemove,
+  className = "",
+  style,
+  variant = "default",
+  showAddButton = true,
+  showRemoveButton = true
+}) {
+  const {
+    accounts,
+    activeAccount,
+    switchAccount,
+    addAccount,
+    removeAccount,
+    isActiveAccount,
+    accountCount
+  } = useMultiAccount();
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [removingAccount, setRemovingAccount] = (0, import_react12.useState)(null);
+  const handleSwitch = (account) => {
+    switchAccount(account);
+    setIsOpen(false);
+    onSwitch?.(account);
+  };
+  const handleAdd = async () => {
+    if (accountCount >= maxAccounts) {
+      alert(`Maximum ${maxAccounts} accounts allowed`);
+      return;
+    }
+    await addAccount();
+    onAdd?.();
+  };
+  const handleRemove = async (account, e) => {
+    e.stopPropagation();
+    if (!confirm(`Remove account ${account.username}?`)) {
+      return;
+    }
+    setRemovingAccount(account.homeAccountId);
+    try {
+      await removeAccount(account);
+      onRemove?.(account);
+    } finally {
+      setRemovingAccount(null);
+    }
+  };
+  const containerStyle = {
+    position: "relative",
+    display: "inline-block",
+    ...style
+  };
+  const buttonStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: variant === "compact" ? "6px 12px" : "8px 16px",
+    backgroundColor: "#fff",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontSize: variant === "compact" ? "13px" : "14px",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  };
+  const dropdownStyle = {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: "4px",
+    backgroundColor: "#fff",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    minWidth: variant === "minimal" ? "200px" : "280px",
+    maxWidth: "320px",
+    zIndex: 1e3,
+    overflow: "hidden"
+  };
+  const accountItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "12px 16px",
+    cursor: "pointer",
+    borderBottom: "1px solid #f3f4f6",
+    transition: "background-color 0.15s"
+  };
+  const avatarStyle = {
+    width: variant === "compact" ? "28px" : "32px",
+    height: variant === "compact" ? "28px" : "32px",
+    borderRadius: "50%",
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: variant === "compact" ? "12px" : "14px",
+    fontWeight: "600",
+    flexShrink: 0
+  };
+  const getInitials = (name) => {
+    if (!name) return "?";
+    const parts = name.split(" ");
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+    }
+    return name.substring(0, 2).toUpperCase();
+  };
+  if (!activeAccount) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: buttonStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f9fafb";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#fff";
+        },
+        children: [
+          showAvatars && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: avatarStyle, children: getInitials(activeAccount.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: "500" }, children: activeAccount.name || activeAccount.username }),
+            variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: activeAccount.username })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              style: {
+                marginLeft: "auto",
+                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "path",
+                {
+                  d: "M4 6L8 10L12 6",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999
+          },
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: dropdownStyle, children: [
+        accounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            onClick: () => handleSwitch(account),
+            style: {
+              ...accountItemStyle,
+              backgroundColor: isActiveAccount(account) ? "#eff6ff" : "#fff"
+            },
+            onMouseEnter: (e) => {
+              if (!isActiveAccount(account)) {
+                e.currentTarget.style.backgroundColor = "#f9fafb";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!isActiveAccount(account)) {
+                e.currentTarget.style.backgroundColor = "#fff";
+              }
+            },
+            children: [
+              showAvatars && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: avatarStyle, children: getInitials(account.name) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: "500", fontSize: "14px" }, children: account.name || account.username }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "#6b7280",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: account.username
+                  }
+                )
+              ] }),
+              isActiveAccount(account) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 20 20",
+                  fill: "none",
+                  style: { flexShrink: 0 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "path",
+                    {
+                      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                      fill: "#3b82f6"
+                    }
+                  )
+                }
+              ),
+              showRemoveButton && accounts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  onClick: (e) => handleRemove(account, e),
+                  disabled: removingAccount === account.homeAccountId,
+                  style: {
+                    padding: "4px",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    borderRadius: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    opacity: removingAccount === account.homeAccountId ? 0.5 : 1
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "#fee2e2";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "path",
+                    {
+                      d: "M4 4L12 12M12 4L4 12",
+                      stroke: "#ef4444",
+                      strokeWidth: "2",
+                      strokeLinecap: "round"
+                    }
+                  ) })
+                }
+              )
+            ]
+          },
+          account.homeAccountId
+        )),
+        showAddButton && accountCount < maxAccounts && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "button",
+          {
+            onClick: handleAdd,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              backgroundColor: "#fff",
+              border: "none",
+              borderTop: "1px solid #e5e7eb",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              color: "#3b82f6",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              justifyContent: "center"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f9fafb";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "#fff";
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "path",
+                {
+                  d: "M8 3V13M3 8H13",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              ) }),
+              "Add Another Account"
+            ]
+          }
+        ),
+        accountCount >= maxAccounts && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              fontSize: "12px",
+              color: "#6b7280",
+              textAlign: "center",
+              borderTop: "1px solid #e5e7eb"
+            },
+            children: [
+              "Maximum ",
+              maxAccounts,
+              " accounts reached"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/AccountList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function AccountList({
+  showAvatars = true,
+  showDetails = true,
+  showActiveIndicator = true,
+  clickToSwitch = true,
+  onAccountClick,
+  className = "",
+  style,
+  orientation = "vertical"
+}) {
+  const { accounts, switchAccount, isActiveAccount } = useMultiAccount();
+  const handleAccountClick = (account) => {
+    if (clickToSwitch && !isActiveAccount(account)) {
+      switchAccount(account);
+    }
+    onAccountClick?.(account);
+  };
+  const getInitials = (name) => {
+    if (!name) return "?";
+    const parts = name.split(" ");
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+    }
+    return name.substring(0, 2).toUpperCase();
+  };
+  const containerStyle = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap: orientation === "vertical" ? "12px" : "16px",
+    ...style
+  };
+  const accountItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "16px",
+    backgroundColor: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    cursor: clickToSwitch ? "pointer" : "default",
+    transition: "all 0.15s",
+    position: "relative"
+  };
+  const avatarStyle = {
+    width: "48px",
+    height: "48px",
+    borderRadius: "50%",
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "18px",
+    fontWeight: "600",
+    flexShrink: 0
+  };
+  if (accounts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          padding: "24px",
+          textAlign: "center",
+          color: "#6b7280",
+          backgroundColor: "#f9fafb",
+          borderRadius: "8px",
+          ...style
+        },
+        children: "No accounts signed in"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style: containerStyle, children: accounts.map((account) => {
+    const isActive = isActiveAccount(account);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        onClick: () => handleAccountClick(account),
+        style: {
+          ...accountItemStyle,
+          borderColor: isActive ? "#3b82f6" : "#e5e7eb",
+          backgroundColor: isActive ? "#eff6ff" : "#fff",
+          boxShadow: isActive ? "0 0 0 3px rgba(59, 130, 246, 0.1)" : "none"
+        },
+        onMouseEnter: (e) => {
+          if (clickToSwitch && !isActive) {
+            e.currentTarget.style.backgroundColor = "#f9fafb";
+            e.currentTarget.style.borderColor = "#d1d5db";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (clickToSwitch && !isActive) {
+            e.currentTarget.style.backgroundColor = "#fff";
+            e.currentTarget.style.borderColor = "#e5e7eb";
+          }
+        },
+        children: [
+          showAvatars && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: avatarStyle, children: getInitials(account.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "16px",
+                  fontWeight: "600",
+                  color: "#111827",
+                  marginBottom: showDetails ? "4px" : 0
+                },
+                children: account.name || account.username
+              }
+            ),
+            showDetails && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: "#6b7280",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: account.username
+                }
+              ),
+              account.tenantId && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: "#9ca3af",
+                    marginTop: "2px"
+                  },
+                  children: [
+                    "Tenant: ",
+                    account.tenantId.substring(0, 8),
+                    "..."
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          showActiveIndicator && isActive && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "4px 12px",
+                backgroundColor: "#3b82f6",
+                color: "#fff",
+                borderRadius: "12px",
+                fontSize: "12px",
+                fontWeight: "600",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "path",
+                  {
+                    d: "M10 3L4.5 8.5L2 6",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) }),
+                "Active"
+              ]
+            }
+          )
+        ]
+      },
+      account.homeAccountId
+    );
+  }) });
+}
+
+// src/hooks/useRoles.ts
+var import_react13 = require("react");
 var rolesCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION2 = 5 * 60 * 1e3;
 var MAX_CACHE_SIZE2 = 100;
@@ -1770,11 +2438,11 @@ function enforceCacheLimit2() {
 function useRoles() {
   const { isAuthenticated, account } = useMsalAuth();
   const graph = useGraphApi();
-  const [roles, setRoles] = (0, import_react11.useState)([]);
-  const [groups, setGroups] = (0, import_react11.useState)([]);
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const fetchRolesAndGroups = (0, import_react11.useCallback)(async () => {
+  const [roles, setRoles] = (0, import_react13.useState)([]);
+  const [groups, setGroups] = (0, import_react13.useState)([]);
+  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const fetchRolesAndGroups = (0, import_react13.useCallback)(async () => {
     if (!isAuthenticated || !account) {
       setRoles([]);
       setGroups([]);
@@ -1817,31 +2485,31 @@ function useRoles() {
       setLoading(false);
     }
   }, [isAuthenticated, account, graph]);
-  const hasRole = (0, import_react11.useCallback)(
+  const hasRole = (0, import_react13.useCallback)(
     (role) => {
       return roles.includes(role);
     },
     [roles]
   );
-  const hasGroup = (0, import_react11.useCallback)(
+  const hasGroup = (0, import_react13.useCallback)(
     (groupId) => {
       return groups.includes(groupId);
     },
     [groups]
   );
-  const hasAnyRole = (0, import_react11.useCallback)(
+  const hasAnyRole = (0, import_react13.useCallback)(
     (checkRoles) => {
       return checkRoles.some((role) => roles.includes(role));
     },
     [roles]
   );
-  const hasAllRoles = (0, import_react11.useCallback)(
+  const hasAllRoles = (0, import_react13.useCallback)(
     (checkRoles) => {
       return checkRoles.every((role) => roles.includes(role));
     },
     [roles]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchRolesAndGroups();
     return () => {
       if (account) {
@@ -1863,11 +2531,11 @@ function useRoles() {
 }
 
 // src/utils/withAuth.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function withAuth(Component2, options = {}) {
   const { displayName, ...guardProps } = options;
   const WrappedComponent = (props) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AuthGuard, { ...guardProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component2, { ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AuthGuard, { ...guardProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component2, { ...props }) });
   };
   WrappedComponent.displayName = displayName || `withAuth(${Component2.displayName || Component2.name || "Component"})`;
   return WrappedComponent;
@@ -2139,9 +2807,9 @@ function createScopedLogger(scope, config) {
 }
 
 // src/protection/ProtectedPage.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_navigation = require("next/navigation");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ProtectedPage({
   children,
   config,
@@ -2152,9 +2820,9 @@ function ProtectedPage({
 }) {
   const router = (0, import_navigation.useRouter)();
   const { isAuthenticated, account, inProgress } = useMsalAuth();
-  const [isValidating, setIsValidating] = (0, import_react12.useState)(true);
-  const [isAuthorized, setIsAuthorized] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [isValidating, setIsValidating] = (0, import_react14.useState)(true);
+  const [isAuthorized, setIsAuthorized] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     async function checkAuth() {
       if (debug) {
         console.log("[ProtectedPage] Checking auth...", {
@@ -2223,33 +2891,33 @@ function ProtectedPage({
   }, [isAuthenticated, account, inProgress, config, router, defaultRedirectTo, debug]);
   if (isValidating || inProgress) {
     if (config.loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: config.loading });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: config.loading });
     }
     if (defaultLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: defaultLoading });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: defaultLoading });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" }) });
   }
   if (!isAuthorized) {
     if (config.unauthorized) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: config.unauthorized });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: config.unauthorized });
     }
     if (defaultUnauthorized) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: defaultUnauthorized });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: defaultUnauthorized });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Access Denied" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600", children: "You don't have permission to access this page." })
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Access Denied" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-gray-600", children: "You don't have permission to access this page." })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
 }
 
 // src/protection/withPageAuth.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function withPageAuth(Component2, authConfig, globalConfig) {
   const WrappedComponent = (props) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ProtectedPage,
       {
         config: authConfig,
@@ -2257,7 +2925,7 @@ function withPageAuth(Component2, authConfig, globalConfig) {
         defaultLoading: globalConfig?.defaultLoading,
         defaultUnauthorized: globalConfig?.defaultUnauthorized,
         debug: globalConfig?.debug,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component2, { ...props })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component2, { ...props })
       }
     );
   };
@@ -2339,9 +3007,11 @@ function createAuthMiddleware(config = {}) {
 }
 
 // src/client.ts
-var import_msal_react3 = require("@azure/msal-react");
+var import_msal_react4 = require("@azure/msal-react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccountList,
+  AccountSwitcher,
   AuthGuard,
   AuthStatus,
   ErrorBoundary,
@@ -2371,6 +3041,7 @@ var import_msal_react3 = require("@azure/msal-react");
   useIsAuthenticated,
   useMsal,
   useMsalAuth,
+  useMultiAccount,
   useRoles,
   useTokenRefresh,
   useUserProfile,