@stackframe/stack 2.8.3 → 2.8.5

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

@@ -2,33 +2,22 @@
 "use client";
 
 // src/components-page/account-settings.tsx
-import { yupResolver } from "@hookform/resolvers/yup";
-import { createTOTPKeyURI, verifyTOTP } from "@oslojs/otp";
-import { KnownErrors } from "@stackframe/stack-shared";
-import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
-import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
-import { passwordSchema as schemaFieldsPasswordSchema, strictEmailSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
-import { fromNow } from "@stackframe/stack-shared/dist/utils/dates";
-import { StackAssertionError, captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
-import { Edit, Trash, icons } from "lucide-react";
-import * as QRCode from "qrcode";
-import { Suspense, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import * as yup from "yup";
-import { MessageCard, useStackApp, useUser } from "..";
-import { CreateApiKeyDialog, ShowApiKeyDialog } from "../components/api-key-dialogs";
-import { ApiKeyTable } from "../components/api-key-table";
-import { FormWarningText } from "../components/elements/form-warning";
+import { Skeleton, Typography } from "@stackframe/stack-ui";
+import { icons } from "lucide-react";
+import { Suspense } from "react";
+import { useStackApp, useUser } from "..";
 import { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { SidebarLayout } from "../components/elements/sidebar-layout";
-import { UserAvatar } from "../components/elements/user-avatar";
-import { ProfileImageEditor } from "../components/profile-image-editor";
 import { TeamIcon } from "../components/team-icon";
 import { useTranslation } from "../lib/translations";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ActiveSessionsPage } from "./account-settings/active-sessions/active-sessions-page";
+import { ApiKeysPage } from "./account-settings/api-keys/api-keys-page";
+import { EmailsAndAuthPage } from "./account-settings/email-and-auth/email-and-auth-page";
+import { ProfilePage } from "./account-settings/profile-page/profile-page";
+import { SettingsPage } from "./account-settings/settings/settings-page";
+import { TeamCreationPage } from "./account-settings/teams/team-creation-page";
+import { TeamPage } from "./account-settings/teams/team-page";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Icon = ({ name }) => {
   const LucideIcon = icons[name];
   return /* @__PURE__ */ jsx(LucideIcon, { className: "mr-2 h-4 w-4" });
@@ -111,416 +100,16 @@ function AccountSettings(props) {
           icon: /* @__PURE__ */ jsx(Icon, { name: "CirclePlus" }),
           type: "item",
           id: "team-creation",
-          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(TeamCreationSkeleton, {}), children: /* @__PURE__ */ jsx(TeamCreation, {}) })
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(TeamCreationSkeleton, {}), children: /* @__PURE__ */ jsx(TeamCreationPage, {}) })
         }] : []
       ].filter((p) => p.type === "divider" || p.content),
       title: t("Account Settings")
     }
   ) }) });
 }
-function Section(props) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "sm:flex-1 flex flex-col justify-center", children: [
-        /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: props.title }),
-        props.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", children: props.description })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "sm:flex-1 sm:items-end flex flex-col gap-2 ", children: props.children })
-    ] })
-  ] });
-}
 function PageLayout(props) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: props.children });
 }
-function ApiKeysPage() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const apiKeys = user.useApiKeys();
-  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
-  const [returnedApiKey, setReturnedApiKey] = useState(null);
-  const CreateDialog = CreateApiKeyDialog;
-  const ShowDialog = ShowApiKeyDialog;
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") }),
-    /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
-    /* @__PURE__ */ jsx(
-      CreateDialog,
-      {
-        open: isNewApiKeyDialogOpen,
-        onOpenChange: setIsNewApiKeyDialogOpen,
-        onKeyCreated: setReturnedApiKey,
-        createApiKey: async (data) => {
-          const apiKey = await user.createApiKey(data);
-          return apiKey;
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ShowDialog,
-      {
-        apiKey: returnedApiKey,
-        onClose: () => setReturnedApiKey(null)
-      }
-    )
-  ] });
-}
-function TeamApiKeysSection(props) {
-  const user = useUser({ or: "redirect" });
-  const team = user.useTeam(props.team.id);
-  if (!team) {
-    throw new StackAssertionError("Team not found");
-  }
-  const manageApiKeysPermission = user.usePermission(props.team, "$manage_api_keys");
-  if (!manageApiKeysPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(TeamApiKeysSectionInner, { team: props.team });
-}
-function TeamApiKeysSectionInner(props) {
-  const { t } = useTranslation();
-  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
-  const [returnedApiKey, setReturnedApiKey] = useState(null);
-  const apiKeys = props.team.useApiKeys();
-  const CreateDialog = CreateApiKeyDialog;
-  const ShowDialog = ShowApiKeyDialog;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        title: t("API Keys"),
-        description: t("API keys grant programmatic access to your team."),
-        children: /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") })
-      }
-    ),
-    /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
-    /* @__PURE__ */ jsx(
-      CreateDialog,
-      {
-        open: isNewApiKeyDialogOpen,
-        onOpenChange: setIsNewApiKeyDialogOpen,
-        onKeyCreated: setReturnedApiKey,
-        createApiKey: async (data) => {
-          const apiKey = await props.team.createApiKey(data);
-          return apiKey;
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ShowDialog,
-      {
-        apiKey: returnedApiKey,
-        onClose: () => setReturnedApiKey(null)
-      }
-    )
-  ] });
-}
-function ProfilePage() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        title: t("User name"),
-        description: t("This is a display name and is not used for authentication"),
-        children: /* @__PURE__ */ jsx(
-          EditableText,
-          {
-            value: user.displayName || "",
-            onSave: async (newDisplayName) => {
-              await user.update({ displayName: newDisplayName });
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        title: t("Profile image"),
-        description: t("Upload your own image as your avatar"),
-        children: /* @__PURE__ */ jsx(
-          ProfileImageEditor,
-          {
-            user,
-            onProfileImageUrlChange: async (profileImageUrl) => {
-              await user.update({ profileImageUrl });
-            }
-          }
-        )
-      }
-    )
-  ] });
-}
-function EmailsSection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const contactChannels = user.useContactChannels();
-  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
-  const [addingEmailLoading, setAddingEmailLoading] = useState(false);
-  const [addedEmail, setAddedEmail] = useState(null);
-  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
-  useEffect(() => {
-    if (addedEmail) {
-      runAsynchronously(async () => {
-        const cc = contactChannels.find((x) => x.value === addedEmail);
-        if (cc && !cc.isVerified) {
-          await cc.sendVerificationEmail();
-        }
-        setAddedEmail(null);
-      });
-    }
-  }, [contactChannels, addedEmail]);
-  const emailSchema = yupObject({
-    email: 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 } = useForm({
-    resolver: 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__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
-      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Emails") }),
-      addingEmail ? /* @__PURE__ */ jsxs(
-        "form",
-        {
-          onSubmit: (e) => {
-            e.preventDefault();
-            runAsynchronously(handleSubmit(onSubmit));
-          },
-          className: "flex flex-col",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  ...register("email"),
-                  placeholder: t("Enter email")
-                }
-              ),
-              /* @__PURE__ */ jsx(Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    setAddingEmail(false);
-                    reset();
-                  },
-                  children: t("Cancel")
-                }
-              )
-            ] }),
-            errors.email && /* @__PURE__ */ jsx(FormWarningText, { text: errors.email.message })
-          ]
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex md:justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
-    ] }),
-    contactChannels.length > 0 ? /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(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__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4", children: [
-        x.value,
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          x.isPrimary ? /* @__PURE__ */ jsx(Badge, { children: t("Primary") }) : null,
-          !x.isVerified ? /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: t("Unverified") }) : null,
-          x.usedForAuth ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("Used for sign-in") }) : null
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableCell, { className: "flex justify-end", children: /* @__PURE__ */ jsx(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 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__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(EmailsSection, {}),
-    /* @__PURE__ */ jsx(PasswordSection, {}),
-    /* @__PURE__ */ jsx(PasskeySection, {}),
-    /* @__PURE__ */ jsx(OtpSection, {}),
-    /* @__PURE__ */ jsx(MfaSection, {})
-  ] });
-}
-function ActiveSessionsPage() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  const [isLoading, setIsLoading] = useState(true);
-  const [isRevokingAll, setIsRevokingAll] = useState(false);
-  const [sessions, setSessions] = useState([]);
-  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);
-  useEffect(() => {
-    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) {
-      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) {
-      captureError("Failed to revoke all sessions", { error, sessionIds: sessions.map((session) => session.id) });
-      throw error;
-    } finally {
-      setIsRevokingAll(false);
-      setShowConfirmRevokeAll(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
-      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Active Sessions") }),
-      sessions.filter((s) => !s.isCurrentSession).length > 0 && !isLoading && (showConfirmRevokeAll ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "destructive",
-            size: "sm",
-            loading: isRevokingAll,
-            onClick: handleRevokeAllSessions,
-            children: t("Confirm")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "secondary",
-            size: "sm",
-            disabled: isRevokingAll,
-            onClick: () => setShowConfirmRevokeAll(false),
-            children: t("Cancel")
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => setShowConfirmRevokeAll(true),
-          children: t("Revoke All Other Sessions")
-        }
-      ))
-    ] }),
-    /* @__PURE__ */ jsx(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__ */ jsx(Skeleton, { className: "h-[300px] w-full rounded-md" }) : /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Session") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[150px]", children: t("IP Address") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[150px]", children: t("Location") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[150px]", children: t("Last used") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[80px]" })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: sessions.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 5, className: "text-center py-6", children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("No active sessions found") }) }) }) : sessions.map((session) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Typography, { children: session.isCurrentSession ? t("Current Session") : t("Other Session") }),
-          session.isImpersonation && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "w-fit mt-1", children: t("Impersonation") }),
-          /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", children: t("Signed in {time}", { time: new Date(session.createdAt).toLocaleDateString() }) })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: session.geoInfo?.ip || t("-") }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: session.geoInfo?.cityName || t("Unknown") }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Typography, { children: session.lastUsedAt ? fromNow(new Date(session.lastUsedAt)) : t("Never") }),
-          /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", title: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : "", children: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : "" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(
-          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__ */ jsxs(PageLayout, { children: [
     /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
@@ -536,736 +125,6 @@ function ActiveSessionsPageSkeleton() {
     /* @__PURE__ */ jsx(Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
   ] });
 }
-function PasskeySection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  const stackApp = 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] = 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Section, { title: t("Passkey"), description: hasPasskey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ jsxs("div", { className: "flex md:justify-end gap-2", children: [
-    !hasValidEmail && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To enable Passkey sign-in, please add a verified sign-in email.") }),
-    hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ jsx(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__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
-    hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        onClick: () => setShowConfirmationModal(true),
-        children: t("Delete Passkey")
-      }
-    ),
-    hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "destructive",
-            onClick: handleDeletePasskey,
-            children: t("Disable")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "secondary",
-            onClick: () => setShowConfirmationModal(false),
-            children: t("Cancel")
-          }
-        )
-      ] })
-    ] })
-  ] }) }) });
-}
-function OtpSection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  const project = useStackApp().useProject();
-  const contactChannels = user.useContactChannels();
-  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
-  const [disabling, setDisabling] = 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__ */ 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__ */ jsx("div", { className: "flex md:justify-end", children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "secondary",
-      onClick: () => setDisabling(true),
-      children: t("Disable OTP")
-    }
-  ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "destructive",
-          onClick: handleDisableOTP,
-          children: t("Disable")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          onClick: () => setDisabling(false),
-          children: t("Cancel")
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ jsx(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__ */ jsx(
-    Button,
-    {
-      variant: "secondary",
-      onClick: async () => {
-        await user.update({ otpAuthEnabled: true });
-      },
-      children: t("Enable OTP")
-    }
-  ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To enable OTP sign-in, please add a verified sign-in email.") }) }) });
-}
-function SettingsPage() {
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(DeleteAccountSection, {}),
-    /* @__PURE__ */ jsx(SignOutSection, {})
-  ] });
-}
-function PasswordSection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  const contactChannels = user.useContactChannels();
-  const [changingPassword, setChangingPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const project = useStackApp().useProject();
-  const passwordSchema = yupObject({
-    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t("Please enter your old password")) : yupString(),
-    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t("Please enter your password")).test({
-      name: "is-valid-password",
-      test: (value, ctx) => {
-        const error = getPasswordError(value);
-        if (error) {
-          return ctx.createError({ message: error.message });
-        } else {
-          return true;
-        }
-      }
-    }),
-    newPasswordRepeat: 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 } = useForm({
-    resolver: 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__ */ jsx(
-    Section,
-    {
-      title: t("Password"),
-      description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
-      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          onClick: () => setChangingPassword(true),
-          children: user.hasPassword ? t("Update password") : t("Set password")
-        }
-      ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To set a password, please add a sign-in email.") }) : /* @__PURE__ */ jsxs(
-        "form",
-        {
-          onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-          noValidate: true,
-          children: [
-            user.hasPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "old-password",
-                  type: "password",
-                  autoComplete: "current-password",
-                  ...register("oldPassword")
-                }
-              ),
-              /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() })
-            ] }),
-            /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("New password") }),
-            /* @__PURE__ */ jsx(
-              PasswordInput,
-              {
-                id: "new-password",
-                autoComplete: "new-password",
-                ...registerPassword,
-                onChange: (e) => {
-                  clearErrors("newPassword");
-                  clearErrors("newPasswordRepeat");
-                  runAsynchronously(registerPassword.onChange(e));
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
-            /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat new password") }),
-            /* @__PURE__ */ jsx(
-              PasswordInput,
-              {
-                id: "repeat-password",
-                autoComplete: "new-password",
-                ...registerPasswordRepeat,
-                onChange: (e) => {
-                  clearErrors("newPassword");
-                  clearErrors("newPasswordRepeat");
-                  runAsynchronously(registerPasswordRepeat.onChange(e));
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex gap-4", children: [
-              /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: user.hasPassword ? t("Update Password") : t("Set Password") }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    setChangingPassword(false);
-                    reset();
-                  },
-                  children: t("Cancel")
-                }
-              )
-            ] })
-          ]
-        }
-      ) })
-    }
-  );
-}
-function MfaSection() {
-  const { t } = useTranslation();
-  const project = useStackApp().useProject();
-  const user = useUser({ or: "throw" });
-  const [generatedSecret, setGeneratedSecret] = useState(null);
-  const [qrCodeUrl, setQrCodeUrl] = useState(null);
-  const [mfaCode, setMfaCode] = useState("");
-  const [isMaybeWrong, setIsMaybeWrong] = useState(false);
-  const isEnabled = user.isMultiFactorRequired;
-  const [handleSubmit, isLoading] = useAsyncCallback(async () => {
-    await user.update({
-      totpMultiFactorSecret: generatedSecret
-    });
-    setGeneratedSecret(null);
-    setQrCodeUrl(null);
-    setMfaCode("");
-  }, [generatedSecret, user]);
-  useEffect(() => {
-    setIsMaybeWrong(false);
-    runAsynchronouslyWithAlert(async () => {
-      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {
-        await handleSubmit();
-      }
-      setIsMaybeWrong(true);
-    });
-  }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-        !isEnabled && generatedSecret && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Typography, { children: t("Scan this QR code with your authenticator app:") }),
-          /* @__PURE__ */ jsx("img", { width: 200, height: 200, src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"), alt: t("TOTP multi-factor authentication QR code") }),
-          /* @__PURE__ */ jsx(Typography, { children: t("Then, enter your six-digit MFA code:") }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: mfaCode,
-              onChange: (e) => {
-                setIsMaybeWrong(false);
-                setMfaCode(e.target.value);
-              },
-              placeholder: "123456",
-              maxLength: 6,
-              disabled: isLoading
-            }
-          ),
-          isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Incorrect code. Please try again.") }),
-          /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "secondary",
-              onClick: () => {
-                setGeneratedSecret(null);
-                setQrCodeUrl(null);
-                setMfaCode("");
-              },
-              children: t("Cancel")
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: isEnabled ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "secondary",
-            onClick: async () => {
-              await user.update({
-                totpMultiFactorSecret: null
-              });
-            },
-            children: t("Disable MFA")
-          }
-        ) : !generatedSecret && /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "secondary",
-            onClick: async () => {
-              const secret = generateRandomValues(new Uint8Array(20));
-              setQrCodeUrl(await generateTotpQrCode(project, user, secret));
-              setGeneratedSecret(secret);
-            },
-            children: t("Enable MFA")
-          }
-        ) })
-      ] })
-    }
-  );
-}
-async function generateTotpQrCode(project, user, secret) {
-  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
-  return await QRCode.toDataURL(uri);
-}
-function SignOutSection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Sign out"),
-      description: t("End your current session"),
-      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          onClick: () => user.signOut(),
-          children: t("Sign out")
-        }
-      ) })
-    }
-  );
-}
-function TeamPage(props) {
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(TeamUserProfileSection, { team: props.team }, `user-profile-${props.team.id}`),
-    /* @__PURE__ */ jsx(TeamProfileImageSection, { team: props.team }, `profile-image-${props.team.id}`),
-    /* @__PURE__ */ jsx(TeamDisplayNameSection, { team: props.team }, `display-name-${props.team.id}`),
-    /* @__PURE__ */ jsx(MemberListSection, { team: props.team }, `member-list-${props.team.id}`),
-    /* @__PURE__ */ jsx(MemberInvitationSection, { team: props.team }, `member-invitation-${props.team.id}`),
-    /* @__PURE__ */ jsx(TeamApiKeysSection, { team: props.team }, `api-keys-${props.team.id}`),
-    /* @__PURE__ */ jsx(LeaveTeamSection, { team: props.team }, `leave-team-${props.team.id}`)
-  ] });
-}
-function LeaveTeamSection(props) {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const [leaving, setLeaving] = useState(false);
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Leave Team"),
-      description: t("leave this team and remove your team profile"),
-      children: !leaving ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          onClick: () => setLeaving(true),
-          children: t("Leave team")
-        }
-      ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Are you sure you want to leave the team?") }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "destructive",
-              onClick: async () => {
-                await user.leaveTeam(props.team);
-                window.location.reload();
-              },
-              children: t("Leave")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "secondary",
-              onClick: () => setLeaving(false),
-              children: t("Cancel")
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function TeamProfileImageSection(props) {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const updateTeamPermission = user.usePermission(props.team, "$update_team");
-  if (!updateTeamPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Team profile image"),
-      description: t("Upload an image for your team"),
-      children: /* @__PURE__ */ jsx(
-        ProfileImageEditor,
-        {
-          user: props.team,
-          onProfileImageUrlChange: async (profileImageUrl) => {
-            await props.team.update({ profileImageUrl });
-          }
-        }
-      )
-    }
-  );
-}
-function TeamDisplayNameSection(props) {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const updateTeamPermission = user.usePermission(props.team, "$update_team");
-  if (!updateTeamPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Team display name"),
-      description: t("Change the display name of your team"),
-      children: /* @__PURE__ */ jsx(
-        EditableText,
-        {
-          value: props.team.displayName,
-          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
-        }
-      )
-    }
-  );
-}
-function TeamUserProfileSection(props) {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const profile = user.useTeamProfile(props.team);
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Team user name"),
-      description: t("Overwrite your user display name in this team"),
-      children: /* @__PURE__ */ jsx(
-        EditableText,
-        {
-          value: profile.displayName || "",
-          onSave: async (newDisplayName) => {
-            await profile.update({ displayName: newDisplayName });
-          }
-        }
-      )
-    }
-  );
-}
-function MemberInvitationSection(props) {
-  const user = useUser({ or: "redirect" });
-  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
-  if (!inviteMemberPermission) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(MemberInvitationSectionInner, { team: props.team });
-}
-function MemberInvitationsSectionInvitationsList(props) {
-  const user = useUser({ or: "redirect" });
-  const { t } = useTranslation();
-  const invitationsToShow = props.team.useInvitations();
-  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, { className: "mt-6", children: [
-    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
-    ] }) }),
-    /* @__PURE__ */ jsxs(TableBody, { children: [
-      invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
-        /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
-      ] }, invitation.id)),
-      invitationsToShow.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("No outstanding invitations") }) }) })
-    ] })
-  ] }) });
-}
-function MemberInvitationSectionInner(props) {
-  const user = useUser({ or: "redirect" });
-  const { t } = useTranslation();
-  const readMemberPermission = user.usePermission(props.team, "$read_members");
-  const invitationSchema = yupObject({
-    email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
-  });
-  const { register, handleSubmit, formState: { errors }, watch } = useForm({
-    resolver: yupResolver(invitationSchema)
-  });
-  const [loading, setLoading] = useState(false);
-  const [invitedEmail, setInvitedEmail] = useState(null);
-  const onSubmit = async (data) => {
-    setLoading(true);
-    try {
-      await props.team.inviteUser({ email: data.email });
-      setInvitedEmail(data.email);
-    } finally {
-      setLoading(false);
-    }
-  };
-  useEffect(() => {
-    setInvitedEmail(null);
-  }, [watch("email")]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        title: t("Invite member"),
-        description: t("Invite a user to your team through email"),
-        children: /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-            noValidate: true,
-            className: "w-full",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row w-full", children: [
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: t("Email"),
-                    ...register("email")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Invite User") })
-              ] }),
-              /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
-              invitedEmail && /* @__PURE__ */ jsxs(Typography, { type: "label", variant: "secondary", children: [
-                "Invited ",
-                invitedEmail
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    readMemberPermission && /* @__PURE__ */ jsx(MemberInvitationsSectionInvitationsList, { team: props.team })
-  ] });
-}
-function MemberListSection(props) {
-  const user = 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__ */ jsx(MemberListSectionInner, { team: props.team });
-}
-function MemberListSectionInner(props) {
-  const { t } = useTranslation();
-  const users = props.team.useUsers();
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Typography, { className: "font-medium mb-2", children: t("Members") }),
-    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: t("User") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Name") })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserAvatar, { user: teamProfile }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: teamProfile.displayName }) })
-      ] }, id)) })
-    ] }) })
-  ] });
-}
-function TeamCreation() {
-  const { t } = useTranslation();
-  const teamCreationSchema = yupObject({
-    displayName: yupString().defined().nonEmpty(t("Please enter a team name"))
-  });
-  const { register, handleSubmit, formState: { errors } } = useForm({
-    resolver: yupResolver(teamCreationSchema)
-  });
-  const app = useStackApp();
-  const project = app.useProject();
-  const user = useUser({ or: "redirect" });
-  const navigate = app.useNavigate();
-  const [loading, setLoading] = useState(false);
-  if (!project.config.clientTeamCreationEnabled) {
-    return /* @__PURE__ */ jsx(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__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-      noValidate: true,
-      className: "flex gap-2 flex-col sm:flex-row",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "displayName",
-              type: "text",
-              ...register("displayName")
-            }
-          ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })
-        ] }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Create") })
-      ]
-    }
-  ) }) });
-}
-function DeleteAccountSection() {
-  const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const app = useStackApp();
-  const project = app.useProject();
-  const [deleting, setDeleting] = useState(false);
-  if (!project.config.clientUserDeletionEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: t("Delete Account"),
-      description: t("Permanently remove your account and all associated data"),
-      children: /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { children: t("Danger zone") }),
-        /* @__PURE__ */ jsx(AccordionContent, { children: !deleting ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "destructive",
-            onClick: () => setDeleting(true),
-            children: t("Delete account")
-          }
-        ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "destructive",
-                onClick: async () => {
-                  await user.delete();
-                  await app.redirectToHome();
-                },
-                children: t("Delete Account")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                onClick: () => setDeleting(false),
-                children: t("Cancel")
-              }
-            )
-          ] })
-        ] }) })
-      ] }) }) })
-    }
-  );
-}
-function EditableText(props) {
-  const [editing, setEditing] = useState(false);
-  const [editingValue, setEditingValue] = useState(props.value);
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        value: editingValue,
-        onChange: (e) => setEditingValue(e.target.value)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        onClick: async () => {
-          await props.onSave?.(editingValue);
-          setEditing(false);
-        },
-        children: t("Save")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        variant: "secondary",
-        onClick: () => {
-          setEditingValue(props.value);
-          setEditing(false);
-        },
-        children: t("Cancel")
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { children: props.value }),
-    /* @__PURE__ */ jsx(Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Edit, { className: "w-4 h-4" }) })
-  ] }) });
-}
 function ApiKeysPageSkeleton() {
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
     /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
@@ -1287,9 +146,6 @@ function TeamCreationSkeleton() {
   ] });
 }
 export {
-  AccountSettings,
-  ApiKeysPage,
-  EditableText,
-  TeamApiKeysSection
+  AccountSettings
 };
 //# sourceMappingURL=account-settings.js.map