@hexclave/tanstack-start 1.0.40 → 1.0.42

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

@@ -1 +1 @@
-{"version":3,"file":"mfa-section.js","names":[],"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 UNLESS YOU ALSO 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,MAAM,gBAAgB;CAC9B,MAAM,UAAU,aAAa,CAAC,YAAY;CAC1C,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,EAAE,gDAAgD;YAE/D,oBAAC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,CAAC,iBAAiB,sBAAsB,SAA4B,KAAK;CAC/E,MAAM,CAAC,WAAW,gBAAgB,SAAwB,KAAK;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAiB,GAAG;CAClD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,YAAY,KAAK;CAEvB,MAAM,CAAC,cAAc,aAAa,iBAAiB,YAAY;AAC7D,QAAM,KAAK,OAAO,EAChB,uBAAuB,iBACxB,CAAC;AACF,qBAAmB,KAAK;AACxB,eAAa,KAAK;AAClB,aAAW,GAAG;IACb,CAAC,iBAAiB,KAAK,CAAC;AAE3B,iBAAgB;AACd,kBAAgB,MAAM;AACtB,6BAA2B,YAAY;AACrC,OAAI,mBAAmB,WAAW,iBAAiB,IAAI,GAAG,QAAQ,CAChE,OAAM,cAAc;AAEtB,mBAAgB,KAAK;IACrB;IACD;EAAC;EAAS;EAAiB;EAAa,CAAC;AAE5C,QACE,oBAAC;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,YACT,EAAE,oDAAoD,GACtD,EAAE,qDAAqD;YAE3D,qBAAC;GAAI,WAAU;cACZ,CAAC,aAAa,mBACb;IACE,oBAAC,wBAAY,EAAE,iDAAiD,GAAc;IAC9E,oBAAC;KAAI,OAAO;KAAK,QAAQ;KAAK,KAAK,aAAa,SAAS,kCAAkC;KAAE,KAAK,EAAE,2CAA2C;MAAI;IACnJ,oBAAC,wBAAY,EAAE,uCAAuC,GAAc;IACpE,oBAAC;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,oBAAC;KAAW,SAAQ;eAAe,EAAE,oCAAoC;MAAc;IAEzF,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,eAAe;AACb,0BAAmB,KAAK;AACxB,oBAAa,KAAK;AAClB,kBAAW,GAAG;;gBAGf,EAAE,SAAS;OACL;MACL;OACL,EAEL,oBAAC;IAAI,WAAU;cACZ,YACC,oBAAC;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,OAAO,EAChB,uBAAuB,MACxB,CAAC;;eAGH,EAAE,cAAc;MACV,GACP,CAAC,mBACH,oBAAC;KACC,SAAQ;KACR,SAAS,YAAY;MACnB,MAAM,SAAS,qBAAqB,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,MAAM,iBAAiB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,EAAE;AAC9F,QAAO,MAAM,OAAO,UAAU,IAAI"}
+{"version":3,"file":"mfa-section.js","names":[],"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 UNLESS YOU ALSO 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":"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"}

package/dist/esm/components-page/account-settings/email-and-auth/otp-section.d.ts

@@ -1,9 +1,7 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/email-and-auth/otp-section.d.ts
 declare function OtpSection(props?: {
   mockMode?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { OtpSection };
 //# sourceMappingURL=otp-section.d.ts.map

package/dist/esm/components-page/account-settings/email-and-auth/otp-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"otp-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"mappings":";;;iBAUgB,UAAA,CAAW,KAAA;EACzB,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"otp-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"mappings":";iBAUgB,UAAA,CAAW,KAAA;EACzB,QAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

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

@@ -4,7 +4,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useStackApp, useUser } from "../../../lib/hooks.js";
 import { useTranslation } from "../../../lib/translations.js";
 import { Section } from "../section.js";
-
 //#region src/components-page/account-settings/email-and-auth/otp-section.tsx
 function OtpSection(props) {
 	const { t } = useTranslation();
@@ -72,7 +71,7 @@ function OtpSection(props) {
 		})
 	});
 }
-
 //#endregion
 export { OtpSection };
+
 //# sourceMappingURL=otp-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"otp-section.js","names":[],"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 UNLESS YOU ALSO 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,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,gDAAgD;YAE/D,oBAAC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,UAAU,aAAa,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,gBAAgB,SAAS,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,oBAAC;EAAQ,OAAO,EAAE,cAAc;EAAE,aAAa,KAAK,iBAAiB,EAAE,+CAA+C,GAAG,EAAE,oEAAoE;YAC7L,oBAAC;GAAI,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,oBAAC;IACC,SAAQ;IACR,eAAe,aAAa,KAAK;cAEhC,EAAE,cAAc;KACV,GAET,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAW,SAAQ;eACjB,EAAE,0GAA0G;MAClG,EACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,SAAQ;MACR,SAAS;gBAER,EAAE,UAAU;OACN,EACT,oBAAC;MACC,SAAQ;MACR,eAAe,aAAa,MAAM;gBAEjC,EAAE,SAAS;OACL;MACL;KACF,GAGR,oBAAC;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,2FAA2F;KAAc,GAG3J,oBAAC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,WAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;;cAG5C,EAAE,aAAa;KACT,GAGX,oBAAC;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,8DAA8D;KAAc;IAE1H;GACE"}
+{"version":3,"file":"otp-section.js","names":[],"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 UNLESS YOU ALSO 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,MAAM,eAAe;CAC7B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;CAGtE,IAAI,OAAO,YAAY,CAAC,MACtB,OACE,oBAAC,SAAD;EACE,OAAO,EAAE,mBAAmB;EAC5B,aAAa,EAAE,+CAA+C;YAE9D,oBAAC,YAAD;GAAY,SAAQ;aAAa,EAAE,+CAA+C;EAAc,CAAA;CACzF,CAAA;CAIb,IAAI,CAAC,MACH,OAAO;CAET,MAAM,UAAU,YAAY,CAAC,CAAC,WAAW;CACzC,MAAM,kBAAkB,KAAK,mBAAmB;CAChD,MAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CACzG,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAGhD,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,SAAS;CAEhH,IAAI,CAAC,QAAQ,OAAO,kBAClB,OAAO;CAGT,MAAM,mBAAmB,YAAY;EACnC,MAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;EAC3C,aAAa,KAAK;CACpB;CAEA,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,aAAa;EAAG,aAAa,KAAK,iBAAiB,EAAE,8CAA8C,IAAI,EAAE,mEAAmE;YAC5L,oBAAC,OAAD;GAAK,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,eAAe,aAAa,IAAI;cAE/B,EAAE,aAAa;GACV,CAAA,IAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAD;KAAY,SAAQ;eACjB,EAAE,yGAAyG;IAClG,CAAA,GACZ,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MACE,SAAQ;MACR,SAAS;gBAER,EAAE,SAAS;KACN,CAAA,GACR,oBAAC,QAAD;MACE,SAAQ;MACR,eAAe,aAAa,KAAK;gBAEhC,EAAE,QAAQ;KACL,CAAA,CACL;MACF;QAGP,oBAAC,YAAD;IAAY,SAAQ;IAAY,MAAK;cAAS,EAAE,0FAA0F;GAAc,CAAA,IAG1J,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS,YAAY;KACnB,MAAM,KAAK,OAAO,EAAE,gBAAgB,KAAK,CAAC;IAC5C;cAEC,EAAE,YAAY;GACT,CAAA,IAGV,oBAAC,YAAD;IAAY,SAAQ;IAAY,MAAK;cAAS,EAAE,6DAA6D;GAAc,CAAA;EAE1H,CAAA;CACE,CAAA;AAEb"}

package/dist/esm/components-page/account-settings/email-and-auth/passkey-section.d.ts

@@ -1,9 +1,7 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/email-and-auth/passkey-section.d.ts
 declare function PasskeySection(props?: {
   mockMode?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { PasskeySection };
 //# sourceMappingURL=passkey-section.d.ts.map

package/dist/esm/components-page/account-settings/email-and-auth/passkey-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"passkey-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"mappings":";;;iBAWgB,cAAA,CAAe,KAAA;EAC7B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"passkey-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"mappings":";iBAWgB,cAAA,CAAe,KAAA;EAC7B,QAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

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

@@ -5,7 +5,6 @@ import { useUser } from "../../../lib/hooks.js";
 import { useTranslation } from "../../../lib/translations.js";
 import { Section } from "../section.js";
 import { useStackApp as useStackApp$1 } from "../../../index.js";
-
 //#region src/components-page/account-settings/email-and-auth/passkey-section.tsx
 function PasskeySection(props) {
 	const { t } = useTranslation();
@@ -81,7 +80,7 @@ function PasskeySection(props) {
 		})
 	}) });
 }
-
 //#endregion
 export { PasskeySection };
+
 //# sourceMappingURL=passkey-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"passkey-section.js","names":["useStackApp"],"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 UNLESS YOU ALSO 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 hexclaveApp = useStackApp();\n  const project = hexclaveApp.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,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,UAAU;EACnB,aAAa,EAAE,oDAAoD;YAEnE,oBAAC;GAAW,SAAQ;aAAa,EAAE,oDAAoD;IAAc;GAC7F;AAId,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,UADcA,eAAa,CACL,YAAY;CACxC,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,4BAA4B,SAAS,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,0CACE,oBAAC;EAAQ,OAAO,EAAE,UAAU;EAAE,aAAa,aAAa,EAAE,qBAAqB,GAAG,EAAE,qBAAqB;YACvG,qBAAC;GAAI,WAAU;;IACZ,CAAC,iBACA,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,kEAAkE;MAAc;IAEjI,iBAAiB,cAAc,cAC9B,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,+FAA+F;MAAc;IAE9J,CAAC,cAAc,iBACd,oBAAC,mBACC,oBAAC;KAAO,SAAS;KAAqB,SAAQ;eAAa,EAAE,kBAAkB;MAAU,GACrF;IAEP,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,oBAAC;KACC,SAAQ;KACR,eAAe,yBAAyB,KAAK;eAE5C,EAAE,iBAAiB;MACb;IAEV,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAW,SAAQ;gBACjB,EAAE,+GAA+G;OACvG,EACb,qBAAC;MAAI,WAAU;iBACb,oBAAC;OACC,SAAQ;OACR,SAAS;iBAER,EAAE,UAAU;QACN,EACT,oBAAC;OACC,SAAQ;OACR,eAAe,yBAAyB,MAAM;iBAE7C,EAAE,SAAS;QACL;OACL;MACF;;IAEJ;GACE,GAGT"}
+{"version":3,"file":"passkey-section.js","names":["useStackApp"],"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 UNLESS YOU ALSO 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 hexclaveApp = useStackApp();\n  const project = hexclaveApp.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,MAAM,eAAe;CAC7B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;CAGtE,IAAI,OAAO,YAAY,CAAC,MACtB,OACE,oBAAC,SAAD;EACE,OAAO,EAAE,SAAS;EAClB,aAAa,EAAE,mDAAmD;YAElE,oBAAC,YAAD;GAAY,SAAQ;aAAa,EAAE,mDAAmD;EAAc,CAAA;CAC7F,CAAA;CAIb,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,UADcA,cACM,CAAC,CAAC,WAAW;CACvC,MAAM,kBAAkB,KAAK,mBAAmB;CAIhD,MAAM,aAAa,KAAK;CAExB,MAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CAC7G,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAGxE,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,SAAS;CAEhH,IAAI,CAAC,QAAQ,OAAO,gBAClB,OAAO;CAGT,MAAM,sBAAsB,YAAY;EACtC,MAAM,KAAK,OAAO,EAAE,oBAAoB,MAAM,CAAC;EAC/C,yBAAyB,KAAK;CAChC;CAGA,MAAM,sBAAsB,YAAY;EACtC,MAAM,KAAK,gBAAgB;CAC7B;CAEA,OACE,oBAAA,UAAA,EAAA,UACE,oBAAC,SAAD;EAAS,OAAO,EAAE,SAAS;EAAG,aAAa,aAAa,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;YACtG,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,CAAC,iBACA,oBAAC,YAAD;KAAY,SAAQ;KAAY,MAAK;eAAS,EAAE,iEAAiE;IAAc,CAAA;IAEhI,iBAAiB,cAAc,cAC9B,oBAAC,YAAD;KAAY,SAAQ;KAAY,MAAK;eAAS,EAAE,8FAA8F;IAAc,CAAA;IAE7J,CAAC,cAAc,iBACd,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;KAAQ,SAAS;KAAqB,SAAQ;eAAa,EAAE,iBAAiB;IAAU,CAAA,EACrF,CAAA;IAEN,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,oBAAC,QAAD;KACE,SAAQ;KACR,eAAe,yBAAyB,IAAI;eAE3C,EAAE,gBAAgB;IACb,CAAA;IAET,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,YAAD;MAAY,SAAQ;gBACjB,EAAE,8GAA8G;KACvG,CAAA,GACZ,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OACE,SAAQ;OACR,SAAS;iBAER,EAAE,SAAS;MACN,CAAA,GACR,oBAAC,QAAD;OACE,SAAQ;OACR,eAAe,yBAAyB,KAAK;iBAE5C,EAAE,QAAQ;MACL,CAAA,CACL;OACF;;GAEJ;;CACE,CAAA,EAGT,CAAA;AAGN"}

package/dist/esm/components-page/account-settings/email-and-auth/password-section.d.ts

@@ -1,9 +1,7 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/email-and-auth/password-section.d.ts
 declare function PasswordSection(props?: {
   mockMode?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { PasswordSection };
 //# sourceMappingURL=password-section.d.ts.map

package/dist/esm/components-page/account-settings/email-and-auth/password-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"password-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"mappings":";;;iBAmBgB,eAAA,CAAgB,KAAA;EAC9B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"password-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"mappings":";iBAmBgB,eAAA,CAAgB,KAAA;EAC9B,QAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

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

@@ -12,7 +12,6 @@ import { useTranslation } from "../../../lib/translations.js";
 import { FormWarningText } from "../../../components/elements/form-warning.js";
 import { Section } from "../section.js";
 import { useStackApp as useStackApp$1 } from "../../../index.js";
-
 //#region src/components-page/account-settings/email-and-auth/password-section.tsx
 function PasswordSection(props) {
 	const { t } = useTranslation();
@@ -152,7 +151,7 @@ function PasswordSection(props) {
 		})
 	});
 }
-
 //#endregion
 export { PasswordSection };
+
 //# sourceMappingURL=password-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"password-section.js","names":["useStackApp","schemaFieldsPasswordSchema"],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@hexclave/shared/dist/helpers/password';\nimport { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from \"@hexclave/shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, Typography } from \"@hexclave/ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from '../../..';\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function PasswordSection(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(\"Password\")}\n        description={t(\"Password management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Password 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 contactChannels = user.useContactChannels();\n  const [changingPassword, setChangingPassword] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const project = useStackApp().useProject();\n\n  const passwordSchema = yupObject({\n    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),\n    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = user.hasPassword\n        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })\n        : await user.setPassword({ password: newPassword! });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });\n      } else {\n        reset();\n        setChangingPassword(false);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!project.config.credentialEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Password\")}\n      description={user.hasPassword ? t(\"Update your password\") : t(\"Set a password for your account\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!changingPassword ? (\n          hasValidEmail ? (\n            <Button\n              variant='secondary'\n              onClick={() => setChangingPassword(true)}\n            >\n              {user.hasPassword ? t(\"Update password\") : t(\"Set password\")}\n            </Button>\n          ) : (\n            <Typography variant='secondary' type='label'>{t(\"To set a password, please add a sign-in email.\")}</Typography>\n          )\n        ) : (\n          <form\n            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n            noValidate\n          >\n            {user.hasPassword && (\n              <>\n                <Label htmlFor=\"old-password\" className=\"mb-1\">{t(\"Old password\")}</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  autoComplete=\"current-password\"\n                  {...register(\"oldPassword\")}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n              </>\n            )}\n\n            <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">{t(\"New password\")}</Label>\n            <PasswordInput\n              id=\"new-password\"\n              autoComplete=\"new-password\"\n              {...registerPassword}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPassword.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t(\"Repeat new password\")}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              autoComplete=\"new-password\"\n              {...registerPasswordRepeat}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n            <div className=\"mt-6 flex gap-4\">\n              <Button type=\"submit\" loading={loading}>\n                {user.hasPassword ? t(\"Update Password\") : t(\"Set Password\")}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setChangingPassword(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </form>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"password-section.js","names":["useStackApp","schemaFieldsPasswordSchema"],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@hexclave/shared/dist/helpers/password';\nimport { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from \"@hexclave/shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, Typography } from \"@hexclave/ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from '../../..';\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function PasswordSection(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(\"Password\")}\n        description={t(\"Password management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Password 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 contactChannels = user.useContactChannels();\n  const [changingPassword, setChangingPassword] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const project = useStackApp().useProject();\n\n  const passwordSchema = yupObject({\n    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),\n    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = user.hasPassword\n        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })\n        : await user.setPassword({ password: newPassword! });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });\n      } else {\n        reset();\n        setChangingPassword(false);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!project.config.credentialEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Password\")}\n      description={user.hasPassword ? t(\"Update your password\") : t(\"Set a password for your account\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!changingPassword ? (\n          hasValidEmail ? (\n            <Button\n              variant='secondary'\n              onClick={() => setChangingPassword(true)}\n            >\n              {user.hasPassword ? t(\"Update password\") : t(\"Set password\")}\n            </Button>\n          ) : (\n            <Typography variant='secondary' type='label'>{t(\"To set a password, please add a sign-in email.\")}</Typography>\n          )\n        ) : (\n          <form\n            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n            noValidate\n          >\n            {user.hasPassword && (\n              <>\n                <Label htmlFor=\"old-password\" className=\"mb-1\">{t(\"Old password\")}</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  autoComplete=\"current-password\"\n                  {...register(\"oldPassword\")}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n              </>\n            )}\n\n            <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">{t(\"New password\")}</Label>\n            <PasswordInput\n              id=\"new-password\"\n              autoComplete=\"new-password\"\n              {...registerPassword}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPassword.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t(\"Repeat new password\")}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              autoComplete=\"new-password\"\n              {...registerPasswordRepeat}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n            <div className=\"mt-6 flex gap-4\">\n              <Button type=\"submit\" loading={loading}>\n                {user.hasPassword ? t(\"Update Password\") : t(\"Set Password\")}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setChangingPassword(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </form>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components-page/account-settings/notifications/notifications-page.d.ts

@@ -1,7 +1,5 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/notifications/notifications-page.d.ts
-declare function NotificationsPage(): react_jsx_runtime0.JSX.Element;
+declare function NotificationsPage(): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { NotificationsPage };
 //# sourceMappingURL=notifications-page.d.ts.map

package/dist/esm/components-page/account-settings/notifications/notifications-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"mappings":";;;iBAWgB,iBAAA,CAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"notifications-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"mappings":";iBAWgB,iBAAA,gCAAiB,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/notifications/notifications-page.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useUser } from "../../../lib/hooks.js";
 import { useTranslation } from "../../../lib/translations.js";
 import { PageLayout } from "../page-layout.js";
-
 //#region src/components-page/account-settings/notifications/notifications-page.tsx
 function NotificationsPage() {
 	const { t } = useTranslation();
@@ -34,7 +33,7 @@ function NotificationsPage() {
 		}, category.id))]
 	})] });
 }
-
 //#endregion
 export { NotificationsPage };
+
 //# sourceMappingURL=notifications-page.js.map

package/dist/esm/components-page/account-settings/notifications/notifications-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Switch } from \"@hexclave/ui\";\nimport { Separator, Typography } from \"@hexclave/ui\";\n\n\nexport function NotificationsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const notificationCategories = user.useNotificationCategories();\n\n  return (\n    <PageLayout>\n      <Separator />\n      <div className='flex flex-col gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center pb-2'>\n          <Typography className=\"font-medium\">\n            {t('Choose which emails you want to receive')}\n          </Typography>\n        </div>\n        {notificationCategories.map((category) => (\n          <div key={category.id} className=\"flex justify-start gap-4 items-center\">\n            <Switch\n              checked={category.enabled}\n              onCheckedChange={(value) => void category.setEnabled(value)}\n              disabled={!category.canDisable}\n            />\n            <Typography>{category.name}</Typography>\n            {!category.canDisable && (\n              <Typography variant='secondary' type='footnote'>\n                (cannot be disabled)\n              </Typography>\n            )}\n          </div>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,oBAAoB;CAClC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,yBADO,QAAQ,EAAE,IAAI,YAAY,CAAC,CACJ,2BAA2B;AAE/D,QACE,qBAAC,yBACC,oBAAC,cAAY,EACb,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAW,WAAU;cACnB,EAAE,0CAA0C;KAClC;IACT,EACL,uBAAuB,KAAK,aAC3B,qBAAC;GAAsB,WAAU;;IAC/B,oBAAC;KACC,SAAS,SAAS;KAClB,kBAAkB,UAAU,KAAK,SAAS,WAAW,MAAM;KAC3D,UAAU,CAAC,SAAS;MACpB;IACF,oBAAC,wBAAY,SAAS,OAAkB;IACvC,CAAC,SAAS,cACT,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAW;MAEnC;;KAVP,SAAS,GAYb,CACN;GACE,IACK"}
+{"version":3,"file":"notifications-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Switch } from \"@hexclave/ui\";\nimport { Separator, Typography } from \"@hexclave/ui\";\n\n\nexport function NotificationsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const notificationCategories = user.useNotificationCategories();\n\n  return (\n    <PageLayout>\n      <Separator />\n      <div className='flex flex-col gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center pb-2'>\n          <Typography className=\"font-medium\">\n            {t('Choose which emails you want to receive')}\n          </Typography>\n        </div>\n        {notificationCategories.map((category) => (\n          <div key={category.id} className=\"flex justify-start gap-4 items-center\">\n            <Switch\n              checked={category.enabled}\n              onCheckedChange={(value) => void category.setEnabled(value)}\n              disabled={!category.canDisable}\n            />\n            <Typography>{category.name}</Typography>\n            {!category.canDisable && (\n              <Typography variant='secondary' type='footnote'>\n                (cannot be disabled)\n              </Typography>\n            )}\n          </div>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,oBAAoB;CAClC,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,yBADO,QAAQ,EAAE,IAAI,WAAW,CACJ,CAAC,CAAC,0BAA0B;CAE9D,OACE,qBAAC,YAAD,EAAA,UAAA,CACE,oBAAC,WAAD,CAAY,CAAA,GACZ,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,YAAD;IAAY,WAAU;cACnB,EAAE,yCAAyC;GAClC,CAAA;EACT,CAAA,GACJ,uBAAuB,KAAK,aAC3B,qBAAC,OAAD;GAAuB,WAAU;aAAjC;IACE,oBAAC,QAAD;KACE,SAAS,SAAS;KAClB,kBAAkB,UAAU,KAAK,SAAS,WAAW,KAAK;KAC1D,UAAU,CAAC,SAAS;IACrB,CAAA;IACD,oBAAC,YAAD,EAAA,UAAa,SAAS,KAAiB,CAAA;IACtC,CAAC,SAAS,cACT,oBAAC,YAAD;KAAY,SAAQ;KAAY,MAAK;eAAW;IAEpC,CAAA;GAEX;KAZK,SAAS,EAYd,CACN,CACE;GACK,EAAA,CAAA;AAEhB"}

package/dist/esm/components-page/account-settings/page-layout.d.ts

@@ -1,9 +1,7 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/page-layout.d.ts
 declare function PageLayout(props: {
   children: React.ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PageLayout };
 //# sourceMappingURL=page-layout.d.ts.map

package/dist/esm/components-page/account-settings/page-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/page-layout.tsx"],"mappings":";;;iBAIgB,UAAA,CAAW,KAAA;EAAS,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"page-layout.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/page-layout.tsx"],"mappings":";iBAIgB,UAAA,CAAW,KAAA;EAAS,QAAA,EAAU,KAAA,CAAM,SAAS;AAAA,gCAAE,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/page-layout.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components-page/account-settings/page-layout.tsx
 function PageLayout(props) {
 	return /* @__PURE__ */ jsx("div", {
@@ -7,7 +6,7 @@ function PageLayout(props) {
 		children: props.children
 	});
 }
-
 //#endregion
 export { PageLayout };
+
 //# sourceMappingURL=page-layout.js.map

package/dist/esm/components-page/account-settings/page-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout.js","names":[],"sources":["../../../../src/components-page/account-settings/page-layout.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport function PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;;AAIA,SAAgB,WAAW,OAAsC;AAC/D,QACE,oBAAC;EAAI,WAAU;YACZ,MAAM;GACH"}
+{"version":3,"file":"page-layout.js","names":[],"sources":["../../../../src/components-page/account-settings/page-layout.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport function PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;AAIA,SAAgB,WAAW,OAAsC;CAC/D,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM;CACJ,CAAA;AAET"}

package/dist/esm/components-page/account-settings/payments/payments-page.d.ts

@@ -1,12 +1,11 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { Team } from "../../..";
+import { Team } from "../../../index.js";
 
 //#region src/components-page/account-settings/payments/payments-page.d.ts
 declare function PaymentsPage(props: {
   mockMode?: boolean;
   availableTeams?: Team[];
   allowPersonal?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { PaymentsPage };
 //# sourceMappingURL=payments-page.d.ts.map

package/dist/esm/components-page/account-settings/payments/payments-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"payments-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-page.tsx"],"mappings":";;;;iBAcgB,YAAA,CAAa,KAAA;EAAS,QAAA;EAAoB,cAAA,GAAiB,IAAA;EAAQ,aAAA;AAAA,IAAyB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"payments-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-page.tsx"],"mappings":";;;iBAcgB,YAAA,CAAa,KAAA;EAAS,QAAA;EAAoB,cAAA,GAAiB,IAAI;EAAI,aAAA;AAAA,gCAAyB,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/payments/payments-page.js

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useUser } from "../../../lib/hooks.js";
@@ -7,7 +6,6 @@ import { useTranslation } from "../../../lib/translations.js";
 import { PageLayout } from "../page-layout.js";
 import { TeamSwitcher } from "../../../index.js";
 import { PaymentsPanel } from "./payments-panel.js";
-
 //#region src/components-page/account-settings/payments/payments-page.tsx
 function PaymentsPage(props) {
 	const { t } = useTranslation();
@@ -47,7 +45,7 @@ function PaymentsPage(props) {
 		customerType
 	})] });
 }
-
 //#endregion
 export { PaymentsPage };
+
 //# sourceMappingURL=payments-page.js.map

package/dist/esm/components-page/account-settings/payments/payments-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"payments-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-page.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { useEffect, useState } from \"react\";\nimport { Team, TeamSwitcher } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { PaymentsPanel } from \"./payments-panel\";\n\nexport function PaymentsPage(props: { mockMode?: boolean, availableTeams?: Team[], allowPersonal?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props.mockMode ? \"return-null\" : \"redirect\" });\n  const teams = props.availableTeams ?? user?.useTeams() ?? [];\n  const allowPersonal = props.allowPersonal ?? true;\n  const hasTeams = teams.length > 0;\n  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);\n  const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? (teams[0] ?? null) : null);\n  const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);\n  const customerType = effectiveSelectedTeam ? \"team\" : \"user\";\n\n  useEffect(() => {\n    if (props.mockMode) {\n      return;\n    }\n    if (!allowPersonal && !selectedTeam && teams.length > 0) {\n      setSelectedTeam(teams[0]);\n      return;\n    }\n    if (selectedTeam && !teams.some(team => team.id === selectedTeam.id)) {\n      setSelectedTeam(allowPersonal ? null : (teams[0] ?? null));\n    }\n  }, [allowPersonal, props.mockMode, selectedTeam, teams]);\n\n  if (props.mockMode) {\n    return (\n      <PageLayout>\n        <PaymentsPanel\n          mockMode\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!customer) {\n    return null;\n  }\n\n\n  return (\n    <PageLayout>\n      {hasTeams ? (\n        <TeamSwitcher\n          team={effectiveSelectedTeam ?? undefined}\n          teams={teams}\n          allowNull={allowPersonal}\n          nullLabel={t(\"Personal\")}\n          onChange={async (team) => {\n            setSelectedTeam(team);\n          }}\n        />\n      ) : null}\n      <PaymentsPanel\n        customer={customer}\n        customerType={customerType}\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAcA,SAAgB,aAAa,OAAiF;CAC5G,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,MAAM,WAAW,gBAAgB,YAAY,CAAC;CACzE,MAAM,QAAQ,MAAM,kBAAkB,MAAM,UAAU,IAAI,EAAE;CAC5D,MAAM,gBAAgB,MAAM,iBAAiB;CAC7C,MAAM,WAAW,MAAM,SAAS;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAsB,KAAK;CACnE,MAAM,wBAAwB,iBAAiB,CAAC,gBAAiB,MAAM,MAAM,OAAQ;CACrF,MAAM,WAAW,0BAA0B,gBAAgB,OAAO;CAClE,MAAM,eAAe,wBAAwB,SAAS;AAEtD,iBAAgB;AACd,MAAI,MAAM,SACR;AAEF,MAAI,CAAC,iBAAiB,CAAC,gBAAgB,MAAM,SAAS,GAAG;AACvD,mBAAgB,MAAM,GAAG;AACzB;;AAEF,MAAI,gBAAgB,CAAC,MAAM,MAAK,SAAQ,KAAK,OAAO,aAAa,GAAG,CAClE,iBAAgB,gBAAgB,OAAQ,MAAM,MAAM,KAAM;IAE3D;EAAC;EAAe,MAAM;EAAU;EAAc;EAAM,CAAC;AAExD,KAAI,MAAM,SACR,QACE,oBAAC,wBACC,oBAAC,iBACC,iBACA,GACS;AAIjB,KAAI,CAAC,SACH,QAAO;AAIT,QACE,qBAAC,yBACE,WACC,oBAAC;EACC,MAAM,yBAAyB;EACxB;EACP,WAAW;EACX,WAAW,EAAE,WAAW;EACxB,UAAU,OAAO,SAAS;AACxB,mBAAgB,KAAK;;GAEvB,GACA,MACJ,oBAAC;EACW;EACI;GACd,IACS"}
+{"version":3,"file":"payments-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-page.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { useEffect, useState } from \"react\";\nimport { Team, TeamSwitcher } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { PaymentsPanel } from \"./payments-panel\";\n\nexport function PaymentsPage(props: { mockMode?: boolean, availableTeams?: Team[], allowPersonal?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props.mockMode ? \"return-null\" : \"redirect\" });\n  const teams = props.availableTeams ?? user?.useTeams() ?? [];\n  const allowPersonal = props.allowPersonal ?? true;\n  const hasTeams = teams.length > 0;\n  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);\n  const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? (teams[0] ?? null) : null);\n  const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);\n  const customerType = effectiveSelectedTeam ? \"team\" : \"user\";\n\n  useEffect(() => {\n    if (props.mockMode) {\n      return;\n    }\n    if (!allowPersonal && !selectedTeam && teams.length > 0) {\n      setSelectedTeam(teams[0]);\n      return;\n    }\n    if (selectedTeam && !teams.some(team => team.id === selectedTeam.id)) {\n      setSelectedTeam(allowPersonal ? null : (teams[0] ?? null));\n    }\n  }, [allowPersonal, props.mockMode, selectedTeam, teams]);\n\n  if (props.mockMode) {\n    return (\n      <PageLayout>\n        <PaymentsPanel\n          mockMode\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!customer) {\n    return null;\n  }\n\n\n  return (\n    <PageLayout>\n      {hasTeams ? (\n        <TeamSwitcher\n          team={effectiveSelectedTeam ?? undefined}\n          teams={teams}\n          allowNull={allowPersonal}\n          nullLabel={t(\"Personal\")}\n          onChange={async (team) => {\n            setSelectedTeam(team);\n          }}\n        />\n      ) : null}\n      <PaymentsPanel\n        customer={customer}\n        customerType={customerType}\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,aAAa,OAAiF;CAC5G,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,OAAO,QAAQ,EAAE,IAAI,MAAM,WAAW,gBAAgB,WAAW,CAAC;CACxE,MAAM,QAAQ,MAAM,kBAAkB,MAAM,SAAS,KAAK,CAAC;CAC3D,MAAM,gBAAgB,MAAM,iBAAiB;CAC7C,MAAM,WAAW,MAAM,SAAS;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAsB,IAAI;CAClE,MAAM,wBAAwB,iBAAiB,CAAC,gBAAiB,MAAM,MAAM,OAAQ;CACrF,MAAM,WAAW,0BAA0B,gBAAgB,OAAO;CAClE,MAAM,eAAe,wBAAwB,SAAS;CAEtD,gBAAgB;EACd,IAAI,MAAM,UACR;EAEF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,MAAM,SAAS,GAAG;GACvD,gBAAgB,MAAM,EAAE;GACxB;EACF;EACA,IAAI,gBAAgB,CAAC,MAAM,MAAK,SAAQ,KAAK,OAAO,aAAa,EAAE,GACjE,gBAAgB,gBAAgB,OAAQ,MAAM,MAAM,IAAK;CAE7D,GAAG;EAAC;EAAe,MAAM;EAAU;EAAc;CAAK,CAAC;CAEvD,IAAI,MAAM,UACR,OACE,oBAAC,YAAD,EAAA,UACE,oBAAC,eAAD,EACE,UAAA,KACD,CAAA,EACS,CAAA;CAIhB,IAAI,CAAC,UACH,OAAO;CAIT,OACE,qBAAC,YAAD,EAAA,UAAA,CACG,WACC,oBAAC,cAAD;EACE,MAAM,yBAAyB,KAAA;EACxB;EACP,WAAW;EACX,WAAW,EAAE,UAAU;EACvB,UAAU,OAAO,SAAS;GACxB,gBAAgB,IAAI;EACtB;CACD,CAAA,IACC,MACJ,oBAAC,eAAD;EACY;EACI;CACf,CAAA,CACS,EAAA,CAAA;AAEhB"}

package/dist/esm/components-page/account-settings/payments/payments-panel.d.ts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { CustomerInvoicesList, CustomerInvoicesListOptions } from "../../../lib/hexclave-app/customers";
+import { CustomerInvoicesList, CustomerInvoicesListOptions } from "../../../lib/hexclave-app/customers/index.js";
 
 //#region src/components-page/account-settings/payments/payments-panel.d.ts
 type PaymentMethodSummary = {
@@ -55,7 +54,7 @@ declare function PaymentsPanel(props: {
   customer?: CustomerLike;
   customerType?: "user" | "team";
   mockMode?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { PaymentsPanel };
 //# sourceMappingURL=payments-panel.d.ts.map

package/dist/esm/components-page/account-settings/payments/payments-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"payments-panel.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-panel.tsx"],"mappings":";;;;KAoBK,oBAAA;EACH,EAAA;EACA,KAAA;EACA,KAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,KAsDG,eAAA;EACH,WAAA;EACA,oBAAA,EAAsB,oBAAA;AAAA;AAAA,KAGnB,gCAAA;EACH,YAAA;EACA,eAAA;AAAA;AAAA,KAGG,YAAA;EACH,EAAA;EACA,UAAA,QAAkB,eAAA;EAClB,WAAA,QAAmB,KAAA;IACjB,EAAA;IACA,QAAA;IACA,WAAA;IACA,YAAA;IACA,IAAA;IACA,aAAA,GAAgB,KAAA;MACd,SAAA;MACA,WAAA;MACA,MAAA,EAAQ,MAAA;QAAiB,QAAA;MAAA;IAAA;IAE3B,YAAA;MACE,cAAA;MACA,gBAAA,EAAkB,IAAA;MAClB,iBAAA;MACA,YAAA;IAAA;EAAA;EAGJ,WAAA,GAAc,OAAA,GAAU,2BAAA,KAAgC,oBAAA;EACxD,8BAAA,QAAsC,OAAA,CAAQ,gCAAA;EAC9C,sCAAA,GAAyC,aAAA,aAA0B,OAAA,CAAQ,oBAAA;EAC3E,kBAAA,GAAqB,OAAA;IAAW,aAAA;IAAuB,WAAA;IAAqB,OAAA;IAAkB,QAAA;EAAA,MAAwB,OAAA;AAAA;AAAA,iBAyDxG,aAAA,CAAc,KAAA;EAC5B,KAAA;EACA,QAAA,GAAW,YAAA;EACX,YAAA;EACA,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"payments-panel.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-panel.tsx"],"mappings":";;;KAoBK,oBAAA;EACH,EAAA;EACA,KAAA;EACA,KAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,KAsDG,eAAA;EACH,WAAA;EACA,oBAAA,EAAsB,oBAAoB;AAAA;AAAA,KAGvC,gCAAA;EACH,YAAA;EACA,eAAe;AAAA;AAAA,KAGZ,YAAA;EACH,EAAA;EACA,UAAA,QAAkB,eAAA;EAClB,WAAA,QAAmB,KAAA;IACjB,EAAA;IACA,QAAA;IACA,WAAA;IACA,YAAA;IACA,IAAA;IACA,aAAA,GAAgB,KAAA;MACd,SAAA;MACA,WAAA;MACA,MAAA,EAAQ,MAAA;QAAiB,QAAA;MAAA;IAAA;IAE3B,YAAA;MACE,cAAA;MACA,gBAAA,EAAkB,IAAA;MAClB,iBAAA;MACA,YAAA;IAAA;EAAA;EAGJ,WAAA,GAAc,OAAA,GAAU,2BAAA,KAAgC,oBAAA;EACxD,8BAAA,QAAsC,OAAA,CAAQ,gCAAA;EAC9C,sCAAA,GAAyC,aAAA,aAA0B,OAAA,CAAQ,oBAAA;EAC3E,kBAAA,GAAqB,OAAA;IAAW,aAAA;IAAuB,WAAA;IAAqB,OAAA;IAAkB,QAAA;EAAA,MAAwB,OAAA;AAAA;AAAA,iBAyDxG,aAAA,CAAc,KAAA;EAC5B,KAAA;EACA,QAAA,GAAW,YAAY;EACvB,YAAA;EACA,QAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/payments/payments-panel.js

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
 import { ActionDialog, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography, toast } from "@hexclave/ui";
 import { useMemo, useState } from "react";
@@ -12,7 +11,6 @@ import { useStackApp } from "../../../index.js";
 import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { envVars } from "../../../generated/env.js";
-
 //#region src/components-page/account-settings/payments/payments-panel.tsx
 function formatPaymentMethod(pm) {
 	return [
@@ -458,7 +456,7 @@ function RealPaymentsPanel(props) {
 		]
 	});
 }
-
 //#endregion
 export { PaymentsPanel };
+
 //# sourceMappingURL=payments-panel.js.map