@hexclave/next 1.0.0 → 1.0.2

package/dist/components-page/account-settings/email-and-auth/emails-section.js

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../../../chunk-BE-pF4vm.js');
 let _hookform_resolvers_yup = require("@hookform/resolvers/yup");
-let _stackframe_stack_shared_dist_schema_fields = require("@hexclave/shared/dist/schema-fields");
-let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_shared_dist_schema_fields = require("@hexclave/shared/dist/schema-fields");
+let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let react_hook_form = require("react-hook-form");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _________lib_hooks_js = require("../../../lib/hooks.js");
 let _________lib_translations_js = require("../../../lib/translations.js");
-let _stackframe_stack_shared_dist_known_errors = require("@hexclave/shared/dist/known-errors");
+let _hexclave_shared_dist_known_errors = require("@hexclave/shared/dist/known-errors");
 let _________components_elements_form_warning_js = require("../../../components/elements/form-warning.js");
 
 //#region src/components-page/account-settings/email-and-auth/emails-section.tsx
@@ -18,11 +18,11 @@ function EmailsSection(props) {
 	const user = (0, _________lib_hooks_js.useUser)({ or: props?.mockMode ? "return-null" : "redirect" });
 	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex flex-col md:flex-row justify-between mb-4 gap-4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			className: "font-medium",
 			children: t("Emails")
 		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 		variant: "secondary",
 		children: t("Email management is not available in demo mode.")
 	})] });
@@ -33,13 +33,13 @@ function EmailsSection(props) {
 	const [addedEmail, setAddedEmail] = (0, react.useState)(null);
 	const isLastEmailUsedForAuth = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
 	(0, react.useEffect)(() => {
-		if (addedEmail) (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(async () => {
+		if (addedEmail) (0, _hexclave_shared_dist_utils_promises.runAsynchronously)(async () => {
 			const cc = contactChannels.find((x) => x.value === addedEmail);
 			if (cc && !cc.isVerified) await cc.sendVerificationEmail();
 			setAddedEmail(null);
 		});
 	}, [contactChannels, addedEmail]);
-	const { register, handleSubmit, formState: { errors }, reset } = (0, react_hook_form.useForm)({ resolver: (0, _hookform_resolvers_yup.yupResolver)((0, _stackframe_stack_shared_dist_schema_fields.yupObject)({ email: (0, _stackframe_stack_shared_dist_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required")) })) });
+	const { register, handleSubmit, formState: { errors }, reset } = (0, react_hook_form.useForm)({ resolver: (0, _hookform_resolvers_yup.yupResolver)((0, _hexclave_shared_dist_schema_fields.yupObject)({ email: (0, _hexclave_shared_dist_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required")) })) });
 	const onSubmit = async (data) => {
 		setAddingEmailLoading(true);
 		try {
@@ -57,28 +57,28 @@ function EmailsSection(props) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col md:flex-row justify-between mb-4 gap-4",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			className: "font-medium",
 			children: t("Emails")
 		}), addingEmail ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 			onSubmit: (e) => {
 				e.preventDefault();
-				(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(handleSubmit(onSubmit));
+				(0, _hexclave_shared_dist_utils_promises.runAsynchronously)(handleSubmit(onSubmit));
 			},
 			className: "flex flex-col",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Input, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Input, {
 						...register("email"),
 						placeholder: t("Enter email")
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						type: "submit",
 						loading: addingEmailLoading,
 						children: t("Add")
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						variant: "secondary",
 						onClick: () => {
 							setAddingEmail(false);
@@ -90,7 +90,7 @@ function EmailsSection(props) {
 			}), errors.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_________components_elements_form_warning_js.FormWarningText, { text: errors.email.message })]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex md:justify-end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 				variant: "secondary",
 				onClick: () => setAddingEmail(true),
 				children: t("Add an email")
@@ -98,29 +98,29 @@ function EmailsSection(props) {
 		})]
 	}), contactChannels.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "border rounded-md",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Table, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Table, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
 			if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
 			if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
 			return 0;
-		}).map((x) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.TableRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}).map((x) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.TableRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col md:flex-row gap-2 md:gap-4",
 			children: [x.value, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex gap-2",
 				children: [
-					x.isPrimary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Badge, { children: t("Primary") }) : null,
-					!x.isVerified ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Badge, {
+					x.isPrimary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Badge, { children: t("Primary") }) : null,
+					!x.isVerified ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Badge, {
 						variant: "destructive",
 						children: t("Unverified")
 					}) : null,
-					x.usedForAuth ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Badge, {
+					x.usedForAuth ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Badge, {
 						variant: "outline",
 						children: t("Used for sign-in")
 					}) : null
 				]
 			})]
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, {
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.TableCell, {
 			className: "flex justify-end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.ActionCell, { items: [
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.ActionCell, { items: [
 				...!x.isVerified ? [{
 					item: t("Send verification email"),
 					onClick: async () => {
@@ -144,7 +144,7 @@ function EmailsSection(props) {
 						try {
 							await x.update({ usedForAuth: true });
 						} catch (e) {
-							if (_stackframe_stack_shared_dist_known_errors.KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) alert(t("This email is already used for sign-in by another user."));
+							if (_hexclave_shared_dist_known_errors.KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) alert(t("This email is already used for sign-in by another user."));
 						}
 					}
 				}] : [],

package/dist/components-page/account-settings/email-and-auth/emails-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"emails-section.js","names":["Typography","Input","Button","FormWarningText","Table","TableBody","TableRow","TableCell","Badge","ActionCell","KnownErrors"],"sources":["../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <div>\n        <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n          <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        </div>\n        <Typography variant='secondary'>{t(\"Email management is not available in demo mode.\")}</Typography>\n      </div>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to redirect\n  }\n\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmailUsedForAuth = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmailUsedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        // Determine if this email can be removed\n                        ...(!isLastEmailUsedForAuth || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"emails-section.js","names":["Typography","Input","Button","FormWarningText","Table","TableBody","TableRow","TableCell","Badge","ActionCell","KnownErrors"],"sources":["../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@hexclave/shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@hexclave/shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@hexclave/ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <div>\n        <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n          <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        </div>\n        <Typography variant='secondary'>{t(\"Email management is not available in demo mode.\")}</Typography>\n      </div>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to redirect\n  }\n\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmailUsedForAuth = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmailUsedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        // Determine if this email can be removed\n                        ...(!isLastEmailUsedForAuth || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components-page/account-settings/email-and-auth/mfa-section.js

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../../../chunk-BE-pF4vm.js');
-let _stackframe_stack_shared_dist_utils_errors = require("@hexclave/shared/dist/utils/errors");
-let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_shared_dist_utils_errors = require("@hexclave/shared/dist/utils/errors");
+let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _________lib_hooks_js = require("../../../lib/hooks.js");
 let _________lib_translations_js = require("../../../lib/translations.js");
 let _oslojs_otp = require("@oslojs/otp");
-let _stackframe_stack_shared_dist_hooks_use_async_callback = require("@hexclave/shared/dist/hooks/use-async-callback");
-let _stackframe_stack_shared_dist_utils_crypto = require("@hexclave/shared/dist/utils/crypto");
+let _hexclave_shared_dist_hooks_use_async_callback = require("@hexclave/shared/dist/hooks/use-async-callback");
+let _hexclave_shared_dist_utils_crypto = require("@hexclave/shared/dist/utils/crypto");
 let qrcode = require("qrcode");
 qrcode = require_chunk.__toESM(qrcode);
 let ___section_js = require("../section.js");
@@ -22,7 +22,7 @@ function MfaSection(props) {
 	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
 		title: t("Multi-factor authentication"),
 		description: t("MFA management is not available in demo mode."),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			variant: "secondary",
 			children: t("MFA management is not available in demo mode.")
 		})
@@ -33,7 +33,7 @@ function MfaSection(props) {
 	const [mfaCode, setMfaCode] = (0, react.useState)("");
 	const [isMaybeWrong, setIsMaybeWrong] = (0, react.useState)(false);
 	const isEnabled = user.isMultiFactorRequired;
-	const [handleSubmit, isLoading] = (0, _stackframe_stack_shared_dist_hooks_use_async_callback.useAsyncCallback)(async () => {
+	const [handleSubmit, isLoading] = (0, _hexclave_shared_dist_hooks_use_async_callback.useAsyncCallback)(async () => {
 		await user.update({ totpMultiFactorSecret: generatedSecret });
 		setGeneratedSecret(null);
 		setQrCodeUrl(null);
@@ -41,7 +41,7 @@ function MfaSection(props) {
 	}, [generatedSecret, user]);
 	(0, react.useEffect)(() => {
 		setIsMaybeWrong(false);
-		(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+		(0, _hexclave_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
 			if (generatedSecret && (0, _oslojs_otp.verifyTOTP)(generatedSecret, 30, 6, mfaCode)) await handleSubmit();
 			setIsMaybeWrong(true);
 		});
@@ -56,15 +56,15 @@ function MfaSection(props) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col gap-4",
 			children: [!isEnabled && generatedSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: t("Scan this QR code with your authenticator app:") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, { children: t("Scan this QR code with your authenticator app:") }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 					width: 200,
 					height: 200,
-					src: qrCodeUrl ?? (0, _stackframe_stack_shared_dist_utils_errors.throwErr)("TOTP QR code failed to generate"),
+					src: qrCodeUrl ?? (0, _hexclave_shared_dist_utils_errors.throwErr)("TOTP QR code failed to generate"),
 					alt: t("TOTP multi-factor authentication QR code")
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: t("Then, enter your six-digit MFA code:") }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Input, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, { children: t("Then, enter your six-digit MFA code:") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Input, {
 					value: mfaCode,
 					onChange: (e) => {
 						setIsMaybeWrong(false);
@@ -74,13 +74,13 @@ function MfaSection(props) {
 					maxLength: 6,
 					disabled: isLoading
 				}),
-				isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 					variant: "destructive",
 					children: t("Incorrect code. Please try again.")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						variant: "secondary",
 						onClick: () => {
 							setGeneratedSecret(null);
@@ -92,16 +92,16 @@ function MfaSection(props) {
 				})
 			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex gap-2",
-				children: isEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				children: isEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					variant: "secondary",
 					onClick: async () => {
 						await user.update({ totpMultiFactorSecret: null });
 					},
 					children: t("Disable MFA")
-				}) : !generatedSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				}) : !generatedSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					variant: "secondary",
 					onClick: async () => {
-						const secret = (0, _stackframe_stack_shared_dist_utils_crypto.generateRandomValues)(new Uint8Array(20));
+						const secret = (0, _hexclave_shared_dist_utils_crypto.generateRandomValues)(new Uint8Array(20));
 						setQrCodeUrl(await generateTotpQrCode(project, user, secret));
 						setGeneratedSecret(secret);
 					},

package/dist/components-page/account-settings/email-and-auth/mfa-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"mfa-section.js","names":["Section","Typography","Input","Button","QRCode"],"sources":["../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Typography } from \"@stackframe/stack-ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const project = useStackApp().useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Multi-factor authentication\")}\n        description={t(\"MFA management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"MFA management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"Scan this QR code with your authenticator app:\")}</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"Then, enter your six-digit MFA code:\")}</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,CAAC,iBAAiB,0CAAkD,KAAK;CAC/E,MAAM,CAAC,WAAW,oCAAwC,KAAK;CAC/D,MAAM,CAAC,SAAS,kCAA+B,GAAG;CAClD,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAM,YAAY,KAAK;CAEvB,MAAM,CAAC,cAAc,0FAA8B,YAAY;AAC7D,QAAM,KAAK,OAAO,EAChB,uBAAuB,iBACxB,CAAC;AACF,qBAAmB,KAAK;AACxB,eAAa,KAAK;AAClB,aAAW,GAAG;IACb,CAAC,iBAAiB,KAAK,CAAC;AAE3B,4BAAgB;AACd,kBAAgB,MAAM;AACtB,+EAA2B,YAAY;AACrC,OAAI,+CAA8B,iBAAiB,IAAI,GAAG,QAAQ,CAChE,OAAM,cAAc;AAEtB,mBAAgB,KAAK;IACrB;IACD;EAAC;EAAS;EAAiB;EAAa,CAAC;AAE5C,QACE,2CAACD;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,YACT,EAAE,oDAAoD,GACtD,EAAE,qDAAqD;YAE3D,4CAAC;GAAI,WAAU;cACZ,CAAC,aAAa,mBACb;IACE,2CAACC,6CAAY,EAAE,iDAAiD,GAAc;IAC9E,2CAAC;KAAI,OAAO;KAAK,QAAQ;KAAK,KAAK,sEAAsB,kCAAkC;KAAE,KAAK,EAAE,2CAA2C;MAAI;IACnJ,2CAACA,6CAAY,EAAE,uCAAuC,GAAc;IACpE,2CAACC;KACC,OAAO;KACP,WAAW,MAAM;AACf,sBAAgB,MAAM;AACtB,iBAAW,EAAE,OAAO,MAAM;;KAE5B,aAAY;KACZ,WAAW;KACX,UAAU;MACV;IACD,gBAAgB,QAAQ,WAAW,KAClC,2CAACD;KAAW,SAAQ;eAAe,EAAE,oCAAoC;MAAc;IAEzF,2CAAC;KAAI,WAAU;eACb,2CAACE;MACC,SAAQ;MACR,eAAe;AACb,0BAAmB,KAAK;AACxB,oBAAa,KAAK;AAClB,kBAAW,GAAG;;gBAGf,EAAE,SAAS;OACL;MACL;OACL,EAEL,2CAAC;IAAI,WAAU;cACZ,YACC,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,OAAO,EAChB,uBAAuB,MACxB,CAAC;;eAGH,EAAE,cAAc;MACV,GACP,CAAC,mBACH,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;MACnB,MAAM,8EAA8B,IAAI,WAAW,GAAG,CAAC;AACvD,mBAAa,MAAM,mBAAmB,SAAS,MAAM,OAAO,CAAC;AAC7D,yBAAmB,OAAO;;eAG3B,EAAE,aAAa;MACT;KAEP;IACF;GACE;;AAKd,eAAe,mBAAmB,SAAkB,MAAmB,QAAoB;CACzF,MAAM,wCAAuB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,EAAE;AAC9F,QAAO,MAAMC,OAAO,UAAU,IAAI"}
+{"version":3,"file":"mfa-section.js","names":["Section","Typography","Input","Button","QRCode"],"sources":["../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\nimport { useAsyncCallback } from '@hexclave/shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@hexclave/shared/dist/utils/crypto';\nimport { throwErr } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { Button, Input, Typography } from \"@hexclave/ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const project = useStackApp().useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Multi-factor authentication\")}\n        description={t(\"MFA management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"MFA management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"Scan this QR code with your authenticator app:\")}</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"Then, enter your six-digit MFA code:\")}</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,CAAC,iBAAiB,0CAAkD,KAAK;CAC/E,MAAM,CAAC,WAAW,oCAAwC,KAAK;CAC/D,MAAM,CAAC,SAAS,kCAA+B,GAAG;CAClD,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAM,YAAY,KAAK;CAEvB,MAAM,CAAC,cAAc,kFAA8B,YAAY;AAC7D,QAAM,KAAK,OAAO,EAChB,uBAAuB,iBACxB,CAAC;AACF,qBAAmB,KAAK;AACxB,eAAa,KAAK;AAClB,aAAW,GAAG;IACb,CAAC,iBAAiB,KAAK,CAAC;AAE3B,4BAAgB;AACd,kBAAgB,MAAM;AACtB,uEAA2B,YAAY;AACrC,OAAI,+CAA8B,iBAAiB,IAAI,GAAG,QAAQ,CAChE,OAAM,cAAc;AAEtB,mBAAgB,KAAK;IACrB;IACD;EAAC;EAAS;EAAiB;EAAa,CAAC;AAE5C,QACE,2CAACD;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,YACT,EAAE,oDAAoD,GACtD,EAAE,qDAAqD;YAE3D,4CAAC;GAAI,WAAU;cACZ,CAAC,aAAa,mBACb;IACE,2CAACC,qCAAY,EAAE,iDAAiD,GAAc;IAC9E,2CAAC;KAAI,OAAO;KAAK,QAAQ;KAAK,KAAK,8DAAsB,kCAAkC;KAAE,KAAK,EAAE,2CAA2C;MAAI;IACnJ,2CAACA,qCAAY,EAAE,uCAAuC,GAAc;IACpE,2CAACC;KACC,OAAO;KACP,WAAW,MAAM;AACf,sBAAgB,MAAM;AACtB,iBAAW,EAAE,OAAO,MAAM;;KAE5B,aAAY;KACZ,WAAW;KACX,UAAU;MACV;IACD,gBAAgB,QAAQ,WAAW,KAClC,2CAACD;KAAW,SAAQ;eAAe,EAAE,oCAAoC;MAAc;IAEzF,2CAAC;KAAI,WAAU;eACb,2CAACE;MACC,SAAQ;MACR,eAAe;AACb,0BAAmB,KAAK;AACxB,oBAAa,KAAK;AAClB,kBAAW,GAAG;;gBAGf,EAAE,SAAS;OACL;MACL;OACL,EAEL,2CAAC;IAAI,WAAU;cACZ,YACC,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,OAAO,EAChB,uBAAuB,MACxB,CAAC;;eAGH,EAAE,cAAc;MACV,GACP,CAAC,mBACH,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;MACnB,MAAM,sEAA8B,IAAI,WAAW,GAAG,CAAC;AACvD,mBAAa,MAAM,mBAAmB,SAAS,MAAM,OAAO,CAAC;AAC7D,yBAAmB,OAAO;;eAG3B,EAAE,aAAa;MACT;KAEP;IACF;GACE;;AAKd,eAAe,mBAAmB,SAAkB,MAAmB,QAAoB;CACzF,MAAM,wCAAuB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,EAAE;AAC9F,QAAO,MAAMC,OAAO,UAAU,IAAI"}

package/dist/components-page/account-settings/email-and-auth/otp-section.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../../../chunk-BE-pF4vm.js');
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _________lib_hooks_js = require("../../../lib/hooks.js");
@@ -14,7 +14,7 @@ function OtpSection(props) {
 	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
 		title: t("One-Time Password"),
 		description: t("OTP management is not available in demo mode."),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			variant: "secondary",
 			children: t("OTP management is not available in demo mode.")
 		})
@@ -35,38 +35,38 @@ function OtpSection(props) {
 		description: user.otpAuthEnabled ? t("OTP/magic link sign-in is currently enabled.") : t("Enable sign-in via magic link or OTP sent to your sign-in emails."),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex md:justify-end",
-			children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+			children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 				variant: "secondary",
 				onClick: () => setDisabling(true),
 				children: t("Disable OTP")
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 					variant: "destructive",
 					children: t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						variant: "destructive",
 						onClick: handleDisableOTP,
 						children: t("Disable")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						variant: "secondary",
 						onClick: () => setDisabling(false),
 						children: t("Cancel")
 					})]
 				})]
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 				variant: "secondary",
 				type: "label",
 				children: t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method")
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 				variant: "secondary",
 				onClick: async () => {
 					await user.update({ otpAuthEnabled: true });
 				},
 				children: t("Enable OTP")
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 				variant: "secondary",
 				type: "label",
 				children: t("To enable OTP sign-in, please add a verified sign-in email.")

package/dist/components-page/account-settings/email-and-auth/otp-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-section.js","names":["Section","Typography","Button"],"sources":["../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"One-Time Password\")}\n        description={t(\"OTP management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"OTP management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,kBAAkB,KAAK,oBAAoB;CACjD,MAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CACzG,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAGjD,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,iBAClB,QAAO;CAGT,MAAM,mBAAmB,YAAY;AACnC,QAAM,KAAK,OAAO,EAAE,gBAAgB,OAAO,CAAC;AAC5C,eAAa,MAAM;;AAGrB,QACE,2CAACD;EAAQ,OAAO,EAAE,cAAc;EAAE,aAAa,KAAK,iBAAiB,EAAE,+CAA+C,GAAG,EAAE,oEAAoE;YAC7L,2CAAC;GAAI,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,2CAACE;IACC,SAAQ;IACR,eAAe,aAAa,KAAK;cAEhC,EAAE,cAAc;KACV,GAET,4CAAC;IAAI,WAAU;eACb,2CAACD;KAAW,SAAQ;eACjB,EAAE,0GAA0G;MAClG,EACb,4CAAC;KAAI,WAAU;gBACb,2CAACC;MACC,SAAQ;MACR,SAAS;gBAER,EAAE,UAAU;OACN,EACT,2CAACA;MACC,SAAQ;MACR,eAAe,aAAa,MAAM;gBAEjC,EAAE,SAAS;OACL;MACL;KACF,GAGR,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,2FAA2F;KAAc,GAG3J,2CAACC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,WAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;;cAG5C,EAAE,aAAa;KACT,GAGX,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,8DAA8D;KAAc;IAE1H;GACE"}
+{"version":3,"file":"otp-section.js","names":["Section","Typography","Button"],"sources":["../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button, Typography } from \"@hexclave/ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"One-Time Password\")}\n        description={t(\"OTP management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"OTP management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,kBAAkB,KAAK,oBAAoB;CACjD,MAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CACzG,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAGjD,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,iBAClB,QAAO;CAGT,MAAM,mBAAmB,YAAY;AACnC,QAAM,KAAK,OAAO,EAAE,gBAAgB,OAAO,CAAC;AAC5C,eAAa,MAAM;;AAGrB,QACE,2CAACD;EAAQ,OAAO,EAAE,cAAc;EAAE,aAAa,KAAK,iBAAiB,EAAE,+CAA+C,GAAG,EAAE,oEAAoE;YAC7L,2CAAC;GAAI,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,2CAACE;IACC,SAAQ;IACR,eAAe,aAAa,KAAK;cAEhC,EAAE,cAAc;KACV,GAET,4CAAC;IAAI,WAAU;eACb,2CAACD;KAAW,SAAQ;eACjB,EAAE,0GAA0G;MAClG,EACb,4CAAC;KAAI,WAAU;gBACb,2CAACC;MACC,SAAQ;MACR,SAAS;gBAER,EAAE,UAAU;OACN,EACT,2CAACA;MACC,SAAQ;MACR,eAAe,aAAa,MAAM;gBAEjC,EAAE,SAAS;OACL;MACL;KACF,GAGR,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,2FAA2F;KAAc,GAG3J,2CAACC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,WAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;;cAG5C,EAAE,aAAa;KACT,GAGX,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,8DAA8D;KAAc;IAE1H;GACE"}

package/dist/components-page/account-settings/email-and-auth/passkey-section.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../../../chunk-BE-pF4vm.js');
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _________lib_hooks_js = require("../../../lib/hooks.js");
@@ -15,7 +15,7 @@ function PasskeySection(props) {
 	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
 		title: t("Passkey"),
 		description: t("Passkey management is not available in demo mode."),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			variant: "secondary",
 			children: t("Passkey management is not available in demo mode.")
 		})
@@ -41,38 +41,38 @@ function PasskeySection(props) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex md:justify-end gap-2",
 			children: [
-				!hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				!hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 					variant: "secondary",
 					type: "label",
 					children: t("To enable Passkey sign-in, please add a verified sign-in email.")
 				}),
-				hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 					variant: "secondary",
 					type: "label",
 					children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method")
 				}),
-				!hasPasskey && hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				!hasPasskey && hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					onClick: handleAddNewPasskey,
 					variant: "secondary",
 					children: t("Add new passkey")
 				}) }),
-				hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					variant: "secondary",
 					onClick: () => setShowConfirmationModal(true),
 					children: t("Delete Passkey")
 				}),
 				hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 						variant: "destructive",
 						children: t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 							variant: "destructive",
 							onClick: handleDeletePasskey,
 							children: t("Disable")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 							variant: "secondary",
 							onClick: () => setShowConfirmationModal(false),
 							children: t("Cancel")

package/dist/components-page/account-settings/email-and-auth/passkey-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"passkey-section.js","names":["Section","Typography","Button"],"sources":["../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function PasskeySection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Passkey\")}\n        description={t(\"Passkey management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Passkey management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n  const contactChannels = user.useContactChannels();\n\n\n  // passkey is enabled if there is a passkey\n  const hasPasskey = user.passkeyAuthEnabled;\n\n  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;\n  const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.passkeyEnabled) {\n    return null;\n  }\n\n  const handleDeletePasskey = async () => {\n    await user.update({ passkeyAuthEnabled: false });\n    setShowConfirmationModal(false);\n  };\n\n\n  const handleAddNewPasskey = async () => {\n    await user.registerPasskey();\n  };\n\n  return (\n    <>\n      <Section title={t(\"Passkey\")} description={hasPasskey ? t(\"Passkey registered\") : t(\"Register a passkey\")}>\n        <div className='flex md:justify-end gap-2'>\n          {!hasValidEmail && (\n            <Typography variant='secondary' type='label'>{t(\"To enable Passkey sign-in, please add a verified sign-in email.\")}</Typography>\n          )}\n          {hasValidEmail && hasPasskey && isLastAuth && (\n            <Typography variant='secondary' type='label'>{t(\"Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n          )}\n          {!hasPasskey && hasValidEmail && (\n            <div>\n              <Button onClick={handleAddNewPasskey} variant='secondary'>{t(\"Add new passkey\")}</Button>\n            </div>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (\n            <Button\n              variant='secondary'\n              onClick={() => setShowConfirmationModal(true)}\n            >\n              {t(\"Delete Passkey\")}\n            </Button>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (\n            <div className='flex flex-col gap-2'>\n              <Typography variant='destructive'>\n                {t(\"Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.\")}\n              </Typography>\n              <div className='flex gap-2'>\n                <Button\n                  variant='destructive'\n                  onClick={handleDeletePasskey}\n                >\n                  {t(\"Disable\")}\n                </Button>\n                <Button\n                  variant='secondary'\n                  onClick={() => setShowConfirmationModal(false)}\n                >\n                  {t(\"Cancel\")}\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </Section>\n\n\n    </>\n\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,eAAe,OAE5B;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,UAAU;EACnB,aAAa,EAAE,oDAAoD;YAEnE,2CAACC;GAAW,SAAQ;aAAa,EAAE,oDAAoD;IAAc;GAC7F;AAId,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,8CADwB,CACL,YAAY;CACrC,MAAM,kBAAkB,KAAK,oBAAoB;CAIjD,MAAM,aAAa,KAAK;CAExB,MAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CAC7G,MAAM,CAAC,uBAAuB,gDAAqC,MAAM;CAGzE,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,eAClB,QAAO;CAGT,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,OAAO,EAAE,oBAAoB,OAAO,CAAC;AAChD,2BAAyB,MAAM;;CAIjC,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,iBAAiB;;AAG9B,QACE,mFACE,2CAACD;EAAQ,OAAO,EAAE,UAAU;EAAE,aAAa,aAAa,EAAE,qBAAqB,GAAG,EAAE,qBAAqB;YACvG,4CAAC;GAAI,WAAU;;IACZ,CAAC,iBACA,2CAACC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,kEAAkE;MAAc;IAEjI,iBAAiB,cAAc,cAC9B,2CAACA;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,+FAA+F;MAAc;IAE9J,CAAC,cAAc,iBACd,2CAAC,mBACC,2CAACC;KAAO,SAAS;KAAqB,SAAQ;eAAa,EAAE,kBAAkB;MAAU,GACrF;IAEP,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,2CAACA;KACC,SAAQ;KACR,eAAe,yBAAyB,KAAK;eAE5C,EAAE,iBAAiB;MACb;IAEV,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,4CAAC;KAAI,WAAU;gBACb,2CAACD;MAAW,SAAQ;gBACjB,EAAE,+GAA+G;OACvG,EACb,4CAAC;MAAI,WAAU;iBACb,2CAACC;OACC,SAAQ;OACR,SAAS;iBAER,EAAE,UAAU;QACN,EACT,2CAACA;OACC,SAAQ;OACR,eAAe,yBAAyB,MAAM;iBAE7C,EAAE,SAAS;QACL;OACL;MACF;;IAEJ;GACE,GAGT"}
+{"version":3,"file":"passkey-section.js","names":["Section","Typography","Button"],"sources":["../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button, Typography } from \"@hexclave/ui\";\nimport { useState } from \"react\";\nimport { useStackApp } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function PasskeySection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Passkey\")}\n        description={t(\"Passkey management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Passkey management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n  const contactChannels = user.useContactChannels();\n\n\n  // passkey is enabled if there is a passkey\n  const hasPasskey = user.passkeyAuthEnabled;\n\n  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;\n  const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.passkeyEnabled) {\n    return null;\n  }\n\n  const handleDeletePasskey = async () => {\n    await user.update({ passkeyAuthEnabled: false });\n    setShowConfirmationModal(false);\n  };\n\n\n  const handleAddNewPasskey = async () => {\n    await user.registerPasskey();\n  };\n\n  return (\n    <>\n      <Section title={t(\"Passkey\")} description={hasPasskey ? t(\"Passkey registered\") : t(\"Register a passkey\")}>\n        <div className='flex md:justify-end gap-2'>\n          {!hasValidEmail && (\n            <Typography variant='secondary' type='label'>{t(\"To enable Passkey sign-in, please add a verified sign-in email.\")}</Typography>\n          )}\n          {hasValidEmail && hasPasskey && isLastAuth && (\n            <Typography variant='secondary' type='label'>{t(\"Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n          )}\n          {!hasPasskey && hasValidEmail && (\n            <div>\n              <Button onClick={handleAddNewPasskey} variant='secondary'>{t(\"Add new passkey\")}</Button>\n            </div>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (\n            <Button\n              variant='secondary'\n              onClick={() => setShowConfirmationModal(true)}\n            >\n              {t(\"Delete Passkey\")}\n            </Button>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (\n            <div className='flex flex-col gap-2'>\n              <Typography variant='destructive'>\n                {t(\"Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.\")}\n              </Typography>\n              <div className='flex gap-2'>\n                <Button\n                  variant='destructive'\n                  onClick={handleDeletePasskey}\n                >\n                  {t(\"Disable\")}\n                </Button>\n                <Button\n                  variant='secondary'\n                  onClick={() => setShowConfirmationModal(false)}\n                >\n                  {t(\"Cancel\")}\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </Section>\n\n\n    </>\n\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,eAAe,OAE5B;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,UAAU;EACnB,aAAa,EAAE,oDAAoD;YAEnE,2CAACC;GAAW,SAAQ;aAAa,EAAE,oDAAoD;IAAc;GAC7F;AAId,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,8CADwB,CACL,YAAY;CACrC,MAAM,kBAAkB,KAAK,oBAAoB;CAIjD,MAAM,aAAa,KAAK;CAExB,MAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CAC7G,MAAM,CAAC,uBAAuB,gDAAqC,MAAM;CAGzE,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,eAClB,QAAO;CAGT,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,OAAO,EAAE,oBAAoB,OAAO,CAAC;AAChD,2BAAyB,MAAM;;CAIjC,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,iBAAiB;;AAG9B,QACE,mFACE,2CAACD;EAAQ,OAAO,EAAE,UAAU;EAAE,aAAa,aAAa,EAAE,qBAAqB,GAAG,EAAE,qBAAqB;YACvG,4CAAC;GAAI,WAAU;;IACZ,CAAC,iBACA,2CAACC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,kEAAkE;MAAc;IAEjI,iBAAiB,cAAc,cAC9B,2CAACA;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,+FAA+F;MAAc;IAE9J,CAAC,cAAc,iBACd,2CAAC,mBACC,2CAACC;KAAO,SAAS;KAAqB,SAAQ;eAAa,EAAE,kBAAkB;MAAU,GACrF;IAEP,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,2CAACA;KACC,SAAQ;KACR,eAAe,yBAAyB,KAAK;eAE5C,EAAE,iBAAiB;MACb;IAEV,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,4CAAC;KAAI,WAAU;gBACb,2CAACD;MAAW,SAAQ;gBACjB,EAAE,+GAA+G;OACvG,EACb,4CAAC;MAAI,WAAU;iBACb,2CAACC;OACC,SAAQ;OACR,SAAS;iBAER,EAAE,UAAU;QACN,EACT,2CAACA;OACC,SAAQ;OACR,eAAe,yBAAyB,MAAM;iBAE7C,EAAE,SAAS;QACL;OACL;MACF;;IAEJ;GACE,GAGT"}