@stackframe/stack 2.4.28 → 2.5.1

package/dist/esm/components/{credential-sign-up.js → credential-sign-up-form.js}

@@ -1,16 +1,16 @@
 "use client";
 "use client";
 
-// src/components/credential-sign-up.tsx
+// src/components/credential-sign-up-form.tsx
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import PasswordField from "./password-field";
-import FormWarningText from "./form-warning";
+import { FormWarningText } from "./elements/form-warning";
 import { useStackApp } from "..";
-import { Label, Input, Button } from "../components-core";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { Button, Input, Label, PasswordInput } from "@stackframe/stack-ui";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var schema = yup.object().shape({
   email: yup.string().email("Please enter a valid email").required("Please enter your email"),
@@ -27,24 +27,30 @@ var schema = yup.object().shape({
   }),
   passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
 });
-function CredentialSignUp() {
+function CredentialSignUpForm() {
   const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
     resolver: yupResolver(schema)
   });
   const app = useStackApp();
+  const [loading, setLoading] = useState(false);
   const onSubmit = async (data) => {
-    const { email, password } = data;
-    const error = await app.signUpWithCredential({ email, password });
-    setError("email", { type: "manual", message: error?.message });
+    setLoading(true);
+    try {
+      const { email, password } = data;
+      const error = await app.signUpWithCredential({ email, password });
+      setError("email", { type: "manual", message: error?.message });
+    } finally {
+      setLoading(false);
+    }
   };
   return /* @__PURE__ */ jsxs(
     "form",
     {
-      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      className: "flex flex-col items-stretch stack-scope",
       onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
       noValidate: true,
       children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: "Email" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -54,9 +60,9 @@ function CredentialSignUp() {
           }
         ),
         /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "password", className: "mt-4 mb-1", children: "Password" }),
         /* @__PURE__ */ jsx(
-          PasswordField,
+          PasswordInput,
           {
             id: "password",
             ...register("password"),
@@ -67,9 +73,9 @@ function CredentialSignUp() {
           }
         ),
         /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat Password" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat Password" }),
         /* @__PURE__ */ jsx(
-          PasswordField,
+          PasswordInput,
           {
             id: "repeat-password",
             ...register("passwordRepeat"),
@@ -80,12 +86,12 @@ function CredentialSignUp() {
           }
         ),
         /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", style: { marginTop: "1.5rem" }, children: "Sign Up" })
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", children: "Sign Up" })
       ]
     }
   );
 }
 export {
-  CredentialSignUp as default
+  CredentialSignUpForm
 };
-//# sourceMappingURL=credential-sign-up.js.map
+//# sourceMappingURL=credential-sign-up-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/credential-sign-up-form.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email'),\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport function CredentialSignUpForm() {\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  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      />\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        {...register('password')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\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        {...register('passwordRepeat')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n        }}\n      />\n      <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n      \n      <Button type=\"submit\" className=\"mt-6\">\n        Sign Up\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,QAAQ,OAAO,OAAO,qBAAqB;AACpD,SAAS,gBAAgB;AAqCrB,SAKE,KALF;AAnCJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAAA,EAC1F,UAAc,WAAO,EAAE,SAAS,4BAA4B,EAAE,KAAK;AAAA,IACjE,MAAM;AAAA,IACN,MAAM,CAAC,OAAO,QAAQ;AACpB,YAAM,QAAQ,iBAAiB,KAAK;AACpC,UAAI,OAAO;AACT,eAAO,IAAI,YAAY,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,MACnD,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,gBAAoB,WAAO,EAAE,SAAS,EAAE,MAAM,CAAK,QAAI,UAAU,GAAG,IAAI,GAAG,wBAAwB,EAAE,SAAS,6BAA6B;AAC7I,CAAC;AAEM,SAAS,uBAAuB;AACrC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IACvF,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,MAAM,YAAY;AACxB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAClE,eAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,IAC7D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,WAAU,QAAO,mBAAK;AAAA,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,SAAM,SAAQ,YAAW,WAAU,aAAY,sBAAQ;AAAA,QACxD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA,YACvB,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,oBAAC,SAAM,SAAQ,mBAAkB,WAAU,aAAY,6BAAe;AAAA,QACtE;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,gBAAgB;AAAA,YAC7B,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,gBAAgB,SAAS,SAAS,GAAG;AAAA,QAEnE,oBAAC,UAAO,MAAK,UAAS,WAAU,QAAO,qBAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components/elements/form-warning.js

@@ -0,0 +1,15 @@
+"use client";
+"use client";
+
+// src/components/elements/form-warning.tsx
+import { jsx } from "react/jsx-runtime";
+function FormWarningText({ text }) {
+  if (!text) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "text-red-500 text-sm mt-1", children: text });
+}
+export {
+  FormWarningText
+};
+//# sourceMappingURL=form-warning.js.map

package/dist/esm/components/elements/form-warning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/form-warning.tsx"],"sourcesContent":["'use client';\n\nexport function FormWarningText({ text }: { text?: string }) {\n  if (!text) {\n    return null;\n  }\n  return (\n    <div className=\"text-red-500 text-sm mt-1\">\n      {text}\n    </div>\n  );\n}\n"],"mappings":";;;AAOI;AALG,SAAS,gBAAgB,EAAE,KAAK,GAAsB;AAC3D,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,SACE,oBAAC,SAAI,WAAU,6BACZ,gBACH;AAEJ;","names":[]}

package/dist/esm/components/{maybe-full-page.js → elements/maybe-full-page.js}

@@ -1,9 +1,10 @@
 "use client";
 "use client";
 
-// src/components/maybe-full-page.tsx
-import { Container } from "../components-core";
-import { useEffect, useId } from "react";
+// src/components/elements/maybe-full-page.tsx
+import { Container } from "@stackframe/stack-ui";
+import { useId } from "react";
+import { SsrScript } from "./ssr-layout-effect";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function MaybeFullPage({
   children,
@@ -20,9 +21,6 @@ function MaybeFullPage({
     const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;
     el.style.minHeight = \`calc(100vh - \${offset}px)\`;
   })(${JSON.stringify([id])})`;
-  useEffect(() => {
-    (0, eval)(scriptString);
-  }, []);
   if (fullPage) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -37,18 +35,17 @@ function MaybeFullPage({
             alignItems: "center",
             justifyContent: "center"
           },
+          className: "stack-scope",
           children: /* @__PURE__ */ jsx(Container, { size: 380, style: { padding: "1rem 1rem" }, children })
         }
       ),
-      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: {
-        __html: scriptString
-      } })
+      /* @__PURE__ */ jsx(SsrScript, { script: scriptString })
     ] });
   } else {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
 }
 export {
-  MaybeFullPage as default
+  MaybeFullPage
 };
 //# sourceMappingURL=maybe-full-page.js.map

package/dist/esm/components/elements/maybe-full-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/maybe-full-page.tsx"],"sourcesContent":["\"use client\";\n\nimport { Container } from \"@stackframe/stack-ui\";\nimport React, { useId } from \"react\";\nimport { SsrScript } from \"./ssr-layout-effect\";\n\nexport function MaybeFullPage({ \n  children, \n  fullPage=true\n}: { \n  children: React.ReactNode, \n  fullPage?: boolean, \n}) {\n  const uniqueId = useId();\n  const id = `stack-card-frame-${uniqueId}`;\n\n  const scriptString = `(([id]) => {\n    const el = document.getElementById(id);\n    if (!el) {\n      // component is not full page\n      return;\n    }\n    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;\n    el.style.minHeight = \\`calc(100vh - \\${offset}px)\\`;\n  })(${JSON.stringify([id])})`;\n\n  if (fullPage) {\n    return (\n      <>\n        <div \n          id={id}\n          suppressHydrationWarning\n          style={{ \n            minHeight: '100vh',\n            alignSelf: 'stretch',\n            display: 'flex', \n            alignItems: 'center', \n            justifyContent: 'center',\n          }}\n          className=\"stack-scope\"\n        >\n          <Container size={380} style={{ padding: '1rem 1rem' }}>\n            {children}\n          </Container>\n        </div>\n        <SsrScript script={scriptString} />\n      </>\n    );\n  } else {\n    return <>\n      {children}\n    </>;\n  }\n  \n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,SAAgB,aAAa;AAC7B,SAAS,iBAAiB;AAwBpB,mBAaI,KAbJ;AAtBC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,MAAM;AACvB,QAAM,KAAK,oBAAoB,QAAQ;AAEvC,QAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAQhB,KAAK,UAAU,CAAC,EAAE,CAAC,CAAC;AAEzB,MAAI,UAAU;AACZ,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,0BAAwB;AAAA,UACxB,OAAO;AAAA,YACL,WAAW;AAAA,YACX,WAAW;AAAA,YACX,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,UAClB;AAAA,UACA,WAAU;AAAA,UAEV,8BAAC,aAAU,MAAM,KAAK,OAAO,EAAE,SAAS,YAAY,GACjD,UACH;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,aAAU,QAAQ,cAAc;AAAA,OACnC;AAAA,EAEJ,OAAO;AACL,WAAO,gCACJ,UACH;AAAA,EACF;AAEF;","names":[]}

package/dist/esm/components/elements/separator-with-text.js

@@ -0,0 +1,17 @@
+"use client";
+"use client";
+
+// src/components/elements/separator-with-text.tsx
+import { Separator } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorWithText({ text }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center my-6 stack-scope", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Separator, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "mx-2 text-sm text-zinc-500", children: text }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Separator, {}) })
+  ] });
+}
+export {
+  SeparatorWithText
+};
+//# sourceMappingURL=separator-with-text.js.map

package/dist/esm/components/elements/separator-with-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/separator-with-text.tsx"],"sourcesContent":["'use client';\n\nimport { Separator } from \"@stackframe/stack-ui\";\n\nexport function SeparatorWithText({ text }: { text: string }) {\n  return (\n    <div className=\"flex items-center justify-center my-6 stack-scope\">\n      <div className=\"flex-1\">\n        <Separator />\n      </div>\n      <div className=\"mx-2 text-sm text-zinc-500\">{text}</div>\n      <div className=\"flex-1\">\n        <Separator />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAItB,SAEI,KAFJ;AAFG,SAAS,kBAAkB,EAAE,KAAK,GAAqB;AAC5D,SACE,qBAAC,SAAI,WAAU,qDACb;AAAA,wBAAC,SAAI,WAAU,UACb,8BAAC,aAAU,GACb;AAAA,IACA,oBAAC,SAAI,WAAU,8BAA8B,gBAAK;AAAA,IAClD,oBAAC,SAAI,WAAU,UACb,8BAAC,aAAU,GACb;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/elements/ssr-layout-effect.js

@@ -0,0 +1,16 @@
+"use client";
+"use client";
+
+// src/components/elements/ssr-layout-effect.tsx
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+function SsrScript(props) {
+  useLayoutEffect(() => {
+    (0, eval)(props.script);
+  }, []);
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: props.script } });
+}
+export {
+  SsrScript
+};
+//# sourceMappingURL=ssr-layout-effect.js.map

package/dist/esm/components/elements/ssr-layout-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/ssr-layout-effect.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\n\nexport function SsrScript(props: { script: string }) {\n  useLayoutEffect(() => {\n    // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense\n    // As a workaround, we run the script in the <script> tag again after the first render\n    // Note that we do an indirect eval as described here: https://esbuild.github.io/content-types/#direct-eval\n    (0, eval)(props.script);\n  }, []);\n\n  return <script dangerouslySetInnerHTML={{ __html: props.script }} />;\n}\n"],"mappings":";;;AACA,SAAS,uBAAuB;AAUvB;AARF,SAAS,UAAU,OAA2B;AACnD,kBAAgB,MAAM;AAIpB,KAAC,GAAG,MAAM,MAAM,MAAM;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SAAO,oBAAC,YAAO,yBAAyB,EAAE,QAAQ,MAAM,OAAO,GAAG;AACpE;","names":[]}

package/dist/esm/components/elements/user-avatar.js

@@ -0,0 +1,15 @@
+// src/components/elements/user-avatar.tsx
+import { UserRound } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function UserAvatar(props) {
+  const user = props.user;
+  return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size || "34px", width: props.size || "34px" }, children: [
+    /* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
+    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(UserRound, { className: "h-5 w-5 text-zinc-500" }) })
+  ] });
+}
+export {
+  UserAvatar
+};
+//# sourceMappingURL=user-avatar.js.map

package/dist/esm/components/elements/user-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAE1B,SAAS,QAAQ,gBAAgB,mBAAmB;AAKhD,SACE,KADF;AAHG,SAAS,WAAW,OAA6C;AACtE,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,aAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/{forgot-password.js → forgot-password-form.js}

@@ -1,36 +1,43 @@
 "use client";
 "use client";
 
-// src/components/forgot-password.tsx
+// src/components/forgot-password-form.tsx
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import FormWarningText from "./form-warning";
+import { FormWarningText } from "./elements/form-warning";
 import { useStackApp } from "..";
-import { Button, Input, Label } from "../components-core";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label } from "@stackframe/stack-ui";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var schema = yup.object().shape({
   email: yup.string().email("Please enter a valid email").required("Please enter your email")
 });
-function ForgotPassword({ onSent }) {
+function ForgotPasswordForm({ onSent }) {
   const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
     resolver: yupResolver(schema)
   });
   const stackApp = useStackApp();
+  const [loading, setLoading] = useState(false);
   const onSubmit = async (data) => {
-    const { email } = data;
-    await stackApp.sendForgotPasswordEmail(email);
-    onSent?.();
+    setLoading(true);
+    try {
+      const { email } = data;
+      await stackApp.sendForgotPasswordEmail(email);
+      onSent?.();
+    } finally {
+      setLoading(false);
+    }
   };
   return /* @__PURE__ */ jsxs(
     "form",
     {
-      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      className: "flex flex-col items-stretch stack-scope",
       onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
       noValidate: true,
       children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Your Email" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: "Your Email" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -41,19 +48,12 @@ function ForgotPassword({ onSent }) {
           }
         ),
         /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "submit",
-            style: { marginTop: "1.5rem" },
-            children: "Send Email"
-          }
-        )
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Send Email" })
       ]
     }
   );
 }
 export {
-  ForgotPassword as default
+  ForgotPasswordForm
 };
-//# sourceMappingURL=forgot-password.js.map
+//# sourceMappingURL=forgot-password-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forgot-password-form.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport function ForgotPasswordForm({ onSent }: { onSent?: () => void }) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = 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      await stackApp.sendForgotPasswordEmail(email);\n    onSent?.();\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\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        onChange={() => clearErrors('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        Send Email\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,OAAO,aAAa;AACrC,SAAS,gBAAgB;AAyBrB,SAKE,KALF;AAvBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEM,SAAS,mBAAmB,EAAE,OAAO,GAA4B;AACtE,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IAC7E,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,SAAS,wBAAwB,KAAK;AAC9C,eAAS;AAAA,IACT,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,WAAU,QAAO,wBAAU;AAAA,QAClD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU,MAAM,YAAY,OAAO;AAAA;AAAA,QACrC;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,UAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,wBAEzD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components/{magic-link-sign-in.js → magic-link-sign-in-form.js}

@@ -1,42 +1,48 @@
 "use client";
 "use client";
 
-// src/components/magic-link-sign-in.tsx
+// src/components/magic-link-sign-in-form.tsx
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import FormWarningText from "./form-warning";
+import { FormWarningText } from "./elements/form-warning";
 import { useStackApp } from "..";
-import { Button, Input, Label } from "../components-core";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var schema = yup.object().shape({
   email: yup.string().email("Please enter a valid email").required("Please enter your email")
 });
-function MagicLinkSignIn() {
+function MagicLinkSignInForm() {
   const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
     resolver: yupResolver(schema)
   });
   const [sent, setSent] = useState(false);
   const app = useStackApp();
+  const [loading, setLoading] = useState(false);
   const onSubmit = async (data) => {
-    const { email } = data;
-    const error = await app.sendMagicLinkEmail(email);
-    if (error) {
-      setError("email", { type: "manual", message: error.message });
-      return;
+    setLoading(true);
+    try {
+      const { email } = data;
+      const error = await app.sendMagicLinkEmail(email);
+      if (error) {
+        setError("email", { type: "manual", message: error.message });
+        return;
+      }
+      setSent(true);
+    } finally {
+      setLoading(false);
     }
-    setSent(true);
   };
   return /* @__PURE__ */ jsxs(
     "form",
     {
-      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      className: "flex flex-col items-stretch stack-scope",
       onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
       noValidate: true,
       children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: "Email" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -47,12 +53,12 @@ function MagicLinkSignIn() {
           }
         ),
         /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
-        /* @__PURE__ */ jsx(Button, { disabled: sent, style: { marginTop: "1.5rem" }, type: "submit", children: sent ? "Email sent!" : "Send magic link" })
+        /* @__PURE__ */ jsx(Button, { disabled: sent, type: "submit", className: "mt-6", loading, children: sent ? "Email sent!" : "Send magic link" })
       ]
     }
   );
 }
 export {
-  MagicLinkSignIn as default
+  MagicLinkSignInForm
 };
-//# sourceMappingURL=magic-link-sign-in.js.map
+//# sourceMappingURL=magic-link-sign-in-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/magic-link-sign-in-form.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label } from \"@stackframe/stack-ui\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport function MagicLinkSignInForm() {\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 ? 'Email sent!' : 'Send magic link'}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,OAAO,aAAa;AA8BjC,SAKE,KALF;AA5BJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEM,SAAS,sBAAsB;AACpC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IACvF,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,YAAY;AACxB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,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,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,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,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,UAAO,UAAU,MAAM,MAAK,UAAS,WAAU,QAAO,SACpD,iBAAO,gBAAgB,mBAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components/message-cards/known-error-message-card.js

@@ -3,8 +3,8 @@
 
 // src/components/message-cards/known-error-message-card.tsx
 import { useStackApp } from "../..";
-import MessageCard from "./message-card";
-import { Text } from "../../components-core";
+import { Typography } from "@stackframe/stack-ui";
+import { MessageCard } from "./message-card";
 import { jsxs } from "react/jsx-runtime";
 function KnownErrorMessageCard({
   error,
@@ -19,11 +19,11 @@ function KnownErrorMessageCard({
       primaryButtonText: "Go to Home",
       primaryAction: () => stackApp.redirectToHome(),
       children: [
-        /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsxs(Typography, { children: [
           "Error Code: ",
           error.errorCode
         ] }),
-        /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsxs(Typography, { children: [
           "Error Message: ",
           error.message
         ] })
@@ -32,6 +32,6 @@ function KnownErrorMessageCard({
   );
 }
 export {
-  KnownErrorMessageCard as default
+  KnownErrorMessageCard
 };
 //# sourceMappingURL=known-error-message-card.js.map

package/dist/esm/components/message-cards/known-error-message-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/message-cards/known-error-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useStackApp } from \"../..\";\nimport MessageCard from \"./message-card\";\nimport { Text } from \"../../components-core\";\nimport { KnownError } from \"@stackframe/stack-shared\";\n\nexport default function KnownErrorMessageCard({ \n  error,\n  fullPage=false,\n}: { \n  error: KnownError,\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n\n  return (\n    <MessageCard \n      title={\"An error occurred\"}\n      fullPage={fullPage} \n      primaryButtonText={\"Go to Home\"}\n      primaryAction={() => stackApp.redirectToHome()}\n    >\n      {<Text>Error Code: {error.errorCode}</Text>}\n      {<Text>Error Message: {error.message}</Text>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,SAAS,YAAY;AAmBd;AAhBQ,SAAR,sBAAuC;AAAA,EAC5C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,mBAAmB;AAAA,MACnB,eAAe,MAAM,SAAS,eAAe;AAAA,MAE5C;AAAA,6BAAC,QAAK;AAAA;AAAA,UAAa,MAAM;AAAA,WAAU;AAAA,QACnC,qBAAC,QAAK;AAAA;AAAA,UAAgB,MAAM;AAAA,WAAQ;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/message-cards/known-error-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useStackApp } from \"../..\";\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { MessageCard } from \"./message-card\";\nimport { KnownError } from \"@stackframe/stack-shared\";\n\nexport function KnownErrorMessageCard({ \n  error,\n  fullPage=false,\n}: { \n  error: KnownError,\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n\n  return (\n    <MessageCard \n      title={\"An error occurred\"}\n      fullPage={fullPage} \n      primaryButtonText={\"Go to Home\"}\n      primaryAction={() => stackApp.redirectToHome()}\n    >\n      {<Typography>Error Code: {error.errorCode}</Typography>}\n      {<Typography>Error Message: {error.message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAmBrB;AAhBA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,mBAAmB;AAAA,MACnB,eAAe,MAAM,SAAS,eAAe;AAAA,MAE5C;AAAA,6BAAC,cAAW;AAAA;AAAA,UAAa,MAAM;AAAA,WAAU;AAAA,QACzC,qBAAC,cAAW;AAAA;AAAA,UAAgB,MAAM;AAAA,WAAQ;AAAA;AAAA;AAAA,EAC7C;AAEJ;","names":[]}

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

@@ -2,12 +2,12 @@
 "use client";
 
 // src/components/message-cards/message-card.tsx
-import MaybeFullPage from "../maybe-full-page";
-import { Button, Text } from "../../components-core";
+import { MaybeFullPage } from "../elements/maybe-full-page";
+import { Button, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function MessageCard({ fullPage = false, ...props }) {
   return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", style: { marginBottom: "24px" }, children: props.title }),
+    /* @__PURE__ */ jsx(Typography, { type: "h3", className: "mb-6", children: props.title }),
     props.children,
     (props.primaryButtonText || props.secondaryButtonText) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "16px", marginTop: 20 }, children: [
       props.secondaryButtonText && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: props.secondaryAction, children: props.secondaryButtonText }),
@@ -16,6 +16,6 @@ function MessageCard({ fullPage = false, ...props }) {
   ] }) });
 }
 export {
-  MessageCard as default
+  MessageCard
 };
 //# sourceMappingURL=message-card.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/message-cards/message-card.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport MaybeFullPage from \"../maybe-full-page\";\nimport { Button, Text } from \"../../components-core\";\n\nexport default function MessageCard(\n  { fullPage=false, ...props }: \n  { \n    children?: React.ReactNode, \n    title: string, \n    fullPage?: boolean,\n    primaryButtonText?: string,\n    primaryAction?: () => Promise<void> | void,\n    secondaryButtonText?: string,\n    secondaryAction?: () => Promise<void> | void,\n  }\n) {\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div style={{ textAlign: 'center' }}>\n        <Text size=\"xl\" as='h2' style={{ marginBottom: '24px' }}>{props.title}</Text>\n        {props.children}\n        {(props.primaryButtonText || props.secondaryButtonText) && (\n          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }}>\n            {props.secondaryButtonText && (\n              <Button variant=\"secondary\" onClick={props.secondaryAction}>\n                {props.secondaryButtonText}\n              </Button>\n            )}\n            {props.primaryButtonText && (\n              <Button onClick={props.primaryAction}>\n                {props.primaryButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAGA,OAAO,mBAAmB;AAC1B,SAAS,QAAQ,YAAY;AAiBrB,cAGE,YAHF;AAfO,SAAR,YACL,EAAE,WAAS,OAAO,GAAG,MAAM,GAU3B;AACA,SACE,oBAAC,iBAAc,UACb,+BAAC,SAAI,OAAO,EAAE,WAAW,SAAS,GAChC;AAAA,wBAAC,QAAK,MAAK,MAAK,IAAG,MAAK,OAAO,EAAE,cAAc,OAAO,GAAI,gBAAM,OAAM;AAAA,IACrE,MAAM;AAAA,KACL,MAAM,qBAAqB,MAAM,wBACjC,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,YAAY,UAAU,gBAAgB,UAAU,KAAK,QAAQ,WAAW,GAAG,GAC7H;AAAA,YAAM,uBACL,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,iBACxC,gBAAM,qBACT;AAAA,MAED,MAAM,qBACL,oBAAC,UAAO,SAAS,MAAM,eACpB,gBAAM,mBACT;AAAA,OAEJ;AAAA,KAEJ,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/message-cards/message-card.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { MaybeFullPage } from \"../elements/maybe-full-page\";\nimport { Button, Typography } from \"@stackframe/stack-ui\";\n\nexport function MessageCard(\n  { fullPage=false, ...props }: \n  { \n    children?: React.ReactNode, \n    title: string, \n    fullPage?: boolean,\n    primaryButtonText?: string,\n    primaryAction?: () => Promise<void> | void,\n    secondaryButtonText?: string,\n    secondaryAction?: () => Promise<void> | void,\n  }\n) {\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div style={{ textAlign: 'center' }}>\n        <Typography type='h3' className=\"mb-6\">{props.title}</Typography>\n        {props.children}\n        {(props.primaryButtonText || props.secondaryButtonText) && (\n          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }}>\n            {props.secondaryButtonText && (\n              <Button variant=\"secondary\" onClick={props.secondaryAction}>\n                {props.secondaryButtonText}\n              </Button>\n            )}\n            {props.primaryButtonText && (\n              <Button onClick={props.primaryAction}>\n                {props.primaryButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,kBAAkB;AAiB3B,cAGE,YAHF;AAfD,SAAS,YACd,EAAE,WAAS,OAAO,GAAG,MAAM,GAU3B;AACA,SACE,oBAAC,iBAAc,UACb,+BAAC,SAAI,OAAO,EAAE,WAAW,SAAS,GAChC;AAAA,wBAAC,cAAW,MAAK,MAAK,WAAU,QAAQ,gBAAM,OAAM;AAAA,IACnD,MAAM;AAAA,KACL,MAAM,qBAAqB,MAAM,wBACjC,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,YAAY,UAAU,gBAAgB,UAAU,KAAK,QAAQ,WAAW,GAAG,GAC7H;AAAA,YAAM,uBACL,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,iBACxC,gBAAM,qBACT;AAAA,MAED,MAAM,qBACL,oBAAC,UAAO,SAAS,MAAM,eACpB,gBAAM,mBACT;AAAA,OAEJ;AAAA,KAEJ,GACF;AAEJ;","names":[]}

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

@@ -2,9 +2,9 @@
 "use client";
 
 // src/components/message-cards/predefined-message-card.tsx
+import { Typography } from "@stackframe/stack-ui";
 import { useStackApp } from "../..";
-import MessageCard from "./message-card";
-import { Text } from "../../components-core";
+import { MessageCard } from "./message-card";
 import { jsx } from "react/jsx-runtime";
 function PredefinedMessageCard({
   type,
@@ -70,11 +70,11 @@ function PredefinedMessageCard({
       primaryAction,
       secondaryButtonText: secondaryButton || void 0,
       secondaryAction: secondaryAction || void 0,
-      children: message && /* @__PURE__ */ jsx(Text, { children: message })
+      children: message && /* @__PURE__ */ jsx(Typography, { children: message })
     }
   );
 }
 export {
-  PredefinedMessageCard as default
+  PredefinedMessageCard
 };
 //# sourceMappingURL=predefined-message-card.js.map

package/dist/esm/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 { useStackApp } from \"../..\";\nimport MessageCard from \"./message-card\";\nimport { Text } from \"../../components-core\";\n\nexport default function PredefinedMessageCard({ \n  type,\n  fullPage=false,\n}: { \n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError',\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.redirectToAfterSignOut();\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 = \"Go to Home\";\n      break;\n    }\n    case 'emailSent': {\n      title = \"Email sent!\";\n      message = 'Please check 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();\n      primaryButton = \"Go to Sign In\";\n      break;\n    }\n    case 'emailVerified': {\n      title = \"Email verified!\";\n      message = 'Your have successfully verified your email.';\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to Home\";\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 && <Text>{message}</Text>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,SAAS,YAAY;AAwEH;AAtEH,SAAR,sBAAuC;AAAA,EAC5C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;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,uBAAuB;AACtD,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,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;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,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,oBAAC,QAAM,mBAAQ;AAAA;AAAA,EAC7B;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\";\n\nexport function PredefinedMessageCard({ \n  type,\n  fullPage=false,\n}: { \n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError',\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.redirectToAfterSignOut();\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 = \"Go to Home\";\n      break;\n    }\n    case 'emailSent': {\n      title = \"Email sent!\";\n      message = 'Please check 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();\n      primaryButton = \"Go to Sign In\";\n      break;\n    }\n    case 'emailVerified': {\n      title = \"Email verified!\";\n      message = 'Your have successfully verified your email.';\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to Home\";\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":";;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAwEV;AAtEX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;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,uBAAuB;AACtD,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,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;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,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,oBAAC,cAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/esm/components/oauth-button-group.js

@@ -0,0 +1,19 @@
+"use client";
+"use client";
+
+// src/components/oauth-button-group.tsx
+import { useStackApp } from "../lib/hooks";
+import { OAuthButton } from "./oauth-button";
+import { jsx } from "react/jsx-runtime";
+function OAuthButtonGroup({
+  type,
+  mockProject
+}) {
+  const stackApp = useStackApp();
+  const project = mockProject || stackApp.useProject();
+  return /* @__PURE__ */ jsx("div", { className: "gap-4 flex flex-col items-stretch stack-scope", children: project.oauthProviders.filter((p) => p.enabled).map((p) => /* @__PURE__ */ jsx(OAuthButton, { provider: p.id, type }, p.id)) });
+}
+export {
+  OAuthButtonGroup
+};
+//# sourceMappingURL=oauth-button-group.js.map

package/dist/esm/components/oauth-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/oauth-button-group.tsx"],"sourcesContent":["'use client';\n\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\nimport { useStackApp } from \"../lib/hooks\";\nimport { OAuthButton } from \"./oauth-button\";\n\nexport function OAuthButtonGroup({\n  type,\n  mockProject,\n}: {\n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const project = mockProject || stackApp.useProject();\n\n  return (\n    <div className='gap-4 flex flex-col items-stretch stack-scope'>\n      {project.oauthProviders.filter(p => p.enabled).map(p => (\n        <OAuthButton key={p.id} provider={p.id} type={type}/>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAepB;AAbD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,SACE,oBAAC,SAAI,WAAU,iDACZ,kBAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,IAAI,OACjD,oBAAC,eAAuB,UAAU,EAAE,IAAI,QAAtB,EAAE,EAA+B,CACpD,GACH;AAEJ;","names":[]}