@stackframe/stack 2.5.35 → 2.5.37

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

@@ -9,20 +9,20 @@ import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-field
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
-import { CirclePlus, Contact, LogOut, ShieldCheck } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, EditableText, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { CirclePlus, Contact, Settings, ShieldCheck } from "lucide-react";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
 import * as QRCode from "qrcode";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { MessageCard, useStackApp, useUser } from "..";
 import { FormWarningText } from "../components/elements/form-warning";
+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 { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { useTranslation } from "../lib/translations";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AccountSettings(props) {
@@ -40,25 +40,21 @@ function AccountSettings(props) {
           type: "item",
           subpath: "/profile",
           icon: Contact,
-          content: /* @__PURE__ */ jsx(ProfileSection, {})
+          content: /* @__PURE__ */ jsx(ProfilePage, {})
         },
         {
           title: t("Security"),
           type: "item",
-          icon: ShieldCheck,
           subpath: "/security",
-          content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ jsx(EmailVerificationSection, {}),
-            /* @__PURE__ */ jsx(PasswordSection, {}),
-            /* @__PURE__ */ jsx(MfaSection, {})
-          ] })
+          icon: ShieldCheck,
+          content: /* @__PURE__ */ jsx(SecurityPage, {})
         },
         {
-          title: t("Sign Out"),
-          subpath: "/sign-out",
+          title: t("Settings"),
           type: "item",
-          icon: LogOut,
-          content: /* @__PURE__ */ jsx(SignOutSection, {})
+          subpath: "/settings",
+          icon: Settings,
+          content: /* @__PURE__ */ jsx(SettingsPage, {})
         },
         ...props.extraItems?.map((item) => ({
           title: item.title,
@@ -78,13 +74,7 @@ function AccountSettings(props) {
           ] }),
           type: "item",
           subpath: `/teams/${team.id}`,
-          content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ jsx(ProfileSettings, { team }),
-            /* @__PURE__ */ jsx(ManagementSettings, { team }),
-            /* @__PURE__ */ jsx(MemberInvitation, { team }),
-            /* @__PURE__ */ jsx(MembersSettings, { team }),
-            /* @__PURE__ */ jsx(UserSettings, { team })
-          ] })
+          content: /* @__PURE__ */ jsx(TeamPage, { team })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
           title: t("Create a team"),
@@ -99,42 +89,93 @@ function AccountSettings(props) {
     }
   ) }) });
 }
-function ProfileSection() {
+function Section(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+    /* @__PURE__ */ jsxs("div", { className: "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: "flex-1 flex flex-col gap-2", children: props.children })
+  ] });
+}
+function PageLayout(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    React.Children.map(props.children, (child) => child && /* @__PURE__ */ jsxs(Fragment, { children: [
+      child,
+      /* @__PURE__ */ jsx(Separator, {})
+    ] }))
+  ] });
+}
+function ProfilePage() {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
-      /* @__PURE__ */ jsx(Label, { className: "mb-2", children: t("Profile image") }),
-      /* @__PURE__ */ jsx(
-        ProfileImageEditor,
-        {
-          user,
-          onProfileImageUrlChange: async (profileImageUrl) => {
-            await user.update({ profileImageUrl });
+  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__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: t("Display name") }),
-      /* @__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 EmailVerificationSection() {
+function SecurityPage() {
+  const emailVerificationSection = useEmailVerificationSection();
+  const passwordSection = usePasswordSection();
+  const mfaSection = useMfaSection();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    emailVerificationSection,
+    passwordSection,
+    mfaSection
+  ] });
+}
+function SettingsPage() {
+  const deleteAccountSection = useDeleteAccountSection();
+  const signOutSection = useSignOutSection();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
+  ] });
+}
+function useEmailVerificationSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const [emailSent, setEmailSent] = useState(false);
   if (!user.primaryEmail) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: t("Email Verification") }),
-    user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Your email has not been verified.") }),
-      /* @__PURE__ */ jsx("div", { className: "flex mt-4", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Email Verification"),
+      description: t("Verify your email address to secure your account"),
+      children: /* @__PURE__ */ jsx("div", { children: user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
         Button,
         {
           disabled: emailSent,
@@ -144,11 +185,11 @@ function EmailVerificationSection() {
           },
           children: emailSent ? t("Email sent!") : t("Send Verification Email")
         }
-      ) })
-    ] })
-  ] }) });
+      ) }) })
+    }
+  );
 }
-function PasswordSection() {
+function usePasswordSection() {
   const { t } = useTranslation();
   const passwordSchema = yupObject({
     oldPassword: yupString().required(t("Please enter your old password")),
@@ -253,7 +294,7 @@ function PasswordSection() {
     ) })
   ] });
 }
-function MfaSection() {
+function useMfaSection() {
   const { t } = useTranslation();
   const project = useStackApp().useProject();
   const user = useUser({ or: "throw" });
@@ -279,103 +320,165 @@ function MfaSection() {
       setIsMaybeWrong(true);
     });
   }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: t("Multi-factor Authentication") }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      isEnabled ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Multi-factor authentication is currently enabled.") }) : generatedSecret ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center", 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,
+  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,
           {
-            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(Typography, { variant: "destructive", children: t("Multi-factor authentication is currently disabled.") }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          className: "mt-4",
-          variant: isEnabled ? "secondary" : "default",
-          onClick: async () => {
-            if (isEnabled) {
+            variant: "secondary",
+            onClick: async () => {
               await user.update({
                 totpMultiFactorSecret: null
               });
-            } else if (!generatedSecret) {
+            },
+            children: t("Disable")
+          }
+        ) : !generatedSecret && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            onClick: async () => {
               const secret = generateRandomValues(new Uint8Array(20));
               setQrCodeUrl(await generateTotpQrCode(project, user, secret));
               setGeneratedSecret(secret);
-            } else {
-              setGeneratedSecret(null);
-              setQrCodeUrl(null);
-              setMfaCode("");
-            }
-          },
-          children: isEnabled ? t("Disable") : generatedSecret ? t("Cancel") : t("Enable")
-        }
-      )
-    ] })
-  ] }) });
+            },
+            children: t("Enable")
+          }
+        ) })
+      ] })
+    }
+  );
 }
 async function generateTotpQrCode(project, user, secret) {
   const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
   return await QRCode.toDataURL(uri);
 }
-function SignOutSection() {
+function useSignOutSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "throw" });
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Section,
     {
-      variant: "secondary",
-      onClick: () => user.signOut(),
-      children: t("Sign Out")
+      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 UserSettings(props) {
+function TeamPage(props) {
+  const teamUserProfileSection = useTeamUserProfileSection(props);
+  const teamProfileImageSection = useTeamProfileImageSection(props);
+  const teamDisplayNameSection = useTeamDisplayNameSection(props);
+  const leaveTeamSection = useLeaveTeamSection(props);
+  const memberInvitationSection = useMemberInvitationSection(props);
+  const memberListSection = useMemberListSection(props);
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    teamUserProfileSection,
+    memberInvitationSection,
+    memberListSection,
+    teamProfileImageSection,
+    teamDisplayNameSection,
+    leaveTeamSection
+  ] });
+}
+function useLeaveTeamSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const [leaving, setLeaving] = useState(false);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { children: !leaving ? /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Section,
     {
-      variant: "secondary",
-      onClick: async () => setLeaving(true),
-      children: t("Leave team")
+      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")
+            }
+          )
+        ] })
+      ] })
     }
-  ) : /* @__PURE__ */ jsxs("div", { className: "", 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 ManagementSettings(props) {
+function useTeamProfileImageSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
   if (!updateTeamPermission) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: t("Team display name") }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team profile image"),
+      description: t("Upload an image for your team"),
+      children: /* @__PURE__ */ jsx(
         ProfileImageEditor,
         {
           user: props.team,
@@ -384,40 +487,53 @@ function ManagementSettings(props) {
           }
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: t("Team display name") }),
-      /* @__PURE__ */ jsx(
+    }
+  );
+}
+function useTeamDisplayNameSection(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 ProfileSettings(props) {
+function useTeamUserProfileSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const profile = user.useTeamProfile(props.team);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs(Label, { className: "flex gap-2", children: [
-      t("User display name"),
-      /* @__PURE__ */ jsx(SimpleTooltip, { tooltip: "This overwrites your user display name in the account setting", type: "info" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      EditableText,
-      {
-        value: profile.displayName || "",
-        onSave: async (newDisplayName) => {
-          await profile.update({ displayName: newDisplayName });
+  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 MemberInvitation(props) {
+function useMemberInvitationSection(props) {
   const { t } = useTranslation();
   const invitationSchema = yupObject({
     email: yupString().email().required(t("Please enter an email address"))
@@ -444,35 +560,39 @@ function MemberInvitation(props) {
   useEffect(() => {
     setInvitedEmail(null);
   }, [watch("email")]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: t("Invite a user to team") }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-        noValidate: true,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
-            /* @__PURE__ */ jsx("div", { 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
-          ] })
-        ]
-      }
-    )
-  ] });
+  return /* @__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,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", 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
+            ] })
+          ]
+        }
+      )
+    }
+  );
 }
-function MembersSettings(props) {
+function useMemberListSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const readMemberPermission = user.usePermission(props.team, "$read_members");
@@ -485,8 +605,8 @@ function MembersSettings(props) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: t("Members") }),
-    /* @__PURE__ */ jsxs(Table, { 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") })
@@ -495,7 +615,7 @@ function MembersSettings(props) {
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserAvatar, { user: teamProfile }) }),
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: teamProfile.displayName }) })
       ] }, id)) })
-    ] })
+    ] }) })
   ] });
 }
 function TeamCreation() {
@@ -521,32 +641,83 @@ function TeamCreation() {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+  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",
     {
-      className: "flex flex-col items-stretch stack-scope",
       onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
       noValidate: true,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: t("Display name") }),
+      className: "flex gap-2",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
-              id: "email",
-              type: "email",
+              id: "displayName",
+              type: "text",
               ...register("displayName")
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })
         ] }),
-        /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: t("Create") })
-      ] })
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Create") })
+      ]
     }
   ) }) });
 }
+function useDeleteAccountSection() {
+  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")
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) })
+    }
+  );
+}
 export {
   AccountSettings,
-  TeamCreation
+  TeamCreation,
+  useDeleteAccountSection
 };
 //# sourceMappingURL=account-settings.js.map