@stackframe/stack 2.7.23 → 2.7.25

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stackframe/stack
 
+## 2.7.25
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-ui@2.7.25
+  - @stackframe/stack-sc@2.7.25
+  - @stackframe/stack-shared@2.7.25
+
+## 2.7.24
+
+### Patch Changes
+
+- Various changes
+  - @stackframe/stack-sc@2.7.24
+  - @stackframe/stack-shared@2.7.24
+  - @stackframe/stack-ui@2.7.24
+
 ## 2.7.23
 
 ### Patch Changes

package/dist/components/elements/sidebar-layout.js

@@ -28,19 +28,11 @@ module.exports = __toCommonJS(sidebar_layout_exports);
 var import_use_hash = require("@stackframe/stack-shared/dist/hooks/use-hash");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_lucide_react = require("lucide-react");
-var import_react = require("react");
 var import__ = require("../..");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SidebarLayout(props) {
-  const app = (0, import__.useStackApp)();
-  const navigate = app.useNavigate();
   const hash = (0, import_use_hash.useHash)();
   const selectedIndex = props.items.findIndex((item) => item.id && item.id === hash);
-  (0, import_react.useEffect)(() => {
-    if (selectedIndex === -1) {
-      navigate("#" + props.items[0].id);
-    }
-  }, [hash]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_stack_ui.cn)("hidden sm:flex stack-scope h-full", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DesktopLayout, { items: props.items, title: props.title, selectedIndex }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_stack_ui.cn)("sm:hidden stack-scope h-full", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileLayout, { items: props.items, title: props.title, selectedIndex }) })
@@ -49,13 +41,14 @@ function SidebarLayout(props) {
 function Items(props) {
   const app = (0, import__.useStackApp)();
   const navigate = app.useNavigate();
+  const activeItemIndex = props.selectedIndex === -1 ? 0 : props.selectedIndex;
   return props.items.map((item, index) => item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_stack_ui.Button,
     {
       variant: "ghost",
       size: "sm",
       className: (0, import_stack_ui.cn)(
-        props.selectedIndex === index && "bg-muted",
+        activeItemIndex === index && "sm:bg-muted",
         "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left"
       ),
       onClick: () => {

package/dist/components/elements/sidebar-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { useHash } from '@stackframe/stack-shared/dist/hooks/use-hash';\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { XIcon } from 'lucide-react';\nimport React, { ReactNode, useEffect } from 'react';\nimport { useStackApp } from '../..';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  id?: string,\n  icon?: React.ReactNode,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, className?: string }) {\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n  const hash = useHash();\n  const selectedIndex = props.items.findIndex(item => item.id && (item.id === hash));\n\n  useEffect(() => {\n    if (selectedIndex === -1) {\n      navigate('#' + props.items[0].id);\n    }\n  }, [hash]);\n\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], selectedIndex: number }) {\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left\",\n        )}\n        onClick={() => {\n          if (item.id) {\n            navigate('#' + item.id);\n          }\n        }}\n      >\n        {item.icon}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-full max-w-full relative\">\n      <div className=\"flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 w-0 flex justify-center gap-4 py-2 px-4\">\n        <div className='flex flex-col max-w-[800px] w-[800px]'>\n          <div className='mt-4 mb-6'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n          </div>\n          <div className='flex-1'>\n            {selectedItem.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n  if (props.selectedIndex === -1) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            <Button\n              variant='ghost'\n              size='icon'\n              onClick={() => { navigate('#'); }}\n            >\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,sBAAwB;AACxB,sBAAuC;AACvC,0BAAsB;AACtB,mBAA4C;AAC5C,eAA4B;AAyBxB;AAbG,SAAS,cAAc,OAAwE;AACpG,QAAM,UAAM,sBAAY;AACxB,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,WAAO,yBAAQ;AACrB,QAAM,gBAAgB,MAAM,MAAM,UAAU,UAAQ,KAAK,MAAO,KAAK,OAAO,IAAK;AAEjF,8BAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,eAAS,MAAM,MAAM,MAAM,CAAC,EAAE,EAAE;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,4EACE;AAAA,gDAAC,SAAI,eAAW,oBAAG,qCAAqC,MAAM,SAAS,GACrE,sDAAC,iBAAc,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,GACvF;AAAA,IACA,4CAAC,SAAI,eAAW,oBAAG,gCAAgC,MAAM,SAAS,GAChE,sDAAC,gBAAa,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,GACtF;AAAA,KACF;AAEJ;AAEA,SAAS,MAAM,OAAwD;AACrE,QAAM,UAAM,sBAAY;AACxB,QAAM,WAAW,IAAI,YAAY;AAEjC,SAAO,MAAM,MAAM,IAAI,CAAC,MAAM,UAC5B,KAAK,SAAS,SACZ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAW;AAAA,QACT,MAAM,kBAAkB,SAAS;AAAA,QACjC;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,YAAI,KAAK,IAAI;AACX,mBAAS,MAAM,KAAK,EAAE;AAAA,QACxB;AAAA,MACF;AAAA,MAEC;AAAA,aAAK;AAAA,QACL,KAAK;AAAA;AAAA;AAAA,IAdD;AAAA,EAeP,IACA,4CAAC,8BACE,eAAK,SADS,KAEjB,CACH;AAEH;AAEA,SAAS,cAAc,OAA2E;AAChG,QAAM,eAAe,MAAM,MAAM,MAAM,kBAAkB,KAAK,IAAI,MAAM,aAAa;AAErF,SACE,6CAAC,SAAI,WAAU,sDACb;AAAA,iDAAC,SAAI,WAAU,8FACZ;AAAA,YAAM,SAAS,4CAAC,SAAI,WAAU,aAC7B,sDAAC,8BAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,4CAAC,SAAM,OAAO,MAAM,OAAO,eAAe,MAAM,eAAe;AAAA,OACjE;AAAA,IACA,4CAAC,SAAI,WAAU,kDACb,uDAAC,SAAI,WAAU,yCACb;AAAA,mDAAC,SAAI,WAAU,aACb;AAAA,oDAAC,8BAAW,MAAK,MAAK,WAAU,iBAAiB,uBAAa,OAAM;AAAA,QACnE,aAAa,eAAe,4CAAC,8BAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,4CAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,OAA2E;AAC/F,QAAM,eAAe,MAAM,MAAM,MAAM,aAAa;AACpD,QAAM,UAAM,sBAAY;AACxB,QAAM,WAAW,IAAI,YAAY;AAEjC,MAAI,MAAM,kBAAkB,IAAI;AAC9B,WACE,6CAAC,SAAI,WAAU,2BACZ;AAAA,YAAM,SAAS,4CAAC,SAAI,WAAU,aAC7B,sDAAC,8BAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,4CAAC,SAAM,OAAO,MAAM,OAAO,eAAe,MAAM,eAAe;AAAA,OACjE;AAAA,EAEJ,OAAO;AACL,WACE,6CAAC,SAAI,WAAU,wCACb;AAAA,mDAAC,SAAI,WAAU,iBACb;AAAA,qDAAC,SAAI,WAAU,wBACb;AAAA,sDAAC,8BAAW,MAAK,MAAK,WAAU,iBAAiB,uBAAa,OAAM;AAAA,UACpE;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM;AAAE,yBAAS,GAAG;AAAA,cAAG;AAAA,cAEhC,sDAAC,6BAAM,WAAU,WAAU;AAAA;AAAA,UAC7B;AAAA,WACF;AAAA,QACC,aAAa,eAAe,4CAAC,8BAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,4CAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { useHash } from '@stackframe/stack-shared/dist/hooks/use-hash';\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { XIcon } from 'lucide-react';\nimport React, { ReactNode } from 'react';\nimport { useStackApp } from '../..';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  id?: string,\n  icon?: React.ReactNode,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, className?: string }) {\n  const hash = useHash();\n  const selectedIndex = props.items.findIndex(item => item.id && (item.id === hash));\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], selectedIndex: number }) {\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n\n  const activeItemIndex = props.selectedIndex === -1 ? 0 : props.selectedIndex;\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          activeItemIndex === index && \"sm:bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left\",\n        )}\n        onClick={() => {\n          if (item.id) {\n            navigate('#' + item.id);\n          }\n        }}\n      >\n        {item.icon}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-full max-w-full relative\">\n      <div className=\"flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 w-0 flex justify-center gap-4 py-2 px-4\">\n        <div className='flex flex-col max-w-[800px] w-[800px]'>\n          <div className='mt-4 mb-6'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n          </div>\n          <div className='flex-1'>\n            {selectedItem.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n  if (props.selectedIndex === -1) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            <Button\n              variant='ghost'\n              size='icon'\n              onClick={() => { navigate('#'); }}\n            >\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","names":[]}

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

@@ -33,9 +33,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var account_settings_exports = {};
 __export(account_settings_exports, {
   AccountSettings: () => AccountSettings,
-  EditableText: () => EditableText,
-  TeamCreation: () => TeamCreation,
-  useDeleteAccountSection: () => useDeleteAccountSection
+  EditableText: () => EditableText
 });
 module.exports = __toCommonJS(account_settings_exports);
 var import_yup = require("@hookform/resolvers/yup");
@@ -50,7 +48,7 @@ var import_stack_ui = require("@stackframe/stack-ui");
 var import_lucide_react = require("lucide-react");
 var import_otp = require("oslo/otp");
 var QRCode = __toESM(require("qrcode"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
 var yup = __toESM(require("yup"));
 var import__ = require("..");
@@ -138,22 +136,19 @@ function AccountSettings(props) {
   ) }) });
 }
 function Section(props) {
-  return /* @__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 })
+  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.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Separator, {}),
-    import_react.default.Children.map(props.children, (child) => child && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      child,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Separator, {})
-    ] }))
-  ] });
+  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)();
@@ -341,16 +336,12 @@ function EmailsSection() {
   ] });
 }
 function EmailsAndAuthPage() {
-  const passwordSection = usePasswordSection();
-  const mfaSection = useMfaSection();
-  const otpSection = useOtpSection();
-  const passkeySection = usePasskeySection();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsSection, {}),
-    passwordSection,
-    passkeySection,
-    otpSection,
-    mfaSection
+    /* @__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 EmailsAndAuthPageSkeleton() {
@@ -361,7 +352,7 @@ function EmailsAndAuthPageSkeleton() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
   ] });
 }
-function usePasskeySection() {
+function PasskeySection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "throw" });
   const stackApp = (0, import__.useStackApp)();
@@ -416,7 +407,7 @@ function usePasskeySection() {
     ] })
   ] }) }) });
 }
-function useOtpSection() {
+function OtpSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "throw" });
   const project = (0, import__.useStackApp)().useProject();
@@ -470,14 +461,12 @@ function useOtpSection() {
   ) : /* @__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() {
-  const deleteAccountSection = useDeleteAccountSection();
-  const signOutSection = useSignOutSection();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    deleteAccountSection,
-    signOutSection
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeleteAccountSection, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
   ] });
 }
-function usePasswordSection() {
+function PasswordSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "throw" });
   const contactChannels = user.useContactChannels();
@@ -600,7 +589,7 @@ function usePasswordSection() {
     }
   );
 }
-function useMfaSection() {
+function MfaSection() {
   const { t } = (0, import_translations.useTranslation)();
   const project = (0, import__.useStackApp)().useProject();
   const user = (0, import__.useUser)({ or: "throw" });
@@ -694,7 +683,7 @@ async function generateTotpQrCode(project, user, secret) {
   const uri = (0, import_otp.createTOTPKeyURI)(project.displayName, user.primaryEmail ?? user.id, secret);
   return await QRCode.toDataURL(uri);
 }
-function useSignOutSection() {
+function SignOutSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "throw" });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -714,22 +703,16 @@ function useSignOutSection() {
   );
 }
 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__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    teamUserProfileSection,
-    memberListSection,
-    memberInvitationSection,
-    teamProfileImageSection,
-    teamDisplayNameSection,
-    leaveTeamSection
+    /* @__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 useLeaveTeamSection(props) {
+function LeaveTeamSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const [leaving, setLeaving] = (0, import_react.useState)(false);
@@ -772,7 +755,7 @@ function useLeaveTeamSection(props) {
     }
   );
 }
-function useTeamProfileImageSection(props) {
+function TeamProfileImageSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
@@ -796,7 +779,7 @@ function useTeamProfileImageSection(props) {
     }
   );
 }
-function useTeamDisplayNameSection(props) {
+function TeamDisplayNameSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
@@ -818,7 +801,7 @@ function useTeamDisplayNameSection(props) {
     }
   );
 }
-function useTeamUserProfileSection(props) {
+function TeamUserProfileSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const profile = user.useTeamProfile(props.team);
@@ -839,22 +822,39 @@ function useTeamUserProfileSection(props) {
     }
   );
 }
-function useMemberInvitationSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
-  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"))
-  });
+function MemberInvitationSection(props) {
   const user = (0, import__.useUser)({ or: "redirect" });
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
-  const readMemberPermission = user.usePermission(props.team, "$read_members");
-  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
   if (!inviteMemberPermission) {
     return null;
   }
-  let invitationsToShow = [];
-  if (readMemberPermission) {
-    invitationsToShow = props.team.useInvitations();
-  }
+  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)
   });
@@ -872,7 +872,7 @@ function useMemberInvitationSection(props) {
   (0, import_react.useEffect)(() => {
     setInvitedEmail(null);
   }, [watch("email")]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Section,
       {
@@ -905,32 +905,21 @@ function useMemberInvitationSection(props) {
         )
       }
     ),
-    invitationsToShow.length > 0 && /* @__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)) })
-    ] }) })
+    readMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationsSectionInvitationsList, { team: props.team })
   ] });
 }
-function useMemberListSection(props) {
-  const { t } = (0, import_translations.useTranslation)();
+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();
-  if (!readMemberPermission) {
-    return null;
-  }
   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: [
@@ -994,7 +983,7 @@ function TeamCreation() {
     }
   ) }) });
 }
-function useDeleteAccountSection() {
+function DeleteAccountSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const app = (0, import__.useStackApp)();
@@ -1088,8 +1077,6 @@ function EditableText(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccountSettings,
-  EditableText,
-  TeamCreation,
-  useDeleteAccountSection
+  EditableText
 });
 //# sourceMappingURL=account-settings.js.map