@stackframe/stack 2.4.12 → 2.4.15

package/dist/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;AACzB,0BAA4B;AAC5B,mBAA8B;AAC9B,eAA4B;AAC5B,6BAAqC;AA2BjC;AAzBW,SAAR,kBAAmC;AACxC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,yBAAyB;AAClC;AAAA,IACF;AACA,QAAI,KAAC,4BAAc,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,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,gDAAC,gCAAM,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,4CAAC,oBAAAC,SAAA,EAAgB,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","FormWarningText"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyB;AACzB,6BAAwB;AACxB,iBAA4B;AAC5B,UAAqB;AACrB,0BAA4B;AAC5B,eAA4B;AAC5B,6BAAqC;AACrC,sBAAkC;AAyB9B;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,QAAI,gCAAQ;AAAA,IACvF,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,UAAM,sBAAY;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,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,oDAAC,gCAAM,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,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,iCAAO,UAAU,MAAM,OAAO,EAAE,WAAW,SAAS,GAAG,MAAK,UAC1D,iBAAO,eAAe,mBACzB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["FormWarningText"]}

package/dist/components/oauth-button.js

@@ -25,11 +25,37 @@ __export(oauth_button_exports, {
   default: () => OAuthButton
 });
 module.exports = __toCommonJS(oauth_button_exports);
-var import_fa = require("react-icons/fa");
 var import__ = require("..");
 var import_components_core = require("../components-core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconSize = 22;
+function GoogleIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M1 1h22v22H1z" })
+  ] });
+}
+function FacebookIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 512 512", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 21 21", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "MS-SymbolLockup" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#f25022", d: "M1 1h9v9H1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })
+  ] });
+}
+function SpotifyIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ (0, import_jsx_runtime.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
@@ -40,84 +66,52 @@ function OAuthButton({
     case "google": {
       style = {
         backgroundColor: "#fff",
+        textColor: "#000",
         name: "Google",
-        border: "1px solid #ccc",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M1 1h22v22H1z" })
-        ] })
+        border: "1px solid #ddd",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GoogleIcon, { iconSize })
       };
       break;
     }
     case "github": {
       style = {
         backgroundColor: "#111",
-        border: "1px solid #444",
+        textColor: "#fff",
+        border: "1px solid #333",
         name: "GitHub",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaGithub, { color: "#fff", size: iconSize })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GitHubIcon, { iconSize })
       };
       break;
     }
     case "facebook": {
       style = {
         backgroundColor: "#1877F2",
+        textColor: "#fff",
         name: "Facebook",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaFacebook, { color: "#fff", size: iconSize })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FacebookIcon, { iconSize })
       };
       break;
     }
-    case "apple": {
+    case "microsoft": {
       style = {
-        backgroundColor: "#000",
-        name: "Apple",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaApple, { color: "#fff", size: iconSize })
+        backgroundColor: "#2f2f2f",
+        textColor: "#fff",
+        name: "Microsoft",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MicrosoftIcon, { iconSize })
       };
       break;
     }
-    case "microsoft": {
+    case "spotify": {
       style = {
-        backgroundColor: "#2f2f2f",
-        name: "Microsoft",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 21 21", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "MS-SymbolLockup" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#f25022", d: "M1 1h9v9H1z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })
-        ] })
+        backgroundColor: "#1DB954",
+        textColor: "#fff",
+        name: "Spotify",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpotifyIcon, { iconSize })
       };
       break;
     }
     default: {
       style = {
-        backgroundColor: "#000",
         name: provider,
         icon: null
       };
@@ -127,9 +121,9 @@ function OAuthButton({
     import_components_core.Button,
     {
       color: style.backgroundColor,
-      style: { border: style.border },
+      style: { border: style.border, height: "2.5rem", color: style.textColor },
       onClick: () => stackApp.signInWithOAuth(provider),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "8px" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "1rem" }, children: [
         style.icon,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { flexGrow: 1 }, children: [
           type === "sign-up" ? "Sign up with " : "Sign in with ",

package/dist/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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAA8C;AAC9C,eAA4B;AAC5B,6BAAuB;AA0Bb;AAxBV,IAAM,WAAW;AAEF,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,QAAM,eAAW,sBAAY;AAE7B,MAAI;AAMJ,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MACE,6CAAC,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,4CAAC,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,4CAAC,sBAAS,OAAM,QAAO,MAAM,UAAU;AAAA,MAE3C;AACA;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,4CAAC,wBAAW,OAAM,QAAO,MAAM,UAAU;AAAA,MAE7C;AACA;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,4CAAC,qBAAQ,OAAM,QAAO,MAAM,UAAU;AAAA,MAE1C;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,6CAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA,sDAAC,WAAO,6BAAkB;AAAA,UAC1B,4CAAC,UAAK,MAAK,WAAU,GAAE,eAAc;AAAA,UACrC,4CAAC,UAAK,MAAK,WAAU,GAAE,gBAAe;AAAA,UACtC,4CAAC,UAAK,MAAK,WAAU,GAAE,iBAAgB;AAAA,UACvC,4CAAC,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,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ,KAAK,MAAM,GAC5E;AAAA,cAAM;AAAA,QACP,6CAAC,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/components/password-field.js

@@ -37,19 +37,17 @@ __export(password_field_exports, {
 module.exports = __toCommonJS(password_field_exports);
 var import_components_core = require("../components-core");
 var import_react = require("react");
-var import_hi = require("react-icons/hi");
 var import__ = require("..");
 var import_styled_components = __toESM(require("styled-components"));
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("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 = (0, import_styled_components.default)(import_hi.HiEyeOff)`${(props) => getIconStyle(props.colors)}`;
-var StyledEye = (0, import_styled_components.default)(import_hi.HiEye)`${(props) => getIconStyle(props.colors)}`;
+var StyledEyeOff = (0, import_styled_components.default)(import_lucide_react.EyeOff)`${(props) => getIconStyle(props.colors)}`;
+var StyledEye = (0, import_styled_components.default)(import_lucide_react.Eye)`${(props) => getIconStyle(props.colors)}`;
 var PasswordField = (0, import_react.forwardRef)(({ id, name, ...props }, ref) => {
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const { colors } = (0, import__.useDesign)();

package/dist/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAsB;AACtB,mBAA6C;AAC7C,gBAAgC;AAChC,eAA0B;AAC1B,+BAAmB;AAyCf;AAtCJ,IAAM,eAAe,CAAC,WAAyB;AAAA,WACpC,OAAO,MAAM,cAAc;AAAA;AAAA;AAAA,aAGzB,OAAO,KAAK,cAAc;AAAA;AAAA;AAGvC,IAAM,mBAAe,yBAAAA,SAAO,kBAAQ,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACrG,IAAM,gBAAY,yBAAAA,SAAO,eAAK,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE/F,IAAM,oBAAgB,yBAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,QAAM,eAAW,qBAAgC,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,6CAAC,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,4CAAC,gBAAa,QAAgB,IAAK,4CAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":["styled"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAsB;AACtB,mBAA6C;AAC7C,eAA0B;AAC1B,+BAAmB;AAEnB,0BAA4B;AAsCxB;AApCJ,IAAM,eAAe,CAAC,WAAyB;AAAA;AAAA;AAAA;AAAA;AAK/C,IAAM,mBAAe,yBAAAA,SAAO,0BAAM,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACnG,IAAM,gBAAY,yBAAAA,SAAO,uBAAG,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE7F,IAAM,oBAAgB,yBAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,QAAM,eAAW,qBAAgC,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,6CAAC,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,4CAAC,gBAAa,QAAgB,IAAK,4CAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":["styled"]}

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

@@ -36,6 +36,9 @@ __export(password_reset_inner_exports, {
 });
 module.exports = __toCommonJS(password_reset_inner_exports);
 var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
 var import_password = require("@stackframe/stack-shared/dist/helpers/password");
 var import__ = require("..");
 var import_password_field = __toESM(require("./password-field"));
@@ -44,33 +47,31 @@ var import_redirect_message_card = __toESM(require("./redirect-message-card"));
 var import_message_card = __toESM(require("./message-card"));
 var import_card_frame = __toESM(require("./card-frame"));
 var import_components_core = require("../components-core");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_jsx_runtime = require("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 = (0, import_password.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] = (0, import_react.useState)("");
-  const [passwordError, setPasswordError] = (0, import_react.useState)("");
-  const [passwordRepeat, setPasswordRepeat] = (0, import_react.useState)("");
-  const [passwordRepeatError, setPasswordRepeatError] = (0, import_react.useState)("");
+  const { register, handleSubmit, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
+  const stackApp = (0, import__.useStackApp)();
   const [finished, setFinished] = (0, import_react.useState)(false);
   const [resetError, setResetError] = (0, import_react.useState)(false);
-  const stackApp = (0, import__.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 = (0, import_password.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);
@@ -86,39 +87,43 @@ function PasswordResetInner({ code, fullPage = false }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card_frame.default, { fullPage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", children: "New Password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_password_field.default,
-        {
-          id: "password",
-          name: "password",
-          value: password,
-          onChange: (e) => {
-            setPassword(e.target.value);
-            setPasswordError("");
-            setPasswordRepeatError("");
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: passwordError }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_password_field.default,
-        {
-          id: "repeat-password",
-          name: "repeat-password",
-          value: passwordRepeat,
-          onChange: (e) => {
-            setPasswordRepeat(e.target.value);
-            setPasswordError("");
-            setPasswordRepeatError("");
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: passwordRepeatError }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { style: { marginTop: "1.5rem" }, onClick: () => onSubmit(), children: "Reset Password" })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+        onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", children: "New Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_password_field.default,
+            {
+              id: "password",
+              ...register("password"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.password?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_password_field.default,
+            {
+              id: "repeat-password",
+              ...register("passwordRepeat"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.passwordRepeat?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { style: { marginTop: "1.5rem" }, type: "submit", children: "Reset Password" })
+        ]
+      }
+    )
   ] });
 }
 //# sourceMappingURL=password-reset-inner.js.map

package/dist/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyB;AACzB,sBAAiC;AACjC,eAA4B;AAC5B,4BAA0B;AAC1B,0BAA4B;AAC5B,mCAAgC;AAChC,0BAAwB;AACxB,wBAAsB;AACtB,6BAAoC;AA+CzB;AA5CI,SAAR,mBACL,EAAE,MAAM,WAAW,MAAM,GAEzB;AACA,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,EAAE;AACvD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,EAAE;AACjE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,eAAW,sBAAY;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,qBAAgB,kCAAiB,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,4CAAC,6BAAAC,SAAA,EAAoB,MAAK,iBAAgB,UAAoB;AAAA,EACvE;AAEA,MAAI,YAAY;AACd,WACE,4CAAC,oBAAAC,SAAA,EAAY,OAAM,4BAA2B,UAC5C,sDAAC,+BAAK,gFAAkE,GAC1E;AAAA,EAEJ;AAEA,SACE,6CAAC,kBAAAC,SAAA,EAAU,UACT;AAAA,gDAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD,sDAAC,+BAAK,MAAK,MAAK,IAAG,MAAK,iCAAmB,GAC7C;AAAA,IAEA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,kDAAC,gCAAM,SAAQ,YAAW,0BAAY;AAAA,MACtC;AAAA,QAAC,sBAAAC;AAAA,QAAA;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,4CAAC,oBAAAC,SAAA,EAAgB,MAAM,eAAe;AAAA,MAEtC,4CAAC,gCAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,iCAAmB;AAAA,MAClF;AAAA,QAAC,sBAAAD;AAAA,QAAA;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,4CAAC,oBAAAC,SAAA,EAAgB,MAAM,qBAAqB;AAAA,MAE5C,4CAAC,iCAAO,OAAO,EAAE,WAAW,SAAS,GAAG,SAAS,MAAM,SAAS,GAAG,4BAEnE;AAAA,OACF;AAAA,KACF;AAEJ;","names":["passwordError","RedirectMessageCard","MessageCard","CardFrame","PasswordField","FormWarningText"]}
+{"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":["RedirectMessageCard","MessageCard","CardFrame","PasswordField","FormWarningText"]}

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

@@ -39,7 +39,6 @@ var import_navigation = require("next/navigation");
 var import__ = require("..");
 var import_message_card = __toESM(require("./message-card"));
 var import_components_core = require("../components-core");
-var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_jsx_runtime = require("react/jsx-runtime");
 function RedirectMessageCard({
   type,
@@ -69,7 +68,7 @@ function RedirectMessageCard({
     case "emailSent": {
       title = "Email sent!";
       message = "Please check your inbox. Make sure to check your spam folder.";
-      primaryAction = () => (0, import_promises.neverResolve)();
+      primaryAction = () => stackApp.redirectToHome();
       primaryButton = "Go to Home";
       break;
     }

package/dist/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAA0B;AAC1B,eAA4B;AAC5B,0BAAwB;AACxB,6BAA6B;AAC7B,sBAAmC;AAwDjB;AAtDH,SAAR,oBAAqC;AAAA,EAC1C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,aAAS,6BAAU;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,UAAM,8BAAa;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,6CAAC,oBAAAA,SAAA,EAAY,OAAc,UACxB;AAAA,eAAW,4CAAC,+BAAM,mBAAQ;AAAA,IAE3B,6CAAC,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,4CAAC,iCAAO,SAAS,eACd,yBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":["MessageCard"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAA0B;AAC1B,eAA4B;AAC5B,0BAAwB;AACxB,6BAA6B;AAyDX;AAtDH,SAAR,oBAAqC;AAAA,EAC1C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,aAAS,6BAAU;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,6CAAC,oBAAAA,SAAA,EAAY,OAAc,UACxB;AAAA,eAAW,4CAAC,+BAAM,mBAAQ;AAAA,IAE3B,6CAAC,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,4CAAC,iCAAO,SAAS,eACd,yBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":["MessageCard"]}

package/dist/components/user-avatar.d.mts

@@ -5,6 +5,7 @@ import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/interface/adminInterface';
 import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 
 declare function UserAvatar(props: {
     size?: number;

package/dist/components/user-avatar.d.ts

@@ -5,6 +5,7 @@ import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/interface/adminInterface';
 import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 
 declare function UserAvatar(props: {
     size?: number;

package/dist/components/user-avatar.js

@@ -33,15 +33,17 @@ __export(user_avatar_exports, {
   default: () => UserAvatar
 });
 module.exports = __toCommonJS(user_avatar_exports);
-var import_rx = require("react-icons/rx");
+var import_lucide_react = require("lucide-react");
 var import__ = require("..");
-var import_constants = require("../utils/constants");
 var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var StyledIcon = (0, import_styled_components.default)(import_rx.RxPerson)`
-  color: ${import_constants.SECONDARY_FONT_COLORS.light};
+var StyledIcon = (0, import_styled_components.default)(import_lucide_react.UserRound)`
+  height: 1.25rem;
+  width: 1.25rem;
+  color: #666666;
+
   html[data-stack-theme='dark'] & {
-    color: ${import_constants.SECONDARY_FONT_COLORS.dark};
+    color: #999999;
   }
 `;
 function UserAvatar(props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\n\n\nconst StyledIcon = styled(RxPerson)`\n  color: ${SECONDARY_FONT_COLORS.light};\n  html[data-stack-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <StyledIcon size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AACzB,eAA0D;AAE1D,uBAAsC;AACtC,+BAAmB;AAaf;AAVJ,IAAM,iBAAa,yBAAAA,SAAO,kBAAQ;AAAA,WACvB,uCAAsB,KAAK;AAAA;AAAA,aAEzB,uCAAsB,IAAI;AAAA;AAAA;AAIxB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,mBAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,gDAAC,wBAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,2BACE,iBACC,4CAAC,iBAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,4CAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":["styled"]}
+{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport styled from \"styled-components\";\n\nconst StyledIcon = styled(UserRound)`\n  height: 1.25rem;\n  width: 1.25rem;\n  color: #666666;\n\n  html[data-stack-theme='dark'] & {\n    color: #999999;\n  }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <StyledIcon size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA0B;AAC1B,eAA0D;AAE1D,+BAAmB;AAef;AAbJ,IAAM,iBAAa,yBAAAA,SAAO,6BAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,mBAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,gDAAC,wBAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,2BACE,iBACC,4CAAC,iBAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,4CAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":["styled"]}