@stackframe/stack 2.4.28 → 2.5.1

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

@@ -2,22 +2,22 @@
 "use client";
 
 // src/components-page/account-settings.tsx
-import { PasswordField, useUser } from "..";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
-import { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from "../components-core";
-import UserAvatar from "../components/user-avatar";
+import { useUser } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { UserAvatar } from "../components/elements/user-avatar";
 import { useState } from "react";
-import FormWarningText from "../components/form-warning";
+import { FormWarningText } from "../components/elements/form-warning";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function SettingSection(props) {
   return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(Text, { as: "h3", style: { fontWeight: 500 }, children: props.title }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: props.desc })
-    ] }),
-    props.children && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: props.children }) }),
-    props.buttonText && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", width: "100%" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "h4", children: props.title }),
+      /* @__PURE__ */ jsx(Typography, { type: "label", variant: "secondary", children: props.desc })
+    ] }) }),
+    props.children && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: props.children }) }),
+    props.buttonText && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx(
       Button,
       {
         disabled: props.buttonDisabled,
@@ -44,15 +44,15 @@ function ProfileSection() {
         setChanged(false);
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-center", children: [
           /* @__PURE__ */ jsx(UserAvatar, { user, size: 50 }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ jsx(Text, { children: user?.displayName }),
-            /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: user?.primaryEmail })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(Typography, { children: user?.displayName }),
+            /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: user?.primaryEmail })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "display-name", children: "Display Name" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "display-name", className: "mb-1", children: "Display Name" }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -83,7 +83,7 @@ function EmailVerificationSection() {
         await user?.sendVerificationEmail();
         setEmailSent(true);
       },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Text, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ jsx(Text, { variant: "warning", children: "Your email has not been verified" })
+      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified" })
     }
   );
 }
@@ -124,10 +124,10 @@ function PasswordSection() {
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", children: "Old Password" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: "Old Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "old-password",
               value: oldPassword,
@@ -139,10 +139,10 @@ function PasswordSection() {
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: oldPasswordError })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", children: "New Password" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "new-password",
               value: newPassword,
@@ -176,10 +176,10 @@ function AccountSettings({ fullPage = false }) {
   if (!user) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedOut", fullPage });
   }
-  const inner = /* @__PURE__ */ jsxs("div", { style: { padding: fullPage ? "1rem" : 0, display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+  const inner = /* @__PURE__ */ jsxs("div", { className: cn(fullPage ? "p-4" : "", "flex flex-col gap-4"), children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Text, { size: "xl", as: "h1", style: { fontWeight: "600" }, children: "Account Settings" }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: "Manage your account" })
+      /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Account Settings" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: "Manage your account" })
     ] }),
     /* @__PURE__ */ jsx(ProfileSection, {}),
     /* @__PURE__ */ jsx(EmailVerificationSection, {}),
@@ -187,12 +187,12 @@ function AccountSettings({ fullPage = false }) {
     /* @__PURE__ */ jsx(SignOutSection, {})
   ] });
   if (fullPage) {
-    return /* @__PURE__ */ jsx(Container, { size: "sm", children: inner });
+    return /* @__PURE__ */ jsx(Container, { size: 600, className: "stack-scope", children: inner });
   } else {
     return inner;
   }
 }
 export {
-  AccountSettings as default
+  AccountSettings
 };
 //# sourceMappingURL=account-settings.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { PasswordField, useUser } from '..';\nimport PredefinedMessageCard from '../components/message-cards/predefined-message-card';\nimport { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from \"../components-core\";\nimport UserAvatar from '../components/user-avatar';\nimport { useState } from 'react';\nimport FormWarningText from '../components/form-warning';\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\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?: 'primary' | 'secondary',\n  children?: React.ReactNode, \n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <Text as='h3' style={{ fontWeight: 500 }}>{props.title}</Text>\n        <Text variant='secondary' size='sm'>{props.desc}</Text>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>\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 style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>\n        <UserAvatar user={user} size={50}/>\n        <div style={{ display: 'flex', flexDirection: 'column' }}>\n          <Text>{user?.displayName}</Text>\n          <Text variant='secondary' size='sm'>{user?.primaryEmail}</Text>\n        </div>\n      </div>\n\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='display-name'>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        <Text variant='success'>Your email has been verified</Text> : \n        <Text variant='warning'>Your email has not been verified</Text>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser();\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\n  if (!user?.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={!oldPassword || !newPassword}\n      buttonText='Save'\n      onButtonClick={async () => {\n        if (oldPassword && newPassword) {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n            }\n          }\n        } else if (oldPassword && !newPassword) {\n          setNewPasswordError('Please enter a new password');\n        } else if (newPassword && !oldPassword) {\n          setOldPasswordError('Please enter your old password');\n        }\n      }}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='old-password'>Old Password</Label>\n        <PasswordField\n          id='old-password' \n          value={oldPassword} \n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='new-password'>New Password</Label>\n        <PasswordField\n          id='new-password' \n          value={newPassword} \n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction SignOutSection() {\n  const user = useUser();\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}\n\nexport default function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser();\n  if (!user) {\n    return <PredefinedMessageCard type='signedOut' fullPage={fullPage} />;\n  }\n\n  const inner = (\n    <div style={{ padding: fullPage ? '1rem' : 0, display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n      <div>\n        <Text size=\"xl\" as='h1' style={{ fontWeight: '600' }}>Account Settings</Text>\n        <Text variant='secondary' size='sm'>Manage your account</Text>\n      </div>\n      \n      <ProfileSection />\n      <EmailVerificationSection />\n      <PasswordSection />\n      <SignOutSection />\n    </div>\n  );\n\n  if (fullPage) {\n    return (\n      <Container size='sm'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n"],"mappings":";;;AAGA,SAAS,eAAe,eAAe;AACvC,OAAO,2BAA2B;AAClC,SAAS,MAAM,OAAO,OAAO,QAAQ,MAAM,YAAY,aAAa,YAAY,iBAAiB;AACjG,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,wBAAwB;AAa3B,SACE,KADF;AAXN,SAAS,eAAe,OAQrB;AACD,SACE,qBAAC,QACC;AAAA,yBAAC,cACC;AAAA,0BAAC,QAAK,IAAG,MAAK,OAAO,EAAE,YAAY,IAAI,GAAI,gBAAM,OAAM;AAAA,MACvD,oBAAC,QAAK,SAAQ,aAAY,MAAK,MAAM,gBAAM,MAAK;AAAA,OAClD;AAAA,IACC,MAAM,YAAY,oBAAC,eAClB,8BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GACjE,gBAAM,UACT,GACF;AAAA,IACC,MAAM,cAAc,oBAAC,cACpB,8BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,YAAY,OAAO,OAAO,GACvE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,MAAM;AAAA,QAChB,SAAS,MAAM;AAAA,QACf,SAAS,MAAM;AAAA,QAEd,gBAAM;AAAA;AAAA,IACT,GACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,iBAAiB;AACxB,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkC,EAAE,aAAa,MAAM,eAAe,GAAG,CAAC;AAC1G,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,gBAAgB,CAAC;AAAA,MACjB,YAAW;AAAA,MACX,eAAe,YAAY;AACzB,cAAM,MAAM,OAAO,QAAQ;AAC3B,mBAAW,KAAK;AAAA,MAClB;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,SAAS,GAC/D;AAAA,8BAAC,cAAW,MAAY,MAAM,IAAG;AAAA,UACjC,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,SAAS,GACrD;AAAA,gCAAC,QAAM,gBAAM,aAAY;AAAA,YACzB,oBAAC,QAAK,SAAQ,aAAY,MAAK,MAAM,gBAAM,cAAa;AAAA,aAC1D;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,SAAS,GACrD;AAAA,8BAAC,SAAM,SAAQ,gBAAe,0BAAY;AAAA,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO,SAAS;AAAA,cAChB,UAAU,CAAC,MAAM;AACf,4BAAY,CAAC,OAAO,EAAC,GAAG,GAAG,aAAa,EAAE,OAAO,MAAM,EAAE;AACzD,2BAAW,IAAI;AAAA,cACjB;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,2BAA2B;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,YACE,CAAC,MAAM,uBACL,YACE,gBACA,eACA;AAAA,MAEN,eAAe,YAAY;AACzB,cAAM,MAAM,sBAAsB;AAClC,qBAAa,IAAI;AAAA,MACnB;AAAA,MAEC,gBAAM,uBACL,oBAAC,QAAK,SAAQ,WAAU,0CAA4B,IACpD,oBAAC,QAAK,SAAQ,WAAU,8CAAgC;AAAA;AAAA,EAC5D;AAEJ;AAEA,SAAS,kBAAkB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,EAAE;AACnE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,EAAE;AAEnE,MAAI,CAAC,MAAM,aAAa;AACtB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,gBAAgB,CAAC,eAAe,CAAC;AAAA,MACjC,YAAW;AAAA,MACX,eAAe,YAAY;AACzB,YAAI,eAAe,aAAa;AAC9B,gBAAM,eAAe,iBAAiB,WAAW;AACjD,cAAI,cAAc;AAChB,gCAAoB,aAAa,OAAO;AAAA,UAC1C,OAAO;AACL,kBAAM,YAAY,MAAM,KAAK,eAAe,EAAE,aAAa,YAAY,CAAC;AACxE,gBAAI,WAAW;AACb,kCAAoB,oBAAoB;AAAA,YAC1C,OAAO;AACL,6BAAe,EAAE;AACjB,6BAAe,EAAE;AAAA,YACnB;AAAA,UACF;AAAA,QACF,WAAW,eAAe,CAAC,aAAa;AACtC,8BAAoB,6BAA6B;AAAA,QACnD,WAAW,eAAe,CAAC,aAAa;AACtC,8BAAoB,gCAAgC;AAAA,QACtD;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,SAAS,GACrD;AAAA,8BAAC,SAAM,SAAQ,gBAAe,0BAAY;AAAA,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP,UAAU,CAAC,MAAM;AACf,+BAAe,EAAE,OAAO,KAAK;AAC7B,oCAAoB,EAAE;AAAA,cACxB;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,mBAAgB,MAAM,kBAAkB;AAAA,WAC3C;AAAA,QACA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,SAAS,GACrD;AAAA,8BAAC,SAAM,SAAQ,gBAAe,0BAAY;AAAA,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP,UAAU,CAAC,MAAM;AACf,+BAAe,EAAE,OAAO,KAAK;AAC7B,oCAAoB,EAAE;AAAA,cACxB;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,mBAAgB,MAAM,kBAAkB;AAAA,WAC3C;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,iBAAiB;AACxB,QAAM,OAAO,QAAQ;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,eAAc;AAAA,MACd,YAAW;AAAA,MACX,eAAe,MAAM,MAAM,QAAQ;AAAA;AAAA,EAErC;AAEJ;AAEe,SAAR,gBAAiC,EAAE,WAAS,MAAM,GAA2B;AAClF,QAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,MAAM;AACT,WAAO,oBAAC,yBAAsB,MAAK,aAAY,UAAoB;AAAA,EACrE;AAEA,QAAM,QACJ,qBAAC,SAAI,OAAO,EAAE,SAAS,WAAW,SAAS,GAAG,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAClG;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAK,MAAK,MAAK,IAAG,MAAK,OAAO,EAAE,YAAY,MAAM,GAAG,8BAAgB;AAAA,MACtE,oBAAC,QAAK,SAAQ,aAAY,MAAK,MAAK,iCAAmB;AAAA,OACzD;AAAA,IAEA,oBAAC,kBAAe;AAAA,IAChB,oBAAC,4BAAyB;AAAA,IAC1B,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,kBAAe;AAAA,KAClB;AAGF,MAAI,UAAU;AACZ,WACE,oBAAC,aAAU,MAAK,MACb,iBACH;AAAA,EAEJ,OAAO;AACL,WAAO;AAAA,EACT;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useUser } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { useState } from 'react';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from '@stackframe/stack-ui';\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();\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\n  if (!user?.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={!oldPassword || !newPassword}\n      buttonText='Save'\n      onButtonClick={async () => {\n        if (oldPassword && newPassword) {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n            }\n          }\n        } else if (oldPassword && !newPassword) {\n          setNewPasswordError('Please enter a new password');\n        } else if (newPassword && !oldPassword) {\n          setOldPasswordError('Please enter your old password');\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          }}\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          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction SignOutSection() {\n  const user = useUser();\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}\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser();\n  if (!user) {\n    return <PredefinedMessageCard type='signedOut' fullPage={fullPage} />;\n  }\n\n  const inner = (\n    <div className={cn(fullPage ? 'p-4' : '', 'flex flex-col gap-4')}>\n      <div>\n        <Typography type='h2'>Account Settings</Typography>\n        <Typography variant='secondary' type='label'>Manage your account</Typography>\n      </div>\n      \n      <ProfileSection />\n      <EmailVerificationSection />\n      <PasswordSection />\n      <SignOutSection />\n    </div>\n  );\n\n  if (fullPage) {\n    return (\n      <Container size={600} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/auth-page.js

@@ -2,14 +2,15 @@
 "use client";
 
 // src/components-page/auth-page.tsx
-import CredentialSignIn from "../components/credential-sign-in";
-import SeparatorWithText from "../components/separator-with-text";
-import OAuthGroup from "../components/oauth-group";
-import MaybeFullPage from "../components/maybe-full-page";
-import { useUser, useStackApp, CredentialSignUp } from "..";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
-import { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from "../components-core";
-import MagicLinkSignIn from "../components/magic-link-sign-in";
+import { CredentialSignInForm } from "../components/credential-sign-in-form";
+import { SeparatorWithText } from "../components/elements/separator-with-text";
+import { OAuthButtonGroup } from "../components/oauth-button-group";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { useUser, useStackApp } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { MagicLinkSignInForm } from "../components/magic-link-sign-in-form";
+import { CredentialSignUpForm } from "../components/credential-sign-up-form";
+import { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AuthPage({
   fullPage = false,
@@ -24,30 +25,30 @@ function AuthPage({
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedIn", fullPage });
   }
   const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter((p) => p.enabled).length > 0;
-  return /* @__PURE__ */ jsxs(MaybeFullPage, { fullPage, children: [
-    /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
-      /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", style: { fontWeight: 500 }, children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
-      type === "sign-in" ? /* @__PURE__ */ jsxs(Text, { children: [
+  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage, children: /* @__PURE__ */ jsxs("div", { className: "stack-scope flex flex-col items-stretch", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
+      /* @__PURE__ */ jsx(Typography, { type: "h2", children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
+      type === "sign-in" ? /* @__PURE__ */ jsxs(Typography, { children: [
         "Don't have an account? ",
-        /* @__PURE__ */ jsx(Link, { href: stackApp.urls.signUp, children: "Sign up" })
-      ] }) : /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx(StyledLink, { href: stackApp.urls.signUp, children: "Sign up" })
+      ] }) : /* @__PURE__ */ jsxs(Typography, { children: [
         "Already have an account? ",
-        /* @__PURE__ */ jsx(Link, { href: stackApp.urls.signIn, children: "Sign in" })
+        /* @__PURE__ */ jsx(StyledLink, { href: stackApp.urls.signIn, children: "Sign in" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(OAuthGroup, { type, mockProject }),
+    /* @__PURE__ */ jsx(OAuthButtonGroup, { type, mockProject }),
     enableSeparator && /* @__PURE__ */ jsx(SeparatorWithText, { text: "Or continue with" }),
     project.credentialEnabled && project.magicLinkEnabled ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: "magic-link", children: [
-      /* @__PURE__ */ jsxs(TabsList, { children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "magic-link", children: "Magic Link" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "password", children: "Password" })
+      /* @__PURE__ */ jsxs(TabsList, { className: "w-full mb-2", children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "magic-link", className: "flex-1", children: "Magic Link" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "password", className: "flex-1", children: "Password" })
       ] }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "magic-link", children: /* @__PURE__ */ jsx(MagicLinkSignIn, {}) }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "password", children: type === "sign-up" ? /* @__PURE__ */ jsx(CredentialSignUp, {}) : /* @__PURE__ */ jsx(CredentialSignIn, {}) })
-    ] }) : project.credentialEnabled ? type === "sign-up" ? /* @__PURE__ */ jsx(CredentialSignUp, {}) : /* @__PURE__ */ jsx(CredentialSignIn, {}) : project.magicLinkEnabled ? /* @__PURE__ */ jsx(MagicLinkSignIn, {}) : null
-  ] });
+      /* @__PURE__ */ jsx(TabsContent, { value: "magic-link", children: /* @__PURE__ */ jsx(MagicLinkSignInForm, {}) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "password", children: type === "sign-up" ? /* @__PURE__ */ jsx(CredentialSignUpForm, {}) : /* @__PURE__ */ jsx(CredentialSignInForm, {}) })
+    ] }) : project.credentialEnabled ? type === "sign-up" ? /* @__PURE__ */ jsx(CredentialSignUpForm, {}) : /* @__PURE__ */ jsx(CredentialSignInForm, {}) : project.magicLinkEnabled ? /* @__PURE__ */ jsx(MagicLinkSignInForm, {}) : null
+  ] }) });
 }
 export {
-  AuthPage as default
+  AuthPage
 };
 //# sourceMappingURL=auth-page.js.map

package/dist/esm/components-page/auth-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport CredentialSignIn from '../components/credential-sign-in';\nimport SeparatorWithText from '../components/separator-with-text';\nimport OAuthGroup from '../components/oauth-group';\nimport MaybeFullPage from '../components/maybe-full-page';\nimport { useUser, useStackApp, CredentialSignUp } from '..';\nimport PredefinedMessageCard from '../components/message-cards/predefined-message-card';\nimport { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from \"../components-core\";\nimport MagicLinkSignIn from '../components/magic-link-sign-in';\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\n\nexport default function AuthPage({ \n  fullPage=false,\n  type,\n  mockProject,\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = mockProject || projectFromHook;\n\n  if (user && !mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2' style={{ fontWeight: 500 }}>\n          {type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}\n        </Text>\n        {type === 'sign-in' ? (\n          <Text>\n            {\"Don't have an account? \"}\n            <Link href={stackApp.urls.signUp}>\n              Sign up\n            </Link>\n          </Text>\n        ) : (\n          <Text>\n            {\"Already have an account? \"}\n            <Link href={stackApp.urls.signIn}>\n              Sign in\n            </Link>\n          </Text>\n        )}\n      </div>\n      <OAuthGroup type={type} mockProject={mockProject} />\n      {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n      {project.credentialEnabled && project.magicLinkEnabled ? (\n        <Tabs defaultValue='magic-link'>\n          <TabsList>\n            <TabsTrigger value='magic-link'>Magic Link</TabsTrigger>\n            <TabsTrigger value='password'>Password</TabsTrigger>\n          </TabsList>\n          <TabsContent value='magic-link'>\n            <MagicLinkSignIn/>\n          </TabsContent>\n          <TabsContent value='password'>\n            {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n          </TabsContent>\n        </Tabs>\n      ) : project.credentialEnabled ? (\n        type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n      ) : project.magicLinkEnabled ? (\n        <MagicLinkSignIn/>\n      ) : null}\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAEA,OAAO,sBAAsB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAC1B,SAAS,SAAS,aAAa,wBAAwB;AACvD,OAAO,2BAA2B;AAClC,SAAS,MAAM,MAAM,aAAa,UAAU,aAAa,YAAY;AACrE,OAAO,qBAAqB;AAkBjB,cAYD,YAZC;AAfI,SAAR,SAA0B;AAAA,EAC/B,WAAS;AAAA,EACT;AAAA,EACA;AACF,GAIG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,SAAS,WAAW;AAC5C,QAAM,UAAU,eAAe;AAE/B,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,qBAAC,iBAAc,UACb;AAAA,yBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,0BAAC,QAAK,MAAK,MAAK,IAAG,MAAK,OAAO,EAAE,YAAY,IAAI,GAC9C,mBAAS,YAAY,4BAA4B,wBACpD;AAAA,MACC,SAAS,YACR,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF,IAEA,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,cAAW,MAAY,aAA0B;AAAA,IACjD,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YACC;AAAA,4BAAC,eAAY,OAAM,cAAa,wBAAU;AAAA,QAC1C,oBAAC,eAAY,OAAM,YAAW,sBAAQ;AAAA,SACxC;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,IAC1D,QAAQ,mBACV,oBAAC,mBAAe,IACd;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { CredentialSignInForm } from '../components/credential-sign-in-form';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { useUser, useStackApp } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { MagicLinkSignInForm } from '../components/magic-link-sign-in-form';\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\nimport { CredentialSignUpForm } from '../components/credential-sign-up-form';\nimport { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography } from '@stackframe/stack-ui';\n\nexport function AuthPage({ \n  fullPage=false,\n  type,\n  mockProject,\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = mockProject || projectFromHook;\n\n  if (user && !mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className='stack-scope flex flex-col items-stretch'>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}\n          </Typography>\n          {type === 'sign-in' ? (\n            <Typography>\n              {\"Don't have an account? \"}\n              <StyledLink href={stackApp.urls.signUp}>\n                Sign up\n              </StyledLink>\n            </Typography>\n          ) : (\n            <Typography>\n              {\"Already have an account? \"}\n              <StyledLink href={stackApp.urls.signIn}>\n                Sign in\n              </StyledLink>\n            </Typography>\n          )}\n        </div>\n        <OAuthButtonGroup type={type} mockProject={mockProject} />\n        {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n        {project.credentialEnabled && project.magicLinkEnabled ? (\n          <Tabs defaultValue='magic-link'>\n            <TabsList className='w-full mb-2'>\n              <TabsTrigger value='magic-link' className='flex-1'>Magic Link</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>Password</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignInForm/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {type === 'sign-up' ? <CredentialSignUpForm/> : <CredentialSignInForm/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.credentialEnabled ? (\n          type === 'sign-up' ? <CredentialSignUpForm/> : <CredentialSignInForm/>\n        ) : project.magicLinkEnabled ? (\n          <MagicLinkSignInForm/>\n        ) : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AACrC,SAAS,YAAY,MAAM,aAAa,UAAU,aAAa,kBAAkB;AAiBtE,cAaC,YAbD;AAfJ,SAAS,SAAS;AAAA,EACvB,WAAS;AAAA,EACT;AAAA,EACA;AACF,GAIG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,SAAS,WAAW;AAC5C,QAAM,UAAU,eAAe;AAE/B,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,oBAAC,iBAAc,UACb,+BAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,cAAW,MAAK,MACd,mBAAS,YAAY,4BAA4B,wBACpD;AAAA,MACC,SAAS,YACR,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,qBAExC;AAAA,SACF,IAEA,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,qBAExC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,oBAAiB,MAAY,aAA0B;AAAA,IACvD,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YAAS,WAAU,eAClB;AAAA,4BAAC,eAAY,OAAM,cAAa,WAAU,UAAS,wBAAU;AAAA,QAC7D,oBAAC,eAAY,OAAM,YAAW,WAAU,UAAS,sBAAQ;AAAA,SAC3D;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,uBAAmB,GACtB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,wBAAoB,IAAK,oBAAC,wBAAoB,GACvE;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,oBAAC,wBAAoB,IAAK,oBAAC,wBAAoB,IAClE,QAAQ,mBACV,oBAAC,uBAAmB,IAClB;AAAA,KACN,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/email-verification.js

@@ -4,8 +4,8 @@
 // src/components-page/email-verification.tsx
 import { use } from "react";
 import { useStackApp } from "..";
-import MessageCard from "../components/message-cards/message-card";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { jsx } from "react/jsx-runtime";
 function EmailVerification({
@@ -21,17 +21,17 @@ function EmailVerification({
     return invalidJsx;
   }
   const error = use(stackApp.verifyEmail(code));
-  if (error instanceof KnownErrors.EmailVerificationCodeNotFound) {
+  if (error instanceof KnownErrors.VerificationCodeNotFound) {
     return invalidJsx;
-  } else if (error instanceof KnownErrors.EmailVerificationCodeExpired) {
+  } else if (error instanceof KnownErrors.VerificationCodeExpired) {
     return expiredJsx;
-  } else if (error instanceof KnownErrors.EmailVerificationCodeAlreadyUsed) {
+  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
   } else if (error) {
     throw error;
   }
   return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "emailVerified", fullPage });
 }
 export {
-  EmailVerification as default
+  EmailVerification
 };
 //# sourceMappingURL=email-verification.js.map

package/dist/esm/components-page/email-verification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport { use } from \"react\";\nimport { useStackApp } from \"..\";\nimport MessageCard from \"../components/message-cards/message-card\";\nimport PredefinedMessageCard from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function EmailVerification({ \n  searchParams: {\n    code = \"\",\n  } = {},\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Verification Link\" fullPage={fullPage}>\n      <p>Please check if you have the correct link. If you continue to have issues, please contact support.</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Verification Link\" fullPage={fullPage}>\n      <p>Your email verification link has expired. Please request a new verification link from your account settings.</p>\n    </MessageCard>\n  );\n\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(stackApp.verifyEmail(code));\n\n  if (error instanceof KnownErrors.EmailVerificationCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.EmailVerificationCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.EmailVerificationCodeAlreadyUsed) {\n    // everything fine, continue\n  } else if (error) {\n    throw error;\n  }\n\n  return <PredefinedMessageCard type='emailVerified' fullPage={fullPage} />;\n}\n"],"mappings":";;;AAEA,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,OAAO,2BAA2B;AAClC,SAAS,mBAAmB;AAetB;AAbS,SAAR,kBAAmC;AAAA,EACxC,cAAc;AAAA,IACZ,OAAO;AAAA,EACT,IAAI,CAAC;AAAA,EACL,WAAW;AACb,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,QAAM,aACJ,oBAAC,eAAY,OAAM,6BAA4B,UAC7C,8BAAC,OAAE,gHAAkG,GACvG;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAM,6BAA4B,UAC7C,8BAAC,OAAE,0HAA4G,GACjH;AAGF,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,IAAI,SAAS,YAAY,IAAI,CAAC;AAE5C,MAAI,iBAAiB,YAAY,+BAA+B;AAC9D,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,8BAA8B;AACpE,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,kCAAkC;AAAA,EAE1E,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,SAAO,oBAAC,yBAAsB,MAAK,iBAAgB,UAAoB;AACzE;","names":[]}
+{"version":3,"sources":["../../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport { use } from \"react\";\nimport { useStackApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport function EmailVerification({ \n  searchParams: {\n    code = \"\",\n  } = {},\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Verification Link\" fullPage={fullPage}>\n      <p>Please check if you have the correct link. If you continue to have issues, please contact support.</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Verification Link\" fullPage={fullPage}>\n      <p>Your email verification link has expired. Please request a new verification link from your account settings.</p>\n    </MessageCard>\n  );\n\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(stackApp.verifyEmail(code));\n\n  if (error instanceof KnownErrors.VerificationCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n    // everything fine, continue\n  } else if (error) {\n    throw error;\n  }\n\n  return <PredefinedMessageCard type='emailVerified' fullPage={fullPage} />;\n}\n"],"mappings":";;;AAEA,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAetB;AAbC,SAAS,kBAAkB;AAAA,EAChC,cAAc;AAAA,IACZ,OAAO;AAAA,EACT,IAAI,CAAC;AAAA,EACL,WAAW;AACb,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,QAAM,aACJ,oBAAC,eAAY,OAAM,6BAA4B,UAC7C,8BAAC,OAAE,gHAAkG,GACvG;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAM,6BAA4B,UAC7C,8BAAC,OAAE,0HAA4G,GACjH;AAGF,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,IAAI,SAAS,YAAY,IAAI,CAAC;AAE5C,MAAI,iBAAiB,YAAY,0BAA0B;AACzD,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,yBAAyB;AAC/D,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,6BAA6B;AAAA,EAErE,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,SAAO,oBAAC,yBAAsB,MAAK,iBAAgB,UAAoB;AACzE;","names":[]}

package/dist/esm/components-page/error-page.js

@@ -2,11 +2,12 @@
 "use client";
 
 // src/components-page/error-page.tsx
-import { MessageCard, useStackApp } from "..";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
-import { Text } from "../components-core";
+import { useStackApp } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { KnownError, KnownErrors } from "@stackframe/stack-shared";
-import KnownErrorMessageCard from "../components/message-cards/known-error-message-card";
+import { KnownErrorMessageCard } from "../components/message-cards/known-error-message-card";
+import { Typography } from "@stackframe/stack-ui";
+import { MessageCard } from "../components/message-cards/message-card";
 import { jsx } from "react/jsx-runtime";
 function ErrorPage({ fullPage = false, searchParams }) {
   const stackApp = useStackApp();
@@ -31,7 +32,7 @@ function ErrorPage({ fullPage = false, searchParams }) {
         fullPage,
         primaryButtonText: "Go to Home",
         primaryAction: () => stackApp.redirectToHome(),
-        children: /* @__PURE__ */ jsx(Text, { children: "This account is already connected to another user. Please connect a different account." })
+        children: /* @__PURE__ */ jsx(Typography, { children: "This account is already connected to another user. Please connect a different account." })
       }
     );
   }
@@ -43,13 +44,13 @@ function ErrorPage({ fullPage = false, searchParams }) {
         fullPage,
         primaryButtonText: "Go to Home",
         primaryAction: () => stackApp.redirectToHome(),
-        children: /* @__PURE__ */ jsx(Text, { children: "The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?" })
+        children: /* @__PURE__ */ jsx(Typography, { children: "The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?" })
       }
     );
   }
   return /* @__PURE__ */ jsx(KnownErrorMessageCard, { error, fullPage });
 }
 export {
-  ErrorPage as default
+  ErrorPage
 };
 //# sourceMappingURL=error-page.js.map

package/dist/esm/components-page/error-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/error-page.tsx"],"sourcesContent":["'use client';\n\nimport { MessageCard, useStackApp, useUser } from \"..\";\nimport PredefinedMessageCard from \"../components/message-cards/predefined-message-card\";\nimport { Text } from \"../components-core\";\nimport { KnownError, KnownErrors } from \"@stackframe/stack-shared\";\nimport KnownErrorMessageCard from \"../components/message-cards/known-error-message-card\";\n\n\nexport default function ErrorPage({ fullPage=false, searchParams }: { fullPage?: boolean, searchParams: Record<string, string> }) {\n  const stackApp = useStackApp();\n  const errorCode = searchParams.errorCode;\n  const message = searchParams.message;\n  const details = searchParams.details;\n\n  const unknownErrorCard = <PredefinedMessageCard type='unknownError' fullPage={fullPage} />;\n\n  if (!errorCode || !message || !details) {\n    return unknownErrorCard;\n  }\n\n  let error;\n  try {\n    error = KnownError.fromJson({ code: errorCode, message, details });\n  } catch (e) {\n    return unknownErrorCard;\n  }\n\n  if (error instanceof KnownErrors.OAuthConnectionAlreadyConnectedToAnotherUser) {\n    // TODO: add \"Connect a different account\" button\n    return (\n      <MessageCard \n        title=\"Failed to connect account\" \n        fullPage={fullPage}\n        primaryButtonText=\"Go to Home\"\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Text>\n          This account is already connected to another user. Please connect a different account.\n        </Text>\n      </MessageCard>\n    );\n  }\n\n  if (error instanceof KnownErrors.UserAlreadyConnectedToAnotherOAuthConnection) {\n    // TODO: add \"Connect again\" button\n    return (\n      <MessageCard \n        title=\"Failed to connect account\" \n        fullPage={fullPage}\n        primaryButtonText=\"Go to Home\"\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Text>\n          The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?\n        </Text>\n      </MessageCard>\n    );\n  }\n\n  return <KnownErrorMessageCard error={error} fullPage={fullPage} />;\n}\n"],"mappings":";;;AAEA,SAAS,aAAa,mBAA4B;AAClD,OAAO,2BAA2B;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY,mBAAmB;AACxC,OAAO,2BAA2B;AASP;AANZ,SAAR,UAA2B,EAAE,WAAS,OAAO,aAAa,GAAiE;AAChI,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,UAAU,aAAa;AAC7B,QAAM,UAAU,aAAa;AAE7B,QAAM,mBAAmB,oBAAC,yBAAsB,MAAK,gBAAe,UAAoB;AAExF,MAAI,CAAC,aAAa,CAAC,WAAW,CAAC,SAAS;AACtC,WAAO;AAAA,EACT;AAEA,MAAI;AACJ,MAAI;AACF,YAAQ,WAAW,SAAS,EAAE,MAAM,WAAW,SAAS,QAAQ,CAAC;AAAA,EACnE,SAAS,GAAG;AACV,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB,YAAY,8CAA8C;AAE7E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN;AAAA,QACA,mBAAkB;AAAA,QAClB,eAAe,MAAM,SAAS,eAAe;AAAA,QAE7C,8BAAC,QAAK,oGAEN;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,iBAAiB,YAAY,8CAA8C;AAE7E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN;AAAA,QACA,mBAAkB;AAAA,QAClB,eAAe,MAAM,SAAS,eAAe;AAAA,QAE7C,8BAAC,QAAK,0IAEN;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,yBAAsB,OAAc,UAAoB;AAClE;","names":[]}
+{"version":3,"sources":["../../../src/components-page/error-page.tsx"],"sourcesContent":["'use client';\n\nimport { useStackApp } from \"..\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownError, KnownErrors } from \"@stackframe/stack-shared\";\nimport { KnownErrorMessageCard } from \"../components/message-cards/known-error-message-card\";\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\n\n\nexport function ErrorPage({ fullPage=false, searchParams }: { fullPage?: boolean, searchParams: Record<string, string> }) {\n  const stackApp = useStackApp();\n  const errorCode = searchParams.errorCode;\n  const message = searchParams.message;\n  const details = searchParams.details;\n\n  const unknownErrorCard = <PredefinedMessageCard type='unknownError' fullPage={fullPage} />;\n\n  if (!errorCode || !message || !details) {\n    return unknownErrorCard;\n  }\n\n  let error;\n  try {\n    error = KnownError.fromJson({ code: errorCode, message, details });\n  } catch (e) {\n    return unknownErrorCard;\n  }\n\n  if (error instanceof KnownErrors.OAuthConnectionAlreadyConnectedToAnotherUser) {\n    // TODO: add \"Connect a different account\" button\n    return (\n      <MessageCard\n        title=\"Failed to connect account\" \n        fullPage={fullPage}\n        primaryButtonText=\"Go to Home\"\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          This account is already connected to another user. Please connect a different account.\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  if (error instanceof KnownErrors.UserAlreadyConnectedToAnotherOAuthConnection) {\n    // TODO: add \"Connect again\" button\n    return (\n      <MessageCard \n        title=\"Failed to connect account\" \n        fullPage={fullPage}\n        primaryButtonText=\"Go to Home\"\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  return <KnownErrorMessageCard error={error} fullPage={fullPage} />;\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,YAAY,mBAAmB;AACxC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AASD;AANpB,SAAS,UAAU,EAAE,WAAS,OAAO,aAAa,GAAiE;AACxH,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,UAAU,aAAa;AAC7B,QAAM,UAAU,aAAa;AAE7B,QAAM,mBAAmB,oBAAC,yBAAsB,MAAK,gBAAe,UAAoB;AAExF,MAAI,CAAC,aAAa,CAAC,WAAW,CAAC,SAAS;AACtC,WAAO;AAAA,EACT;AAEA,MAAI;AACJ,MAAI;AACF,YAAQ,WAAW,SAAS,EAAE,MAAM,WAAW,SAAS,QAAQ,CAAC;AAAA,EACnE,SAAS,GAAG;AACV,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB,YAAY,8CAA8C;AAE7E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN;AAAA,QACA,mBAAkB;AAAA,QAClB,eAAe,MAAM,SAAS,eAAe;AAAA,QAE7C,8BAAC,cAAW,oGAEZ;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,iBAAiB,YAAY,8CAA8C;AAE7E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN;AAAA,QACA,mBAAkB;AAAA,QAClB,eAAe,MAAM,SAAS,eAAe;AAAA,QAE7C,8BAAC,cAAW,0IAEZ;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,yBAAsB,OAAc,UAAoB;AAClE;","names":[]}

package/dist/esm/components-page/forgot-password.js

@@ -2,12 +2,12 @@
 "use client";
 
 // src/components-page/forgot-password.tsx
-import ForgotPasswordElement from "../components/forgot-password";
-import MaybeFullPage from "../components/maybe-full-page";
+import { ForgotPasswordForm } from "../components/forgot-password-form";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { useUser, useStackApp } from "..";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { useState } from "react";
-import { Link, Text } from "../components-core";
+import { StyledLink, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ForgotPassword({ fullPage = false }) {
   const stackApp = useStackApp();
@@ -20,17 +20,17 @@ function ForgotPassword({ fullPage = false }) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "emailSent", fullPage });
   }
   return /* @__PURE__ */ jsxs(MaybeFullPage, { fullPage, children: [
-    /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
-      /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", children: "Reset Your Password" }),
-      /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-6 stack-scope", children: [
+      /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Reset Your Password" }),
+      /* @__PURE__ */ jsxs(Typography, { children: [
         "Don't need to reset? ",
-        /* @__PURE__ */ jsx(Link, { href: stackApp.urls["signUp"], children: "Sign In" })
+        /* @__PURE__ */ jsx(StyledLink, { href: stackApp.urls["signUp"], children: "Sign in" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(ForgotPasswordElement, { onSent: () => setSent(true) })
+    /* @__PURE__ */ jsx(ForgotPasswordForm, { onSent: () => setSent(true) })
   ] });
 }
 export {
-  ForgotPassword as default
+  ForgotPassword
 };
 //# sourceMappingURL=forgot-password.js.map

package/dist/esm/components-page/forgot-password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport ForgotPasswordElement from \"../components/forgot-password\";\nimport MaybeFullPage from \"../components/maybe-full-page\";\nimport { useUser, useStackApp } from \"..\";\nimport PredefinedMessageCard from \"../components/message-cards/predefined-message-card\";\nimport { useState } from \"react\";\nimport { Link, Text } from \"../components-core\";\n\n\nexport default function ForgotPassword({ fullPage=false }: { fullPage?: boolean }) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [sent, setSent] = useState(false);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  if (sent) {\n    return <PredefinedMessageCard type='emailSent' fullPage={fullPage} />;\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>Reset Your Password</Text>\n        <Text>\n          {\"Don't need to reset? \"}\n          <Link href={stackApp.urls['signUp']}>\n            Sign In\n          </Link>\n        </Text>\n      </div>\n      <ForgotPasswordElement onSent={() => setSent(true)} />\n    </MaybeFullPage>\n  );\n};\n"],"mappings":";;;AAEA,OAAO,2BAA2B;AAClC,OAAO,mBAAmB;AAC1B,SAAS,SAAS,mBAAmB;AACrC,OAAO,2BAA2B;AAClC,SAAS,gBAAgB;AACzB,SAAS,MAAM,YAAY;AAShB,cAWH,YAXG;AANI,SAAR,eAAgC,EAAE,WAAS,MAAM,GAA2B;AACjF,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,aAAY,UAAoB;AAAA,EACrE;AAEA,SACE,qBAAC,iBAAc,UACb;AAAA,yBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,0BAAC,QAAK,MAAK,MAAK,IAAG,MAAK,iCAAmB;AAAA,MAC3C,qBAAC,QACE;AAAA;AAAA,QACD,oBAAC,QAAK,MAAM,SAAS,KAAK,QAAQ,GAAG,qBAErC;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,yBAAsB,QAAQ,MAAM,QAAQ,IAAI,GAAG;AAAA,KACtD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components-page/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { ForgotPasswordForm } from \"../components/forgot-password-form\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { useUser, useStackApp } from \"..\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { useState } from \"react\";\nimport { StyledLink, Typography } from \"@stackframe/stack-ui\";\n\n\nexport function ForgotPassword({ fullPage=false }: { fullPage?: boolean }) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [sent, setSent] = useState(false);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  if (sent) {\n    return <PredefinedMessageCard type='emailSent' fullPage={fullPage} />;\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6 stack-scope\">\n        <Typography type='h2'>Reset Your Password</Typography>\n        <Typography>\n          {\"Don't need to reset? \"}\n          <StyledLink href={stackApp.urls['signUp']}>\n            Sign in\n          </StyledLink>\n        </Typography>\n      </div>\n      <ForgotPasswordForm onSent={() => setSent(true)} />\n    </MaybeFullPage>\n  );\n};\n"],"mappings":";;;AAEA,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,YAAY,kBAAkB;AAS5B,cAWH,YAXG;AANJ,SAAS,eAAe,EAAE,WAAS,MAAM,GAA2B;AACzE,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,aAAY,UAAoB;AAAA,EACrE;AAEA,SACE,qBAAC,iBAAc,UACb;AAAA,yBAAC,SAAI,WAAU,gCACb;AAAA,0BAAC,cAAW,MAAK,MAAK,iCAAmB;AAAA,MACzC,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,GAAG,qBAE3C;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,sBAAmB,QAAQ,MAAM,QAAQ,IAAI,GAAG;AAAA,KACnD;AAEJ;","names":[]}

package/dist/esm/components-page/magic-link-callback.js

@@ -4,8 +4,8 @@
 // src/components-page/magic-link-callback.tsx
 import { use } from "react";
 import { useStackApp, useUser } from "..";
-import MessageCard from "../components/message-cards/message-card";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
 import { jsx } from "react/jsx-runtime";
@@ -27,11 +27,11 @@ function MagicLinkCallback({
     return invalidJsx;
   }
   const error = use(stackApp.signInWithMagicLink(code));
-  if (error instanceof KnownErrors.MagicLinkCodeNotFound) {
+  if (error instanceof KnownErrors.VerificationCodeNotFound) {
     return invalidJsx;
-  } else if (error instanceof KnownErrors.MagicLinkCodeExpired) {
+  } else if (error instanceof KnownErrors.VerificationCodeExpired) {
     return expiredJsx;
-  } else if (error instanceof KnownErrors.MagicLinkCodeAlreadyUsed) {
+  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
     return alreadyUsedJsx;
   } else if (error) {
     throw error;
@@ -39,6 +39,6 @@ function MagicLinkCallback({
   use(neverResolve());
 }
 export {
-  MagicLinkCallback as default
+  MagicLinkCallback
 };
 //# sourceMappingURL=magic-link-callback.js.map

package/dist/esm/components-page/magic-link-callback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport { use } from \"react\";\nimport { useStackApp, useUser } from \"..\";\nimport MessageCard from \"../components/message-cards/message-card\";\nimport PredefinedMessageCard from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nexport default function MagicLinkCallback({ \n  searchParams: {\n    code = \"\",\n  } = {},\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Magic Link\" fullPage={fullPage}>\n      <p>Please check if you have the correct link. If you continue to have issues, please contact support.</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Magic Link\" fullPage={fullPage}>\n      <p>Your magic link has expired. Please request a new magic link if you need to sign-in.</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title=\"Magic Link Already Used\" fullPage={fullPage}>\n      <p>The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.</p>\n    </MessageCard>\n  );\n\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(stackApp.signInWithMagicLink(code));\n\n  if (error instanceof KnownErrors.MagicLinkCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.MagicLinkCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.MagicLinkCodeAlreadyUsed) {\n    return alreadyUsedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  use(neverResolve());\n}\n"],"mappings":";;;AAEA,SAAS,WAAW;AACpB,SAAS,aAAa,eAAe;AACrC,OAAO,iBAAiB;AACxB,OAAO,2BAA2B;AAClC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAelB;AAbI,SAAR,kBAAmC;AAAA,EACxC,cAAc;AAAA,IACZ,OAAO;AAAA,EACT,IAAI,CAAC;AAAA,EACL,WAAW;AACb,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,QAAM,aACJ,oBAAC,eAAY,OAAM,sBAAqB,UACtC,8BAAC,OAAE,gHAAkG,GACvG;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAM,sBAAqB,UACtC,8BAAC,OAAE,kGAAoF,GACzF;AAGF,QAAM,iBACJ,oBAAC,eAAY,OAAM,2BAA0B,UAC3C,8BAAC,OAAE,iJAAmI,GACxI;AAGF,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,IAAI,SAAS,oBAAoB,IAAI,CAAC;AAEpD,MAAI,iBAAiB,YAAY,uBAAuB;AACtD,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,sBAAsB;AAC5D,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,0BAA0B;AAChE,WAAO;AAAA,EACT,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,MAAI,aAAa,CAAC;AACpB;","names":[]}
+{"version":3,"sources":["../../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport { use } from \"react\";\nimport { useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nexport function MagicLinkCallback({ \n  searchParams: {\n    code = \"\",\n  } = {},\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Magic Link\" fullPage={fullPage}>\n      <p>Please check if you have the correct link. If you continue to have issues, please contact support.</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Magic Link\" fullPage={fullPage}>\n      <p>Your magic link has expired. Please request a new magic link if you need to sign-in.</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title=\"Magic Link Already Used\" fullPage={fullPage}>\n      <p>The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.</p>\n    </MessageCard>\n  );\n\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(stackApp.signInWithMagicLink(code));\n\n  if (error instanceof KnownErrors.VerificationCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n    return alreadyUsedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  use(neverResolve());\n}\n"],"mappings":";;;AAEA,SAAS,WAAW;AACpB,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAelB;AAbJ,SAAS,kBAAkB;AAAA,EAChC,cAAc;AAAA,IACZ,OAAO;AAAA,EACT,IAAI,CAAC;AAAA,EACL,WAAW;AACb,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,QAAM,aACJ,oBAAC,eAAY,OAAM,sBAAqB,UACtC,8BAAC,OAAE,gHAAkG,GACvG;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAM,sBAAqB,UACtC,8BAAC,OAAE,kGAAoF,GACzF;AAGF,QAAM,iBACJ,oBAAC,eAAY,OAAM,2BAA0B,UAC3C,8BAAC,OAAE,iJAAmI,GACxI;AAGF,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,IAAI,SAAS,oBAAoB,IAAI,CAAC;AAEpD,MAAI,iBAAiB,YAAY,0BAA0B;AACzD,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,yBAAyB;AAC/D,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,6BAA6B;AACnE,WAAO;AAAA,EACT,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,MAAI,aAAa,CAAC;AACpB;","names":[]}

package/dist/esm/components-page/oauth-callback.js

@@ -5,8 +5,8 @@
 import { useRef, useEffect, useState } from "react";
 import { useStackApp } from "..";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import MessageCard from "../components/message-cards/message-card";
-import { Link } from "../components-core/link";
+import { MessageCard } from "../components/message-cards/message-card";
+import { StyledLink } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function OAuthCallback(props) {
   const app = useStackApp();
@@ -22,7 +22,7 @@ function OAuthCallback(props) {
     } catch (e) {
       setError(e);
     }
-    if (!hasRedirected && process.env.NODE_ENV === "production") {
+    if (!hasRedirected && (!error || process.env.NODE_ENV === "production")) {
       await app.redirectToSignIn();
     }
   }), []);
@@ -32,7 +32,7 @@ function OAuthCallback(props) {
   return /* @__PURE__ */ jsxs(MessageCard, { title: "Redirecting...", fullPage: props.fullPage, children: [
     showRedirectLink ? /* @__PURE__ */ jsxs("p", { children: [
       "If you are not redirected automatically, ",
-      /* @__PURE__ */ jsx(Link, { href: app.urls.home, children: "click here" }),
+      /* @__PURE__ */ jsx(StyledLink, { href: app.urls.home, children: "click here" }),
       "."
     ] }) : null,
     error ? /* @__PURE__ */ jsxs("div", { children: [
@@ -43,6 +43,6 @@ function OAuthCallback(props) {
   ] });
 }
 export {
-  OAuthCallback as default
+  OAuthCallback
 };
 //# sourceMappingURL=oauth-callback.js.map

package/dist/esm/components-page/oauth-callback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/oauth-callback.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useEffect, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport MessageCard from \"../components/message-cards/message-card\";\nimport { Link } from \"../components-core/link\";\n\nexport default function OAuthCallback(props: { fullPage?: boolean }) {\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    let hasRedirected = false;\n    try {\n      hasRedirected = await app.callOAuthCallback();\n    } catch (e: any) {\n      setError(e);\n    }\n    if (!hasRedirected && process.env.NODE_ENV === 'production') {\n      await app.redirectToSignIn();\n    }\n  }), []);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return <MessageCard title='Redirecting...' fullPage={props.fullPage}>\n    {showRedirectLink ? <p>If you are not redirected automatically, <Link href={app.urls.home}>click here</Link>.</p> : null}\n    {error ? <div>\n      <p>Something went wrong while processing the OAuth callback:</p>\n      <pre>{JSON.stringify(error, null, 2)}</pre>\n      <p>This is most likely an error in Stack. Please report it.</p>\n    </div> : null}\n  </MessageCard>;\n}\n"],"mappings":";;;AAEA,SAAS,QAAQ,WAAW,gBAAgB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,OAAO,iBAAiB;AACxB,SAAS,YAAY;AA2BG,SAA4C,KAA5C;AAzBT,SAAR,cAA+B,OAA+B;AACnE,QAAM,MAAM,YAAY;AACxB,QAAM,SAAS,OAAO,KAAK;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB,IAAI;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,YAAU,MAAM,kBAAkB,YAAY;AAC5C,QAAI,OAAO,QAAS;AACpB,WAAO,UAAU;AACjB,QAAI,gBAAgB;AACpB,QAAI;AACF,sBAAgB,MAAM,IAAI,kBAAkB;AAAA,IAC9C,SAAS,GAAQ;AACf,eAAS,CAAC;AAAA,IACZ;AACA,QAAI,CAAC,iBAAiB,QAAQ,IAAI,aAAa,cAAc;AAC3D,YAAM,IAAI,iBAAiB;AAAA,IAC7B;AAAA,EACF,CAAC,GAAG,CAAC,CAAC;AAEN,YAAU,MAAM;AACd,eAAW,MAAM,oBAAoB,IAAI,GAAG,GAAI;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,SAAO,qBAAC,eAAY,OAAM,kBAAiB,UAAU,MAAM,UACxD;AAAA,uBAAmB,qBAAC,OAAE;AAAA;AAAA,MAAyC,oBAAC,QAAK,MAAM,IAAI,KAAK,MAAM,wBAAU;AAAA,MAAO;AAAA,OAAC,IAAO;AAAA,IACnH,QAAQ,qBAAC,SACR;AAAA,0BAAC,OAAE,uEAAyD;AAAA,MAC5D,oBAAC,SAAK,eAAK,UAAU,OAAO,MAAM,CAAC,GAAE;AAAA,MACrC,oBAAC,OAAE,sEAAwD;AAAA,OAC7D,IAAS;AAAA,KACX;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components-page/oauth-callback.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useEffect, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { StyledLink } from \"@stackframe/stack-ui\";\n\nexport function OAuthCallback(props: { fullPage?: boolean }) {\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    let hasRedirected = false;\n    try {\n      hasRedirected = await app.callOAuthCallback();\n    } catch (e: any) {\n      setError(e);\n    }\n    if (!hasRedirected && (!error || process.env.NODE_ENV === 'production')) {\n      await app.redirectToSignIn();\n    }\n  }), []);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return <MessageCard title='Redirecting...' fullPage={props.fullPage}>\n    {showRedirectLink ? <p>If you are not redirected automatically, <StyledLink href={app.urls.home}>click here</StyledLink>.</p> : null}\n    {error ? <div>\n      <p>Something went wrong while processing the OAuth callback:</p>\n      <pre>{JSON.stringify(error, null, 2)}</pre>\n      <p>This is most likely an error in Stack. Please report it.</p>\n    </div> : null}\n  </MessageCard>;\n}\n"],"mappings":";;;AAEA,SAAS,QAAQ,WAAW,gBAAgB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AA2BH,SAA4C,KAA5C;AAzBjB,SAAS,cAAc,OAA+B;AAC3D,QAAM,MAAM,YAAY;AACxB,QAAM,SAAS,OAAO,KAAK;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB,IAAI;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,YAAU,MAAM,kBAAkB,YAAY;AAC5C,QAAI,OAAO,QAAS;AACpB,WAAO,UAAU;AACjB,QAAI,gBAAgB;AACpB,QAAI;AACF,sBAAgB,MAAM,IAAI,kBAAkB;AAAA,IAC9C,SAAS,GAAQ;AACf,eAAS,CAAC;AAAA,IACZ;AACA,QAAI,CAAC,kBAAkB,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AACvE,YAAM,IAAI,iBAAiB;AAAA,IAC7B;AAAA,EACF,CAAC,GAAG,CAAC,CAAC;AAEN,YAAU,MAAM;AACd,eAAW,MAAM,oBAAoB,IAAI,GAAG,GAAI;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,SAAO,qBAAC,eAAY,OAAM,kBAAiB,UAAU,MAAM,UACxD;AAAA,uBAAmB,qBAAC,OAAE;AAAA;AAAA,MAAyC,oBAAC,cAAW,MAAM,IAAI,KAAK,MAAM,wBAAU;AAAA,MAAa;AAAA,OAAC,IAAO;AAAA,IAC/H,QAAQ,qBAAC,SACR;AAAA,0BAAC,OAAE,uEAAyD;AAAA,MAC5D,oBAAC,SAAK,eAAK,UAAU,OAAO,MAAM,CAAC,GAAE;AAAA,MACrC,oBAAC,OAAE,sEAAwD;AAAA,OAC7D,IAAS;AAAA,KACX;AACF;","names":[]}