@stackframe/stack 2.4.13 → 2.4.15

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

@@ -3,58 +3,54 @@
 
 // src/components/magic-link-sign-in.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 { validateEmail } from "../utils/email";
 import { useStackApp } from "..";
 import { Button, Input, Label } from "../components-core";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 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() {
-  const [email, setEmail] = useState("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
   const [sent, setSent] = useState(false);
-  const [error, setError] = useState("");
   const app = useStackApp();
-  const onSubmit = async () => {
-    if (!email) {
-      setError("Please enter your email");
-      return;
-    }
-    if (!validateEmail(email)) {
-      setError("Please enter a valid email");
-      return;
-    }
-    const error2 = await app.sendMagicLinkEmail(email);
-    if (error2) {
-      setError(error2.message);
+  const onSubmit = async (data) => {
+    const { email } = data;
+    const error = await app.sendMagicLinkEmail(email);
+    if (error) {
+      setError("email", { type: "manual", message: error.message });
       return;
     }
     setSent(true);
   };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: error }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled: sent,
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: sent ? "Email sent" : "Send magic link"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email"),
+            disabled: sent
+          }
+        ),
+        /* @__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" })
+      ]
+    }
+  );
 }
 export {
   MagicLinkSignIn as default

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';;\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\n\nexport default function MagicLinkSignIn() {\n  const [email, setEmail] = useState('');\n  const [sent, setSent] = useState(false);\n  const [error, setError] = useState('');\n  const app = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setError('Please enter a valid email');\n      return;\n    }\n\n    const error = await app.sendMagicLinkEmail(email);\n    if (error) {\n      setError(error.message);\n      return;\n    }\n    setSent(true);\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setError('');\n        }}\n      />\n      <FormWarningText text={error} />\n\n      <Button\n        disabled={sent}\n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n        {sent ? 'Email sent' : 'Send magic link'}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AACA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AA2BjC,SACE,KADF;AAzBW,SAAR,kBAAmC;AACxC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,yBAAyB;AAClC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,eAAS,4BAA4B;AACrC;AAAA,IACF;AAEA,UAAMA,SAAQ,MAAM,IAAI,mBAAmB,KAAK;AAChD,QAAIA,QAAO;AACT,eAASA,OAAM,OAAO;AACtB;AAAA,IACF;AACA,YAAQ,IAAI;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,mBAAS,EAAE;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,OAAO;AAAA,IAE9B;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QAER,iBAAO,eAAe;AAAA;AAAA,IACzB;AAAA,KACF;AAEJ;","names":["error"]}
+{"version":3,"sources":["../../../src/components/magic-link-sign-in.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 \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport default function MagicLinkSignIn() {\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\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email } = data;\n\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  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">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} style={{ marginTop: '1.5rem' }} type=\"submit\">\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,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AACrC,SAAS,yBAAyB;AAyB9B,SAKE,KALF;AAvBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEc,SAAR,kBAAmC;AACxC,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;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ,MAAM,IAAI,mBAAmB,KAAK;AAChD,QAAI,OAAO;AACT,eAAS,SAAS,EAAE,MAAM,UAAU,SAAS,MAAM,QAAQ,CAAC;AAC5D;AAAA,IACF;AACA,YAAQ,IAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,OAAK,kBAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;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,OAAO,EAAE,WAAW,SAAS,GAAG,MAAK,UAC1D,iBAAO,eAAe,mBACzB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -2,11 +2,37 @@
 "use client";
 
 // src/components/oauth-button.tsx
-import { FaGithub, FaFacebook, FaApple } from "react-icons/fa";
 import { useStackApp } from "..";
 import { Button } from "../components-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconSize = 22;
+function GoogleIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }),
+    /* @__PURE__ */ jsx("path", { fill: "none", d: "M1 1h22v22H1z" })
+  ] });
+}
+function FacebookIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 512 512", children: /* @__PURE__ */ jsx("path", { fill: "#FFFFFF", d: "M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z" }) });
+}
+function GitHubIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ jsx("path", { fill: "#FFFFFF", d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" }) });
+}
+function MicrosoftIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 21 21", children: [
+    /* @__PURE__ */ jsx("title", { children: "MS-SymbolLockup" }),
+    /* @__PURE__ */ jsx("path", { fill: "#f25022", d: "M1 1h9v9H1z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })
+  ] });
+}
+function SpotifyIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ jsx("path", { fill: "#ffffff", d: "M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z" }) });
+}
 function OAuthButton({
   provider,
   type
@@ -17,84 +43,52 @@ function OAuthButton({
     case "google": {
       style = {
         backgroundColor: "#fff",
+        textColor: "#000",
         name: "Google",
-        border: "1px solid #ccc",
-        icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#4285F4",
-              d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#34A853",
-              d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#FBBC05",
-              d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#EA4335",
-              d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-            }
-          ),
-          /* @__PURE__ */ jsx("path", { fill: "none", d: "M1 1h22v22H1z" })
-        ] })
+        border: "1px solid #ddd",
+        icon: /* @__PURE__ */ jsx(GoogleIcon, { iconSize })
       };
       break;
     }
     case "github": {
       style = {
         backgroundColor: "#111",
-        border: "1px solid #444",
+        textColor: "#fff",
+        border: "1px solid #333",
         name: "GitHub",
-        icon: /* @__PURE__ */ jsx(FaGithub, { color: "#fff", size: iconSize })
+        icon: /* @__PURE__ */ jsx(GitHubIcon, { iconSize })
       };
       break;
     }
     case "facebook": {
       style = {
         backgroundColor: "#1877F2",
+        textColor: "#fff",
         name: "Facebook",
-        icon: /* @__PURE__ */ jsx(FaFacebook, { color: "#fff", size: iconSize })
+        icon: /* @__PURE__ */ jsx(FacebookIcon, { iconSize })
       };
       break;
     }
-    case "apple": {
+    case "microsoft": {
       style = {
-        backgroundColor: "#000",
-        name: "Apple",
-        icon: /* @__PURE__ */ jsx(FaApple, { color: "#fff", size: iconSize })
+        backgroundColor: "#2f2f2f",
+        textColor: "#fff",
+        name: "Microsoft",
+        icon: /* @__PURE__ */ jsx(MicrosoftIcon, { iconSize })
       };
       break;
     }
-    case "microsoft": {
+    case "spotify": {
       style = {
-        backgroundColor: "#2f2f2f",
-        name: "Microsoft",
-        icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 21 21", children: [
-          /* @__PURE__ */ jsx("title", { children: "MS-SymbolLockup" }),
-          /* @__PURE__ */ jsx("path", { fill: "#f25022", d: "M1 1h9v9H1z" }),
-          /* @__PURE__ */ jsx("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }),
-          /* @__PURE__ */ jsx("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }),
-          /* @__PURE__ */ jsx("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })
-        ] })
+        backgroundColor: "#1DB954",
+        textColor: "#fff",
+        name: "Spotify",
+        icon: /* @__PURE__ */ jsx(SpotifyIcon, { iconSize })
       };
       break;
     }
     default: {
       style = {
-        backgroundColor: "#000",
         name: provider,
         icon: null
       };
@@ -104,9 +98,9 @@ function OAuthButton({
     Button,
     {
       color: style.backgroundColor,
-      style: { border: style.border },
+      style: { border: style.border, height: "2.5rem", color: style.textColor },
       onClick: () => stackApp.signInWithOAuth(provider),
-      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "8px" }, children: [
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "1rem" }, children: [
         style.icon,
         /* @__PURE__ */ jsxs("span", { style: { flexGrow: 1 }, children: [
           type === "sign-up" ? "Sign up with " : "Sign in with ",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { FaGithub, FaFacebook, FaApple } from 'react-icons/fa';\nimport { useStackApp } from '..';\nimport { Button } from \"../components-core\";\n\nconst iconSize = 22;\n\nexport default function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n\n  let style : {\n    backgroundColor: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        name: 'Google',\n        border: '1px solid #ccc',\n        icon: (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n            />\n            <path\n              fill=\"#EA4335\"\n              d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n            />\n            <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n          </svg>\n        ),\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        border: '1px solid #444',\n        name: 'GitHub',\n        icon: (\n          <FaGithub color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        name: 'Facebook',\n        icon: (\n          <FaFacebook color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: '#000',\n        name: 'Apple',\n        icon: (\n          <FaApple color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        name: 'Microsoft',\n        icon: (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n            <title>{\"MS-SymbolLockup\"}</title>\n            <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n            <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n            <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n            <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n          </svg>\n        ),\n      };\n      break;\n    }\n    default: {\n      style = {\n        backgroundColor: '#000',\n        name: provider,\n        icon: null\n      };\n    }\n  }\n\n  return (\n    <Button\n      color={style.backgroundColor}\n      style={{ border: style.border }}\n      onClick={() => stackApp.signInWithOAuth(provider)}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '8px' }}>\n        {style.icon}\n        <span style={{ flexGrow: 1 }}>{type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>\n      </div>\n    </Button>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,UAAU,YAAY,eAAe;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AA0Bb,SACE,KADF;AAxBV,IAAM,WAAW;AAEF,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,MAAI;AAMJ,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MACE,qBAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA,oBAAC,UAAK,MAAK,QAAO,GAAE,iBAAgB;AAAA,WACtC;AAAA,MAEJ;AACA;AAAA,IACF;AAAA,IACA,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MACE,oBAAC,YAAS,OAAM,QAAO,MAAM,UAAU;AAAA,MAE3C;AACA;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,oBAAC,cAAW,OAAM,QAAO,MAAM,UAAU;AAAA,MAE7C;AACA;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,oBAAC,WAAQ,OAAM,QAAO,MAAM,UAAU;AAAA,MAE1C;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,qBAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA,8BAAC,WAAO,6BAAkB;AAAA,UAC1B,oBAAC,UAAK,MAAK,WAAU,GAAE,eAAc;AAAA,UACrC,oBAAC,UAAK,MAAK,WAAU,GAAE,gBAAe;AAAA,UACtC,oBAAC,UAAK,MAAK,WAAU,GAAE,iBAAgB;AAAA,UACvC,oBAAC,UAAK,MAAK,WAAU,GAAE,kBAAiB;AAAA,WAC1C;AAAA,MAEJ;AACA;AAAA,IACF;AAAA,IACA,SAAS;AACP,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,SAAS,gBAAgB,QAAQ;AAAA,MAEhD,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ,KAAK,MAAM,GAC5E;AAAA,cAAM;AAAA,QACP,qBAAC,UAAK,OAAO,EAAE,UAAU,EAAE,GAAI;AAAA,mBAAS,YAAY,kBAAkB;AAAA,UAAiB,MAAM;AAAA,WAAK;AAAA,SACpG;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { useStackApp } from '..';\nimport { Button } from \"../components-core\";\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\nexport default function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null\n      };\n    }\n  }\n\n  return (\n    <Button\n      color={style.backgroundColor}\n      style={{ border: style.border, height: '2.5rem', color: style.textColor }}\n      onClick={() => stackApp.signInWithOAuth(provider)}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '1rem' }}>\n        {style.icon}\n        <span style={{ flexGrow: 1 }}>{type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>\n      </div>\n    </Button>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}

package/dist/esm/components/password-field.js

@@ -4,19 +4,17 @@
 // src/components/password-field.tsx
 import { Input } from "../components-core";
 import { forwardRef, useRef, useState } from "react";
-import { HiEye, HiEyeOff } from "react-icons/hi";
 import { useDesign } from "..";
 import styled from "styled-components";
+import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var getIconStyle = (colors) => `
-  color: ${colors.light.secondaryColor};
-
-  html[data-stack-theme='dark'] & {
-    color: ${colors.dark.secondaryColor};
-  }
+  height: 1rem;
+  width: 1rem;
+  color: #808080
 `;
-var StyledEyeOff = styled(HiEyeOff)`${(props) => getIconStyle(props.colors)}`;
-var StyledEye = styled(HiEye)`${(props) => getIconStyle(props.colors)}`;
+var StyledEyeOff = styled(EyeOff)`${(props) => getIconStyle(props.colors)}`;
+var StyledEye = styled(Eye)`${(props) => getIconStyle(props.colors)}`;
 var PasswordField = forwardRef(({ id, name, ...props }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const { colors } = useDesign();

package/dist/esm/components/password-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { Input } from \"../components-core\";\nimport { forwardRef, useRef, useState } from 'react';\nimport { HiEye, HiEyeOff } from 'react-icons/hi';\nimport { useDesign } from \"..\";\nimport styled from \"styled-components\";\nimport { ColorPalette } from \"../providers/design-provider\";\n\nconst getIconStyle = (colors: ColorPalette) => `\n  color: ${colors.light.secondaryColor};\n\n  html[data-stack-theme='dark'] & {\n    color: ${colors.dark.secondaryColor};\n  }\n`;\nconst StyledEyeOff = styled(HiEyeOff)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\nconst StyledEye = styled(HiEye)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\n\nconst PasswordField = forwardRef<\n  HTMLInputElement, \n  React.InputHTMLAttributes<HTMLInputElement>\n>(({ id, name, ...props }, ref) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const { colors } = useDesign();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const mergeRef = (node: HTMLInputElement) => {\n    if (ref) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else {\n        ref.current = node;\n      }\n    }\n    inputRef.current = node;\n  };\n\n  const onClickReveal = () => {\n    setIsOpen(!isOpen);\n    const currentInput = inputRef.current;\n    if (currentInput) {\n      currentInput.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative', display: 'flex' }}>\n      <Input\n        id={id}\n        ref={mergeRef}\n        name={name}\n        type={isOpen ? 'text' : 'password'}\n        autoComplete=\"current-password\"\n        required\n        style={{ flex: 1 }}\n        {...props}\n      />\n      <button\n        tabIndex={-1}\n        type=\"button\"\n        style={{ \n          position: 'absolute', \n          backgroundColor: 'transparent',\n          border: 'none',\n          top: 0, \n          right: 0, \n          bottom: 0, \n          display: 'flex', \n          alignItems: 'center', \n          paddingRight: '12px' \n        }}\n        onClick={onClickReveal}\n        aria-label={isOpen ? 'Mask password' : 'Reveal password'}\n      >\n        {isOpen ? <StyledEyeOff colors={colors} /> : <StyledEye colors={colors} />}\n      </button>\n    </div>\n  );\n});\n\nPasswordField.displayName = 'PasswordField';\n\nexport default PasswordField;\n"],"mappings":";;;AAEA,SAAS,aAAa;AACtB,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,OAAO,gBAAgB;AAChC,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAyCf,SACE,KADF;AAtCJ,IAAM,eAAe,CAAC,WAAyB;AAAA,WACpC,OAAO,MAAM,cAAc;AAAA;AAAA;AAAA,aAGzB,OAAO,KAAK,cAAc;AAAA;AAAA;AAGvC,IAAM,eAAe,OAAO,QAAQ,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACrG,IAAM,YAAY,OAAO,KAAK,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE/F,IAAM,gBAAgB,WAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,WAAW,CAAC,SAA2B;AAC3C,QAAI,KAAK;AACP,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,OAAO;AACL,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AACA,aAAS,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,CAAC,MAAM;AACjB,UAAM,eAAe,SAAS;AAC9B,QAAI,cAAc;AAChB,mBAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC5C;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,OAAO,GAClD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAM,SAAS,SAAS;AAAA,QACxB,cAAa;AAAA,QACb,UAAQ;AAAA,QACR,OAAO,EAAE,MAAM,EAAE;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,SAAS,kBAAkB;AAAA,QAEtC,mBAAS,oBAAC,gBAAa,QAAgB,IAAK,oBAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { Input } from \"../components-core\";\nimport { forwardRef, useRef, useState } from 'react';\nimport { useDesign } from \"..\";\nimport styled from \"styled-components\";\nimport { ColorPalette } from \"../providers/design-provider\";\nimport { Eye, EyeOff } from 'lucide-react';\n\nconst getIconStyle = (colors: ColorPalette) => `\n  height: 1rem;\n  width: 1rem;\n  color: #808080\n`;\nconst StyledEyeOff = styled(EyeOff)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\nconst StyledEye = styled(Eye)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\n\nconst PasswordField = forwardRef<\n  HTMLInputElement, \n  React.InputHTMLAttributes<HTMLInputElement>\n>(({ id, name, ...props }, ref) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const { colors } = useDesign();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const mergeRef = (node: HTMLInputElement) => {\n    if (ref) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else {\n        ref.current = node;\n      }\n    }\n    inputRef.current = node;\n  };\n\n  const onClickReveal = () => {\n    setIsOpen(!isOpen);\n    const currentInput = inputRef.current;\n    if (currentInput) {\n      currentInput.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative', display: 'flex' }}>\n      <Input\n        id={id}\n        ref={mergeRef}\n        name={name}\n        type={isOpen ? 'text' : 'password'}\n        autoComplete=\"current-password\"\n        required\n        style={{ flex: 1 }}\n        {...props}\n      />\n      <button\n        tabIndex={-1}\n        type=\"button\"\n        style={{ \n          position: 'absolute', \n          backgroundColor: 'transparent',\n          border: 'none',\n          top: 0, \n          right: 0, \n          bottom: 0, \n          display: 'flex', \n          alignItems: 'center', \n          paddingRight: '12px' \n        }}\n        onClick={onClickReveal}\n        aria-label={isOpen ? 'Mask password' : 'Reveal password'}\n      >\n        {isOpen ? <StyledEyeOff colors={colors} /> : <StyledEye colors={colors} />}\n      </button>\n    </div>\n  );\n});\n\nPasswordField.displayName = 'PasswordField';\n\nexport default PasswordField;\n"],"mappings":";;;AAEA,SAAS,aAAa;AACtB,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAEnB,SAAS,KAAK,cAAc;AAsCxB,SACE,KADF;AApCJ,IAAM,eAAe,CAAC,WAAyB;AAAA;AAAA;AAAA;AAAA;AAK/C,IAAM,eAAe,OAAO,MAAM,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACnG,IAAM,YAAY,OAAO,GAAG,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE7F,IAAM,gBAAgB,WAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,WAAW,CAAC,SAA2B;AAC3C,QAAI,KAAK;AACP,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,OAAO;AACL,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AACA,aAAS,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,CAAC,MAAM;AACjB,UAAM,eAAe,SAAS;AAC9B,QAAI,cAAc;AAChB,mBAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC5C;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,OAAO,GAClD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAM,SAAS,SAAS;AAAA,QACxB,cAAa;AAAA,QACb,UAAQ;AAAA,QACR,OAAO,EAAE,MAAM,EAAE;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,SAAS,kBAAkB;AAAA,QAEtC,mBAAS,oBAAC,gBAAa,QAAgB,IAAK,oBAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":[]}

package/dist/esm/components/password-reset-inner.js

@@ -3,6 +3,9 @@
 
 // src/components/password-reset-inner.tsx
 import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useStackApp } from "..";
 import PasswordField from "./password-field";
@@ -11,33 +14,31 @@ import RedirectMessageCard from "./redirect-message-card";
 import MessageCard from "./message-card";
 import CardFrame from "./card-frame";
 import { Button, Label, Text } from "../components-core";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yup.object().shape({
+  password: yup.string().required("Please enter your password").test({
+    name: "is-valid-password",
+    test: (value, ctx) => {
+      const error = getPasswordError(value);
+      if (error) {
+        return ctx.createError({ message: error.message });
+      } else {
+        return true;
+      }
+    }
+  }),
+  passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
+});
 function PasswordResetInner({ code, fullPage = false }) {
-  const [password, setPassword] = useState("");
-  const [passwordError, setPasswordError] = useState("");
-  const [passwordRepeat, setPasswordRepeat] = useState("");
-  const [passwordRepeatError, setPasswordRepeatError] = useState("");
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const stackApp = useStackApp();
   const [finished, setFinished] = useState(false);
   const [resetError, setResetError] = useState(false);
-  const stackApp = useStackApp();
-  const onSubmit = async () => {
-    if (!password) {
-      setPasswordError("Please enter your password");
-      return;
-    }
-    if (!passwordRepeat) {
-      setPasswordRepeatError("Please repeat your password");
-      return;
-    }
-    if (password !== passwordRepeat) {
-      setPasswordRepeatError("Passwords do not match");
-      return;
-    }
-    const passwordError2 = getPasswordError(password);
-    if (passwordError2) {
-      setPasswordError(passwordError2.message);
-      return;
-    }
+  const onSubmit = async (data) => {
+    const { password } = data;
     const errorCode = await stackApp.resetPassword({ password, code });
     if (errorCode) {
       setResetError(true);
@@ -53,39 +54,43 @@ function PasswordResetInner({ code, fullPage = false }) {
   }
   return /* @__PURE__ */ jsxs(CardFrame, { fullPage, children: [
     /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "New Password" }),
-      /* @__PURE__ */ jsx(
-        PasswordField,
-        {
-          id: "password",
-          name: "password",
-          value: password,
-          onChange: (e) => {
-            setPassword(e.target.value);
-            setPasswordError("");
-            setPasswordRepeatError("");
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(FormWarningText, { text: passwordError }),
-      /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
-      /* @__PURE__ */ jsx(
-        PasswordField,
-        {
-          id: "repeat-password",
-          name: "repeat-password",
-          value: passwordRepeat,
-          onChange: (e) => {
-            setPasswordRepeat(e.target.value);
-            setPasswordError("");
-            setPasswordRepeatError("");
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(FormWarningText, { text: passwordRepeatError }),
-      /* @__PURE__ */ jsx(Button, { style: { marginTop: "1.5rem" }, onClick: () => onSubmit(), children: "Reset Password" })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+        onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "New Password" }),
+          /* @__PURE__ */ jsx(
+            PasswordField,
+            {
+              id: "password",
+              ...register("password"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+          /* @__PURE__ */ jsx(
+            PasswordField,
+            {
+              id: "repeat-password",
+              ...register("passwordRepeat"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
+          /* @__PURE__ */ jsx(Button, { style: { marginTop: "1.5rem" }, type: "submit", children: "Reset Password" })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/esm/components/password-reset-inner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/password-reset-inner.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport RedirectMessageCard from \"./redirect-message-card\";\nimport MessageCard from \"./message-card\";\nimport CardFrame from \"./card-frame\";\nimport { Button, Label, Text } from \"../components-core\";\n\n\nexport default function PasswordResetInner(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const [passwordRepeat, setPasswordRepeat] = useState('');\n  const [passwordRepeatError, setPasswordRepeatError] = useState('');\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n  const stackApp = useStackApp();\n\n  const onSubmit = async () => {\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    if (!passwordRepeat) {\n      setPasswordRepeatError('Please repeat your password');\n      return;\n    }\n    if (password !== passwordRepeat) {\n      setPasswordRepeatError('Passwords do not match');\n      return;\n    }\n\n    const passwordError = getPasswordError(password);\n    if (passwordError) {\n      setPasswordError(passwordError.message);\n      return;\n    }\n\n    const errorCode = await stackApp.resetPassword({ password, code });\n    \n    // this should not happen, the outer component should verify the code before rendering this component\n    if (errorCode) {\n      setResetError(true);\n      return;\n    }\n\n    setFinished(true);\n  };\n\n  if (finished) {\n    return <RedirectMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        <Text>Failed to reset password. Please request a new password reset link</Text>\n      </MessageCard>\n    );\n  }\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>Reset Your Password</Text>\n      </div>\n\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n        <Label htmlFor=\"password\">New Password</Label>\n        <PasswordField\n          id=\"password\"\n          name=\"password\"\n          value={password}\n          onChange={(e) => {\n            setPassword(e.target.value);\n            setPasswordError('');\n            setPasswordRepeatError('');\n          }}\n        />\n        <FormWarningText text={passwordError} />\n\n        <Label htmlFor=\"repeat-password\" style={{ marginTop: \"1rem\" }}>Repeat New Password</Label>\n        <PasswordField\n          id=\"repeat-password\"\n          name=\"repeat-password\"\n          value={passwordRepeat}\n          onChange={(e) => {\n            setPasswordRepeat(e.target.value);\n            setPasswordError('');\n            setPasswordRepeatError('');\n          }}\n        />\n        <FormWarningText text={passwordRepeatError} />\n\n        <Button style={{ marginTop: '1.5rem' }} onClick={() => onSubmit()}>\n          Reset Password\n        </Button>\n      </div>\n    </CardFrame>\n  ); \n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,qBAAqB;AAC5B,OAAO,yBAAyB;AAChC,OAAO,iBAAiB;AACxB,OAAO,eAAe;AACtB,SAAS,QAAQ,OAAO,YAAY;AA+CzB,cAiBL,YAjBK;AA5CI,SAAR,mBACL,EAAE,MAAM,WAAW,MAAM,GAEzB;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AACvD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE;AACjE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AACA,QAAI,CAAC,gBAAgB;AACnB,6BAAuB,6BAA6B;AACpD;AAAA,IACF;AACA,QAAI,aAAa,gBAAgB;AAC/B,6BAAuB,wBAAwB;AAC/C;AAAA,IACF;AAEA,UAAMA,iBAAgB,iBAAiB,QAAQ;AAC/C,QAAIA,gBAAe;AACjB,uBAAiBA,eAAc,OAAO;AACtC;AAAA,IACF;AAEA,UAAM,YAAY,MAAM,SAAS,cAAc,EAAE,UAAU,KAAK,CAAC;AAGjE,QAAI,WAAW;AACb,oBAAc,IAAI;AAClB;AAAA,IACF;AAEA,gBAAY,IAAI;AAAA,EAClB;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,uBAAoB,MAAK,iBAAgB,UAAoB;AAAA,EACvE;AAEA,MAAI,YAAY;AACd,WACE,oBAAC,eAAY,OAAM,4BAA2B,UAC5C,8BAAC,QAAK,gFAAkE,GAC1E;AAAA,EAEJ;AAEA,SACE,qBAAC,aAAU,UACT;AAAA,wBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD,8BAAC,QAAK,MAAK,MAAK,IAAG,MAAK,iCAAmB,GAC7C;AAAA,IAEA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,0BAAC,SAAM,SAAQ,YAAW,0BAAY;AAAA,MACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,wBAAY,EAAE,OAAO,KAAK;AAC1B,6BAAiB,EAAE;AACnB,mCAAuB,EAAE;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,mBAAgB,MAAM,eAAe;AAAA,MAEtC,oBAAC,SAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,iCAAmB;AAAA,MAClF;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,8BAAkB,EAAE,OAAO,KAAK;AAChC,6BAAiB,EAAE;AACnB,mCAAuB,EAAE;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,mBAAgB,MAAM,qBAAqB;AAAA,MAE5C,oBAAC,UAAO,OAAO,EAAE,WAAW,SAAS,GAAG,SAAS,MAAM,SAAS,GAAG,4BAEnE;AAAA,OACF;AAAA,KACF;AAEJ;","names":["passwordError"]}
+{"version":3,"sources":["../../../src/components/password-reset-inner.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 { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport RedirectMessageCard from \"./redirect-message-card\";\nimport MessageCard from \"./message-card\";\nimport CardFrame from \"./card-frame\";\nimport { Button, Label, Text } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\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 default function PasswordResetInner(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { password } = data;\n    const errorCode = await stackApp.resetPassword({ password, code });\n    if (errorCode) {\n      setResetError(true);\n      return;\n    }\n\n    setFinished(true);\n  };\n\n  if (finished) {\n    return <RedirectMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        <Text>Failed to reset password. Please request a new password reset link</Text>\n      </MessageCard>\n    );\n  }\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>Reset Your Password</Text>\n      </div>\n\n      <form \n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n        onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"password\">New Password</Label>\n        <PasswordField\n          id=\"password\"\n          {...register('password')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.password?.message?.toString()} />\n\n        <Label htmlFor=\"repeat-password\" style={{ marginTop: \"1rem\" }}>Repeat New Password</Label>\n        <PasswordField\n          id=\"repeat-password\"\n          {...register('passwordRepeat')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n        <Button style={{ marginTop: '1.5rem' }} type=\"submit\">\n          Reset Password\n        </Button>\n      </form>\n    </CardFrame>\n  ); \n}\n"],"mappings":"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","names":[]}

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

@@ -6,7 +6,6 @@ import { useRouter } from "next/navigation";
 import { useStackApp } from "..";
 import MessageCard from "./message-card";
 import { Text, Button } from "../components-core";
-import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
 import { jsx, jsxs } from "react/jsx-runtime";
 function RedirectMessageCard({
   type,
@@ -36,7 +35,7 @@ function RedirectMessageCard({
     case "emailSent": {
       title = "Email sent!";
       message = "Please check your inbox. Make sure to check your spam folder.";
-      primaryAction = () => neverResolve();
+      primaryAction = () => stackApp.redirectToHome();
       primaryButton = "Go to Home";
       break;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/redirect-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { useStackApp } from \"..\";\nimport MessageCard from \"./message-card\";\nimport { Text, Button } from \"../components-core\";\nimport { neverResolve, wait } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nexport default function RedirectMessageCard({ \n  type,\n  fullPage=false,\n}: { \n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified',\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n  const router = useRouter();\n\n  let title: string;\n  let primaryAction: () => Promise<void>;\n  let message: string | null = null;\n  let primaryButton: string;\n  let secondaryButton: string | null = null;\n  switch (type) {\n    case 'signedIn': {\n      title = \"You are already signed in\";\n      primaryAction = () => stackApp.redirectToAfterSignOut();\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 = () => neverResolve();\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  }\n\n  return (\n    <MessageCard title={title} fullPage={fullPage}>\n      {message && <Text>{message}</Text>}\n\n      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }}>\n        {secondaryButton && (\n          <Button\n            variant=\"secondary\"\n            onClick={async () => {\n              await stackApp.redirectToSignOut();\n            }}\n          >\n            {secondaryButton}\n          </Button>\n        )}\n        \n        <Button onClick={primaryAction}>\n          {primaryButton}\n        </Button>\n      </div>\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,SAAS,MAAM,cAAc;AAC7B,SAAS,oBAA0B;AAwDjB,cAEZ,YAFY;AAtDH,SAAR,oBAAqC;AAAA,EAC1C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,MAAI;AACJ,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI;AACJ,MAAI,kBAAiC;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ;AACR,sBAAgB,MAAM,SAAS,uBAAuB;AACtD,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,aAAa;AACnC,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,EACF;AAEA,SACE,qBAAC,eAAY,OAAc,UACxB;AAAA,eAAW,oBAAC,QAAM,mBAAQ;AAAA,IAE3B,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,YAAY,UAAU,gBAAgB,UAAU,KAAK,QAAQ,WAAW,GAAG,GAC7H;AAAA,yBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,YAAY;AACnB,kBAAM,SAAS,kBAAkB;AAAA,UACnC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAGF,oBAAC,UAAO,SAAS,eACd,yBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/redirect-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { useStackApp } from \"..\";\nimport MessageCard from \"./message-card\";\nimport { Text, Button } from \"../components-core\";\nimport { neverResolve, wait } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nexport default function RedirectMessageCard({ \n  type,\n  fullPage=false,\n}: { \n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified',\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n  const router = useRouter();\n\n  let title: string;\n  let primaryAction: () => Promise<void>;\n  let message: string | null = null;\n  let primaryButton: string;\n  let secondaryButton: string | null = null;\n  switch (type) {\n    case 'signedIn': {\n      title = \"You are already signed in\";\n      primaryAction = () => stackApp.redirectToAfterSignOut();\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  }\n\n  return (\n    <MessageCard title={title} fullPage={fullPage}>\n      {message && <Text>{message}</Text>}\n\n      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }}>\n        {secondaryButton && (\n          <Button\n            variant=\"secondary\"\n            onClick={async () => {\n              await stackApp.redirectToSignOut();\n            }}\n          >\n            {secondaryButton}\n          </Button>\n        )}\n        \n        <Button onClick={primaryAction}>\n          {primaryButton}\n        </Button>\n      </div>\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,SAAS,MAAM,cAAc;AAyDX,cAEZ,YAFY;AAtDH,SAAR,oBAAqC;AAAA,EAC1C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,MAAI;AACJ,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI;AACJ,MAAI,kBAAiC;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ;AACR,sBAAgB,MAAM,SAAS,uBAAuB;AACtD,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,EACF;AAEA,SACE,qBAAC,eAAY,OAAc,UACxB;AAAA,eAAW,oBAAC,QAAM,mBAAQ;AAAA,IAE3B,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,YAAY,UAAU,gBAAgB,UAAU,KAAK,QAAQ,WAAW,GAAG,GAC7H;AAAA,yBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,YAAY;AACnB,kBAAM,SAAS,kBAAkB;AAAA,UACnC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAGF,oBAAC,UAAO,SAAS,eACd,yBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,13 +1,15 @@
 // src/components/user-avatar.tsx
-import { RxPerson } from "react-icons/rx";
+import { UserRound } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
-import { SECONDARY_FONT_COLORS } from "../utils/constants";
 import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-var StyledIcon = styled(RxPerson)`
-  color: ${SECONDARY_FONT_COLORS.light};
+var StyledIcon = styled(UserRound)`
+  height: 1.25rem;
+  width: 1.25rem;
+  color: #666666;
+
   html[data-stack-theme='dark'] & {
-    color: ${SECONDARY_FONT_COLORS.dark};
+    color: #999999;
   }
 `;
 function UserAvatar(props) {