@stackframe/stack 2.8.2 → 2.8.5

package/dist/components-page/account-settings.js

@@ -1,11 +1,9 @@
 "use client";
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -19,47 +17,29 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components-page/account-settings.tsx
 var account_settings_exports = {};
 __export(account_settings_exports, {
-  AccountSettings: () => AccountSettings,
-  EditableText: () => EditableText
+  AccountSettings: () => AccountSettings
 });
 module.exports = __toCommonJS(account_settings_exports);
-var import_yup = require("@hookform/resolvers/yup");
-var import_otp = require("@oslojs/otp");
-var import_stack_shared = require("@stackframe/stack-shared");
-var import_password = require("@stackframe/stack-shared/dist/helpers/password");
-var import_use_async_callback = require("@stackframe/stack-shared/dist/hooks/use-async-callback");
-var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
-var import_crypto = require("@stackframe/stack-shared/dist/utils/crypto");
-var import_dates = require("@stackframe/stack-shared/dist/utils/dates");
-var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
-var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_lucide_react = require("lucide-react");
-var QRCode = __toESM(require("qrcode"));
 var import_react = require("react");
-var import_react_hook_form = require("react-hook-form");
-var yup = __toESM(require("yup"));
 var import__ = require("..");
-var import_form_warning = require("../components/elements/form-warning");
 var import_maybe_full_page = require("../components/elements/maybe-full-page");
 var import_sidebar_layout = require("../components/elements/sidebar-layout");
-var import_user_avatar = require("../components/elements/user-avatar");
-var import_profile_image_editor = require("../components/profile-image-editor");
 var import_team_icon = require("../components/team-icon");
 var import_translations = require("../lib/translations");
+var import_active_sessions_page = require("./account-settings/active-sessions/active-sessions-page");
+var import_api_keys_page = require("./account-settings/api-keys/api-keys-page");
+var import_email_and_auth_page = require("./account-settings/email-and-auth/email-and-auth-page");
+var import_profile_page = require("./account-settings/profile-page/profile-page");
+var import_settings_page = require("./account-settings/settings/settings-page");
+var import_team_creation_page = require("./account-settings/teams/team-creation-page");
+var import_team_page = require("./account-settings/teams/team-page");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Icon = ({ name }) => {
   const LucideIcon = import_lucide_react.icons[name];
@@ -80,28 +60,35 @@ function AccountSettings(props) {
           type: "item",
           id: "profile",
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Contact" }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfilePage, {})
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_profile_page.ProfilePage, {})
         },
         {
           title: t("Emails & Auth"),
           type: "item",
           id: "auth",
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "ShieldCheck" }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPage, {}) })
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_email_and_auth_page.EmailsAndAuthPage, {}) })
         },
         {
           title: t("Active Sessions"),
           type: "item",
           id: "sessions",
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Monitor" }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSessionsPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSessionsPage, {}) })
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSessionsPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_active_sessions_page.ActiveSessionsPage, {}) })
         },
+        ...project.config.allowUserApiKeys ? [{
+          title: t("API Keys"),
+          type: "item",
+          id: "api-keys",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Key" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeysPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_keys_page.ApiKeysPage, {}) })
+        }] : [],
         {
           title: t("Settings"),
           type: "item",
           id: "settings",
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Settings" }),
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingsPage, {})
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_settings_page.SettingsPage, {})
         },
         ...props.extraItems?.map((item) => ({
           title: item.title,
@@ -129,341 +116,23 @@ function AccountSettings(props) {
           ] }),
           type: "item",
           id: `team-${team.id}`,
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPage, { team })
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_page.TeamPage, { team }) })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
           title: t("Create a team"),
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "CirclePlus" }),
           type: "item",
           id: "team-creation",
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreation, {})
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreationSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_creation_page.TeamCreationPage, {}) })
         }] : []
       ].filter((p) => p.type === "divider" || p.content),
       title: t("Account Settings")
     }
   ) }) });
 }
-function Section(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Separator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sm:flex-1 flex flex-col justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: props.title }),
-        props.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", children: props.description })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sm:flex-1 sm:items-end flex flex-col gap-2 ", children: props.children })
-    ] })
-  ] });
-}
 function PageLayout(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-6", children: props.children });
 }
-function ProfilePage() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Section,
-      {
-        title: t("User name"),
-        description: t("This is a display name and is not used for authentication"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          EditableText,
-          {
-            value: user.displayName || "",
-            onSave: async (newDisplayName) => {
-              await user.update({ displayName: newDisplayName });
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Section,
-      {
-        title: t("Profile image"),
-        description: t("Upload your own image as your avatar"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_profile_image_editor.ProfileImageEditor,
-          {
-            user,
-            onProfileImageUrlChange: async (profileImageUrl) => {
-              await user.update({ profileImageUrl });
-            }
-          }
-        )
-      }
-    )
-  ] });
-}
-function EmailsSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const contactChannels = user.useContactChannels();
-  const [addingEmail, setAddingEmail] = (0, import_react.useState)(contactChannels.length === 0);
-  const [addingEmailLoading, setAddingEmailLoading] = (0, import_react.useState)(false);
-  const [addedEmail, setAddedEmail] = (0, import_react.useState)(null);
-  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
-  (0, import_react.useEffect)(() => {
-    if (addedEmail) {
-      (0, import_promises.runAsynchronously)(async () => {
-        const cc = contactChannels.find((x) => x.value === addedEmail);
-        if (cc && !cc.isVerified) {
-          await cc.sendVerificationEmail();
-        }
-        setAddedEmail(null);
-      });
-    }
-  }, [contactChannels, addedEmail]);
-  const emailSchema = (0, import_schema_fields.yupObject)({
-    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required"))
-  });
-  const { register, handleSubmit, formState: { errors }, reset } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(emailSchema)
-  });
-  const onSubmit = async (data) => {
-    setAddingEmailLoading(true);
-    try {
-      await user.createContactChannel({ type: "email", value: data.email, usedForAuth: false });
-      setAddedEmail(data.email);
-    } finally {
-      setAddingEmailLoading(false);
-    }
-    setAddingEmail(false);
-    reset();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: t("Emails") }),
-      addingEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "form",
-        {
-          onSubmit: (e) => {
-            e.preventDefault();
-            (0, import_promises.runAsynchronously)(handleSubmit(onSubmit));
-          },
-          className: "flex flex-col",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_stack_ui.Input,
-                {
-                  ...register("email"),
-                  placeholder: t("Enter email")
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_stack_ui.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    setAddingEmail(false);
-                    reset();
-                  },
-                  children: t("Cancel")
-                }
-              )
-            ] }),
-            errors.email && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email.message })
-          ]
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
-    ] }),
-    contactChannels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
-      if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
-      if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
-      return 0;
-    }).map((x) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4", children: [
-        x.value,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-          x.isPrimary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { children: t("Primary") }) : null,
-          !x.isVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "destructive", children: t("Unverified") }) : null,
-          x.usedForAuth ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "outline", children: t("Used for sign-in") }) : null
-        ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.ActionCell, { items: [
-        ...!x.isVerified ? [{
-          item: t("Send verification email"),
-          onClick: async () => {
-            await x.sendVerificationEmail();
-          }
-        }] : [],
-        ...!x.isPrimary && x.isVerified ? [{
-          item: t("Set as primary"),
-          onClick: async () => {
-            await x.update({ isPrimary: true });
-          }
-        }] : !x.isPrimary ? [{
-          item: t("Set as primary"),
-          onClick: async () => {
-          },
-          disabled: true,
-          disabledTooltip: t("Please verify your email first")
-        }] : [],
-        ...!x.usedForAuth && x.isVerified ? [{
-          item: t("Use for sign-in"),
-          onClick: async () => {
-            try {
-              await x.update({ usedForAuth: true });
-            } catch (e) {
-              if (e instanceof import_stack_shared.KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse) {
-                alert(t("This email is already used for sign-in by another user."));
-              }
-            }
-          }
-        }] : [],
-        ...x.usedForAuth && !isLastEmail ? [{
-          item: t("Stop using for sign-in"),
-          onClick: async () => {
-            await x.update({ usedForAuth: false });
-          }
-        }] : x.usedForAuth ? [{
-          item: t("Stop using for sign-in"),
-          onClick: async () => {
-          },
-          disabled: true,
-          disabledTooltip: t("You can not remove your last sign-in email")
-        }] : [],
-        ...!isLastEmail || !x.usedForAuth ? [{
-          item: t("Remove"),
-          onClick: async () => {
-            await x.delete();
-          },
-          danger: true
-        }] : [{
-          item: t("Remove"),
-          onClick: async () => {
-          },
-          disabled: true,
-          disabledTooltip: t("You can not remove your last sign-in email")
-        }]
-      ] }) })
-    ] }, x.id)) }) }) }) : null
-  ] });
-}
-function EmailsAndAuthPage() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasskeySection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OtpSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MfaSection, {})
-  ] });
-}
-function ActiveSessionsPage() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "throw" });
-  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
-  const [isRevokingAll, setIsRevokingAll] = (0, import_react.useState)(false);
-  const [sessions, setSessions] = (0, import_react.useState)([]);
-  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    (0, import_promises.runAsynchronously)(async () => {
-      setIsLoading(true);
-      const sessionsData = await user.getActiveSessions();
-      const enhancedSessions = sessionsData;
-      setSessions(enhancedSessions);
-      setIsLoading(false);
-    });
-  }, [user]);
-  const handleRevokeSession = async (sessionId) => {
-    try {
-      await user.revokeSession(sessionId);
-      setSessions(sessions.filter((session) => session.id !== sessionId));
-    } catch (error) {
-      (0, import_errors.captureError)("Failed to revoke session", { sessionId, error });
-      throw error;
-    }
-  };
-  const handleRevokeAllSessions = async () => {
-    setIsRevokingAll(true);
-    try {
-      const deletionPromises = sessions.filter((session) => !session.isCurrentSession).map((session) => user.revokeSession(session.id));
-      await Promise.all(deletionPromises);
-      setSessions((prevSessions) => prevSessions.filter((session) => session.isCurrentSession));
-    } catch (error) {
-      (0, import_errors.captureError)("Failed to revoke all sessions", { error, sessionIds: sessions.map((session) => session.id) });
-      throw error;
-    } finally {
-      setIsRevokingAll(false);
-      setShowConfirmRevokeAll(false);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: t("Active Sessions") }),
-      sessions.filter((s) => !s.isCurrentSession).length > 0 && !isLoading && (showConfirmRevokeAll ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "destructive",
-            size: "sm",
-            loading: isRevokingAll,
-            onClick: handleRevokeAllSessions,
-            children: t("Confirm")
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "secondary",
-            size: "sm",
-            disabled: isRevokingAll,
-            onClick: () => setShowConfirmRevokeAll(false),
-            children: t("Cancel")
-          }
-        )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => setShowConfirmRevokeAll(true),
-          children: t("Revoke All Other Sessions")
-        }
-      ))
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", className: "mb-4", children: t("These are devices where you're currently logged in. You can revoke access to end a session.") }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[300px] w-full rounded-md" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Session") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("IP Address") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("Location") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("Last used") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[80px]" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { colSpan: 5, className: "text-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: t("No active sessions found") }) }) }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.isCurrentSession ? t("Current Session") : t("Other Session") }),
-          session.isImpersonation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "secondary", className: "w-fit mt-1", children: t("Impersonation") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", children: t("Signed in {time}", { time: new Date(session.createdAt).toLocaleDateString() }) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.geoInfo?.ip || t("-") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.geoInfo?.cityName || t("Unknown") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.lastUsedAt ? (0, import_dates.fromNow)(new Date(session.lastUsedAt)) : t("Never") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", title: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : "", children: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : "" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.ActionCell,
-          {
-            items: [
-              {
-                item: t("Revoke"),
-                onClick: () => handleRevokeSession(session.id),
-                danger: true,
-                disabled: session.isCurrentSession,
-                disabledTooltip: session.isCurrentSession ? t("You cannot revoke your current session") : void 0
-              }
-            ]
-          }
-        ) })
-      ] }, session.id)) })
-    ] }) })
-  ] }) });
-}
 function EmailsAndAuthPageSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
@@ -479,735 +148,28 @@ function ActiveSessionsPageSkeleton() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
   ] });
 }
-function PasskeySection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "throw" });
-  const stackApp = (0, import__.useStackApp)();
-  const project = stackApp.useProject();
-  const contactChannels = user.useContactChannels();
-  const hasPasskey = user.passkeyAuthEnabled;
-  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
-  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react.useState)(false);
-  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
-  if (!project.config.passkeyEnabled) {
-    return null;
-  }
-  const handleDeletePasskey = async () => {
-    await user.update({ passkeyAuthEnabled: false });
-    setShowConfirmationModal(false);
-  };
-  const handleAddNewPasskey = async () => {
-    await user.registerPasskey();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Passkey"), description: hasPasskey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex md:justify-end gap-2", children: [
-    !hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To enable Passkey sign-in, please add a verified sign-in email.") }),
-    hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }),
-    !hasPasskey && hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
-    hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.Button,
-      {
-        variant: "secondary",
-        onClick: () => setShowConfirmationModal(true),
-        children: t("Delete Passkey")
-      }
-    ),
-    hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "destructive",
-            onClick: handleDeletePasskey,
-            children: t("Disable")
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "secondary",
-            onClick: () => setShowConfirmationModal(false),
-            children: t("Cancel")
-          }
-        )
-      ] })
-    ] })
-  ] }) }) });
-}
-function OtpSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "throw" });
-  const project = (0, import__.useStackApp)().useProject();
-  const contactChannels = user.useContactChannels();
-  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
-  const [disabling, setDisabling] = (0, import_react.useState)(false);
-  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
-  if (!project.config.magicLinkEnabled) {
-    return null;
-  }
-  const handleDisableOTP = async () => {
-    await user.update({ otpAuthEnabled: false });
-    setDisabling(false);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("OTP sign-in"), description: user.otpAuthEnabled ? t("OTP/magic link sign-in is currently enabled.") : t("Enable sign-in via magic link or OTP sent to your sign-in emails."), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:justify-end", children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_stack_ui.Button,
-    {
-      variant: "secondary",
-      onClick: () => setDisabling(true),
-      children: t("Disable OTP")
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "destructive",
-          onClick: handleDisableOTP,
-          children: t("Disable")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "secondary",
-          onClick: () => setDisabling(false),
-          children: t("Cancel")
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_stack_ui.Button,
-    {
-      variant: "secondary",
-      onClick: async () => {
-        await user.update({ otpAuthEnabled: true });
-      },
-      children: t("Enable OTP")
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To enable OTP sign-in, please add a verified sign-in email.") }) }) });
-}
-function SettingsPage() {
+function ApiKeysPageSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeleteAccountSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
   ] });
 }
-function PasswordSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "throw" });
-  const contactChannels = user.useContactChannels();
-  const [changingPassword, setChangingPassword] = (0, import_react.useState)(false);
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const project = (0, import__.useStackApp)().useProject();
-  const passwordSchema = (0, import_schema_fields.yupObject)({
-    oldPassword: user.hasPassword ? import_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your old password")) : (0, import_schema_fields.yupString)(),
-    newPassword: import_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your password")).test({
-      name: "is-valid-password",
-      test: (value, ctx) => {
-        const error = (0, import_password.getPasswordError)(value);
-        if (error) {
-          return ctx.createError({ message: error.message });
-        } else {
-          return true;
-        }
-      }
-    }),
-    newPasswordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("newPassword"), "", null], t("Passwords do not match")).defined().nonEmpty(t("Please repeat your password"))
-  });
-  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(passwordSchema)
-  });
-  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.usedForAuth).length > 0;
-  const onSubmit = async (data) => {
-    setLoading(true);
-    try {
-      const { oldPassword, newPassword } = data;
-      const error = user.hasPassword ? await user.updatePassword({ oldPassword, newPassword }) : await user.setPassword({ password: newPassword });
-      if (error) {
-        setError("oldPassword", { type: "manual", message: t("Incorrect password") });
-      } else {
-        reset();
-        setChangingPassword(false);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-  const registerPassword = register("newPassword");
-  const registerPasswordRepeat = register("newPasswordRepeat");
-  if (!project.config.credentialEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Password"),
-      description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "secondary",
-          onClick: () => setChangingPassword(true),
-          children: user.hasPassword ? t("Update password") : t("Set password")
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To set a password, please add a sign-in email.") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "form",
-        {
-          onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
-          noValidate: true,
-          children: [
-            user.hasPassword && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_stack_ui.Input,
-                {
-                  id: "old-password",
-                  type: "password",
-                  autoComplete: "current-password",
-                  ...register("oldPassword")
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.oldPassword?.message?.toString() })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("New password") }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_stack_ui.PasswordInput,
-              {
-                id: "new-password",
-                autoComplete: "new-password",
-                ...registerPassword,
-                onChange: (e) => {
-                  clearErrors("newPassword");
-                  clearErrors("newPasswordRepeat");
-                  (0, import_promises.runAsynchronously)(registerPassword.onChange(e));
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.newPassword?.message?.toString() }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat new password") }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_stack_ui.PasswordInput,
-              {
-                id: "repeat-password",
-                autoComplete: "new-password",
-                ...registerPasswordRepeat,
-                onChange: (e) => {
-                  clearErrors("newPassword");
-                  clearErrors("newPasswordRepeat");
-                  (0, import_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-6 flex gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: user.hasPassword ? t("Update Password") : t("Set Password") }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_stack_ui.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    setChangingPassword(false);
-                    reset();
-                  },
-                  children: t("Cancel")
-                }
-              )
-            ] })
-          ]
-        }
-      ) })
-    }
-  );
-}
-function MfaSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const project = (0, import__.useStackApp)().useProject();
-  const user = (0, import__.useUser)({ or: "throw" });
-  const [generatedSecret, setGeneratedSecret] = (0, import_react.useState)(null);
-  const [qrCodeUrl, setQrCodeUrl] = (0, import_react.useState)(null);
-  const [mfaCode, setMfaCode] = (0, import_react.useState)("");
-  const [isMaybeWrong, setIsMaybeWrong] = (0, import_react.useState)(false);
-  const isEnabled = user.isMultiFactorRequired;
-  const [handleSubmit, isLoading] = (0, import_use_async_callback.useAsyncCallback)(async () => {
-    await user.update({
-      totpMultiFactorSecret: generatedSecret
-    });
-    setGeneratedSecret(null);
-    setQrCodeUrl(null);
-    setMfaCode("");
-  }, [generatedSecret, user]);
-  (0, import_react.useEffect)(() => {
-    setIsMaybeWrong(false);
-    (0, import_promises.runAsynchronouslyWithAlert)(async () => {
-      if (generatedSecret && (0, import_otp.verifyTOTP)(generatedSecret, 30, 6, mfaCode)) {
-        await handleSubmit();
-      }
-      setIsMaybeWrong(true);
-    });
-  }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Multi-factor authentication"),
-      description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
-        !isEnabled && generatedSecret && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: t("Scan this QR code with your authenticator app:") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { width: 200, height: 200, src: qrCodeUrl ?? (0, import_errors.throwErr)("TOTP QR code failed to generate"), alt: t("TOTP multi-factor authentication QR code") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: t("Then, enter your six-digit MFA code:") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Input,
-            {
-              value: mfaCode,
-              onChange: (e) => {
-                setIsMaybeWrong(false);
-                setMfaCode(e.target.value);
-              },
-              placeholder: "123456",
-              maxLength: 6,
-              disabled: isLoading
-            }
-          ),
-          isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Incorrect code. Please try again.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Button,
-            {
-              variant: "secondary",
-              onClick: () => {
-                setGeneratedSecret(null);
-                setQrCodeUrl(null);
-                setMfaCode("");
-              },
-              children: t("Cancel")
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2", children: isEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "secondary",
-            onClick: async () => {
-              await user.update({
-                totpMultiFactorSecret: null
-              });
-            },
-            children: t("Disable MFA")
-          }
-        ) : !generatedSecret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "secondary",
-            onClick: async () => {
-              const secret = (0, import_crypto.generateRandomValues)(new Uint8Array(20));
-              setQrCodeUrl(await generateTotpQrCode(project, user, secret));
-              setGeneratedSecret(secret);
-            },
-            children: t("Enable MFA")
-          }
-        ) })
-      ] })
-    }
-  );
-}
-async function generateTotpQrCode(project, user, secret) {
-  const uri = (0, import_otp.createTOTPKeyURI)(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
-  return await QRCode.toDataURL(uri);
-}
-function SignOutSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "throw" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Sign out"),
-      description: t("End your current session"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "secondary",
-          onClick: () => user.signOut(),
-          children: t("Sign out")
-        }
-      ) })
-    }
-  );
-}
-function TeamPage(props) {
+function TeamPageSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamUserProfileSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberListSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamProfileImageSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamDisplayNameSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeaveTeamSection, { team: props.team })
-  ] });
-}
-function LeaveTeamSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const [leaving, setLeaving] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Leave Team"),
-      description: t("leave this team and remove your team profile"),
-      children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stack_ui.Button,
-        {
-          variant: "secondary",
-          onClick: () => setLeaving(true),
-          children: t("Leave team")
-        }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to leave the team?") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Button,
-            {
-              variant: "destructive",
-              onClick: async () => {
-                await user.leaveTeam(props.team);
-                window.location.reload();
-              },
-              children: t("Leave")
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Button,
-            {
-              variant: "secondary",
-              onClick: () => setLeaving(false),
-              children: t("Cancel")
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function TeamProfileImageSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const updateTeamPermission = user.usePermission(props.team, "$update_team");
-  if (!updateTeamPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Team profile image"),
-      description: t("Upload an image for your team"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_profile_image_editor.ProfileImageEditor,
-        {
-          user: props.team,
-          onProfileImageUrlChange: async (profileImageUrl) => {
-            await props.team.update({ profileImageUrl });
-          }
-        }
-      )
-    }
-  );
-}
-function TeamDisplayNameSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const updateTeamPermission = user.usePermission(props.team, "$update_team");
-  if (!updateTeamPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Team display name"),
-      description: t("Change the display name of your team"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        EditableText,
-        {
-          value: props.team.displayName,
-          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
-        }
-      )
-    }
-  );
-}
-function TeamUserProfileSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const profile = user.useTeamProfile(props.team);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Team user name"),
-      description: t("Overwrite your user display name in this team"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        EditableText,
-        {
-          value: profile.displayName || "",
-          onSave: async (newDisplayName) => {
-            await profile.update({ displayName: newDisplayName });
-          }
-        }
-      )
-    }
-  );
-}
-function MemberInvitationSection(props) {
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
-  if (!inviteMemberPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationSectionInner, { team: props.team });
-}
-function MemberInvitationsSectionInvitationsList(props) {
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const { t } = (0, import_translations.useTranslation)();
-  const invitationsToShow = props.team.useInvitations();
-  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { className: "mt-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[60px]", children: t("Expires") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[36px] max-w-[36px]" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: invitation.recipientEmail }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash, { className: "w-4 h-4" }) }) })
-    ] }, invitation.id)) })
-  ] }) });
-}
-function MemberInvitationSectionInner(props) {
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const { t } = (0, import_translations.useTranslation)();
-  const readMemberPermission = user.usePermission(props.team, "$read_members");
-  const invitationSchema = (0, import_schema_fields.yupObject)({
-    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
-  });
-  const { register, handleSubmit, formState: { errors }, watch } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(invitationSchema)
-  });
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const [invitedEmail, setInvitedEmail] = (0, import_react.useState)(null);
-  const onSubmit = async (data) => {
-    setLoading(true);
-    try {
-      await props.team.inviteUser({ email: data.email });
-      setInvitedEmail(data.email);
-    } finally {
-      setLoading(false);
-    }
-  };
-  (0, import_react.useEffect)(() => {
-    setInvitedEmail(null);
-  }, [watch("email")]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Section,
-      {
-        title: t("Invite member"),
-        description: t("Invite a user to your team through email"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "form",
-          {
-            onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
-            noValidate: true,
-            className: "w-full",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_stack_ui.Input,
-                  {
-                    placeholder: t("Email"),
-                    ...register("email")
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Invite User") })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email?.message?.toString() }),
-              invitedEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { type: "label", variant: "secondary", children: [
-                "Invited ",
-                invitedEmail
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    readMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationsSectionInvitationsList, { team: props.team })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
   ] });
 }
-function MemberListSection(props) {
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const readMemberPermission = user.usePermission(props.team, "$read_members");
-  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
-  if (!readMemberPermission && !inviteMemberPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberListSectionInner, { team: props.team });
-}
-function MemberListSectionInner(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  const users = props.team.useUsers();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium mb-2", children: t("Members") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[100px]", children: t("User") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Name") })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user: teamProfile }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: teamProfile.displayName }) })
-      ] }, id)) })
-    ] }) })
+function TeamCreationSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
   ] });
 }
-function TeamCreation() {
-  const { t } = (0, import_translations.useTranslation)();
-  const teamCreationSchema = (0, import_schema_fields.yupObject)({
-    displayName: (0, import_schema_fields.yupString)().defined().nonEmpty(t("Please enter a team name"))
-  });
-  const { register, handleSubmit, formState: { errors } } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(teamCreationSchema)
-  });
-  const app = (0, import__.useStackApp)();
-  const project = app.useProject();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const navigate = app.useNavigate();
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  if (!project.config.clientTeamCreationEnabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.MessageCard, { title: t("Team creation is not enabled") });
-  }
-  const onSubmit = async (data) => {
-    setLoading(true);
-    let team;
-    try {
-      team = await user.createTeam({ displayName: data.displayName });
-    } finally {
-      setLoading(false);
-    }
-    navigate(`#team-${team.id}`);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "form",
-    {
-      onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
-      noValidate: true,
-      className: "flex gap-2 flex-col sm:flex-row",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Input,
-            {
-              id: "displayName",
-              type: "text",
-              ...register("displayName")
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.displayName?.message?.toString() })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Create") })
-      ]
-    }
-  ) }) });
-}
-function DeleteAccountSection() {
-  const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
-  const app = (0, import__.useStackApp)();
-  const project = app.useProject();
-  const [deleting, setDeleting] = (0, import_react.useState)(false);
-  if (!project.config.clientUserDeletionEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Section,
-    {
-      title: t("Delete Account"),
-      description: t("Permanently remove your account and all associated data"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.AccordionItem, { value: "item-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AccordionTrigger, { children: t("Danger zone") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AccordionContent, { children: !deleting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Button,
-          {
-            variant: "destructive",
-            onClick: () => setDeleting(true),
-            children: t("Delete account")
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_stack_ui.Button,
-              {
-                variant: "destructive",
-                onClick: async () => {
-                  await user.delete();
-                  await app.redirectToHome();
-                },
-                children: t("Delete Account")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_stack_ui.Button,
-              {
-                variant: "secondary",
-                onClick: () => setDeleting(false),
-                children: t("Cancel")
-              }
-            )
-          ] })
-        ] }) })
-      ] }) }) })
-    }
-  );
-}
-function EditableText(props) {
-  const [editing, setEditing] = (0, import_react.useState)(false);
-  const [editingValue, setEditingValue] = (0, import_react.useState)(props.value);
-  const { t } = (0, import_translations.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.Input,
-      {
-        value: editingValue,
-        onChange: (e) => setEditingValue(e.target.value)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.Button,
-      {
-        size: "sm",
-        onClick: async () => {
-          await props.onSave?.(editingValue);
-          setEditing(false);
-        },
-        children: t("Save")
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.Button,
-      {
-        size: "sm",
-        variant: "secondary",
-        onClick: () => {
-          setEditingValue(props.value);
-          setEditing(false);
-        },
-        children: t("Cancel")
-      }
-    )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.value }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Edit, { className: "w-4 h-4" }) })
-  ] }) });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AccountSettings,
-  EditableText
+  AccountSettings
 });
 //# sourceMappingURL=account-settings.js.map