@stackframe/stack 2.5.19 → 2.5.20

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography } from '@stackframe/stack-ui';\nimport { Contact, Settings, Shield, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport React, { useEffect, useState } from 'react';\nimport { CurrentUser, Project, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n\n  const inner = <SidebarLayout\n    items={[\n      { title: 'My Profile', content: <ProfileSection/>, icon: Contact },\n      { title: 'Security', content: <div className='flex flex-col gap-4'>\n        <EmailVerificationSection />\n        <PasswordSection />\n        <MfaSection />\n      </div>, icon: ShieldCheck },\n      { title: 'Settings', content: <SignOutSection />, icon: Settings },\n    ].filter(({ content }) => content as any)}\n    title='Team Settings'\n  />;\n\n  if (fullPage) {\n    return (\n      <Container size={800} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n\n\nfunction SettingSection(props: {\n  title: string,\n  desc: string,\n  buttonText?: string,\n  buttonDisabled?: boolean,\n  onButtonClick?: React.ComponentProps<typeof Button>[\"onClick\"],\n  buttonVariant?: 'default' | 'secondary',\n  children?: React.ReactNode,\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <Typography type='h4'>{props.title}</Typography>\n          <Typography type='label' variant='secondary'>{props.desc}</Typography>\n        </div>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div className='flex flex-col gap-4'>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div className='flex justify-end w-full'>\n          <Button\n            disabled={props.buttonDisabled}\n            onClick={props.onButtonClick}\n            variant={props.buttonVariant}\n          >\n            {props.buttonText}\n          </Button>\n        </div>\n      </CardFooter>}\n    </Card>\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser()!;\n  const [userInfo, setUserInfo] = useState<{ displayName: string }>({ displayName: user.displayName || '' });\n  const [changed, setChanged] = useState(false);\n\n  return (\n    <SettingSection\n      title='Profile'\n      desc='Your profile information'\n      buttonDisabled={!changed}\n      buttonText='Save'\n      onButtonClick={async () => {\n        await user.update(userInfo);\n        setChanged(false);\n      }}\n    >\n      <div className='flex gap-4 items-center'>\n        <UserAvatar user={user} size={50}/>\n        <div className='flex flex-col'>\n          <Typography>{user.displayName}</Typography>\n          <Typography variant='secondary' type='label'>{user.primaryEmail}</Typography>\n        </div>\n      </div>\n\n      <div className='flex flex-col'>\n        <Label htmlFor='display-name' className='mb-1'>Display Name</Label>\n        <Input\n          id='display-name'\n          value={userInfo.displayName}\n          onChange={(e) => {\n            setUserInfo((i) => ({...i, displayName: e.target.value }));\n            setChanged(true);\n          }}\n        />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser();\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <SettingSection\n      title='Email Verification'\n      desc='We want to make sure that you own the email address.'\n      buttonDisabled={emailSent}\n      buttonText={\n        !user?.primaryEmailVerified ?\n          emailSent ?\n            'Email sent!' :\n            'Send Email'\n          : undefined\n      }\n      onButtonClick={async () => {\n        await user?.sendVerificationEmail();\n        setEmailSent(true);\n      }}\n    >\n      {user?.primaryEmailVerified ?\n        <Typography variant='success'>Your email has been verified.</Typography> :\n        <Typography variant='destructive'>Your email has not been verified.</Typography>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [oldPassword, setOldPassword] = useState<string>('');\n  const [oldPasswordError, setOldPasswordError] = useState<string>('');\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [newPasswordError, setNewPasswordError] = useState<string>('');\n  const [repeatNewPassword, setRepeatNewPassword] = useState<string>('');\n  const [repeatNewPasswordError, setRepeatNewPasswordError] = useState<string>('');\n  const [passwordChanged, setPasswordChanged] = useState(false);\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={passwordChanged || (!oldPassword && !newPassword && !repeatNewPassword)}\n      buttonText={passwordChanged ? \"Password changed!\" : 'Update Password'}\n      onButtonClick={async () => {\n        setOldPasswordError('');\n        setNewPasswordError('');\n        setRepeatNewPasswordError('');\n        if (!oldPassword) {\n          setOldPasswordError('Please enter your old password');\n          return;\n        } else if (!newPassword) {\n          setNewPasswordError('Please enter a new password');\n          return;\n        } else if (!repeatNewPassword) {\n            setRepeatNewPasswordError('Please repeat your new password');\n            return;\n        } else {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            if (newPassword !== repeatNewPassword) {\n              setRepeatNewPasswordError('Passwords do not match');\n              return;\n            }\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n              setRepeatNewPassword('');\n              setPasswordChanged(true);\n            }\n          }\n        }\n      }}\n    >\n      <div className='flex flex-col'>\n        <Label htmlFor='old-password' className='mb-1'>Old Password</Label>\n        <PasswordInput\n          id='old-password'\n          value={oldPassword}\n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='new-password' className='mb-1'>New Password</Label>\n        <PasswordInput\n          id='new-password'\n          value={newPassword}\n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='repeat-new-password' className='mb-1'>Repeat New Password</Label>\n        <PasswordInput\n          id='repeat-new-password'\n          value={repeatNewPassword}\n          onChange={(e) => {\n            setRepeatNewPassword(e.target.value);\n            setRepeatNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={repeatNewPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <SettingSection\n      title='Multi-factor Authentication'\n      desc='Secure your account with an additional layer of security.'\n      buttonVariant='secondary'\n      buttonText={isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n      onButtonClick={async () => {\n        if (isEnabled) {\n          await user.update({\n            totpMultiFactorSecret: null,\n          });\n        } else if (!generatedSecret) {\n          const secret = generateRandomValues(new Uint8Array(20));\n          setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n          setGeneratedSecret(secret);\n        } else {\n          setGeneratedSecret(null);\n          setQrCodeUrl(null);\n          setMfaCode(\"\");\n        }\n      }}\n    >\n      {isEnabled ? (\n        <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n      ) : (\n        generatedSecret ? (\n          <div className='flex flex-col gap-4 items-center'>\n            <Typography>Scan this QR code with your authenticator app:</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n            <Typography>Then, enter your six-digit MFA code:</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n            )}\n          </div>\n        ) : (\n          <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n        )\n      )}\n    </SettingSection>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <SettingSection\n      title='Sign out'\n      desc='Sign out of your account on this device.'\n      buttonVariant='secondary'\n      buttonText='Sign Out'\n      onButtonClick={() => user.signOut()}\n    >\n    </SettingSection>\n  );\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Container, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';\nimport { CirclePlus, Contact, Settings, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { CurrentUser, MessageCard, Project, Team, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { TeamIcon } from '../components/team-icon';\n\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n  const teams = user.useTeams();\n  const project = useStackApp().useProject();\n\n  const inner = <SidebarLayout\n    items={([\n      {\n        title: 'My Profile',\n        type: 'item',\n        subpath: '/profile',\n        icon: Contact,\n        content: <ProfileSection/>,\n      },\n      {\n        title: 'Security',\n        type: 'item',\n        icon: ShieldCheck,\n        subpath: '/security',\n        content: (\n          <div className='flex flex-col gap-8'>\n            <EmailVerificationSection />\n            <PasswordSection />\n            <MfaSection />\n          </div>\n        ),\n      },\n      {\n        title: 'Settings',\n        subpath: '/settings',\n        type: 'item',\n        icon: Settings,\n        content: <SignOutSection />,\n      },\n      ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n        title: 'Teams',\n        type: 'divider',\n      }] as const : [],\n      ...teams.map(team => ({\n        title: <div className='flex gap-2 items-center'>\n          <TeamIcon team={team}/>\n          {team.displayName}\n        </div>,\n        type: 'item',\n        subpath: `/teams/${team.id}`,\n        content: (\n          <div className=\"flex flex-col gap-8\">\n            <ProfileSettings team={team}/>\n            <ManagementSettings team={team}/>\n            <MemberInvitation team={team}/>\n            <MembersSettings team={team}/>\n            <UserSettings team={team}/>\n          </div>\n        ),\n      } as const)),\n      ...project.config.clientTeamCreationEnabled ? [{\n        title: 'Create a team',\n        icon: CirclePlus,\n        type: 'item',\n        subpath: '/team-creation',\n        content: <TeamCreation />,\n      }] as const : [],\n    ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n    title='Account Settings'\n    basePath='/handler/account-settings'\n  />;\n\n  if (fullPage) {\n    return (\n      <Container size={1000} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n\nfunction ProfileSection() {\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <div>\n      <div>\n        <Label>Display name</Label>\n        <EditableText value={user.displayName || ''} onSave={async (newDisplayName) => {\n          await user.update({ displayName: newDisplayName });\n        }}/>\n      </div>\n    </div>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser({ or: 'redirect' });\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <>\n      <div>\n        <Label>Email Verification</Label>\n        {user.primaryEmailVerified ? (\n          <Typography variant='success'>Your email has been verified.</Typography>\n        ) : (\n          <Typography variant='destructive'>Your email has not been verified.</Typography>\n        )}\n        <div className='flex mt-4'>\n          <Button\n            disabled={emailSent}\n            onClick={async () => {\n              await user.sendVerificationEmail();\n            setEmailSent(true);\n            }}\n          >\n            {emailSent ? 'Email sent!' : 'Send Verification Email'}\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n}\n\nconst passwordSchema = yupObject({\n  oldPassword: yupString().required('Please enter your old password'),\n  newPassword: yupString().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], 'Passwords do not match').required('Please repeat your password')\n});\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [changingPassword, setChangingPassword] = useState(false);\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n  const [alreadyReset, setAlreadyReset] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = await user.updatePassword({ oldPassword, newPassword });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });\n      } else {\n        reset();\n        setAlreadyReset(true);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Change password</Label>\n      <div>\n        {\n          alreadyReset ?\n            <Typography variant='success'>Password changed successfully!</Typography> :\n            !changingPassword ?\n              <Button\n                variant='secondary'\n                onClick={async () => {\n                  setChangingPassword(true);\n                }}\n              >\n                Change Password\n              </Button> :\n              <form\n                onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n                noValidate\n              >\n                <Label htmlFor=\"old-password\" className=\"mb-1\">Old password</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  {...register('oldPassword')}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n\n                <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">Password</Label>\n                <PasswordInput\n                  id=\"new-password\"\n                  {...registerPassword}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPassword.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n                <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat password</Label>\n                <PasswordInput\n                  id=\"repeat-password\"\n                  {...registerPasswordRepeat}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPasswordRepeat.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n                <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n                  Change Password\n                </Button>\n              </form>\n        }\n      </div>\n    </div>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <div>\n      <div>\n        <Label>Multi-factor Authentication</Label>\n\n        <div>\n          {isEnabled ? (\n            <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n          ) : (\n            generatedSecret ? (\n              <div className='flex flex-col gap-4 items-center'>\n                <Typography>Scan this QR code with your authenticator app:</Typography>\n                <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n                <Typography>Then, enter your six-digit MFA code:</Typography>\n                <Input\n                  value={mfaCode}\n                  onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n                  }}\n                  placeholder=\"123456\"\n                  maxLength={6}\n                  disabled={isLoading}\n                />\n                {isMaybeWrong && mfaCode.length === 6 && (\n                  <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n                )}\n              </div>\n            ) : (\n              <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n            )\n          )}\n\n          <Button\n            className=\"mt-4\"\n            variant={isEnabled ? 'secondary' : 'default'}\n            onClick={async () => {\n              if (isEnabled) {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              } else if (!generatedSecret) {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              } else {\n                setGeneratedSecret(null);\n                setQrCodeUrl(null);\n                setMfaCode(\"\");\n              }\n            }}\n          >\n            {isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        <Button\n          variant='secondary'\n          onClick={() => user.signOut()}\n        >\n          Sign Out\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction UserSettings(props: { team: Team }) {\n  const app = useStackApp();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        { !leaving ?\n          <Button\n            variant='secondary'\n            onClick={async () => setLeaving(true)}\n          >\n          Leave team\n          </Button> :\n          <div className=''>\n            <Typography variant='destructive'>Are you sure you want to leave the team?</Typography>\n            <div className='flex gap-2'>\n              <Button variant='destructive' onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}>\n                Leave\n              </Button>\n              <Button variant='secondary' onClick={() => setLeaving(false)}>\n                Cancel\n              </Button>\n            </div>\n          </div>}\n      </div>\n    </div>\n  );\n}\n\nfunction ManagementSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Team display name</Label>\n        <EditableText\n          value={props.team.displayName}\n          onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n        />\n      </div>\n    </>\n  );\n}\n\nfunction ProfileSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"flex flex-col\">\n        <Label className=\"flex gap-2\">User display name <SimpleTooltip tooltip=\"This overwrites your user display name in the account setting\" type='info'/></Label>\n        <EditableText\n          value={profile.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await profile.update({ displayName: newDisplayName });\n          }}/>\n      </div>\n    </div>\n  );\n}\n\nconst invitationSchema = yupObject({\n  email: yupString().email().required('Please enter an email address'),\n});\n\nfunction MemberInvitation(props: { team: Team }) {\n  const project = useStackApp().useProject();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return null;\n  }\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <div>\n      <Label>Invite a user to team</Label>\n      <form\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <div className=\"flex flex-col gap-4 md:flex-row\">\n          <div>\n            <Input\n              placeholder=\"Email\"\n              {...register('email')}\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Invite User\n          </Button>\n        </div>\n        <FormWarningText text={errors.email?.message?.toString()} />\n        {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n      </form>\n    </div>\n  );\n}\n\n\nfunction MembersSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  const users = props.team.useUsers();\n\n  if (!readMemberPermission) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Members</Label>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">User</TableHead>\n            <TableHead className=\"w-[200px]\">Name</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {users.map(({ id, teamProfile }, i) => (\n            <TableRow key={id}>\n              <TableCell>\n                <UserAvatar user={teamProfile}/>\n              </TableCell>\n              <TableCell>\n                <Typography>{teamProfile.displayName}</Typography>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nconst teamCreationSchema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className='stack-scope flex flex-col items-stretch'>\n      <div className=\"mb-6\">\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <div className=\"flex items-end gap-4\">\n            <div>\n              <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                {...register('displayName')}\n              />\n            </div>\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n\n            <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}

package/dist/components-page/stack-handler.js

@@ -36,8 +36,6 @@ var import_oauth_callback = require("./oauth-callback");
 var import_password_reset = require("./password-reset");
 var import_sign_out = require("./sign-out");
 var import_team_invitation = require("./team-invitation");
-var import_team_settings = require("./team-settings");
-var import_team_creation = require("./team-creation");
 var import_jsx_runtime = require("react/jsx-runtime");
 async function StackHandler({
   app,
@@ -69,21 +67,13 @@ async function StackHandler({
     forgotPassword: "forgot-password",
     signOut: "sign-out",
     oauthCallback: "oauth-callback",
-    accountSettings: "account-settings",
     magicLinkCallback: "magic-link-callback",
     teamInvitation: "team-invitation",
-    teamCreation: "team-creation",
     error: "error"
   };
   const path = stack.join("/");
-  if (/team-settings\/[a-zA-Z0-9-]+/.test(path)) {
-    const teamId = path.split("/")[1];
-    const user = await app.getUser();
-    const team = await user?.getTeam(teamId);
-    if (!team) {
-      return (0, import_navigation.notFound)();
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_settings.TeamSettings, { fullPage, teamId });
+  if (path.startsWith("account-settings")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_account_settings.AccountSettings, { fullPage });
   }
   switch (path) {
     case availablePaths.signIn: {
@@ -114,10 +104,6 @@ async function StackHandler({
       redirectIfNotHandler("oauthCallback");
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_oauth_callback.OAuthCallback, { fullPage });
     }
-    case availablePaths.accountSettings: {
-      redirectIfNotHandler("accountSettings");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_account_settings.AccountSettings, { fullPage });
-    }
     case availablePaths.magicLinkCallback: {
       redirectIfNotHandler("magicLinkCallback");
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_callback.MagicLinkCallback, { searchParams, fullPage });
@@ -126,14 +112,6 @@ async function StackHandler({
       redirectIfNotHandler("teamInvitation");
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_invitation.TeamInvitation, { searchParams, fullPage });
     }
-    case availablePaths.teamCreation: {
-      const project = await app.getProject();
-      if (!project.config.clientTeamCreationEnabled) {
-        return (0, import_navigation.notFound)();
-      }
-      redirectIfNotHandler("teamCreation");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_creation.TeamCreation, { fullPage });
-    }
     case availablePaths.error: {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error_page.ErrorPage, { searchParams, fullPage });
     }

package/dist/components-page/stack-handler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { AuthPage, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamInvitation } from \"./team-invitation\";\nimport { TeamSettings } from \"./team-settings\";\nimport { TeamCreation } from \"./team-creation\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n  fullPage = false,\n}: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = app.urls[name];\n    const handlerUrl = app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(searchParams)) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    accountSettings: 'account-settings',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    teamCreation: 'team-creation',\n    error: 'error',\n  };\n\n  const path = stack.join('/');\n\n  if (/team-settings\\/[a-zA-Z0-9-]+/.test(path)) {\n    const teamId = path.split('/')[1];\n    const user = await app.getUser();\n    const team = await user?.getTeam(teamId);\n\n    if (!team) {\n      return notFound();\n    }\n\n    return <TeamSettings fullPage={fullPage} teamId={teamId} />;\n  }\n\n\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <AuthPage fullPage={fullPage} type='sign-in' automaticRedirect />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <AuthPage fullPage={fullPage} type='sign-up' automaticRedirect />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage={fullPage} />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut fullPage={fullPage} />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback fullPage={fullPage} />;\n    }\n    case availablePaths.accountSettings: {\n      redirectIfNotHandler('accountSettings');\n      return <AccountSettings fullPage={fullPage} />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamCreation: {\n      const project = await app.getProject();\n      if (!project.config.clientTeamCreationEnabled) {\n        return notFound();\n      }\n\n      redirectIfNotHandler('teamCreation');\n      return <TeamCreation fullPage={fullPage} />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage searchParams={searchParams} fullPage={fullPage} />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { AuthPage, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamCreation } from \"./team-creation\";\nimport { TeamInvitation } from \"./team-invitation\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n  fullPage = false,\n}: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = app.urls[name];\n    const handlerUrl = app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(searchParams)) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    error: 'error',\n  };\n\n  const path = stack.join('/');\n\n  if (path.startsWith('account-settings')) {\n    return <AccountSettings fullPage={fullPage} />;\n  }\n\n\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <AuthPage fullPage={fullPage} type='sign-in' automaticRedirect />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <AuthPage fullPage={fullPage} type='sign-up' automaticRedirect />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage={fullPage} />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut fullPage={fullPage} />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback fullPage={fullPage} />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage searchParams={searchParams} fullPage={fullPage} />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n"],"mappings":"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","names":[]}

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

@@ -4,87 +4,84 @@
 // src/components/elements/sidebar-layout.tsx
 import { Button, Typography, cn } from "@stackframe/stack-ui";
 import { XIcon } from "lucide-react";
-import React from "react";
+import { usePathname, useRouter } from "next/navigation";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function SidebarNavItem(props) {
-  return /* @__PURE__ */ jsxs(
+function SidebarLayout(props) {
+  const pathname = usePathname();
+  const selectedIndex = props.items.findIndex((item) => item.subpath && props.basePath + item.subpath === pathname);
+  const router = useRouter();
+  if (pathname !== props.basePath && selectedIndex === -1) {
+    router.push(props.basePath);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:flex", children: /* @__PURE__ */ jsx(DesktopLayout, { items: props.items, title: props.title, selectedIndex, basePath: props.basePath }) }),
+    /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsx(MobileLayout, { items: props.items, title: props.title, selectedIndex, basePath: props.basePath }) })
+  ] });
+}
+function Items(props) {
+  const router = useRouter();
+  return props.items.map((item, index) => item.type === "item" ? /* @__PURE__ */ jsxs(
     Button,
     {
       variant: "ghost",
       size: "sm",
       className: cn(
-        props.selected && "bg-muted",
+        props.selectedIndex === index && "bg-muted",
         "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2"
       ),
-      onClick: props.onClick,
+      onClick: () => {
+        if (item.subpath) {
+          router.push(props.basePath + item.subpath);
+        }
+      },
       children: [
-        props.item.icon && /* @__PURE__ */ jsx(props.item.icon, { className: "mr-2 h-4 w-4" }),
-        props.item.title
+        item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }),
+        item.title
       ]
-    }
-  );
-}
-function SidebarLayout(props) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "hidden sm:flex", children: /* @__PURE__ */ jsx(DesktopLayout, { items: props.items, title: props.title }) }),
-    /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsx(MobileLayout, { items: props.items, title: props.title }) })
-  ] });
+    },
+    index
+  ) : /* @__PURE__ */ jsx(Typography, { children: item.title }, index));
 }
 function DesktopLayout(props) {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const currentItem = props.items[selectedIndex];
+  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
   return /* @__PURE__ */ jsxs("div", { className: "stack-scope flex p-2 w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex w-[200px] border-r flex-col items-stretch gap-2 p-2", children: [
-      props.title && /* @__PURE__ */ jsx("div", { className: "mb-2 ml-2", children: /* @__PURE__ */ jsx(Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
-      props.items.map((item, index) => /* @__PURE__ */ jsx(
-        SidebarNavItem,
-        {
-          item,
-          onClick: () => setSelectedIndex(index),
-          selected: index === selectedIndex
-        },
-        index
-      ))
+      props.title && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
+      /* @__PURE__ */ jsx(Items, { items: props.items, basePath: props.basePath, selectedIndex: props.selectedIndex })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4 py-2 px-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsx(Typography, { type: "h4", children: currentItem.title }),
-        currentItem.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: currentItem.description })
+        /* @__PURE__ */ jsx(Typography, { type: "h4", children: selectedItem.title }),
+        selectedItem.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: selectedItem.description })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: currentItem.content })
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: selectedItem.content })
     ] })
   ] });
 }
 function MobileLayout(props) {
-  const [selectedIndex, setSelectedIndex] = React.useState(null);
-  if (selectedIndex === null) {
+  const selectedItem = props.items[props.selectedIndex];
+  const router = useRouter();
+  if (props.selectedIndex === -1) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2", children: [
       props.title && /* @__PURE__ */ jsx("div", { className: "mb-2 ml-2", children: /* @__PURE__ */ jsx(Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
-      props.items.map((item, index) => /* @__PURE__ */ jsx(
-        SidebarNavItem,
-        {
-          item,
-          onClick: () => setSelectedIndex(index),
-          selected: false
-        },
-        index
-      ))
+      /* @__PURE__ */ jsx(Items, { items: props.items, basePath: props.basePath, selectedIndex: props.selectedIndex })
     ] });
   } else {
     return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4 py-2 px-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx(Typography, { type: "h4", children: props.items[selectedIndex].title }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: () => setSelectedIndex(null), children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsx(Typography, { type: "h4", children: selectedItem.title }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
+            router.push(props.basePath);
+          }, children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" }) })
         ] }),
-        props.items[selectedIndex].description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: props.items[selectedIndex].description })
+        selectedItem.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: selectedItem.description })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: props.items[selectedIndex].content })
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: selectedItem.content })
     ] });
   }
 }
 export {
-  SidebarLayout,
-  SidebarNavItem
+  SidebarLayout
 };
 //# sourceMappingURL=sidebar-layout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { ArrowLeft, LucideIcon, XIcon } from 'lucide-react';\nimport React, { ReactNode } from 'react';\n\ntype Item = {\n  title: React.ReactNode,\n  description?: React.ReactNode,\n  icon?: LucideIcon,\n  content: React.ReactNode,\n}\n\nexport function SidebarNavItem(props: { item: Item, selected: boolean, onClick: () => void }) {\n  return (\n    <Button\n      variant='ghost'\n      size='sm'\n      className={cn(\n        props.selected && \"bg-muted\",\n        \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2\",\n      )}\n      onClick={props.onClick}\n    >\n      {props.item.icon && <props.item.icon className=\"mr-2 h-4 w-4\" />}\n      {props.item.title}\n    </Button>\n  );\n}\n\nexport function SidebarLayout(props: { items: Item[], title?: ReactNode }) {\n  return (\n    <>\n      <div className=\"hidden sm:flex\">\n        <DesktopLayout items={props.items} title={props.title} />\n      </div>\n      <div className=\"sm:hidden\">\n        <MobileLayout items={props.items} title={props.title} />\n      </div>\n    </>\n  );\n}\n\nfunction DesktopLayout(props: { items: Item[], title?: ReactNode }) {\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n  const currentItem = props.items[selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex p-2 w-full\">\n      <div className=\"flex w-[200px] border-r flex-col items-stretch 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        {props.items.map((item, index) => (\n          <SidebarNavItem\n            key={index}\n            item={item}\n            onClick={() => setSelectedIndex(index)}\n            selected={index === selectedIndex}\n          />\n        ))}\n      </div>\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='mb-4'>\n          <Typography type='h4'>{currentItem.title}</Typography>\n          {currentItem.description && <Typography variant='secondary' type='label'>{currentItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {currentItem.content}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: Item[], title?: ReactNode }) {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);\n\n  if (selectedIndex === null) {\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        {props.items.map((item, index) => (\n          <SidebarNavItem\n            key={index}\n            item={item}\n            onClick={() => setSelectedIndex(index)}\n            selected={false}\n          />\n        ))}\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'>{props.items[selectedIndex].title}</Typography>\n            <Button variant='ghost' size='icon' onClick={() => setSelectedIndex(null)}>\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {props.items[selectedIndex].description && <Typography variant='secondary' type='label'>{props.items[selectedIndex].description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {props.items[selectedIndex].content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { LucideIcon, XIcon } from 'lucide-react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport React, { ReactNode } from 'react';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  subpath?: string,\n  icon?: LucideIcon,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, basePath: string }) {\n  const pathname = usePathname();\n  const selectedIndex = props.items.findIndex(item => item.subpath && (props.basePath + item.subpath === pathname));\n  const router = useRouter();\n  if (pathname !== props.basePath && selectedIndex === -1) {\n    router.push(props.basePath);\n  }\n\n  return (\n    <>\n      <div className=\"hidden sm:flex\">\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n      <div className=\"sm:hidden\">\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], basePath: string, selectedIndex: number }) {\n  const router = useRouter();\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\",\n        )}\n        onClick={() => {\n          if (item.subpath) {\n            router.push(props.basePath + item.subpath);\n          }\n        }}\n      >\n        {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\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, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex p-2 w-full\">\n      <div className=\"flex w-[200px] border-r flex-col items-stretch gap-2 p-2\">\n        {props.title && <div className='mb-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} basePath={props.basePath} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='mb-4'>\n          <Typography type='h4'>{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  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const router = useRouter();\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} basePath={props.basePath} 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'>{selectedItem.title}</Typography>\n            <Button variant='ghost' size='icon' onClick={() => {\n              router.push(props.basePath);\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}"],"mappings":";;;AAEA,SAAS,QAAQ,YAAY,UAAU;AACvC,SAAqB,aAAa;AAClC,SAAS,aAAa,iBAAiB;AAsBnC,mBAEI,KAFJ;AATG,SAAS,cAAc,OAAsE;AAClG,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,MAAM,MAAM,UAAU,UAAQ,KAAK,WAAY,MAAM,WAAW,KAAK,YAAY,QAAS;AAChH,QAAM,SAAS,UAAU;AACzB,MAAI,aAAa,MAAM,YAAY,kBAAkB,IAAI;AACvD,WAAO,KAAK,MAAM,QAAQ;AAAA,EAC5B;AAEA,SACE,iCACE;AAAA,wBAAC,SAAI,WAAU,kBACb,8BAAC,iBAAc,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,UAAU,MAAM,UAAU,GACjH;AAAA,IACA,oBAAC,SAAI,WAAU,aACb,8BAAC,gBAAa,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,UAAU,MAAM,UAAU,GAChH;AAAA,KACF;AAEJ;AAEA,SAAS,MAAM,OAA0E;AACvF,QAAM,SAAS,UAAU;AAEzB,SAAO,MAAM,MAAM,IAAI,CAAC,MAAM,UAC5B,KAAK,SAAS,SACZ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW;AAAA,QACT,MAAM,kBAAkB,SAAS;AAAA,QACjC;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,YAAI,KAAK,SAAS;AAChB,iBAAO,KAAK,MAAM,WAAW,KAAK,OAAO;AAAA,QAC3C;AAAA,MACF;AAAA,MAEC;AAAA,aAAK,QAAQ,oBAAC,KAAK,MAAL,EAAU,WAAU,gBAAe;AAAA,QACjD,KAAK;AAAA;AAAA;AAAA,IAdD;AAAA,EAeP,IACA,oBAAC,cACE,eAAK,SADS,KAEjB,CACH;AAEH;AAEA,SAAS,cAAc,OAA6F;AAClH,QAAM,eAAe,MAAM,MAAM,MAAM,kBAAkB,KAAK,IAAI,MAAM,aAAa;AAErF,SACE,qBAAC,SAAI,WAAU,+BACb;AAAA,yBAAC,SAAI,WAAU,4DACZ;AAAA,YAAM,SAAS,oBAAC,SAAI,WAAU,QAC7B,8BAAC,cAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,oBAAC,SAAM,OAAO,MAAM,OAAO,UAAU,MAAM,UAAU,eAAe,MAAM,eAAe;AAAA,OAC3F;AAAA,IACA,qBAAC,SAAI,WAAU,wCACb;AAAA,2BAAC,SAAI,WAAU,QACb;AAAA,4BAAC,cAAW,MAAK,MAAM,uBAAa,OAAM;AAAA,QACzC,aAAa,eAAe,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,oBAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,OAA6F;AACjH,QAAM,eAAe,MAAM,MAAM,MAAM,aAAa;AACpD,QAAM,SAAS,UAAU;AAEzB,MAAI,MAAM,kBAAkB,IAAI;AAC9B,WACE,qBAAC,SAAI,WAAU,2BACZ;AAAA,YAAM,SAAS,oBAAC,SAAI,WAAU,aAC7B,8BAAC,cAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,oBAAC,SAAM,OAAO,MAAM,OAAO,UAAU,MAAM,UAAU,eAAe,MAAM,eAAe;AAAA,OAC3F;AAAA,EAEJ,OAAO;AACL,WACE,qBAAC,SAAI,WAAU,wCACb;AAAA,2BAAC,SAAI,WAAU,iBACb;AAAA,6BAAC,SAAI,WAAU,wBACb;AAAA,8BAAC,cAAW,MAAK,MAAM,uBAAa,OAAM;AAAA,UAC1C,oBAAC,UAAO,SAAQ,SAAQ,MAAK,QAAO,SAAS,MAAM;AACjD,mBAAO,KAAK,MAAM,QAAQ;AAAA,UAC5B,GACE,8BAAC,SAAM,WAAU,WAAU,GAC7B;AAAA,WACF;AAAA,QACC,aAAa,eAAe,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,oBAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/esm/components/selected-team-switcher.js

@@ -15,19 +15,12 @@ import {
   SelectValue,
   Typography
 } from "@stackframe/stack-ui";
+import { PlusCircle, Settings } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
 import { useStackApp, useUser } from "..";
-import Image from "next/image";
-import { PlusCircle, Settings } from "lucide-react";
+import { TeamIcon } from "./team-icon";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function TeamIcon(props) {
-  if (props.team.profileImageUrl) {
-    return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 mr-2 rounded bg-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx(Image, { src: props.team.profileImageUrl, alt: props.team.displayName, className: "w-6 h-6" }) });
-  } else {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200", children: /* @__PURE__ */ jsx(Typography, { children: props.team.displayName.slice(0, 1).toUpperCase() }) });
-  }
-}
 function SelectedTeamSwitcher(props) {
   const app = useStackApp();
   const user = useUser();
@@ -65,16 +58,16 @@ function SelectedTeamSwitcher(props) {
           user?.selectedTeam ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               "Current team",
-              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => router.push(`${app.urls.handler}/team-settings/${user.selectedTeam?.id}`), children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) })
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => router.push(`${app.urls.accountSettings}/teams/${user.selectedTeam?.id}`), children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) })
             ] }) }),
-            /* @__PURE__ */ jsx(SelectItem, { value: user.selectedTeam.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: user.selectedTeam.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(TeamIcon, { team: user.selectedTeam }),
               /* @__PURE__ */ jsx(Typography, { children: user.selectedTeam.displayName })
             ] }) })
           ] }) : void 0,
           teams?.length ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: "Other teams" }),
-            teams.filter((team) => team.id !== user?.selectedTeam?.id).map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            teams.filter((team) => team.id !== user?.selectedTeam?.id).map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(TeamIcon, { team }),
               /* @__PURE__ */ jsx(Typography, { children: team.displayName })
             ] }) }, team.id))
@@ -84,7 +77,7 @@ function SelectedTeamSwitcher(props) {
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
               Button,
               {
-                onClick: () => router.push(app.urls.teamCreation),
+                onClick: () => router.push(`${app.urls.accountSettings}/team-creation`),
                 className: "w-full",
                 variant: "ghost",
                 children: [

package/dist/esm/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport Image from \"next/image\";\nimport { PlusCircle, Settings } from \"lucide-react\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nfunction TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 mr-2 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              Current team\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.handler}/team-settings/${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography>{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>Other teams</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center\">\n                    <TeamIcon team={team} />\n                    <Typography>{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>No teams yet</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(app.urls.teamCreation)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> Create a team\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}
+{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              Current team\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}/teams/${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography>{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>Other teams</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography>{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>No teams yet</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}/team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> Create a team\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

package/dist/esm/components/team-icon.js

@@ -0,0 +1,15 @@
+// src/components/team-icon.tsx
+import Image from "next/image";
+import { Typography } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+function TeamIcon(props) {
+  if (props.team.profileImageUrl) {
+    return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded bg-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx(Image, { src: props.team.profileImageUrl, alt: props.team.displayName, className: "w-6 h-6" }) });
+  } else {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-gray-200", children: /* @__PURE__ */ jsx(Typography, { children: props.team.displayName.slice(0, 1).toUpperCase() }) });
+  }
+}
+export {
+  TeamIcon
+};
+//# sourceMappingURL=team-icon.js.map

package/dist/esm/components/team-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}"],"mappings":";AAAA,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAMnB;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,oBAAC,SAAI,WAAU,+CACb,8BAAC,SAAM,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,WAAU,WAAU,GAC3F;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,SAAI,WAAU,gEACb,8BAAC,cAAY,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAChE;AAAA,EAEJ;AACF;","names":[]}