@stackframe/stack 2.0.0 → 2.1.1

package/dist/components/card-frame.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react/experimental" />
+import React from "react";
+export default function CardFrame({ children, fullPage }: {
+    children: React.ReactNode;
+    fullPage?: boolean;
+}): string | number | boolean | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=card-frame.d.ts.map

package/dist/components/card-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-frame.d.ts","sourceRoot":"","sources":["../../src/components/card-frame.tsx"],"names":[],"mappings":";AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,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,wJA4BA"}

package/dist/components/card-frame.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from "../components-core";
+import { useEffect, useState } from "react";
+export default function CardFrame({ children, fullPage = true }) {
+    const [hasNoParent, setHasNoParent] = useState(false);
+    useEffect(() => {
+        const component = document.getElementById('stack-card-frame');
+        setHasNoParent(!component?.parentElement ||
+            component?.parentElement === document.body ||
+            component?.parentElement === document.documentElement);
+    }, []);
+    if (fullPage) {
+        return (_jsx("div", { id: 'stack-card-frame', style: {
+                height: hasNoParent ? '100vh' : '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }, children: _jsx(Container, { size: 360, children: children }) }));
+    }
+    else {
+        return children;
+    }
+}

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

@@ -3,3 +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

package/dist/components/card-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["../../src/components/card-header.tsx"],"names":[],"mappings":";AAEA,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/components/card-header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "../components-core";
+export default function CardHeader({ children, title }) {
+    return (_jsxs("div", { style: { textAlign: 'center', marginBottom: '24px' }, children: [_jsx(Text, { size: "xl", as: 'h2', style: { marginBottom: '5px' }, children: title }), children] }));
+}

package/dist/{elements/CredentialSignIn.d.ts → components/credential-sign-in.d.ts}

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

package/dist/components/credential-sign-in.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-in.d.ts","sourceRoot":"","sources":["../../src/components/credential-sign-in.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAkFvC"}

package/dist/components/credential-sign-in.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import FormWarningText from "./form-warning";
+import PasswordField from "./password-field";
+import { validateEmail } from "../utils/email";
+import { useStackApp } from "..";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { EmailPasswordMissMatchErrorCode, UserNotExistErrorCode } from "@stackframe/stack-shared/dist/utils/types";
+import { Button, Input, Label, Link } from "../components-core";
+export default function CredentialSignIn() {
+    const [email, setEmail] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const app = 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 app.signInWithCredential({ email, password });
+        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", { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", name: "email", value: email, onChange: (e) => {
+                    setEmail(e.target.value);
+                    setEmailError('');
+                } }), _jsx(FormWarningText, { text: emailError }), _jsx(Label, { htmlFor: "password", style: { marginTop: '1rem' }, children: "Password" }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                    setPassword(e.target.value);
+                    setPasswordError('');
+                } }), _jsx(FormWarningText, { text: passwordError }), _jsx(Link, { href: app.urls.forgotPassword, size: 'sm', style: { marginTop: '0.5rem' }, children: "Forgot password?" }), _jsx(Button, { style: { marginTop: '1.5rem' }, onClick: () => runAsynchronously(onSubmit), loading: loading, children: "Sign In" })] }));
+}

package/dist/{elements/CredentialSignUp.d.ts → components/credential-sign-up.d.ts}

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

package/dist/components/credential-sign-up.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-up.d.ts","sourceRoot":"","sources":["../../src/components/credential-sign-up.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAwGvC"}

package/dist/{elements/CredentialSignUp.js → components/credential-sign-up.js}

@@ -1,14 +1,14 @@
 '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 PasswordField from "./password-field";
+import FormWarningText from "./form-warning";
 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";
+import { Button, Label, Input } from "../components-core";
 export default function CredentialSignUp() {
     const [email, setEmail] = useState('');
     const [emailError, setEmailError] = useState('');
@@ -58,16 +58,16 @@ export default function CredentialSignUp() {
             }
         }
     };
-    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" }) })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", name: "email", value: email, onChange: (e) => {
+                    setEmail(e.target.value);
+                    setEmailError('');
+                } }), _jsx(FormWarningText, { text: emailError }), _jsx(Label, { htmlFor: "password", style: { marginTop: '1rem' }, children: "Password" }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                    setPassword(e.target.value);
+                    setPasswordError('');
+                    setPasswordRepeatError('');
+                } }), _jsx(FormWarningText, { text: passwordError }), _jsx(Label, { htmlFor: "repeat-password", style: { marginTop: '1rem' }, 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(Button, { style: { marginTop: '1.5rem' }, onClick: () => runAsynchronously(onSubmit), loading: loading, children: "Sign Up" })] }));
 }

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

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

package/dist/components/divider-with-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-with-text.d.ts","sourceRoot":"","sources":["../../src/components/divider-with-text.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAYjE"}

package/dist/components/divider-with-text.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Text } from "../components-core";
+export default function DividerWithText({ text }) {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '16px', marginBottom: '16px' }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Divider, {}) }), _jsx(Text, { style: { padding: '0 16px' }, variant: "secondary", children: text }), _jsx("div", { style: { flex: 1 }, children: _jsx(Divider, {}) })] }));
+}

package/dist/components/email-verification.d.ts

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

package/dist/components/email-verification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-verification.d.ts","sourceRoot":"","sources":["../../src/components/email-verification.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;CACpB,kDAkCA"}

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

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

package/dist/{elements/ForgotPassword.d.ts → components/forgot-password.d.ts}

@@ -1,3 +1,4 @@
 export default function ForgotPassword({ onSent }: {
     onSent?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=forgot-password.d.ts.map

package/dist/components/forgot-password.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forgot-password.d.ts","sourceRoot":"","sources":["../../src/components/forgot-password.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,2CA8CzE"}

package/dist/components/forgot-password.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import FormWarningText from "./form-warning";
+import { validateEmail } from "../utils/email";
+import { useStackApp } from "..";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label } from "../components-core";
+export default function ForgotPassword({ onSent }) {
+    const [email, setEmail] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [sending, setSending] = 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;
+        }
+        setSending(true);
+        await stackApp.sendForgotPasswordEmail(email);
+        setSending(false);
+        onSent?.();
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: [_jsx(Label, { htmlFor: "email", children: "Your Email" }), _jsx(Input, { id: "email", type: "email", name: "email", value: email, onChange: (e) => {
+                    setEmail(e.target.value);
+                    setEmailError('');
+                } }), _jsx(FormWarningText, { text: emailError }), _jsx(Button, { style: { marginTop: '1.5rem' }, onClick: () => runAsynchronously(onSubmit()), loading: sending, children: "Send Email" })] }));
+}

package/dist/components/form-warning.d.ts

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

package/dist/components/form-warning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-warning.d.ts","sourceRoot":"","sources":["../../src/components/form-warning.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,kDASlE"}

package/dist/components/form-warning.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../components-core";
+export default function FormWarningText({ text }) {
+    if (!text) {
+        return null;
+    }
+    return (_jsx(Text, { size: "sm", variant: "warning", children: text }));
+}

package/dist/{elements/MessageCard.d.ts → components/message-card.d.ts}

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

package/dist/components/message-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card.d.ts","sourceRoot":"","sources":["../../src/components/message-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAc,EAAE,EACnC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,2CAUjE"}

package/dist/components/message-card.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardFrame from "./card-frame";
+import { Text } from "../components-core";
+export default function MessageCard({ children, title, fullPage = false }) {
+    return (_jsx(CardFrame, { fullPage: fullPage, children: _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Text, { size: "xl", as: 'h2', style: { marginBottom: '24px' }, children: title }), children] }) }));
+}

package/dist/{elements/OAuthButton.d.ts → components/oauth-button.d.ts}

@@ -2,3 +2,4 @@ export default function OAuthButton({ provider, type, }: {
     provider: string;
     type: 'signin' | 'signup';
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=oauth-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button.d.ts","sourceRoot":"","sources":["../../src/components/oauth-button.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC3B,2CA6GA"}

package/dist/components/oauth-button.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaGithub, FaFacebook, FaApple } from 'react-icons/fa';
+import { useStackApp } from '..';
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "../components-core";
+import { useDesign } from "../providers/design-provider";
+import Color from 'color';
+const iconSize = 22;
+export default function OAuthButton({ provider, type, }) {
+    const { colors } = useDesign();
+    const stackApp = useStackApp();
+    let style;
+    switch (provider) {
+        case 'google': {
+            style = {
+                backgroundColor: '#fff',
+                name: 'Google',
+                border: Color(colors.primaryBgColor).isDark() ? undefined : '1px solid #ccc',
+                icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }), _jsx("path", { fill: "none", d: "M1 1h22v22H1z" })] })),
+            };
+            break;
+        }
+        case 'github': {
+            style = {
+                backgroundColor: '#111',
+                border: Color(colors.primaryBgColor).isDark() ? '1px solid #666' : undefined,
+                name: 'GitHub',
+                icon: (_jsx(FaGithub, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'facebook': {
+            style = {
+                backgroundColor: '#1877F2',
+                name: 'Facebook',
+                icon: (_jsx(FaFacebook, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'apple': {
+            style = {
+                backgroundColor: '#000',
+                name: 'Apple',
+                icon: (_jsx(FaApple, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'microsoft': {
+            style = {
+                backgroundColor: '#2f2f2f',
+                name: 'Microsoft',
+                icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 21 21", children: [_jsx("title", { children: "MS-SymbolLockup" }), _jsx("path", { fill: "#f25022", d: "M1 1h9v9H1z" }), _jsx("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }), _jsx("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }), _jsx("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })] })),
+            };
+            break;
+        }
+        default: {
+            style = {
+                backgroundColor: '#000',
+                name: provider,
+                icon: null
+            };
+        }
+    }
+    return (_jsx(Button, { color: style.backgroundColor, style: { border: style.border }, onClick: () => runAsynchronously(stackApp.signInWithOAuth(provider)), children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [style.icon, _jsxs("span", { style: { flexGrow: 1 }, children: [type === 'signup' ? 'Sign up with ' : 'Sign in with ', style.name] }), _jsx("div", { style: { visibility: 'hidden' }, children: style.icon })] }) }));
+}

package/dist/components/oauth-callback.d.ts

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

package/dist/components/oauth-callback.d.ts.map

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

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

@@ -3,7 +3,7 @@ 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/MessageCard";
+import MessageCard from "../elements/message-card";
 export default function OAuthCallback() {
     const app = useStackApp();
     const called = useRef(false);

package/dist/{elements/OAuthGroup.d.ts → components/oauth-group.d.ts}

@@ -1,3 +1,4 @@
 export default function OAuthGroup({ type, }: {
     type: 'signin' | 'signup';
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=oauth-group.d.ts.map

package/dist/components/oauth-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-group.d.ts","sourceRoot":"","sources":["../../src/components/oauth-group.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,GACL,EAAE;IACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC3B,2CAWA"}

package/dist/components/oauth-group.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStackApp } from "../lib/hooks";
+import OAuthButton from "./oauth-button";
+export default function OAuthGroup({ type, }) {
+    const stackApp = useStackApp();
+    const project = stackApp.useProject();
+    return (_jsx("div", { style: { gap: '16px', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: project.oauthProviders.filter(p => p.enabled).map(p => (_jsx(OAuthButton, { provider: p.id, type: type }, p.id))) }));
+}

package/dist/components/password-field.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const PasswordField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export default PasswordField;
+//# sourceMappingURL=password-field.d.ts.map

package/dist/components/password-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.d.ts","sourceRoot":"","sources":["../../src/components/password-field.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,aAAa,oJAwDjB,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/dist/components/password-field.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../components-core";
+;
+import { forwardRef, useRef, useState } from 'react';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
+const PasswordField = forwardRef(({ id, name, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = useRef(null);
+    const mergeRef = (node) => {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        }
+        inputRef.current = node;
+    };
+    const onClickReveal = () => {
+        setIsOpen(!isOpen);
+        const currentInput = inputRef.current;
+        if (currentInput) {
+            currentInput.focus({ preventScroll: true });
+        }
+    };
+    return (_jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsx(Input, { id: id, ref: mergeRef, name: name, type: isOpen ? 'text' : 'password', autoComplete: "current-password", required: true, style: { flex: 1 }, ...props }), _jsx("button", { tabIndex: -1, type: "button", style: {
+                    position: 'absolute',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingRight: '12px'
+                }, onClick: onClickReveal, "aria-label": isOpen ? 'Mask password' : 'Reveal password', children: isOpen ? _jsx(HiEyeOff, {}) : _jsx(HiEye, {}) })] }));
+});
+PasswordField.displayName = 'PasswordField';
+export default PasswordField;

package/dist/{elements/PasswordResetInner.d.ts → components/password-reset-inner.d.ts}

@@ -2,3 +2,4 @@ export default function PasswordResetInner({ code, fullPage }: {
     code: string;
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=password-reset-inner.d.ts.map

package/dist/components/password-reset-inner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-reset-inner.d.ts","sourceRoot":"","sources":["../../src/components/password-reset-inner.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,EAAE,IAAI,EAAE,QAAgB,EAAE,EAC1B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CAyFrC"}

package/dist/{elements/PasswordResetInner.js → components/password-reset-inner.js}

@@ -3,12 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useStackApp } from "..";
-import { PasswordField } from "./PasswordField";
-import { FormWarningText } from "./FormWarning";
-import RedirectMessageCard from "./RedirectMessageCard";
-import MessageCard from "./MessageCard";
-import CardFrame from "./CardFrame";
-import CardHeader from "./CardHeader";
+import PasswordField from "./password-field";
+import FormWarningText from "./form-warning";
+import RedirectMessageCard from "./redirect-message-card";
+import MessageCard from "./message-card";
+import CardFrame from "./card-frame";
+import CardHeader from "./card-header";
+import { Button, Label, Text } from "../components-core";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 export default function PasswordResetInner({ code, fullPage = false }) {
     const [password, setPassword] = useState('');
     const [passwordError, setPasswordError] = useState('');
@@ -47,15 +49,15 @@ export default function PasswordResetInner({ code, fullPage = false }) {
         return _jsx(RedirectMessageCard, { type: 'passwordReset', fullPage: fullPage });
     }
     if (resetError) {
-        return (_jsx(MessageCard, { title: "Failed to reset password", fullPage: fullPage, children: _jsx("p", { children: "Failed to reset password. Please request a new password reset link" }) }));
+        return (_jsx(MessageCard, { title: "Failed to reset password", fullPage: fullPage, children: _jsx(Text, { children: "Failed to reset password. Please request a new password reset link" }) }));
     }
-    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Reset Your Password" }), _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: "password", children: "New 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 New 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 wl_btn-primary wl_mt-6", onClick: () => void onSubmit(), children: "Reset Password" }) })] })] }));
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Reset Your Password" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: [_jsx(Label, { htmlFor: "password", children: "New Password" }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                            setPassword(e.target.value);
+                            setPasswordError('');
+                            setPasswordRepeatError('');
+                        } }), _jsx(FormWarningText, { text: passwordError }), _jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }), _jsx(PasswordField, { id: "repeat-password", name: "repeat-password", value: passwordRepeat, onChange: (e) => {
+                            setPasswordRepeat(e.target.value);
+                            setPasswordError('');
+                            setPasswordRepeatError('');
+                        } }), _jsx(FormWarningText, { text: passwordRepeatError }), _jsx(Button, { style: { marginTop: '1.5rem' }, onClick: () => runAsynchronously(onSubmit()), children: "Reset Password" })] })] }));
 }

package/dist/components/password-reset.d.ts

@@ -0,0 +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

package/dist/components/password-reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-reset.d.ts","sourceRoot":"","sources":["../../src/components/password-reset.tsx"],"names":[],"mappings":"AAcA,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,2CA0CA"}

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

@@ -1,19 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import MessageCard from "../elements/MessageCard";
+import MessageCard from "../elements/message-card";
 import { useStackApp } from "..";
 import { use } from "react";
-import PasswordResetInner from "../elements/PasswordResetInner";
+import PasswordResetInner from "../elements/password-reset-inner";
 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("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 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 code = searchParams?.code;
     if (!code) {
         return invalidJsx;

package/dist/{elements/RedirectMessageCard.d.ts → components/redirect-message-card.d.ts}

@@ -2,3 +2,4 @@ export default function RedirectMessageCard({ type, fullPage, }: {
     type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified';
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=redirect-message-card.d.ts.map

package/dist/components/redirect-message-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"redirect-message-card.d.ts","sourceRoot":"","sources":["../../src/components/redirect-message-card.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,IAAI,EACJ,QAAc,GACf,EAAE;IACD,IAAI,EAAE,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,eAAe,GAAG,eAAe,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAoEA"}