@stackframe/stack 2.2.2 → 2.2.5

package/dist/components/{email-verification.d.ts → EmailVerification.d.ts}

@@ -1,5 +1,6 @@
 export default function EmailVerification({ searchParams: { code, }, fullPage, }: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
+    redirectUrl?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=email-verification.d.ts.map
+//# sourceMappingURL=EmailVerification.d.ts.map

package/dist/components/EmailVerification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailVerification.d.ts","sourceRoot":"","sources":["../../src/components/EmailVerification.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,YAAY,EAAE,EACZ,IAAS,GACL,EACN,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,kDAkCA"}

package/dist/components/{email-verification.js → EmailVerification.js}

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { useStackApp } from "..";
-import MessageCard from "../elements/message-card";
-import RedirectMessageCard from "../elements/redirect-message-card";
+import MessageCard from "../elements/MessageCard";
+import RedirectMessageCard from "../elements/RedirectMessageCard";
 import { EmailVerificationLinkExpiredErrorCode, EmailVerificationLinkInvalidErrorCode, EmailVerificationLinkUsedErrorCode } from "@stackframe/stack-shared/dist/utils/types";
 export default function EmailVerification({ searchParams: { code = "", } = {}, fullPage = false, }) {
     const stackApp = useStackApp();

package/dist/components/ForgotPassword.d.ts

@@ -0,0 +1,4 @@
+export default function ForgotPassword({ fullPage }: {
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ForgotPassword.d.ts.map

package/dist/components/ForgotPassword.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPassword.d.ts","sourceRoot":"","sources":["../../src/components/ForgotPassword.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,QAAc,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA0BhF"}

package/dist/components/ForgotPassword.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ForgotPasswordElement from "../elements/ForgotPassword";
+import CardFrame from "../elements/CardFrame";
+import CardHeader from "../elements/CardHeader";
+import { useUser, useStackApp } from "..";
+import RedirectMessageCard from "../elements/RedirectMessageCard";
+import NextLink from 'next/link';
+import { useState } from "react";
+export default function ForgotPassword({ fullPage = false }) {
+    const stackApp = useStackApp();
+    const user = useUser();
+    const [sent, setSent] = useState(false);
+    if (user) {
+        return _jsx(RedirectMessageCard, { type: 'signedIn', fullPage: fullPage });
+    }
+    if (sent) {
+        return _jsx(RedirectMessageCard, { type: 'emailSent', fullPage: fullPage });
+    }
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Reset Your Password", children: _jsxs("p", { children: ["Don't need to reset? ", _jsx(NextLink, { href: stackApp.urls['signUp'], passHref: true, className: "wl_text-blue-500", children: "Sign In" })] }) }), _jsx(ForgotPasswordElement, { onSent: () => setSent(true) })] }));
+}
+;

package/dist/components/{oauth-callback.d.ts → OAuthCallback.d.ts}

@@ -1,2 +1,2 @@
 export default function OAuthCallback(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=oauth-callback.d.ts.map
+//# sourceMappingURL=OAuthCallback.d.ts.map

package/dist/components/OAuthCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthCallback.d.ts","sourceRoot":"","sources":["../../src/components/OAuthCallback.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAapC"}

package/dist/components/{oauth-callback.js → OAuthCallback.js}

@@ -3,15 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useStackApp } from "..";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import MessageCard from "../elements/message-card";
+import MessageCard from "../elements/MessageCard";
+import { useRouter } from "next/navigation";
 export default function OAuthCallback() {
     const app = useStackApp();
+    const router = useRouter();
     const called = useRef(false);
     useEffect(() => runAsynchronously(async () => {
         if (called.current)
             return;
         called.current = true;
         await app.callOAuthCallback();
+        router.push(app.urls.userHome);
     }), []);
     return _jsx(MessageCard, { title: 'Redirecting...', fullPage: true });
 }

package/dist/components/{password-reset.d.ts → PasswordReset.d.ts}

@@ -1,5 +1,5 @@
 export default function PasswordReset({ searchParams, fullPage, }: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=password-reset.d.ts.map
+}): import("react/jsx-runtime").JSX.Element | undefined;
+//# sourceMappingURL=PasswordReset.d.ts.map

package/dist/components/PasswordReset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordReset.d.ts","sourceRoot":"","sources":["../../src/components/PasswordReset.tsx"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,YAAY,EACZ,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,uDA0CA"}

package/dist/components/{password-reset.js → PasswordReset.js}

@@ -1,20 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import MessageCard from "../elements/message-card";
+import MessageCard from "../elements/MessageCard";
 import { useStackApp } from "..";
 import { use } from "react";
-import PasswordResetInner from "../elements/password-reset-inner";
+import PasswordResetInner from "../elements/PasswordResetInner";
 import { PasswordResetLinkExpiredErrorCode, PasswordResetLinkInvalidErrorCode, PasswordResetLinkUsedErrorCode } from "@stackframe/stack-shared/dist/utils/types";
 import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
-import { Text } from "@stackframe/stack-ui";
 const cachedVerifyPasswordResetCode = cacheFunction(async (stackApp, code) => {
     return await stackApp.verifyPasswordResetCode(code);
 });
 export default function PasswordReset({ searchParams, fullPage = false, }) {
     const stackApp = useStackApp();
-    const invalidJsx = (_jsx(MessageCard, { title: "Invalid Password Reset Link", fullPage: fullPage, children: _jsx(Text, { children: "Please double check if you have the correct password reset link." }) }));
-    const expiredJsx = (_jsx(MessageCard, { title: "Expired Password Reset Link", fullPage: fullPage, children: _jsx(Text, { children: "Your password reset link has expired. Please request a new password reset link from the login page." }) }));
-    const usedJsx = (_jsx(MessageCard, { title: "Used Password Reset Link", fullPage: fullPage, children: _jsx(Text, { children: "This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page." }) }));
+    const invalidJsx = (_jsx(MessageCard, { title: "Invalid Password Reset Link", fullPage: fullPage, children: _jsx("p", { children: "Please check if you have the correct password reset link. If you continue to have issues, please contact support." }) }));
+    const expiredJsx = (_jsx(MessageCard, { title: "Expired Password Reset Link", fullPage: fullPage, children: _jsx("p", { children: "Your password reset link has expired. Please request a new password reset link from the login page." }) }));
+    const usedJsx = (_jsx(MessageCard, { title: "Used Password Reset Link", fullPage: fullPage, children: _jsx("p", { children: "This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page." }) }));
     const code = searchParams?.code;
     if (!code) {
         return invalidJsx;

package/dist/components/SignIn.d.ts

@@ -0,0 +1,5 @@
+export default function SignIn({ redirectUrl, fullPage }: {
+    redirectUrl?: string;
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignIn.d.ts.map

package/dist/components/SignIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../src/components/SignIn.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,WAAW,EAAE,QAAc,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA2B3G"}

package/dist/components/SignIn.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NextLink from 'next/link';
+import CredentialSignIn from '../elements/CredentialSignIn';
+import DividerWithText from '../elements/DividerWithText';
+import OAuthGroup from '../elements/OAuthGroup';
+import CardFrame from '../elements/CardFrame';
+import CardHeader from '../elements/CardHeader';
+import { useUser, useStackApp } from '..';
+import RedirectMessageCard from '../elements/RedirectMessageCard';
+export default function SignIn({ redirectUrl, fullPage = false }) {
+    const stackApp = useStackApp();
+    const user = useUser();
+    const project = stackApp.useProject();
+    if (user) {
+        return _jsx(RedirectMessageCard, { type: 'signedIn', fullPage: fullPage });
+    }
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Sign In to Your Account", children: _jsxs("p", { children: ["Don't have an account? ", _jsx(NextLink, { href: stackApp.urls['signUp'], passHref: true, className: "wl_text-blue-500", children: "Sign up" })] }) }), _jsx(OAuthGroup, { type: 'signin', redirectUrl: redirectUrl }), project.credentialEnabled &&
+                _jsxs(_Fragment, { children: [_jsx(DividerWithText, { text: 'OR' }), _jsx(CredentialSignIn, { redirectUrl: redirectUrl })] })] }));
+}

package/dist/components/SignOut.d.ts

@@ -0,0 +1,4 @@
+export default function Signout({ redirectUrl }: {
+    redirectUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignOut.d.ts.map

package/dist/components/SignOut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOut.d.ts","sourceRoot":"","sources":["../../src/components/SignOut.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,2CAQxE"}

package/dist/components/{sign-out.js → SignOut.js}

@@ -1,13 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
-import { useStackApp, useUser } from "..";
-import GoHomeMessageCard from "../elements/redirect-message-card";
-export default function Signout() {
+import { useUser } from "..";
+import GoHomeMessageCard from "../elements/RedirectMessageCard";
+export default function Signout({ redirectUrl }) {
     const user = useUser();
-    const app = useStackApp();
     if (user) {
-        use(user.signOut());
+        use(user.signOut(redirectUrl));
     }
     return _jsx(GoHomeMessageCard, { type: 'signedOut', fullPage: true });
 }

package/dist/components/SignUp.d.ts

@@ -0,0 +1,5 @@
+export default function SignUp({ redirectUrl, fullPage }: {
+    redirectUrl?: string;
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignUp.d.ts.map

package/dist/components/SignUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../src/components/SignUp.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,WAAW,EAAE,QAAc,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA0B3G"}

package/dist/components/SignUp.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NextLink from 'next/link';
+import DividerWithText from '../elements/DividerWithText';
+import OAuthGroup from '../elements/OAuthGroup';
+import CardFrame from '../elements/CardFrame';
+import CredentialSignUp from '../elements/CredentialSignUp';
+import CardHeader from '../elements/CardHeader';
+import { useUser, useStackApp } from '..';
+import RedirectMessageCard from '../elements/RedirectMessageCard';
+export default function SignUp({ redirectUrl, fullPage = false }) {
+    const stackApp = useStackApp();
+    const user = useUser();
+    const project = stackApp.useProject();
+    if (user) {
+        return _jsx(RedirectMessageCard, { type: 'signedIn', fullPage: fullPage });
+    }
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Create a New Account", children: _jsxs("p", { children: ["Already have an account? ", _jsx(NextLink, { href: stackApp.urls['signIn'], passHref: true, className: "wl_text-blue-500", children: "Sign in" })] }) }), _jsx(OAuthGroup, { type: 'signup', redirectUrl: redirectUrl }), project.credentialEnabled && _jsxs(_Fragment, { children: [_jsx(DividerWithText, { text: 'OR' }), _jsx(CredentialSignUp, { redirectUrl: redirectUrl })] })] }));
+}

package/dist/components/{stack-handler.d.ts → StackHandler.d.ts}

@@ -6,4 +6,4 @@ export default function StackHandler<HasTokenStore extends boolean>({ app, param
     };
     searchParams?: Record<string, string>;
 }): Promise<import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=stack-handler.d.ts.map
+//# sourceMappingURL=StackHandler.d.ts.map

package/dist/components/StackHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackHandler.d.ts","sourceRoot":"","sources":["../../src/components/StackHandler.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,cAAc,EAAE,MAAM,IAAI,CAAC;AAOnD,wBAA8B,YAAY,CAAC,aAAa,SAAS,OAAO,EAAE,EACxE,GAAG,EACH,MAAM,EAAE,EAAE,KAAK,EAAO,EACtB,YAAiB,GAClB,EAAE;IACD,GAAG,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC,oDAuDA"}

package/dist/components/{stack-handler.js → StackHandler.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SignUp from "./sign-up";
-import SignIn from "./sign-in";
+import SignUp from "./SignUp";
+import SignIn from "./SignIn";
 import { RedirectType, notFound, redirect } from 'next/navigation';
-import EmailVerification from "./email-verification";
+import EmailVerification from "./EmailVerification";
 import { PasswordReset } from "..";
-import MessageCard from "../elements/message-card";
-import Signout from "./sign-out";
-import ForgotPassword from "./forgot-password";
-import OAuthCallback from "./oauth-callback";
+import MessageCard from "../elements/MessageCard";
+import Signout from "./SignOut";
+import ForgotPassword from "./ForgotPassword";
+import OAuthCallback from "./OAuthCallback";
 export default async function StackHandler({ app, params: { stack } = {}, searchParams = {}, }) {
     if (!stack) {
         return (_jsx(MessageCard, { title: "Invalid Stack Handler Setup", fullPage: true, children: _jsx("p", { children: "Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack]." }) }));
@@ -25,15 +25,15 @@ export default async function StackHandler({ app, params: { stack } = {}, search
     switch (path) {
         case 'signin': {
             redirectIfNotHandler('signIn');
-            return _jsx(SignIn, { fullPage: true });
+            return _jsx(SignIn, { fullPage: true, redirectUrl: app.urls.userHome });
         }
         case 'signup': {
             redirectIfNotHandler('signUp');
-            return _jsx(SignUp, { fullPage: true });
+            return _jsx(SignUp, { fullPage: true, redirectUrl: app.urls.userHome });
         }
         case 'email-verification': {
             redirectIfNotHandler('emailVerification');
-            return _jsx(EmailVerification, { searchParams: searchParams, fullPage: true });
+            return _jsx(EmailVerification, { searchParams: searchParams, fullPage: true, redirectUrl: app.urls.signIn });
         }
         case 'password-reset': {
             redirectIfNotHandler('passwordReset');
@@ -45,7 +45,7 @@ export default async function StackHandler({ app, params: { stack } = {}, search
         }
         case 'signout': {
             redirectIfNotHandler('signOut');
-            return _jsx(Signout, {});
+            return _jsx(Signout, { redirectUrl: app.urls.home });
         }
         case 'oauth-callback': {
             redirectIfNotHandler('oauthCallback');

package/dist/components/card-frame.js

@@ -15,8 +15,8 @@ export default function CardFrame({ children, fullPage = true }) {
                 height: hasNoParent ? '100vh' : '100%',
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'center'
-            }, children: _jsx(Container, { size: 350, children: children }) }));
+                justifyContent: 'center',
+            }, children: _jsx(Container, { size: 380, style: { padding: '1rem 1rem' }, children: children }) }));
     }
     else {
         return children;

package/dist/components/user-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-button.d.ts","sourceRoot":"","sources":["../../src/components/user-button.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAoB,EACpB,aAAoB,GACrB,EAAE;IACD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,kDAyDA"}
+{"version":3,"file":"user-button.d.ts","sourceRoot":"","sources":["../../src/components/user-button.tsx"],"names":[],"mappings":"AAqBA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAoB,EACpB,aAAoB,GACrB,EAAE;IACD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,kDA0DA"}

package/dist/components/user-button.js

@@ -5,6 +5,7 @@ import { RxPerson, RxEnter, RxSun, RxShadow } from "react-icons/rx";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { SECONDARY_FONT_COLORS } from "../utils/constants";
 import UserAvatar from "./user-avatar";
+import { useRouter } from "next/navigation";
 function Item(props) {
     return (_jsxs(DropdownMenuItem, { onClick: () => runAsynchronously(props.onClick), style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [props.icon, _jsx(Text, { children: props.text })] }));
 }
@@ -12,6 +13,7 @@ export default function UserButton({ showUserInfo = false, showColorMode = true,
     const { colorMode, setColorMode } = useDesign();
     const user = useUser();
     const app = useStackApp();
+    const router = useRouter();
     const textStyles = {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -19,7 +21,7 @@ export default function UserButton({ showUserInfo = false, showColorMode = true,
     };
     if (!user)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), _jsxs("div", { children: [_jsx(Text, { children: user.displayName }), _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Item, { text: "Account settings", onClick: () => app.redirectToAccountSettings(), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), _jsxs("div", { children: [_jsx(Text, { children: user.displayName }), _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Item, { text: "Account settings", onClick: () => runAsynchronously(router.push(app.urls.accountSettings)), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
                             _jsx(RxSun, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) :
                             _jsx(RxShadow, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), _jsx(Item, { text: "Sign out", onClick: () => user.signOut(), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) })] })] }));
 }

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

@@ -25,7 +25,7 @@ function ProfileSection() {
 function EmailVerificationSection() {
     const user = useUser();
     const [emailSent, setEmailSent] = useState(false);
-    return (_jsx(SettingSection, { title: 'Email Verification', desc: 'We want to make sure that you own the email address', buttonDisabled: emailSent, buttonText: !user?.primaryEmailVerified ?
+    return (_jsx(SettingSection, { title: 'Email Verification', desc: 'We want to make sure that you own the email address.', buttonDisabled: emailSent, buttonText: !user?.primaryEmailVerified ?
             emailSent ?
                 'Email sent!' :
                 'Send Email'
@@ -45,7 +45,7 @@ function PasswordSection() {
     if (user?.authMethod !== 'credential') {
         return null;
     }
-    return (_jsxs(SettingSection, { title: 'Password', desc: 'Change your password', buttonDisabled: !oldPassword || !newPassword, buttonText: 'Save', onButtonClick: async () => {
+    return (_jsxs(SettingSection, { title: 'Password', desc: 'Change your password here.', buttonDisabled: !oldPassword || !newPassword, buttonText: 'Save', onButtonClick: async () => {
             if (oldPassword && newPassword) {
                 const errorMessage = getPasswordError(newPassword);
                 if (errorMessage) {
@@ -78,7 +78,7 @@ function PasswordSection() {
 }
 function SignOutSection() {
     const user = useUser();
-    return (_jsx(SettingSection, { title: 'Sign out', desc: 'Sign out of your account on this device', buttonVariant: 'secondary', buttonText: 'Sign Out', onButtonClick: () => user?.signOut() }));
+    return (_jsx(SettingSection, { title: 'Sign out', desc: 'Sign out of your account on this device.', buttonVariant: 'secondary', buttonText: 'Sign Out', onButtonClick: () => user?.signOut() }));
 }
 export default function AccountSettings({ fullPage = false }) {
     const user = useUser();

package/dist/elements/Button.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export default function Button(props: {
+    children: React.ReactNode;
+    style?: any;
+    className?: string;
+    onClick?: () => void;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/elements/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/elements/Button.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,2CAgCA"}

package/dist/elements/Button.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Button(props) {
+    let leftIconJsx;
+    if (props.leftIcon) {
+        leftIconJsx = _jsx("div", { children: props.leftIcon });
+    }
+    else if (props.rightIcon) {
+        leftIconJsx = _jsx("div", { className: "wl_invisible", children: props.rightIcon });
+    }
+    let rightIconJsx;
+    if (props.rightIcon) {
+        rightIconJsx = _jsx("div", { children: props.rightIcon });
+    }
+    else if (props.leftIcon) {
+        rightIconJsx = _jsx("div", { className: "wl_invisible", children: props.leftIcon });
+    }
+    return (_jsxs("button", { className: "wl_btn wl_items-center " + (props.className || ""), style: props.style, onClick: props.onClick, disabled: props.loading, children: [leftIconJsx, _jsxs("div", { className: "wl_flex-grow wl_flex wl_items-center wl_justify-center", children: [_jsx("span", { className: `wl_loading wl_loading-spinner wl_mr-2 ${props.loading ? "" : "wl_invisible"}` }), props.children, _jsx("span", { className: "wl_loading wl_loading-spinner wl_ml-2 wl_invisible" })] }), rightIconJsx] }));
+}

package/dist/elements/CardFrame.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export default function CardFrame({ children, fullPage }: {
+    children: React.ReactNode;
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardFrame.d.ts.map

package/dist/elements/CardFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFrame.d.ts","sourceRoot":"","sources":["../../src/elements/CardFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,QAAa,EACd,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAkBA"}

package/dist/elements/CardFrame.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CardFrame({ children, fullPage = true }) {
+    const inner = (_jsx("div", { className: "stack-scope wl_container wl_mx-auto wl_max-w-md wl_font-sans", children: _jsx("div", { className: `wl_py-8 wl_px-4 wl_bg-transparent wl_rounded-xl sm:wl_px-10 sm:wl_bg-base-200 sm:wl_shadow-xl`, children: children }) }));
+    if (fullPage) {
+        return (_jsx("div", { className: "wl_min-h-screen wl_flex wl_items-center wl_justify-center", children: inner }));
+    }
+    else {
+        return inner;
+    }
+}

package/dist/{components/card-header.d.ts → elements/CardHeader.d.ts}

@@ -3,4 +3,4 @@ export default function CardHeader({ children, title }: {
     children?: React.ReactNode;
     title: string;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=card-header.d.ts.map
+//# sourceMappingURL=CardHeader.d.ts.map

package/dist/elements/CardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../src/elements/CardHeader.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,EAAE,QAAQ,EAAE,KAAK,EAAE,EACnB;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CAQ9C"}

package/dist/elements/CardHeader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function CardHeader({ children, title }) {
+    return (_jsxs("div", { className: "wl_text-center wl_mb-6 wl_space-y-2 md:wl_space-y-3", children: [_jsx("h2", { className: "wl_text-2xl", children: title }), children] }));
+}

package/dist/elements/CredentialSignIn.d.ts

@@ -0,0 +1,4 @@
+export default function CredentialSignIn({ redirectUrl }: {
+    redirectUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CredentialSignIn.d.ts.map

package/dist/elements/CredentialSignIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CredentialSignIn.d.ts","sourceRoot":"","sources":["../../src/elements/CredentialSignIn.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,2CAkGjF"}

package/dist/elements/CredentialSignIn.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FormWarningText } from "./FormWarning";
+import { PasswordField } from "./PasswordField";
+import { validateEmail } from "../utils/email";
+import NextLink from "next/link";
+import { useStackApp } from "..";
+import Button from "./Button";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { EmailPasswordMissMatchErrorCode, UserNotExistErrorCode } from "@stackframe/stack-shared/dist/utils/types";
+// Import or define the PasswordField, FormWarningText, and validateEmail utilities if they're custom components or functions.
+export default function CredentialSignIn({ redirectUrl }) {
+    const [email, setEmail] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const stackApp = useStackApp();
+    const onSubmit = async () => {
+        if (!email) {
+            setEmailError('Please enter your email');
+            return;
+        }
+        if (!validateEmail(email)) {
+            setEmailError('Please enter a valid email');
+            return;
+        }
+        if (!password) {
+            setPasswordError('Please enter your password');
+            return;
+        }
+        setLoading(true);
+        const errorCode = await stackApp.signInWithCredential({ email, password, redirectUrl });
+        setLoading(false);
+        switch (errorCode) {
+            case UserNotExistErrorCode: {
+                setEmailError('User does not exist');
+                break;
+            }
+            case EmailPasswordMissMatchErrorCode: {
+                setPasswordError('Wrong email or password');
+                break;
+            }
+            case undefined: {
+                // success
+                break;
+            }
+        }
+    };
+    return (_jsxs("div", { className: "wl_flex wl_flex-col wl_space-y-2 wl_items-stretch", children: [_jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "email", children: _jsx("span", { className: "wl_label-text", children: "Email" }) }), _jsx("input", { id: "email", type: "email", name: "email", className: "wl_input wl_input-bordered", value: email, onChange: (e) => {
+                            setEmail(e.target.value);
+                            setEmailError('');
+                        } }), _jsx(FormWarningText, { text: emailError })] }), _jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "password", children: _jsx("span", { className: "wl_label-text", children: "Password" }) }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                            setPassword(e.target.value);
+                            setPasswordError('');
+                        } }), _jsx(FormWarningText, { text: passwordError })] }), _jsx("div", { className: "wl_flex wl_items-center wl_justify-between", children: _jsx(NextLink, { href: stackApp.urls.forgotPassword, className: "wl_text-sm wl_text-blue-500 wl_no-underline wl_hover:wl_underline", children: "Forgot password?" }) }), _jsx("div", { className: "wl_flex wl_flex-col wl_items-stretch", children: _jsx(Button, { className: "wl_btn-primary wl_mt-6", onClick: () => runAsynchronously(onSubmit), loading: loading, children: "Sign In" }) })] }));
+}

package/dist/elements/CredentialSignUp.d.ts

@@ -0,0 +1,4 @@
+export default function CredentialSignUp({ redirectUrl }: {
+    redirectUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CredentialSignUp.d.ts.map

package/dist/elements/CredentialSignUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CredentialSignUp.d.ts","sourceRoot":"","sources":["../../src/elements/CredentialSignUp.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,2CAuHjF"}

package/dist/elements/CredentialSignUp.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { PasswordField } from "./PasswordField";
+import { FormWarningText } from "./FormWarning";
+import { validateEmail } from "../utils/email";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { useStackApp } from "..";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import Button from "./Button";
+import { UserAlreadyExistErrorCode } from "@stackframe/stack-shared/dist/utils/types";
+export default function CredentialSignUp({ redirectUrl }) {
+    const [email, setEmail] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [passwordRepeat, setPasswordRepeat] = useState('');
+    const [passwordRepeatError, setPasswordRepeatError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const stackApp = useStackApp();
+    const onSubmit = async () => {
+        if (!email) {
+            setEmailError('Please enter your email');
+            return;
+        }
+        if (!validateEmail(email)) {
+            setEmailError('Please enter a valid email');
+            return;
+        }
+        if (!password) {
+            setPasswordError('Please enter your password');
+            return;
+        }
+        if (!passwordRepeat) {
+            setPasswordRepeatError('Please repeat your password');
+            return;
+        }
+        if (password !== passwordRepeat) {
+            setPasswordRepeatError('Passwords do not match');
+            return;
+        }
+        const errorMessage = getPasswordError(password);
+        if (errorMessage) {
+            setPasswordError(errorMessage);
+            return;
+        }
+        setLoading(true);
+        const errorCode = await stackApp.signUpWithCredential({ email, password, redirectUrl });
+        setLoading(false);
+        switch (errorCode) {
+            case UserAlreadyExistErrorCode: {
+                setEmailError('User already exists');
+                break;
+            }
+            case undefined: {
+                // success
+                break;
+            }
+        }
+    };
+    return (_jsxs("div", { className: "wl_flex wl_flex-col wl_space-y-2 wl_items-stretch", children: [_jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "email", children: "Email" }), _jsx("input", { className: "wl_input wl_input-bordered", id: "email", type: "email", name: "email", value: email, onChange: (e) => {
+                            setEmail(e.target.value);
+                            setEmailError('');
+                        } }), _jsx(FormWarningText, { text: emailError })] }), _jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "password", children: "Password" }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                            setPassword(e.target.value);
+                            setPasswordError('');
+                            setPasswordRepeatError('');
+                        } }), _jsx(FormWarningText, { text: passwordError })] }), _jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "repeat-password", children: "Repeat Password" }), _jsx(PasswordField, { id: "repeat-password", name: "repeat-password", value: passwordRepeat, onChange: (e) => {
+                            setPasswordRepeat(e.target.value);
+                            setPasswordError('');
+                            setPasswordRepeatError('');
+                        } }), _jsx(FormWarningText, { text: passwordRepeatError })] }), _jsx("div", { className: "wl_flex wl_flex-col wl_items-stretch", children: _jsx(Button, { className: "wl_btn-primary wl_mt-6", onClick: () => runAsynchronously(onSubmit), loading: loading, children: "Sign Up" }) })] }));
+}

package/dist/elements/{divider-with-text.d.ts → DividerWithText.d.ts}

@@ -1,4 +1,4 @@
 export default function DividerWithText({ text }: {
     text: string;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=divider-with-text.d.ts.map
+//# sourceMappingURL=DividerWithText.d.ts.map

package/dist/elements/DividerWithText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerWithText.d.ts","sourceRoot":"","sources":["../../src/elements/DividerWithText.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CASjE"}

package/dist/elements/DividerWithText.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DividerWithText({ text }) {
+    const lineStyle = "wl_flex-grow wl_bg-neutral wl_h-px";
+    return (_jsxs("div", { className: "wl_flex wl_items-center wl_my-4", children: [_jsx("div", { className: lineStyle }), _jsx("span", { className: "wl_px-4 wl_text-sm wl_text-neutral", children: text }), _jsx("div", { className: lineStyle })] }));
+}