@stackframe/stack 2.6.16 → 2.6.17

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

@@ -3,7 +3,7 @@
 
 // src/components/message-cards/predefined-message-card.tsx
 import { Typography } from "@stackframe/stack-ui";
-import { useStackApp, useUser } from "../..";
+import { useStackApp } from "../..";
 import { MessageCard } from "./message-card";
 import { useTranslation } from "../../lib/translations";
 import { jsx } from "react/jsx-runtime";
@@ -12,7 +12,6 @@ function PredefinedMessageCard({
   fullPage = false
 }) {
   const stackApp = useStackApp();
-  const user = useUser();
   const { t } = useTranslation();
   let title;
   let message = null;
@@ -57,18 +56,6 @@ function PredefinedMessageCard({
       primaryButton = t("Sign in");
       break;
     }
-    case "emailVerified": {
-      title = t("Email verified!");
-      message = t("Your have successfully verified your email.");
-      if (user) {
-        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
-        primaryButton = t("Sign in");
-      } else {
-        primaryAction = () => stackApp.redirectToHome();
-        primaryButton = t("Go to home");
-      }
-      break;
-    }
     case "unknownError": {
       title = t("An unknown error occurred");
       message = t("Please try again and if the problem persists, contact support.");

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailVerified': {\n      title = t(\"Email verified!\");\n      message = t(\"Your have successfully verified your email.\");\n      if (user) {\n        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n        primaryButton = t(\"Sign in\");\n      } else {\n        primaryAction = () => stackApp.redirectToHome();\n        primaryButton = t(\"Go to home\");\n      }\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAuFb;AArFX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,iBAAiB;AAC3B,gBAAU,EAAE,6CAA6C;AACzD,UAAI,MAAM;AACR,wBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,wBAAgB,EAAE,SAAS;AAAA,MAC7B,OAAO;AACL,wBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAgB,EAAE,YAAY;AAAA,MAChC;AACA;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,oBAAC,cAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,mBAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AA0Eb;AAxEX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,oBAAC,cAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/esm/components/selected-team-switcher.js

@@ -13,16 +13,23 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Skeleton,
   Typography
 } from "@stackframe/stack-ui";
 import { PlusCircle, Settings } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo } from "react";
+import { Suspense, useEffect, useMemo } from "react";
 import { useStackApp, useUser } from "..";
 import { useTranslation } from "../lib/translations";
 import { TeamIcon } from "./team-icon";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SelectedTeamSwitcher(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(Inner, { ...props }) });
+}
+function Fallback() {
+  return /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
   const { t } = useTranslation();
   const app = useStackApp();
   const user = useUser();

package/dist/esm/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;AACA,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,gBAAgB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,eAAe;AACnC,SAAe,aAAa,eAAe;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AA4CjB,SAuC6C,UAvC7C,KAKI,YALJ;AApCD,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,MAAM,YAAY;AACxB,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM,gBAAgB,MAAM;AACjD,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,wBAAwB,MAAM,cAAc;AACrD,iCAA2B,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,MAAM,sBAAsB,MAAM,YAAY,CAAC;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,cAAc;AAAA,MACrB,eAAe,CAAC,UAAU;AACxB,mCAA2B,YAAY;AACrC,gBAAM,OAAO,OAAO,KAAK,CAAAA,UAAQA,MAAK,OAAO,KAAK;AAClD,cAAI,CAAC,MAAM;AACT,kBAAM,IAAI,MAAM,wCAAwC;AAAA,UAC1D;AAEA,cAAI,CAAC,MAAM,sBAAsB;AAC/B,kBAAM,MAAM,gBAAgB,IAAI;AAAA,UAClC;AACA,cAAI,MAAM,QAAQ;AAChB,mBAAO,KAAK,MAAM,OAAO,IAAI,CAAC;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,4BAAC,iBAAc,WAAU,wBACvB,8BAAC,eAAY,aAAY,eAAa,GACxC;AAAA,QACA,qBAAC,iBAAc,WAAU,eACtB;AAAA,gBAAM,eAAe,qBAAC,eACrB;AAAA,gCAAC,eACC,+BAAC,SAAI,WAAU,qCACb;AAAA,kCAAC,UACE,YAAE,cAAc,GACnB;AAAA,cACA,oBAAC,UAAO,SAAQ,SAAQ,MAAK,QAAO,WAAU,WAAU,SAAS,MAAM,OAAO,KAAK,GAAG,IAAI,KAAK,eAAe,SAAS,KAAK,cAAc,EAAE,EAAE,GAC5I,8BAAC,YAAS,WAAU,WAAS,GAC/B;AAAA,eACF,GACF;AAAA,YACA,oBAAC,cAAW,OAAO,KAAK,aAAa,IACnC,+BAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,YAAS,MAAM,KAAK,cAAc;AAAA,cACnC,oBAAC,cAAW,WAAU,qBAAqB,eAAK,aAAa,aAAY;AAAA,eAC3E,GACF;AAAA,aACF,IAAiB;AAAA,UAEhB,OAAO,SACN,qBAAC,eACC;AAAA,gCAAC,eAAa,YAAE,aAAa,GAAE;AAAA,YAC9B,MAAM,OAAO,UAAQ,KAAK,OAAO,MAAM,cAAc,EAAE,EACrD,IAAI,UACH,oBAAC,cAAW,OAAO,KAAK,IACtB,+BAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,YAAS,MAAY;AAAA,cACtB,oBAAC,cAAW,WAAU,qBAAqB,eAAK,aAAY;AAAA,eAC9D,KAJ+B,KAAK,EAKtC,CACD;AAAA,aACL,IACA,oBAAC,eACC,8BAAC,eAAa,YAAE,cAAc,GAAE,GAClC;AAAA,UAED,QAAQ,OAAO,6BAA6B,iCAC3C;AAAA,gCAAC,mBAAe;AAAA,YAChB,oBAAC,SACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM,OAAO,KAAK,GAAG,IAAI,KAAK,eAAe,gBAAgB;AAAA,gBACtE,WAAU;AAAA,gBACV,SAAQ;AAAA,gBAER;AAAA,sCAAC,cAAW,WAAU,gBAAc;AAAA,kBAAE;AAAA,kBAAE,EAAE,eAAe;AAAA;AAAA;AAAA,YAC3D,GACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["team"]}
+{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

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

@@ -17,13 +17,7 @@ function Item(props) {
   ] }) });
 }
 function UserButton(props) {
-  return /* @__PURE__ */ jsx(
-    Suspense,
-    {
-      fallback: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(UserButtonInnerInner, { ...props, user: null }) }),
-      children: /* @__PURE__ */ jsx(UserButtonInner, { ...props })
-    }
-  );
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-[34px] w-[34px] rounded-full stack-scope" }), children: /* @__PURE__ */ jsx(UserButtonInner, { ...props }) });
 }
 function UserButtonInner(props) {
   const user = useUser();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense\n      fallback={\n        <Skeleton>\n          <UserButtonInnerInner {...props} user={null} />\n        </Skeleton>\n      }\n    >\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,kCAAkC;AAC3C,SAAS,cAAc,qBAAqB,kBAAkB,mBAAmB,uBAAuB,qBAAqB,UAAU,kBAAkB;AACzJ,SAAS,YAAY,OAAO,QAAQ,SAAS,gBAAgB;AAC7D,SAAgB,gBAAgB;AAChC,SAAsB,aAAa,eAAe;AAClD,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAKrB,SAEE,KAFF;AAHN,SAAS,KAAK,OAAqF;AACjG,SACE,oBAAC,oBAAiB,SAAS,MAAM,2BAA2B,MAAM,OAAO,GACvE,+BAAC,SAAI,WAAU,2BACZ;AAAA,UAAM;AAAA,IACP,oBAAC,cAAY,gBAAM,MAAK;AAAA,KAC1B,GACF;AAEJ;AAYO,SAAS,WAAW,OAAwB;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UACE,oBAAC,YACC,8BAAC,wBAAsB,GAAG,OAAO,MAAM,MAAM,GAC/C;AAAA,MAGF,8BAAC,mBAAiB,GAAG,OAAO;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,gBAAgB,OAAwB;AAC/C,QAAM,OAAO,QAAQ;AACrB,SAAO,oBAAC,wBAAsB,GAAG,OAAO,MAAY;AACtD;AAGA,SAAS,qBAAqB,OAAuD;AACnF,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,MAAM;AACnB,QAAM,MAAM,YAAY;AAExB,QAAM,YAAY,EAAE,MAAM,IAAI,WAAW,UAAU;AAEnD,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,WAAU,4BAC7B,+BAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,MAAY;AAAA,MACvB,QAAQ,MAAM,gBACb,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,cAAW,WAAU,qBAAqB,eAAK,aAAY;AAAA,QAC5D,oBAAC,cAAW,WAAU,qBAAoB,SAAQ,aAAY,MAAK,SAAS,eAAK,cAAa;AAAA,SAChG;AAAA,OAEJ,GACF;AAAA,IACA,qBAAC,uBAAoB,WAAU,eAC7B;AAAA,0BAAC,qBACC,+BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,cAAW,MAAY;AAAA,QACxB,qBAAC,SACE;AAAA,kBAAQ,oBAAC,cAAW,WAAU,qBAAqB,eAAK,aAAY;AAAA,UACpE,QAAQ,oBAAC,cAAW,WAAU,qBAAoB,SAAQ,aAAY,MAAK,SAAS,eAAK,cAAa;AAAA,UACtG,CAAC,QAAQ,oBAAC,cAAY,YAAE,eAAe,GAAE;AAAA,WAC5C;AAAA,SACF,GACF;AAAA,MACA,oBAAC,yBAAsB;AAAA,MACtB,QAAQ;AAAA,QAAC;AAAA;AAAA,UACR,MAAM,EAAE,kBAAkB;AAAA,UAC1B,SAAS,YAAY,MAAM,IAAI,0BAA0B;AAAA,UACzD,MAAM,oBAAC,cAAY,GAAG,WAAW;AAAA;AAAA,MACnC;AAAA,MACC,CAAC,QAAQ;AAAA,QAAC;AAAA;AAAA,UACT,MAAM,EAAE,SAAS;AAAA,UACjB,SAAS,YAAY,MAAM,IAAI,iBAAiB;AAAA,UAChD,MAAM,oBAAC,SAAO,GAAG,WAAW;AAAA;AAAA,MAC9B;AAAA,MACC,CAAC,QAAQ;AAAA,QAAC;AAAA;AAAA,UACT,MAAM,EAAE,SAAS;AAAA,UACjB,SAAS,YAAY,MAAM,IAAI,iBAAiB;AAAA,UAChD,MAAM,oBAAC,YAAU,GAAG,WAAU;AAAA;AAAA,MAChC;AAAA,MACC,QAAQ,MAAM,cAAc,MAAM,WAAW,IAAI,CAAC,MAAM,UACvD,oBAAC,QAAkB,GAAG,QAAX,KAAiB,CAC7B;AAAA,MACA,MAAM,mBACL;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE,cAAc;AAAA,UACtB,SAAS,MAAM;AAAA,UACf,MAAM,oBAAC,WAAS,GAAG,WAAW;AAAA;AAAA,MAChC;AAAA,MAED,QAAQ;AAAA,QAAC;AAAA;AAAA,UACR,MAAM,EAAE,UAAU;AAAA,UAClB,SAAS,MAAM,KAAK,QAAQ;AAAA,UAC5B,MAAM,oBAAC,UAAQ,GAAG,WAAW;AAAA;AAAA,MAC/B;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense fallback={<Skeleton className=\"h-[34px] w-[34px] rounded-full stack-scope\" />}>\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/auth-page.js

@@ -3,8 +3,8 @@
 
 // src/components-page/auth-page.tsx
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@stackframe/stack-ui";
-import { useEffect } from "react";
+import { Skeleton, StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@stackframe/stack-ui";
+import { Suspense, useEffect } from "react";
 import { useStackApp, useUser } from "..";
 import { CredentialSignIn } from "../components/credential-sign-in";
 import { CredentialSignUp } from "../components/credential-sign-up";
@@ -13,10 +13,24 @@ import { SeparatorWithText } from "../components/elements/separator-with-text";
 import { MagicLinkSignIn } from "../components/magic-link-sign-in";
 import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { OAuthButtonGroup } from "../components/oauth-button-group";
-import { useTranslation } from "../lib/translations";
 import { PasskeyButton } from "../components/passkey-button";
+import { useTranslation } from "../lib/translations";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AuthPage(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, { ...props }), children: /* @__PURE__ */ jsx(Inner, { ...props }) });
+}
+function Fallback(props) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage: !!props.fullPage, children: /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", style: { maxWidth: "380px", flexBasis: "380px", padding: props.fullPage ? "1rem" : 0 }, children: /* @__PURE__ */ jsxs("div", { className: "text-center mb-6 flex flex-col", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-2/3 self-center" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16 mt-8" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24 mt-2" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-6" })
+  ] }) }) });
+}
+function Inner(props) {
   const stackApp = useStackApp();
   const user = useUser();
   const projectFromHook = stackApp.useProject();

package/dist/esm/components-page/auth-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@stackframe/stack-ui';\nimport { useEffect } from 'react';\nimport { useStackApp, useUser } from '..';\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { useTranslation } from '../lib/translations';\nimport { PasskeyButton } from '../components/passkey-button';\n\nexport function AuthPage(props: {\n  noPasswordRepeat?: boolean,\n  firstTab?: 'magic-link' | 'password',\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  extraInfo?: React.ReactNode,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      passkeyEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = props.mockProject || projectFromHook;\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (props.automaticRedirect) {\n      if (user && !props.mockProject) {\n        runAsynchronously(props.type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, props.mockProject, stackApp, props.automaticRedirect]);\n\n  if (user && !props.mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;\n  }\n\n  if (props.type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {props.type === 'sign-in' ? t(\"Sign in to your account\") : t(\"Create a new account\")}\n          </Typography>\n          {props.type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {t(\"Don't have an account?\")}{\" \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>{t(\"Sign up\")}</StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {t(\"Already have an account?\")}{\" \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>{t(\"Sign in\")}</StyledLink>\n            </Typography>\n          )}\n        </div>\n        <div className='gap-4 flex flex-col items-stretch stack-scope'>\n          <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />\n          {project.config.passkeyEnabled && props.type === \"sign-in\" && <PasskeyButton type={props.type} />}\n        </div>\n\n        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue={props.firstTab || 'magic-link'}>\n            <TabsList className={cn('w-full mb-2', {\n              'flex-row-reverse': props.firstTab === 'password'\n            })}>\n              <TabsTrigger value='magic-link' className='flex-1'>{t(\"Email\")}</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>{t(\"Email & Password\")}</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : project.config.oauthProviders.length === 0 ? <Typography variant={\"destructive\"} className=\"text-center\">{t(\"No authentication method enabled.\")}</Typography> : null}\n        {props.extraInfo && (\n          <div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>\n            <div>{props.extraInfo}</div>\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Skeleton, StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@stackframe/stack-ui';\nimport { Suspense, useEffect } from 'react';\nimport { useStackApp, useUser } from '..';\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { PasskeyButton } from '../components/passkey-button';\nimport { useTranslation } from '../lib/translations';\n\ntype Props = {\n  noPasswordRepeat?: boolean,\n  firstTab?: 'magic-link' | 'password',\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  extraInfo?: React.ReactNode,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      passkeyEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}\n\nexport function AuthPage(props: Props) {\n  return <Suspense fallback={<Fallback {...props} />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback(props: Props) {\n  const { t } = useTranslation();\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6 flex flex-col\">\n          <Skeleton className='h-9 w-2/3 self-center' />\n\n          <Skeleton className='h-3 w-16 mt-8' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-3 w-24 mt-2' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-9 w-full mt-6' />\n        </div>\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction Inner (props: Props) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = props.mockProject || projectFromHook;\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (props.automaticRedirect) {\n      if (user && !props.mockProject) {\n        runAsynchronously(props.type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, props.mockProject, stackApp, props.automaticRedirect]);\n\n  if (user && !props.mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;\n  }\n\n  if (props.type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {props.type === 'sign-in' ? t(\"Sign in to your account\") : t(\"Create a new account\")}\n          </Typography>\n          {props.type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {t(\"Don't have an account?\")}{\" \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>{t(\"Sign up\")}</StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {t(\"Already have an account?\")}{\" \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>{t(\"Sign in\")}</StyledLink>\n            </Typography>\n          )}\n        </div>\n        <div className='gap-4 flex flex-col items-stretch stack-scope'>\n          <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />\n          {project.config.passkeyEnabled && props.type === \"sign-in\" && <PasskeyButton type={props.type} />}\n        </div>\n\n        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue={props.firstTab || 'magic-link'}>\n            <TabsList className={cn('w-full mb-2', {\n              'flex-row-reverse': props.firstTab === 'password'\n            })}>\n              <TabsTrigger value='magic-link' className='flex-1'>{t(\"Email\")}</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>{t(\"Email & Password\")}</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : project.config.oauthProviders.length === 0 ? <Typography variant={\"destructive\"} className=\"text-center\">{t(\"No authentication method enabled.\")}</Typography> : null}\n        {props.extraInfo && (\n          <div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>\n            <div>{props.extraInfo}</div>\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,yBAAyB;AAClC,SAAS,UAAU,YAAY,MAAM,aAAa,UAAU,aAAa,YAAY,UAAU;AAC/F,SAAS,UAAU,iBAAiB;AACpC,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAuBF,cAWrB,YAXqB;AADtB,SAAS,SAAS,OAAc;AACrC,SAAO,oBAAC,YAAS,UAAU,oBAAC,YAAU,GAAG,OAAO,GAC9C,8BAAC,SAAO,GAAG,OAAO,GACpB;AACF;AAEA,SAAS,SAAS,OAAc;AAC9B,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,oBAAC,iBAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,8BAAC,SAAI,WAAU,2CAA0C,OAAO,EAAE,UAAU,SAAS,WAAW,SAAS,SAAS,MAAM,WAAW,SAAS,EAAE,GAC5I,+BAAC,SAAI,WAAU,kCACb;AAAA,wBAAC,YAAS,WAAU,yBAAwB;AAAA,IAE5C,oBAAC,YAAS,WAAU,iBAAgB;AAAA,IACpC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,IAEtC,oBAAC,YAAS,WAAU,iBAAgB;AAAA,IACpC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,IAEtC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,KACxC,GACF,GACF;AAEJ;AAEA,SAAS,MAAO,OAAc;AAC5B,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,SAAS,WAAW;AAC5C,QAAM,UAAU,MAAM,eAAe;AACrC,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,YAAU,MAAM;AACd,QAAI,MAAM,mBAAmB;AAC3B,UAAI,QAAQ,CAAC,MAAM,aAAa;AAC9B,0BAAkB,MAAM,SAAS,YAAY,SAAS,sBAAsB,IAAI,SAAS,sBAAsB,CAAC;AAAA,MAClH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,aAAa,UAAU,MAAM,iBAAiB,CAAC;AAE/D,MAAI,QAAQ,CAAC,MAAM,aAAa;AAC9B,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAU,MAAM,UAAU;AAAA,EAC1E;AAEA,MAAI,MAAM,SAAS,aAAa,CAAC,QAAQ,OAAO,eAAe;AAC7D,WAAO,oBAAC,yBAAsB,MAAK,kBAAiB,UAAU,MAAM,UAAU;AAAA,EAChF;AAEA,QAAM,mBAAmB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,eAAe,SAAS;AAExI,SACE,oBAAC,iBAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,+BAAC,SAAI,WAAU,2CAA0C,OAAO,EAAE,UAAU,SAAS,WAAW,SAAS,SAAS,MAAM,WAAW,SAAS,EAAE,GAC5I;AAAA,yBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,cAAW,MAAK,MACd,gBAAM,SAAS,YAAY,EAAE,yBAAyB,IAAI,EAAE,sBAAsB,GACrF;AAAA,MACC,MAAM,SAAS,YACd,QAAQ,OAAO,iBACb,qBAAC,cACE;AAAA,UAAE,wBAAwB;AAAA,QAAG;AAAA,QAC9B,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAI,YAAE,SAAS,GAAE;AAAA,SACnB,IAGF,qBAAC,cACE;AAAA,UAAE,0BAA0B;AAAA,QAAG;AAAA,QAChC,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAI,YAAE,SAAS,GAAE;AAAA,SACnB;AAAA,OAEJ;AAAA,IACA,qBAAC,SAAI,WAAU,iDACb;AAAA,0BAAC,oBAAiB,MAAM,MAAM,MAAM,aAAa,MAAM,aAAa;AAAA,MACnE,QAAQ,OAAO,kBAAkB,MAAM,SAAS,aAAa,oBAAC,iBAAc,MAAM,MAAM,MAAM;AAAA,OACjG;AAAA,IAEC,mBAAmB,oBAAC,qBAAkB,MAAM,EAAE,kBAAkB,GAAG;AAAA,IACnE,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,mBAClD,qBAAC,QAAK,cAAc,MAAM,YAAY,cACpC;AAAA,2BAAC,YAAS,WAAW,GAAG,eAAe;AAAA,QACrC,oBAAoB,MAAM,aAAa;AAAA,MACzC,CAAC,GACC;AAAA,4BAAC,eAAY,OAAM,cAAa,WAAU,UAAU,YAAE,OAAO,GAAE;AAAA,QAC/D,oBAAC,eAAY,OAAM,YAAW,WAAU,UAAU,YAAE,kBAAkB,GAAE;AAAA,SAC1E;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,gBAAM,SAAS,YAAY,oBAAC,oBAAiB,kBAAkB,MAAM,kBAAkB,IAAK,oBAAC,oBAAgB,GAChH;AAAA,OACF,IACE,QAAQ,OAAO,oBACjB,MAAM,SAAS,YAAY,oBAAC,oBAAiB,kBAAkB,MAAM,kBAAkB,IAAK,oBAAC,oBAAgB,IAC3G,QAAQ,OAAO,mBACjB,oBAAC,mBAAe,IACd,QAAQ,OAAO,eAAe,WAAW,IAAI,oBAAC,cAAW,SAAS,eAAe,WAAU,eAAe,YAAE,mCAAmC,GAAE,IAAgB;AAAA,IACpK,MAAM,aACL,oBAAC,SAAI,WAAU,qEACb,8BAAC,SAAK,gBAAM,WAAU,GACxB;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/email-verification.js

@@ -3,36 +3,62 @@
 
 // src/components-page/email-verification.tsx
 import React from "react";
-import { useStackApp } from "..";
+import { useStackApp, useUser } from "..";
 import { MessageCard } from "../components/message-cards/message-card";
-import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { KnownErrors } from "@stackframe/stack-shared";
-import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
 import { useTranslation } from "../lib/translations";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { jsx } from "react/jsx-runtime";
-var cacheVerifyEmail = cacheFunction(async (stackApp, code) => {
-  return await stackApp.verifyEmail(code);
-});
 function EmailVerification(props) {
   const { t } = useTranslation();
   const stackApp = useStackApp();
+  const user = useUser();
+  const [result, setResult] = React.useState(null);
   const invalidJsx = /* @__PURE__ */ jsx(MessageCard, { title: t("Invalid Verification Link"), fullPage: !!props.fullPage, children: /* @__PURE__ */ jsx("p", { children: t("Please check if you have the correct link. If you continue to have issues, please contact support.") }) });
   const expiredJsx = /* @__PURE__ */ jsx(MessageCard, { title: t("Expired Verification Link"), fullPage: !!props.fullPage, children: /* @__PURE__ */ jsx("p", { children: t("Your email verification link has expired. Please request a new verification link from your account settings.") }) });
   if (!props.searchParams?.code) {
     return invalidJsx;
   }
-  const result = React.use(cacheVerifyEmail(stackApp, props.searchParams.code));
-  if (result.status === "error") {
-    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {
-      return invalidJsx;
-    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {
-      return expiredJsx;
-    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
-    } else {
-      throw result.error;
+  if (!result) {
+    return /* @__PURE__ */ jsx(
+      MessageCard,
+      {
+        title: t("Do you want to verify your email?"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Verify"),
+        primaryAction: async () => {
+          const result2 = await stackApp.verifyEmail(props.searchParams?.code || throwErr("No verification code provided"));
+          setResult(result2);
+        },
+        secondaryButtonText: t("Cancel"),
+        secondaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
+  } else {
+    if (result.status === "error") {
+      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {
+        return invalidJsx;
+      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {
+        return expiredJsx;
+      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
+      } else {
+        throw result.error;
+      }
     }
+    return /* @__PURE__ */ jsx(
+      MessageCard,
+      {
+        title: t("You email has been verified!"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Go to home"),
+        primaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "emailVerified", fullPage: !!props.fullPage });
 }
 export {
   EmailVerification

package/dist/esm/components-page/email-verification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\n\nconst cacheVerifyEmail = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyEmail(code);\n});\n\nexport function EmailVerification(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your email verification link has expired. Please request a new verification link from your account settings.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  const result = React.use(cacheVerifyEmail(stackApp, props.searchParams.code));\n\n  if (result.status === 'error') {\n    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n      return invalidJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n      return expiredJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n      // everything fine, continue\n    } else {\n      throw result.error;\n    }\n  }\n\n  return <PredefinedMessageCard type='emailVerified' fullPage={!!props.fullPage} />;\n}\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAyB,mBAAmB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAezB;AAbN,IAAM,mBAAmB,cAAc,OAAO,UAAgC,SAAiB;AAC7F,SAAO,MAAM,SAAS,YAAY,IAAI;AACxC,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,WAAW,YAAY;AAE7B,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,8BAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,8BAAC,OAAG,YAAE,8GAA8G,GAAE,GACxH;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,MAAM,IAAI,iBAAiB,UAAU,MAAM,aAAa,IAAI,CAAC;AAE5E,MAAI,OAAO,WAAW,SAAS;AAC7B,QAAI,OAAO,iBAAiB,YAAY,0BAA0B;AAChE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,YAAY,yBAAyB;AACtE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,YAAY,6BAA6B;AAAA,IAE5E,OAAO;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SAAO,oBAAC,yBAAsB,MAAK,iBAAgB,UAAU,CAAC,CAAC,MAAM,UAAU;AACjF;","names":[]}
+{"version":3,"sources":["../../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\n\nexport function EmailVerification(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [result, setResult] = React.useState<Awaited<ReturnType<typeof stackApp.verifyEmail>> | null>(null);\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your email verification link has expired. Please request a new verification link from your account settings.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  if (!result) {\n    return <MessageCard\n      title={t(\"Do you want to verify your email?\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Verify\")}\n      primaryAction={async () => {\n        const result = await stackApp.verifyEmail(props.searchParams?.code || throwErr(\"No verification code provided\"));\n        setResult(result);\n      }}\n      secondaryButtonText={t(\"Cancel\")}\n      secondaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  } else {\n    if (result.status === 'error') {\n      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n        return invalidJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n        return expiredJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n        // everything fine, continue\n      } else {\n        throw result.error;\n      }\n    }\n\n    return <MessageCard\n      title={t(\"You email has been verified!\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Go to home\")}\n      primaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  }\n}\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAyB,aAAa,eAAe;AACrD,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAanB;AAXC,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAkE,IAAI;AAExG,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,8BAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,8BAAC,OAAG,YAAE,8GAA8G,GAAE,GACxH;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,mCAAmC;AAAA,QAC5C,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,QAAQ;AAAA,QAC7B,eAAe,YAAY;AACzB,gBAAMA,UAAS,MAAM,SAAS,YAAY,MAAM,cAAc,QAAQ,SAAS,+BAA+B,CAAC;AAC/G,oBAAUA,OAAM;AAAA,QAClB;AAAA,QACA,qBAAqB,EAAE,QAAQ;AAAA,QAC/B,iBAAiB,YAAY;AAC3B,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF,OAAO;AACL,QAAI,OAAO,WAAW,SAAS;AAC7B,UAAI,OAAO,iBAAiB,YAAY,0BAA0B;AAChE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,YAAY,yBAAyB;AACtE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,YAAY,6BAA6B;AAAA,MAE5E,OAAO;AACL,cAAM,OAAO;AAAA,MACf;AAAA,IACF;AAEA,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,8BAA8B;AAAA,QACvC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,YAAY;AAAA,QACjC,eAAe,YAAY;AACzB,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF;AACF;","names":["result"]}

package/dist/esm/components-page/magic-link-callback.js

@@ -7,9 +7,9 @@ import { useStackApp, useUser } from "..";
 import { MessageCard } from "../components/message-cards/message-card";
 import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
 import { KnownErrors } from "@stackframe/stack-shared";
-import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
 import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
 import { useTranslation } from "../lib/translations";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { jsx } from "react/jsx-runtime";
 var cacheSignInWithMagicLink = cacheFunction(async (stackApp, code) => {
   return await stackApp.signInWithMagicLink(code);
@@ -18,6 +18,7 @@ function MagicLinkCallback(props) {
   const { t } = useTranslation();
   const stackApp = useStackApp();
   const user = useUser();
+  const [result, setResult] = React.useState(null);
   if (user) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedIn", fullPage: !!props.fullPage });
   }
@@ -27,19 +28,47 @@ function MagicLinkCallback(props) {
   if (!props.searchParams?.code) {
     return invalidJsx;
   }
-  const result = React.use(cacheSignInWithMagicLink(stackApp, props.searchParams.code));
-  if (result.status === "error") {
-    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {
-      return invalidJsx;
-    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {
-      return expiredJsx;
-    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
-      return alreadyUsedJsx;
-    } else {
-      throw result.error;
+  if (!result) {
+    return /* @__PURE__ */ jsx(
+      MessageCard,
+      {
+        title: t("Do you want to sign in?"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Sign in"),
+        primaryAction: async () => {
+          const result2 = await stackApp.signInWithMagicLink(props.searchParams?.code || throwErr("No magic link provided"));
+          setResult(result2);
+        },
+        secondaryButtonText: t("Cancel"),
+        secondaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
+  } else {
+    if (result.status === "error") {
+      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {
+        return invalidJsx;
+      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {
+        return expiredJsx;
+      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {
+        return alreadyUsedJsx;
+      } else {
+        throw result.error;
+      }
     }
+    return /* @__PURE__ */ jsx(
+      MessageCard,
+      {
+        title: t("Signed in successfully!"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Go to home"),
+        primaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
   }
-  React.use(neverResolve());
 }
 export {
   MagicLinkCallback

package/dist/esm/components-page/magic-link-callback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\n\nconst cacheSignInWithMagicLink = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.signInWithMagicLink(code);\n});\n\nexport function MagicLinkCallback(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your magic link has expired. Please request a new magic link if you need to sign-in.\")}</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title={t(\"Magic Link Already Used\")} fullPage={!!props.fullPage}>\n      <p>{t(\"The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  const result = React.use(cacheSignInWithMagicLink(stackApp, props.searchParams.code));\n  if (result.status === 'error') {\n    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n      return invalidJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n      return expiredJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n      return alreadyUsedJsx;\n    } else {\n      throw result.error;\n    }\n  }\n\n  React.use(neverResolve());\n}\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAyB,aAAa,eAAe;AACrD,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAepB;AAbX,IAAM,2BAA2B,cAAc,OAAO,UAAgC,SAAiB;AACrG,SAAO,MAAM,SAAS,oBAAoB,IAAI;AAChD,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAU,CAAC,CAAC,MAAM,UAAU;AAAA,EAC5E;AAEA,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,8BAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,8BAAC,OAAG,YAAE,sFAAsF,GAAE,GAChG;AAGF,QAAM,iBACJ,oBAAC,eAAY,OAAO,EAAE,yBAAyB,GAAG,UAAU,CAAC,CAAC,MAAM,UAClE,8BAAC,OAAG,YAAE,qIAAqI,GAAE,GAC/I;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,MAAM,IAAI,yBAAyB,UAAU,MAAM,aAAa,IAAI,CAAC;AACpF,MAAI,OAAO,WAAW,SAAS;AAC7B,QAAI,OAAO,iBAAiB,YAAY,0BAA0B;AAChE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,YAAY,yBAAyB;AACtE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,YAAY,6BAA6B;AAC1E,aAAO;AAAA,IACT,OAAO;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,QAAM,IAAI,aAAa,CAAC;AAC1B;","names":[]}
+{"version":3,"sources":["../../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\n\nconst cacheSignInWithMagicLink = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.signInWithMagicLink(code);\n});\n\nexport function MagicLinkCallback(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [result, setResult] = React.useState<Awaited<ReturnType<typeof stackApp.signInWithMagicLink>> | null>(null);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your magic link has expired. Please request a new magic link if you need to sign-in.\")}</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title={t(\"Magic Link Already Used\")} fullPage={!!props.fullPage}>\n      <p>{t(\"The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  if (!result) {\n    return <MessageCard\n      title={t(\"Do you want to sign in?\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Sign in\")}\n      primaryAction={async () => {\n        const result = await stackApp.signInWithMagicLink(props.searchParams?.code || throwErr(\"No magic link provided\"));\n        setResult(result);\n      }}\n      secondaryButtonText={t(\"Cancel\")}\n      secondaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  } else {\n    if (result.status === 'error') {\n      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n        return invalidJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n        return expiredJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n        return alreadyUsedJsx;\n      } else {\n        throw result.error;\n      }\n    }\n\n    return <MessageCard\n      title={t(\"Signed in successfully!\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Go to home\")}\n      primaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  }\n}\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAyB,aAAa,eAAe;AACrD,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAgBd;AAdX,IAAM,2BAA2B,cAAc,OAAO,UAAgC,SAAiB;AACrG,SAAO,MAAM,SAAS,oBAAoB,IAAI;AAChD,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAA0E,IAAI;AAEhH,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAU,CAAC,CAAC,MAAM,UAAU;AAAA,EAC5E;AAEA,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,8BAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,8BAAC,OAAG,YAAE,sFAAsF,GAAE,GAChG;AAGF,QAAM,iBACJ,oBAAC,eAAY,OAAO,EAAE,yBAAyB,GAAG,UAAU,CAAC,CAAC,MAAM,UAClE,8BAAC,OAAG,YAAE,qIAAqI,GAAE,GAC/I;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,yBAAyB;AAAA,QAClC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,SAAS;AAAA,QAC9B,eAAe,YAAY;AACzB,gBAAMA,UAAS,MAAM,SAAS,oBAAoB,MAAM,cAAc,QAAQ,SAAS,wBAAwB,CAAC;AAChH,oBAAUA,OAAM;AAAA,QAClB;AAAA,QACA,qBAAqB,EAAE,QAAQ;AAAA,QAC/B,iBAAiB,YAAY;AAC3B,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF,OAAO;AACL,QAAI,OAAO,WAAW,SAAS;AAC7B,UAAI,OAAO,iBAAiB,YAAY,0BAA0B;AAChE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,YAAY,yBAAyB;AACtE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,YAAY,6BAA6B;AAC1E,eAAO;AAAA,MACT,OAAO;AACL,cAAM,OAAO;AAAA,MACf;AAAA,IACF;AAEA,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,yBAAyB;AAAA,QAClC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,YAAY;AAAA,QACjC,eAAe,YAAY;AACzB,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF;AACF;","names":["result"]}