@stackframe/stack 2.5.37 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @stackframe/stack
 
+## 2.6.1
+
+### Patch Changes
+
+- Bugfixes
+  - @stackframe/stack-sc@2.6.1
+  - @stackframe/stack-shared@2.6.1
+  - @stackframe/stack-ui@2.6.1
+
+## 2.6.0
+
+### Minor Changes
+
+- OTP login, more providers, and styling improvements
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.0
+  - @stackframe/stack-sc@2.6.0
+  - @stackframe/stack-ui@2.6.0
+
 ## 2.5.37
 
 ### Patch Changes

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

@@ -50,11 +50,13 @@ function CredentialSignIn() {
     setLoading(true);
     try {
       const { email, password } = data;
-      const error = await app.signInWithCredential({
+      const result = await app.signInWithCredential({
         email,
         password
       });
-      setError("email", { type: "manual", message: error?.message });
+      if (result.status === "error") {
+        setError("email", { type: "manual", message: result.error.message });
+      }
     } finally {
       setLoading(false);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, StyledLink } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignIn() {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email')),\n    password: yupString().required(t('Please enter your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const { email, password } = data;\n      const error = await app.signInWithCredential({\n        email,\n        password,\n      });\n      setError('email', { type: 'manual', message: error?.message });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        {...register('password')}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <StyledLink href={app.urls.forgotPassword} className=\"mt-1 text-sm\">\n        {t('Forgot password?')}\n      </StyledLink>\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign In')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,2BAAqC;AACrC,sBAA2C;AAC3C,sBAAgE;AAChE,mBAAyB;AACzB,6BAAwB;AAExB,eAA4B;AAC5B,0BAA+B;AAC/B,0BAAgC;AAgC5B;AA9BG,SAAS,mBAAmB;AACjC,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,QAAM,aAAS,gCAAU;AAAA,IACvB,WAAO,gCAAU,EAAE,MAAM,EAAE,4BAA4B,CAAC,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,IAC/F,cAAU,gCAAU,EAAE,SAAS,EAAE,4BAA4B,CAAC;AAAA,EAChE,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,EAAE,QAAI,gCAAQ;AAAA,IAC1E,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AAEf,QAAI;AACF,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,QAAQ,MAAM,IAAI,qBAAqB;AAAA,QAC3C;AAAA,QACA;AAAA,MACF,CAAC;AACD,eAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,IAC/D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,WAAK,4CAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,oDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAQ,YAAE,OAAO,GAAE;AAAA,QACpD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,yBAAM,SAAQ,YAAW,WAAU,aAAa,YAAE,UAAU,GAAE;AAAA,QAC/D;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA;AAAA,QACzB;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,4CAAC,8BAAW,MAAM,IAAI,KAAK,gBAAgB,WAAU,gBAClD,YAAE,kBAAkB,GACvB;AAAA,QAEA,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SACpC,YAAE,SAAS,GACd;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, StyledLink } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignIn() {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email')),\n    password: yupString().required(t('Please enter your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const { email, password } = data;\n      const result = await app.signInWithCredential({\n        email,\n        password,\n      });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        {...register('password')}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <StyledLink href={app.urls.forgotPassword} className=\"mt-1 text-sm\">\n        {t('Forgot password?')}\n      </StyledLink>\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign In')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,2BAAqC;AACrC,sBAA2C;AAC3C,sBAAgE;AAChE,mBAAyB;AACzB,6BAAwB;AAExB,eAA4B;AAC5B,0BAA+B;AAC/B,0BAAgC;AAkC5B;AAhCG,SAAS,mBAAmB;AACjC,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,QAAM,aAAS,gCAAU;AAAA,IACvB,WAAO,gCAAU,EAAE,MAAM,EAAE,4BAA4B,CAAC,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,IAC/F,cAAU,gCAAU,EAAE,SAAS,EAAE,4BAA4B,CAAC;AAAA,EAChE,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,EAAE,QAAI,gCAAQ;AAAA,IAC1E,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AAEf,QAAI;AACF,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,SAAS,MAAM,IAAI,qBAAqB;AAAA,QAC5C;AAAA,QACA;AAAA,MACF,CAAC;AACD,UAAI,OAAO,WAAW,SAAS;AAC7B,iBAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,MAAM,QAAQ,CAAC;AAAA,MACrE;AAAA,IACF,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,WAAK,4CAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,oDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAQ,YAAE,OAAO,GAAE;AAAA,QACpD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,yBAAM,SAAQ,YAAW,WAAU,aAAa,YAAE,UAAU,GAAE;AAAA,QAC/D;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA;AAAA,QACzB;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,4CAAC,8BAAW,MAAM,IAAI,KAAK,gBAAgB,WAAU,gBAClD,YAAE,kBAAkB,GACvB;AAAA,QAEA,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SACpC,YAAE,SAAS,GACd;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/credential-sign-up.d.mts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function CredentialSignUp(): react_jsx_runtime.JSX.Element;
+declare function CredentialSignUp(props: {
+    noPasswordRepeat?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 export { CredentialSignUp };

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

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function CredentialSignUp(): react_jsx_runtime.JSX.Element;
+declare function CredentialSignUp(props: {
+    noPasswordRepeat?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 export { CredentialSignUp };

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

@@ -47,7 +47,7 @@ var import__ = require("..");
 var import_translations = require("../lib/translations");
 var import_form_warning = require("./elements/form-warning");
 var import_jsx_runtime = require("react/jsx-runtime");
-function CredentialSignUp() {
+function CredentialSignUp(props) {
   const { t } = (0, import_translations.useTranslation)();
   const schema = (0, import_schema_fields.yupObject)({
     email: (0, import_schema_fields.yupString)().email(t("Please enter a valid email")).required(t("Please enter your email")),
@@ -62,7 +62,9 @@ function CredentialSignUp() {
         }
       }
     }),
-    passwordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("password"), "", null], t("Passwords do not match")).required(t("Please repeat your password"))
+    ...!props.noPasswordRepeat && {
+      passwordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("password"), "", null], t("Passwords do not match")).required(t("Please repeat your password"))
+    }
   });
   const { register, handleSubmit, setError, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(schema)
@@ -73,8 +75,10 @@ function CredentialSignUp() {
     setLoading(true);
     try {
       const { email, password } = data;
-      const error = await app.signUpWithCredential({ email, password });
-      setError("email", { type: "manual", message: error?.message });
+      const result = await app.signUpWithCredential({ email, password });
+      if (result.status === "error") {
+        setError("email", { type: "manual", message: result.error.message });
+      }
     } finally {
       setLoading(false);
     }
@@ -105,20 +109,22 @@ function CredentialSignUp() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.password?.message?.toString() }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.PasswordInput,
-          {
-            id: "repeat-password",
-            ...registerPasswordRepeat,
-            onChange: (e) => {
-              clearErrors("password");
-              clearErrors("passwordRepeat");
-              (0, import_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
+        !props.noPasswordRepeat && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.PasswordInput,
+            {
+              id: "repeat-password",
+              ...registerPasswordRepeat,
+              onChange: (e) => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+                (0, import_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.passwordRepeat?.message?.toString() })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: "Sign Up" })
       ]
     }

package/dist/components/credential-sign-up.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignUp() {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email')),\n    password: yupString().required(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), \"\", null], t('Passwords do not match')).required(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email, password } = data;\n      const error = await app.signUpWithCredential({ email, password });\n      setError('email', { type: 'manual', message: error?.message });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('password');\n  const registerPasswordRepeat = register('passwordRepeat');\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">Email</Label>\n      <Input id=\"email\" type=\"email\" {...register('email')}/>\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">Password</Label>\n      <PasswordInput\n        id=\"password\"\n        {...registerPassword}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPassword.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat Password</Label>\n      <PasswordInput\n        id=\"repeat-password\"\n        {...registerPasswordRepeat}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPasswordRepeat.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        Sign Up\n      </Button>\n    </form>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email')),\n    password: yupString().required(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    ...(!props.noPasswordRepeat && {\n      passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), \"\", null], t('Passwords do not match')).required(t('Please repeat your password'))\n    })\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email, password } = data;\n      const result = await app.signUpWithCredential({ email, password });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('password');\n  const registerPasswordRepeat = register('passwordRepeat');\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">Email</Label>\n      <Input id=\"email\" type=\"email\" {...register('email')}/>\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">Password</Label>\n      <PasswordInput\n        id=\"password\"\n        {...registerPassword}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPassword.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n      {\n        !props.noPasswordRepeat && (\n          <>\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat Password</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              {...registerPasswordRepeat}\n              onChange={(e) => {\n              clearErrors('password');\n              clearErrors('passwordRepeat');\n              runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n          </>\n        )\n      }\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        Sign Up\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,sBAAiC;AACjC,2BAAqC;AACrC,sBAA8D;AAC9D,sBAAoD;AACpD,mBAAyB;AACzB,6BAAwB;AACxB,UAAqB;AACrB,eAA4B;AAC5B,0BAA+B;AAC/B,0BAAgC;AAmD1B;AAjDC,SAAS,iBAAiB,OAAuC;AACtE,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,QAAM,aAAS,gCAAU;AAAA,IACvB,WAAO,gCAAU,EAAE,MAAM,EAAE,4BAA4B,CAAC,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,IAC/F,cAAU,gCAAU,EAAE,SAAS,EAAE,4BAA4B,CAAC,EAAE,KAAK;AAAA,MACnE,MAAM;AAAA,MACN,MAAM,CAAC,OAAO,QAAQ;AACpB,cAAM,YAAQ,kCAAiB,KAAK;AACpC,YAAI,OAAO;AACT,iBAAO,IAAI,YAAY,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,QACnD,OAAO;AACL,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACD,GAAI,CAAC,MAAM,oBAAoB;AAAA,MAC7B,oBAAgB,gCAAU,EAAE,SAAS,EAAE,MAAM,CAAK,QAAI,UAAU,GAAG,IAAI,IAAI,GAAG,EAAE,wBAAwB,CAAC,EAAE,SAAS,EAAE,6BAA6B,CAAC;AAAA,IACtJ;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,QAAI,gCAAQ;AAAA,IACvF,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,SAAS,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AACjE,UAAI,OAAO,WAAW,SAAS;AAC7B,iBAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,MAAM,QAAQ,CAAC;AAAA,MACrE;AAAA,IACF,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,UAAU;AAC5C,QAAM,yBAAyB,SAAS,gBAAgB;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,WAAK,4CAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,oDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAO,mBAAK;AAAA,QAC7C,4CAAC,yBAAM,IAAG,SAAQ,MAAK,SAAS,GAAG,SAAS,OAAO,GAAE;AAAA,QACrD,4CAAC,uCAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,yBAAM,SAAQ,YAAW,WAAU,aAAY,sBAAQ;AAAA,QACxD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG;AAAA,YACJ,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAC5B,qDAAkB,iBAAiB,SAAS,CAAC,CAAC;AAAA,YAChD;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE3D,CAAC,MAAM,oBACL,4EACE;AAAA,sDAAC,yBAAM,SAAQ,mBAAkB,WAAU,aAAY,6BAAe;AAAA,UACtE;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACF,GAAG;AAAA,cACJ,UAAU,CAAC,MAAM;AACjB,4BAAY,UAAU;AACtB,4BAAY,gBAAgB;AAC5B,uDAAkB,uBAAuB,SAAS,CAAC,CAAC;AAAA,cACpD;AAAA;AAAA,UACF;AAAA,UACA,4CAAC,uCAAgB,MAAM,OAAO,gBAAgB,SAAS,SAAS,GAAG;AAAA,WACrE;AAAA,QAIJ,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,qBAEzD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -50,7 +50,7 @@ function Items(props) {
       size: "sm",
       className: (0, import_stack_ui.cn)(
         props.selectedIndex === index && "bg-muted",
-        "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2"
+        "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left"
       ),
       onClick: () => {
         if (item.subpath) {
@@ -67,12 +67,12 @@ function Items(props) {
 }
 function DesktopLayout(props) {
   const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack-scope flex w-full h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-[200px] border-r flex-col items-stretch gap-2 p-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack-scope flex w-full h-full max-w-full relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto", children: [
       props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Items, { items: props.items, basePath: props.basePath, selectedIndex: props.selectedIndex })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 flex flex-col items-center gap-4 py-2 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col max-w-[800px] w-[800px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 w-0 flex justify-center gap-4 py-2 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col max-w-[800px] w-[800px]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 mb-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", className: "font-semibold", children: selectedItem.title }),
         selectedItem.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: selectedItem.description })
@@ -93,7 +93,7 @@ function MobileLayout(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col gap-4 py-2 px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", children: selectedItem.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", className: "font-semibold", children: selectedItem.title }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.Button,
             {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { LucideIcon, XIcon } from 'lucide-react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport React, { ReactNode } from 'react';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  subpath?: string,\n  icon?: LucideIcon,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, basePath: string, className?: string }) {\n  const pathname = usePathname();\n  const selectedIndex = props.items.findIndex(item => item.subpath && (props.basePath + item.subpath === pathname));\n  const router = useRouter();\n  if (pathname !== props.basePath && selectedIndex === -1) {\n    router.push(props.basePath);\n  }\n\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], basePath: string, selectedIndex: number }) {\n  const router = useRouter();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2\",\n        )}\n        onClick={() => {\n          if (item.subpath) {\n            router.push(props.basePath + item.subpath);\n          }\n        }}\n      >\n        {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-full\">\n      <div className=\"flex w-[200px] border-r flex-col items-stretch gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 flex flex-col items-center gap-4 py-2 px-4\">\n        <div className='flex flex-col max-w-[800px] w-[800px]'>\n          <div className='mt-4 mb-6'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n          </div>\n          <div className='flex-1'>\n            {selectedItem.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const router = useRouter();\n\n  if (props.selectedIndex === -1) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4'>{selectedItem.title}</Typography>\n            <Button\n              variant='ghost'\n              size='icon'\n              onClick={() => { router.push(props.basePath); }}\n            >\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAuC;AACvC,0BAAkC;AAClC,wBAAuC;AAsBnC;AATG,SAAS,cAAc,OAA0F;AACtH,QAAM,eAAW,+BAAY;AAC7B,QAAM,gBAAgB,MAAM,MAAM,UAAU,UAAQ,KAAK,WAAY,MAAM,WAAW,KAAK,YAAY,QAAS;AAChH,QAAM,aAAS,6BAAU;AACzB,MAAI,aAAa,MAAM,YAAY,kBAAkB,IAAI;AACvD,WAAO,KAAK,MAAM,QAAQ;AAAA,EAC5B;AAEA,SACE,4EACE;AAAA,gDAAC,SAAI,eAAW,oBAAG,qCAAqC,MAAM,SAAS,GACrE,sDAAC,iBAAc,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,UAAU,MAAM,UAAU,GACjH;AAAA,IACA,4CAAC,SAAI,eAAW,oBAAG,gCAAgC,MAAM,SAAS,GAChE,sDAAC,gBAAa,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,eAA8B,UAAU,MAAM,UAAU,GAChH;AAAA,KACF;AAEJ;AAEA,SAAS,MAAM,OAA0E;AACvF,QAAM,aAAS,6BAAU;AAEzB,SAAO,MAAM,MAAM,IAAI,CAAC,MAAM,UAC5B,KAAK,SAAS,SACZ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAW;AAAA,QACT,MAAM,kBAAkB,SAAS;AAAA,QACjC;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,YAAI,KAAK,SAAS;AAChB,iBAAO,KAAK,MAAM,WAAW,KAAK,OAAO;AAAA,QAC3C;AAAA,MACF;AAAA,MAEC;AAAA,aAAK,QAAQ,4CAAC,KAAK,MAAL,EAAU,WAAU,gBAAe;AAAA,QACjD,KAAK;AAAA;AAAA;AAAA,IAdD;AAAA,EAeP,IACA,4CAAC,8BACE,eAAK,SADS,KAEjB,CACH;AAEH;AAEA,SAAS,cAAc,OAA6F;AAClH,QAAM,eAAe,MAAM,MAAM,MAAM,kBAAkB,KAAK,IAAI,MAAM,aAAa;AAErF,SACE,6CAAC,SAAI,WAAU,kCACb;AAAA,iDAAC,SAAI,WAAU,4DACZ;AAAA,YAAM,SAAS,4CAAC,SAAI,WAAU,aAC7B,sDAAC,8BAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,4CAAC,SAAM,OAAO,MAAM,OAAO,UAAU,MAAM,UAAU,eAAe,MAAM,eAAe;AAAA,OAC3F;AAAA,IACA,4CAAC,SAAI,WAAU,qDACb,uDAAC,SAAI,WAAU,yCACb;AAAA,mDAAC,SAAI,WAAU,aACb;AAAA,oDAAC,8BAAW,MAAK,MAAK,WAAU,iBAAiB,uBAAa,OAAM;AAAA,QACnE,aAAa,eAAe,4CAAC,8BAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,4CAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,OAA6F;AACjH,QAAM,eAAe,MAAM,MAAM,MAAM,aAAa;AACpD,QAAM,aAAS,6BAAU;AAEzB,MAAI,MAAM,kBAAkB,IAAI;AAC9B,WACE,6CAAC,SAAI,WAAU,2BACZ;AAAA,YAAM,SAAS,4CAAC,SAAI,WAAU,aAC7B,sDAAC,8BAAW,MAAK,MAAK,WAAU,0DAA0D,gBAAM,OAAM,GACxG;AAAA,MAEA,4CAAC,SAAM,OAAO,MAAM,OAAO,UAAU,MAAM,UAAU,eAAe,MAAM,eAAe;AAAA,OAC3F;AAAA,EAEJ,OAAO;AACL,WACE,6CAAC,SAAI,WAAU,wCACb;AAAA,mDAAC,SAAI,WAAU,iBACb;AAAA,qDAAC,SAAI,WAAU,wBACb;AAAA,sDAAC,8BAAW,MAAK,MAAM,uBAAa,OAAM;AAAA,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM;AAAE,uBAAO,KAAK,MAAM,QAAQ;AAAA,cAAG;AAAA,cAE9C,sDAAC,6BAAM,WAAU,WAAU;AAAA;AAAA,UAC7B;AAAA,WACF;AAAA,QACC,aAAa,eAAe,4CAAC,8BAAW,SAAQ,aAAY,MAAK,SAAS,uBAAa,aAAY;AAAA,SACtG;AAAA,MACA,4CAAC,SAAI,WAAU,UACZ,uBAAa,SAChB;AAAA,OACF;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { LucideIcon, XIcon } from 'lucide-react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport React, { ReactNode } from 'react';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  subpath?: string,\n  icon?: LucideIcon,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, basePath: string, className?: string }) {\n  const pathname = usePathname();\n  const selectedIndex = props.items.findIndex(item => item.subpath && (props.basePath + item.subpath === pathname));\n  const router = useRouter();\n  if (pathname !== props.basePath && selectedIndex === -1) {\n    router.push(props.basePath);\n  }\n\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], basePath: string, selectedIndex: number }) {\n  const router = useRouter();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left\",\n        )}\n        onClick={() => {\n          if (item.subpath) {\n            router.push(props.basePath + item.subpath);\n          }\n        }}\n      >\n        {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-full max-w-full relative\">\n      <div className=\"flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 w-0 flex justify-center gap-4 py-2 px-4\">\n        <div className='flex flex-col max-w-[800px] w-[800px]'>\n          <div className='mt-4 mb-6'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n          </div>\n          <div className='flex-1'>\n            {selectedItem.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const router = useRouter();\n\n  if (props.selectedIndex === -1) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            <Button\n              variant='ghost'\n              size='icon'\n              onClick={() => { router.push(props.basePath); }}\n            >\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","names":[]}

package/dist/components/magic-link-sign-in.js

@@ -26,6 +26,7 @@ __export(magic_link_sign_in_exports, {
 });
 module.exports = __toCommonJS(magic_link_sign_in_exports);
 var import_yup = require("@hookform/resolvers/yup");
+var import_stack_shared = require("@stackframe/stack-shared");
 var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
@@ -35,53 +36,104 @@ var import__ = require("..");
 var import_translations = require("../lib/translations");
 var import_form_warning = require("./elements/form-warning");
 var import_jsx_runtime = require("react/jsx-runtime");
+function OTP(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const [otp, setOtp] = (0, import_react.useState)("");
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const stackApp = (0, import__.useStackApp)();
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (otp.length === 6 && !submitting) {
+      setSubmitting(true);
+      stackApp.signInWithMagicLink(otp + props.nonce).then((result) => {
+        if (result.status === "error") {
+          if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeError) {
+            setError(t("Invalid code"));
+          } else if (result.error instanceof import_stack_shared.KnownErrors.InvalidTotpCode) {
+            setError(t("Invalid TOTP code"));
+          } else {
+            throw result.error;
+          }
+        }
+      }).catch((e) => console.error(e)).finally(() => {
+        setSubmitting(false);
+        setOtp("");
+      });
+    }
+    if (otp.length !== 0 && otp.length !== 6) {
+      setError(null);
+    }
+  }, [otp, submitting]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch stack-scope", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "w-full flex flex-col items-center mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "mb-2", children: t("Enter the code from your email") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.InputOTP,
+        {
+          maxLength: 6,
+          pattern: "^[a-zA-Z0-9]+$",
+          value: otp,
+          onChange: (value) => setOtp(value.toUpperCase()),
+          disabled: submitting,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.InputOTPGroup, { children: [0, 1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.InputOTPSlot, { index, size: "lg" }, index)) })
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: error })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "link", onClick: props.onBack, className: "underline", children: t("Cancel") })
+  ] });
+}
 function MagicLinkSignIn() {
   const { t } = (0, import_translations.useTranslation)();
+  const app = (0, import__.useStackApp)();
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [nonce, setNonce] = (0, import_react.useState)(null);
   const schema = (0, import_schema_fields.yupObject)({
     email: (0, import_schema_fields.yupString)().email(t("Please enter a valid email")).required(t("Please enter your email"))
   });
-  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+  const { register, handleSubmit, setError, formState: { errors } } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(schema)
   });
-  const [sent, setSent] = (0, import_react.useState)(false);
-  const app = (0, import__.useStackApp)();
-  const [loading, setLoading] = (0, import_react.useState)(false);
   const onSubmit = async (data) => {
     setLoading(true);
     try {
       const { email } = data;
-      const error = await app.sendMagicLinkEmail(email);
-      if (error) {
-        setError("email", { type: "manual", message: error.message });
+      const result = await app.sendMagicLinkEmail(email);
+      if (result.status === "error") {
+        setError("email", { type: "manual", message: result.error.message });
         return;
+      } else {
+        setNonce(result.data.nonce);
       }
-      setSent(true);
     } finally {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "form",
-    {
-      className: "flex flex-col items-stretch stack-scope",
-      onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
-      noValidate: true,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "email", className: "mb-1", children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_stack_ui.Input,
-          {
-            id: "email",
-            type: "email",
-            ...register("email"),
-            disabled: sent
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email?.message?.toString() }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { disabled: sent, type: "submit", className: "mt-6", loading, children: sent ? t("Email sent!") : t("Send magic link") })
-      ]
-    }
-  );
+  if (nonce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OTP, { nonce, onBack: () => setNonce(null) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        className: "flex flex-col items-stretch stack-scope",
+        onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "email", className: "mb-1", children: t("Email") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Input,
+            {
+              id: "email",
+              type: "email",
+              ...register("email")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: t("Send email") })
+        ]
+      }
+    );
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/magic-link-sign-in.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const [sent, setSent] = useState(false);\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const error = await app.sendMagicLinkEmail(email);\n      if (error) {\n        setError('email', { type: 'manual', message: error.message });\n        return;\n      }\n    setSent(true);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        disabled={sent}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button disabled={sent} type=\"submit\" className=\"mt-6\" loading={loading}>\n        {sent ? t('Email sent!') : t('Send magic link')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,2BAAqC;AACrC,sBAA2C;AAC3C,sBAAqC;AACrC,mBAAyB;AACzB,6BAAwB;AAExB,eAA4B;AAC5B,0BAA+B;AAC/B,0BAAgC;AAgC5B;AA9BG,SAAS,kBAAkB;AAChC,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,QAAM,aAAS,gCAAU;AAAA,IACvB,WAAO,gCAAU,EAAE,MAAM,EAAE,4BAA4B,CAAC,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,EACjG,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,QAAI,gCAAQ;AAAA,IACvF,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,UAAM,sBAAY;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,QAAQ,MAAM,IAAI,mBAAmB,KAAK;AAChD,UAAI,OAAO;AACT,iBAAS,SAAS,EAAE,MAAM,UAAU,SAAS,MAAM,QAAQ,CAAC;AAC5D;AAAA,MACF;AACF,cAAQ,IAAI;AAAA,IACZ,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,WAAK,4CAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,oDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAO,mBAAK;AAAA,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,4CAAC,uCAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,0BAAO,UAAU,MAAM,MAAK,UAAS,WAAU,QAAO,SACpD,iBAAO,EAAE,aAAa,IAAI,EAAE,iBAAiB,GAChD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nfunction OTP(props: {\n  onBack: () => void,\n  nonce: string,\n}) {\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>('');\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const stackApp = useStackApp();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      setSubmitting(true);\n      stackApp.signInWithMagicLink(otp + props.nonce)\n        .then(result => {\n          if (result.status === 'error') {\n            if (result.error instanceof KnownErrors.VerificationCodeError) {\n              setError(t(\"Invalid code\"));\n            } else if (result.error instanceof KnownErrors.InvalidTotpCode) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              throw result.error;\n            }\n          }\n        })\n        .catch(e => console.error(e))\n        .finally(() => {\n          setSubmitting(false);\n          setOtp('');\n        });\n    }\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form className='w-full flex flex-col items-center mb-2'>\n        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>\n        <InputOTP\n          maxLength={6}\n          pattern={\"^[a-zA-Z0-9]+$\"}\n          value={otp}\n          onChange={value => setOtp(value.toUpperCase())}\n          disabled={submitting}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot key={index} index={index} size='lg' />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n        {error && <FormWarningText text={error} />}\n      </form>\n      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>\n    </div>\n  );\n}\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n  const [nonce, setNonce] = useState<string | null>(null);\n\n  const schema = yupObject({\n    email: yupString().email(t('Please enter a valid email')).required(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const result = await app.sendMagicLinkEmail(email);\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n        return;\n      } else {\n        setNonce(result.data.nonce);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (nonce) {\n    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;\n  } else {\n    return (\n      <form\n        className=\"flex flex-col items-stretch stack-scope\"\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          {...register('email')}\n        />\n        <FormWarningText text={errors.email?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          {t('Send email')}\n        </Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components/message-cards/predefined-message-card.js

@@ -28,12 +28,14 @@ module.exports = __toCommonJS(predefined_message_card_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
 var import__ = require("../..");
 var import_message_card = require("./message-card");
+var import_translations = require("../../lib/translations");
 var import_jsx_runtime = require("react/jsx-runtime");
 function PredefinedMessageCard({
   type,
   fullPage = false
 }) {
   const stackApp = (0, import__.useStackApp)();
+  const { t } = (0, import_translations.useTranslation)();
   let title;
   let message = null;
   let primaryButton = null;
@@ -42,53 +44,53 @@ function PredefinedMessageCard({
   let secondaryAction = null;
   switch (type) {
     case "signedIn": {
-      title = "You are already signed in";
+      title = t("You are already signed in");
       primaryAction = () => stackApp.redirectToHome();
       secondaryAction = () => stackApp.redirectToSignOut();
-      primaryButton = "Go to home";
-      secondaryButton = "Sign out";
+      primaryButton = t("Go to home");
+      secondaryButton = t("Sign out");
       break;
     }
     case "signedOut": {
-      title = "You are not currently signed in.";
+      title = t("You are not currently signed in.");
       primaryAction = () => stackApp.redirectToSignIn();
-      primaryButton = "Sign in";
+      primaryButton = t("Sign in");
       break;
     }
     case "signUpDisabled": {
-      title = "Sign up for new users is not enabled at the moment.";
+      title = t("Sign up for new users is not enabled at the moment.");
       primaryAction = () => stackApp.redirectToHome();
       secondaryAction = () => stackApp.redirectToSignIn();
-      primaryButton = "Go to home";
-      secondaryButton = "Sign in";
+      primaryButton = t("Go to home");
+      secondaryButton = t("Sign in");
       break;
     }
     case "emailSent": {
-      title = "Email sent!";
-      message = "If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.";
+      title = t("Email sent!");
+      message = t("If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.");
       primaryAction = () => stackApp.redirectToHome();
-      primaryButton = "Go to home";
+      primaryButton = t("Go to home");
       break;
     }
     case "passwordReset": {
-      title = "Password reset successfully!";
-      message = "Your password has been reset. You can now sign in with your new password.";
+      title = t("Password reset successfully!");
+      message = t("Your password has been reset. You can now sign in with your new password.");
       primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
-      primaryButton = "Sign in";
+      primaryButton = t("Sign in");
       break;
     }
     case "emailVerified": {
-      title = "Email verified!";
-      message = "Your have successfully verified your email.";
+      title = t("Email verified!");
+      message = t("Your have successfully verified your email.");
       primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
-      primaryButton = "Sign in";
+      primaryButton = t("Sign in");
       break;
     }
     case "unknownError": {
-      title = "An unknown error occurred";
-      message = "Please try again and if the problem persists, contact support.";
+      title = t("An unknown error occurred");
+      message = t("Please try again and if the problem persists, contact support.");
       primaryAction = () => stackApp.redirectToHome();
-      primaryButton = "Go to home";
+      primaryButton = t("Go to home");
       break;
     }
   }

package/dist/components/message-cards/predefined-message-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp } from \"../..\";\nimport { MessageCard } from \"./message-card\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = \"You are already signed in\";\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = \"Go to home\";\n      secondaryButton = \"Sign out\";\n      break;\n    }\n    case 'signedOut': {\n      title = \"You are not currently signed in.\";\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Sign in\";\n      break;\n    }\n    case 'signUpDisabled': {\n      title = \"Sign up for new users is not enabled at the moment.\";\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to home\";\n      secondaryButton = \"Sign in\";\n      break;\n    }\n    case 'emailSent': {\n      title = \"Email sent!\";\n      message = 'If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.';\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = \"Go to home\";\n      break;\n    }\n    case 'passwordReset': {\n      title = \"Password reset successfully!\";\n      message = 'Your password has been reset. You can now sign in with your new password.';\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = \"Sign in\";\n      break;\n    }\n    case 'emailVerified': {\n      title = \"Email verified!\";\n      message = 'Your have successfully verified your email.';\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = \"Sign in\";\n      break;\n    }\n    case 'unknownError': {\n      title = \"An unknown error occurred\";\n      message = 'Please try again and if the problem persists, contact support.';\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = \"Go to home\";\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAA4B;AAC5B,0BAA4B;AAgFV;AA9EX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ;AACR,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB;AAChB,wBAAkB;AAClB;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AACR,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ;AACR,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB;AAChB,wBAAkB;AAClB;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB;AAChB;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailVerified': {\n      title = t(\"Email verified!\");\n      message = t(\"Your have successfully verified your email.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAA4B;AAC5B,0BAA4B;AAC5B,0BAA+B;AAiFb;AA/EX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,iBAAiB;AAC3B,gBAAU,EAAE,6CAA6C;AACzD,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/components/oauth-button.js

@@ -150,6 +150,9 @@ function AppleIcon({ iconSize: iconSize2 }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z" })
   ] });
 }
+function XIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-label": "X", viewBox: "0 0 1200 1227", width: iconSize2, height: iconSize2, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#FFFFFF", d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" }) });
+}
 var changeColor = (c, value) => {
   if (c.isLight()) {
     value = -value;
@@ -260,6 +263,15 @@ function OAuthButton({
       };
       break;
     }
+    case "x": {
+      style = {
+        backgroundColor: "#000",
+        textColor: "#fff",
+        name: "X",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { iconSize })
+      };
+      break;
+    }
     default: {
       style = {
         name: provider,
@@ -286,10 +298,7 @@ function OAuthButton({
         className: `stack-oauth-button-${styleId}`,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center w-full gap-4", children: [
           style.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex-1", children: [
-            type === "sign-up" ? t("Sign up with ") : t("Sign in with "),
-            style.name
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1", children: type === "sign-up" ? t("Sign up with {provider}", { provider: style.name }) : t("Sign in with {provider}", { provider: style.name }) })
         ] })
       }
     )