@stackframe/stack 2.4.28 → 2.5.0

package/dist/components/user-button.js

@@ -1,11 +1,9 @@
 "use client";
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -19,56 +17,31 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/user-button.tsx
 var user_button_exports = {};
 __export(user_button_exports, {
-  default: () => UserButton
+  UserButton: () => UserButton
 });
 module.exports = __toCommonJS(user_button_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import__ = require("..");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
-var import_user_avatar = __toESM(require("./user-avatar"));
+var import_user_avatar = require("./elements/user-avatar");
 var import_navigation = require("next/navigation");
-var import_objects = require("@stackframe/stack-shared/dist/utils/objects");
-var import_styled_components = __toESM(require("styled-components"));
 var import_lucide_react = require("lucide-react");
+var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
-var icons = (0, import_objects.typedFromEntries)((0, import_objects.typedEntries)({
-  CircleUser: import_lucide_react.CircleUser,
-  UserPlus: import_lucide_react.UserPlus,
-  SunMoon: import_lucide_react.SunMoon,
-  LogIn: import_lucide_react.LogIn,
-  LogOut: import_lucide_react.LogOut
-}).map(([key, value]) => {
-  const styledComponent = (0, import_styled_components.default)(value)`
-    height: 1rem;
-    width: 1rem;
-  `;
-  return [
-    key,
-    import_react.default.createElement(styledComponent, { size: 20 })
-  ];
-}));
 function Item(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import__.DropdownMenuItem,
+    import_stack_ui.DropdownMenuItem,
     {
       onClick: () => (0, import_promises.runAsynchronouslyWithAlert)(props.onClick),
-      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      className: "flex gap-2 items-center",
       children: [
         props.icon,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: props.text })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.text })
       ]
     }
   );
@@ -77,7 +50,7 @@ function UserButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react.Suspense,
     {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props })
     }
   );
@@ -90,36 +63,32 @@ function UserButtonInnerInner(props) {
   const user = props.user;
   const app = (0, import__.useStackApp)();
   const router = (0, import_navigation.useRouter)();
-  const textStyles = {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    margin: 0
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
-      user && props.showUserInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: textStyles, children: user.displayName }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+  const iconProps = { size: 20, className: "h-4 w-4" };
+  const textClasses = "text-ellipsis whitespace-nowrap overflow-hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuTrigger, { className: "outline-none stack-scope", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user }),
+      user && props.showUserInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: textClasses, children: user.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: textClasses, variant: "secondary", type: "label", children: user.primaryEmail })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.DropdownMenuContent, { className: "stack-scope", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: user.displayName }),
-          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
-          !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Not signed in" })
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: user.displayName }),
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: user.primaryEmail }),
+          !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: "Not signed in" })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuSeparator, {}),
       user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         Item,
         {
           text: "Account settings",
           onClick: () => router.push(app.urls.accountSettings),
-          icon: icons.CircleUser
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleUser, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -127,7 +96,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign in",
           onClick: () => router.push(app.urls.signIn),
-          icon: icons.LogIn
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LogIn, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -135,7 +104,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign up",
           onClick: () => router.push(app.urls.signUp),
-          icon: icons.UserPlus
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserPlus, { ...iconProps })
         }
       ),
       user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { ...item }, index)),
@@ -144,7 +113,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Toggle theme",
           onClick: props.colorModeToggle,
-          icon: icons.SunMoon
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SunMoon, { ...iconProps })
         }
       ),
       user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -152,10 +121,14 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign out",
           onClick: () => user.signOut(),
-          icon: icons.LogOut
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LogOut, { ...iconProps })
         }
       )
     ] })
   ] });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UserButton
+});
 //# sourceMappingURL=user-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport {\n  useUser,\n  Text,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  useStackApp,\n  Skeleton,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\n\nconst icons = typedFromEntries(typedEntries({\n  CircleUser,\n  UserPlus,\n  SunMoon,\n  LogIn,\n  LogOut,\n} as const).map(([key, value]) => {\n  const styledComponent = styled(value)`\n    height: 1rem;\n    width: 1rem;\n  `;\n  return [\n    key,\n    React.createElement(styledComponent, { size: 20 })\n  ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n    >\n      {props.icon}\n      <Text>{props.text}</Text>\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 default 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 user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n\n  const textStyles = {\n    textOverflow: 'ellipsis', \n    whiteSpace: 'nowrap', \n    overflow: 'hidden',\n    margin: 0,\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n          <UserAvatar user={user} />\n          {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n            <Text style={textStyles}>{user.displayName}</Text>\n            <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n          </div>}\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>\n          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n            <UserAvatar user={user} />\n            <div>\n              {user && <Text>{user.displayName}</Text>}\n              {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n              {!user && <Text>Not signed in</Text>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={icons.CircleUser}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={icons.LogIn}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\n          icon={icons.UserPlus}\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item \n            text=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={icons.SunMoon}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={icons.LogOut}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":["styled","React","UserAvatar"]}
+{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport React, { Suspense } from \"react\";\nimport {\n  useUser,\n  useStackApp,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { UserAvatar } from \"./elements/user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      className=\"flex gap-2 items-center\"\n    >\n      {props.icon}\n      <Typography>{props.text}</Typography>\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 user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n  \n  const iconProps = { size: 20, className: 'h-4 w-4' };\n  const textClasses = 'text-ellipsis whitespace-nowrap overflow-hidden';\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\">\n              <Typography className={textClasses}>{user.displayName}</Typography>\n              <Typography className={textClasses} 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>{user.displayName}</Typography>}\n              {user && <Typography variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>Not signed in</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\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=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item \n          text=\"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/components-page/account-settings.d.mts

@@ -4,4 +4,4 @@ declare function AccountSettings({ fullPage }: {
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { AccountSettings as default };
+export { AccountSettings };

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

@@ -4,4 +4,4 @@ declare function AccountSettings({ fullPage }: {
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { AccountSettings as default };
+export { AccountSettings };

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

@@ -1,11 +1,9 @@
 "use client";
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -19,39 +17,31 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components-page/account-settings.tsx
 var account_settings_exports = {};
 __export(account_settings_exports, {
-  default: () => AccountSettings
+  AccountSettings: () => AccountSettings
 });
 module.exports = __toCommonJS(account_settings_exports);
 var import__ = require("..");
-var import_predefined_message_card = __toESM(require("../components/message-cards/predefined-message-card"));
-var import_components_core = require("../components-core");
-var import_user_avatar = __toESM(require("../components/user-avatar"));
+var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
+var import_user_avatar = require("../components/elements/user-avatar");
 var import_react = require("react");
-var import_form_warning = __toESM(require("../components/form-warning"));
+var import_form_warning = require("../components/elements/form-warning");
 var import_password = require("@stackframe/stack-shared/dist/helpers/password");
+var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SettingSection(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.CardHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { as: "h3", style: { fontWeight: 500 }, children: props.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { variant: "secondary", size: "sm", children: props.desc })
-    ] }),
-    props.children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: props.children }) }),
-    props.buttonText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.CardFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", children: props.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "label", variant: "secondary", children: props.desc })
+    ] }) }),
+    props.children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: props.children }) }),
+    props.buttonText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
       {
         disabled: props.buttonDisabled,
         onClick: props.onButtonClick,
@@ -77,17 +67,17 @@ function ProfileSection() {
         setChanged(false);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user, size: 50 }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { children: user?.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { variant: "secondary", size: "sm", children: user?.primaryEmail })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user, size: 50 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: user?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: user?.primaryEmail })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "display-name", children: "Display Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "display-name", className: "mb-1", children: "Display Name" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components_core.Input,
+            import_stack_ui.Input,
             {
               id: "display-name",
               value: userInfo.displayName,
@@ -116,7 +106,7 @@ function EmailVerificationSection() {
         await user?.sendVerificationEmail();
         setEmailSent(true);
       },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { variant: "warning", children: "Your email has not been verified" })
+      children: user?.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Your email has not been verified" })
     }
   );
 }
@@ -157,10 +147,10 @@ function PasswordSection() {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "old-password", children: "Old Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "old-password", className: "mb-1", children: "Old Password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import__.PasswordField,
+            import_stack_ui.PasswordInput,
             {
               id: "old-password",
               value: oldPassword,
@@ -170,12 +160,12 @@ function PasswordSection() {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: oldPasswordError })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: oldPasswordError })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "new-password", children: "New Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "new-password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import__.PasswordField,
+            import_stack_ui.PasswordInput,
             {
               id: "new-password",
               value: newPassword,
@@ -185,7 +175,7 @@ function PasswordSection() {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: newPasswordError })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: newPasswordError })
         ] })
       ]
     }
@@ -207,12 +197,12 @@ function SignOutSection() {
 function AccountSettings({ fullPage = false }) {
   const user = (0, import__.useUser)();
   if (!user) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.default, { type: "signedOut", fullPage });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "signedOut", fullPage });
   }
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: fullPage ? "1rem" : 0, display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_stack_ui.cn)(fullPage ? "p-4" : "", "flex flex-col gap-4"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h1", style: { fontWeight: "600" }, children: "Account Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { variant: "secondary", size: "sm", children: "Manage your account" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", children: "Account Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: "Manage your account" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileSection, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailVerificationSection, {}),
@@ -220,9 +210,13 @@ function AccountSettings({ fullPage = false }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
   ] });
   if (fullPage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Container, { size: "sm", children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Container, { size: 600, className: "stack-scope", children: inner });
   } else {
     return inner;
   }
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountSettings
+});
 //# sourceMappingURL=account-settings.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { PasswordField, useUser } from '..';\nimport PredefinedMessageCard from '../components/message-cards/predefined-message-card';\nimport { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from \"../components-core\";\nimport UserAvatar from '../components/user-avatar';\nimport { useState } from 'react';\nimport FormWarningText from '../components/form-warning';\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\n\nfunction SettingSection(props: {\n  title: string, \n  desc: string, \n  buttonText?: string, \n  buttonDisabled?: boolean,\n  onButtonClick?: React.ComponentProps<typeof Button>[\"onClick\"],\n  buttonVariant?: 'primary' | 'secondary',\n  children?: React.ReactNode, \n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <Text as='h3' style={{ fontWeight: 500 }}>{props.title}</Text>\n        <Text variant='secondary' size='sm'>{props.desc}</Text>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>\n          <Button\n            disabled={props.buttonDisabled}\n            onClick={props.onButtonClick}\n            variant={props.buttonVariant}\n          >\n            {props.buttonText}\n          </Button>\n        </div>\n      </CardFooter>}\n    </Card>\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser();\n  const [userInfo, setUserInfo] = useState<{ displayName: string }>({ displayName: user?.displayName || '' });\n  const [changed, setChanged] = useState(false);\n\n  return (\n    <SettingSection\n      title='Profile'\n      desc='Your profile information'\n      buttonDisabled={!changed}\n      buttonText='Save'\n      onButtonClick={async () => {\n        await user?.update(userInfo);\n        setChanged(false);\n      }}\n    >\n      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>\n        <UserAvatar user={user} size={50}/>\n        <div style={{ display: 'flex', flexDirection: 'column' }}>\n          <Text>{user?.displayName}</Text>\n          <Text variant='secondary' size='sm'>{user?.primaryEmail}</Text>\n        </div>\n      </div>\n\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='display-name'>Display Name</Label>\n        <Input\n          id='display-name'\n          value={userInfo.displayName}\n          onChange={(e) => {\n            setUserInfo((i) => ({...i, displayName: e.target.value }));\n            setChanged(true);\n          }}\n        />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser();\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <SettingSection\n      title='Email Verification'\n      desc='We want to make sure that you own the email address.'\n      buttonDisabled={emailSent}\n      buttonText={\n        !user?.primaryEmailVerified ? \n          emailSent ? \n            'Email sent!' : \n            'Send Email'\n          : undefined\n      }\n      onButtonClick={async () => {\n        await user?.sendVerificationEmail();\n        setEmailSent(true);\n      }}\n    >\n      {user?.primaryEmailVerified ? \n        <Text variant='success'>Your email has been verified</Text> : \n        <Text variant='warning'>Your email has not been verified</Text>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser();\n  const [oldPassword, setOldPassword] = useState<string>('');\n  const [oldPasswordError, setOldPasswordError] = useState<string>('');\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [newPasswordError, setNewPasswordError] = useState<string>('');\n\n  if (!user?.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={!oldPassword || !newPassword}\n      buttonText='Save'\n      onButtonClick={async () => {\n        if (oldPassword && newPassword) {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n            }\n          }\n        } else if (oldPassword && !newPassword) {\n          setNewPasswordError('Please enter a new password');\n        } else if (newPassword && !oldPassword) {\n          setOldPasswordError('Please enter your old password');\n        }\n      }}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='old-password'>Old Password</Label>\n        <PasswordField\n          id='old-password' \n          value={oldPassword} \n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <Label htmlFor='new-password'>New Password</Label>\n        <PasswordField\n          id='new-password' \n          value={newPassword} \n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction SignOutSection() {\n  const user = useUser();\n  return (\n    <SettingSection\n      title='Sign out'\n      desc='Sign out of your account on this device.'\n      buttonVariant='secondary'\n      buttonText='Sign Out'\n      onButtonClick={() => user?.signOut()}\n    >\n    </SettingSection>\n  );\n}\n\nexport default function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser();\n  if (!user) {\n    return <PredefinedMessageCard type='signedOut' fullPage={fullPage} />;\n  }\n\n  const inner = (\n    <div style={{ padding: fullPage ? '1rem' : 0, display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n      <div>\n        <Text size=\"xl\" as='h1' style={{ fontWeight: '600' }}>Account Settings</Text>\n        <Text variant='secondary' size='sm'>Manage your account</Text>\n      </div>\n      \n      <ProfileSection />\n      <EmailVerificationSection />\n      <PasswordSection />\n      <SignOutSection />\n    </div>\n  );\n\n  if (fullPage) {\n    return (\n      <Container size='sm'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n"],"mappings":"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","names":["UserAvatar","FormWarningText","PredefinedMessageCard"]}
+{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useUser } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { useState } from 'react';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from '@stackframe/stack-ui';\n\nfunction SettingSection(props: {\n  title: string, \n  desc: string, \n  buttonText?: string, \n  buttonDisabled?: boolean,\n  onButtonClick?: React.ComponentProps<typeof Button>[\"onClick\"],\n  buttonVariant?: 'default' | 'secondary',\n  children?: React.ReactNode, \n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <Typography type='h4'>{props.title}</Typography>\n          <Typography type='label' variant='secondary'>{props.desc}</Typography>\n        </div>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div className='flex flex-col gap-4'>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div className='flex justify-end w-full'>\n          <Button\n            disabled={props.buttonDisabled}\n            onClick={props.onButtonClick}\n            variant={props.buttonVariant}\n          >\n            {props.buttonText}\n          </Button>\n        </div>\n      </CardFooter>}\n    </Card>\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser();\n  const [userInfo, setUserInfo] = useState<{ displayName: string }>({ displayName: user?.displayName || '' });\n  const [changed, setChanged] = useState(false);\n\n  return (\n    <SettingSection\n      title='Profile'\n      desc='Your profile information'\n      buttonDisabled={!changed}\n      buttonText='Save'\n      onButtonClick={async () => {\n        await user?.update(userInfo);\n        setChanged(false);\n      }}\n    >\n      <div className='flex gap-4 items-center'>\n        <UserAvatar user={user} size={50}/>\n        <div className='flex flex-col'>\n          <Typography>{user?.displayName}</Typography>\n          <Typography variant='secondary' type='label'>{user?.primaryEmail}</Typography>\n        </div>\n      </div>\n\n      <div className='flex flex-col'>\n        <Label htmlFor='display-name' className='mb-1'>Display Name</Label>\n        <Input\n          id='display-name'\n          value={userInfo.displayName}\n          onChange={(e) => {\n            setUserInfo((i) => ({...i, displayName: e.target.value }));\n            setChanged(true);\n          }}\n        />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser();\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <SettingSection\n      title='Email Verification'\n      desc='We want to make sure that you own the email address.'\n      buttonDisabled={emailSent}\n      buttonText={\n        !user?.primaryEmailVerified ? \n          emailSent ? \n            'Email sent!' : \n            'Send Email'\n          : undefined\n      }\n      onButtonClick={async () => {\n        await user?.sendVerificationEmail();\n        setEmailSent(true);\n      }}\n    >\n      {user?.primaryEmailVerified ? \n        <Typography variant='success'>Your email has been verified</Typography> :\n        <Typography variant='destructive'>Your email has not been verified</Typography>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser();\n  const [oldPassword, setOldPassword] = useState<string>('');\n  const [oldPasswordError, setOldPasswordError] = useState<string>('');\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [newPasswordError, setNewPasswordError] = useState<string>('');\n\n  if (!user?.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={!oldPassword || !newPassword}\n      buttonText='Save'\n      onButtonClick={async () => {\n        if (oldPassword && newPassword) {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n            }\n          }\n        } else if (oldPassword && !newPassword) {\n          setNewPasswordError('Please enter a new password');\n        } else if (newPassword && !oldPassword) {\n          setOldPasswordError('Please enter your old password');\n        }\n      }}\n    >\n      <div className='flex flex-col'>\n        <Label htmlFor='old-password' className='mb-1'>Old Password</Label>\n        <PasswordInput\n          id='old-password' \n          value={oldPassword} \n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='new-password' className='mb-1'>New Password</Label>\n        <PasswordInput\n          id='new-password' \n          value={newPassword} \n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction SignOutSection() {\n  const user = useUser();\n  return (\n    <SettingSection\n      title='Sign out'\n      desc='Sign out of your account on this device.'\n      buttonVariant='secondary'\n      buttonText='Sign Out'\n      onButtonClick={() => user?.signOut()}\n    >\n    </SettingSection>\n  );\n}\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser();\n  if (!user) {\n    return <PredefinedMessageCard type='signedOut' fullPage={fullPage} />;\n  }\n\n  const inner = (\n    <div className={cn(fullPage ? 'p-4' : '', 'flex flex-col gap-4')}>\n      <div>\n        <Typography type='h2'>Account Settings</Typography>\n        <Typography variant='secondary' type='label'>Manage your account</Typography>\n      </div>\n      \n      <ProfileSection />\n      <EmailVerificationSection />\n      <PasswordSection />\n      <SignOutSection />\n    </div>\n  );\n\n  if (fullPage) {\n    return (\n      <Container size={600} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components-page/auth-page.d.mts

@@ -7,4 +7,4 @@ declare function AuthPage({ fullPage, type, mockProject, }: {
     mockProject?: ClientProjectJson;
 }): react_jsx_runtime.JSX.Element;
 
-export { AuthPage as default };
+export { AuthPage };

package/dist/components-page/auth-page.d.ts

@@ -7,4 +7,4 @@ declare function AuthPage({ fullPage, type, mockProject, }: {
     mockProject?: ClientProjectJson;
 }): react_jsx_runtime.JSX.Element;
 
-export { AuthPage as default };
+export { AuthPage };

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

@@ -1,11 +1,9 @@
 "use client";
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -19,30 +17,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components-page/auth-page.tsx
 var auth_page_exports = {};
 __export(auth_page_exports, {
-  default: () => AuthPage
+  AuthPage: () => AuthPage
 });
 module.exports = __toCommonJS(auth_page_exports);
-var import_credential_sign_in = __toESM(require("../components/credential-sign-in"));
-var import_separator_with_text = __toESM(require("../components/separator-with-text"));
-var import_oauth_group = __toESM(require("../components/oauth-group"));
-var import_maybe_full_page = __toESM(require("../components/maybe-full-page"));
+var import_credential_sign_in_form = require("../components/credential-sign-in-form");
+var import_separator_with_text = require("../components/elements/separator-with-text");
+var import_oauth_button_group = require("../components/oauth-button-group");
+var import_maybe_full_page = require("../components/elements/maybe-full-page");
 var import__ = require("..");
-var import_predefined_message_card = __toESM(require("../components/message-cards/predefined-message-card"));
-var import_components_core = require("../components-core");
-var import_magic_link_sign_in = __toESM(require("../components/magic-link-sign-in"));
+var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
+var import_magic_link_sign_in_form = require("../components/magic-link-sign-in-form");
+var import_credential_sign_up_form = require("../components/credential-sign-up-form");
+var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AuthPage({
   fullPage = false,
@@ -54,30 +45,34 @@ function AuthPage({
   const projectFromHook = stackApp.useProject();
   const project = mockProject || projectFromHook;
   if (user && !mockProject) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.default, { type: "signedIn", fullPage });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "signedIn", fullPage });
   }
   const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter((p) => p.enabled).length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_maybe_full_page.default, { fullPage, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h2", style: { fontWeight: 500 }, children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
-      type === "sign-in" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.Text, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack-scope flex flex-col items-stretch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center mb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
+      type === "sign-in" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { children: [
         "Don't have an account? ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Link, { href: stackApp.urls.signUp, children: "Sign up" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.StyledLink, { href: stackApp.urls.signUp, children: "Sign up" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { children: [
         "Already have an account? ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Link, { href: stackApp.urls.signIn, children: "Sign in" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.StyledLink, { href: stackApp.urls.signIn, children: "Sign in" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_oauth_group.default, { type, mockProject }),
-    enableSeparator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator_with_text.default, { text: "Or continue with" }),
-    project.credentialEnabled && project.magicLinkEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.Tabs, { defaultValue: "magic-link", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.TabsList, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.TabsTrigger, { value: "magic-link", children: "Magic Link" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.TabsTrigger, { value: "password", children: "Password" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_oauth_button_group.OAuthButtonGroup, { type, mockProject }),
+    enableSeparator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator_with_text.SeparatorWithText, { text: "Or continue with" }),
+    project.credentialEnabled && project.magicLinkEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Tabs, { defaultValue: "magic-link", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TabsList, { className: "w-full mb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TabsTrigger, { value: "magic-link", className: "flex-1", children: "Magic Link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TabsTrigger, { value: "password", className: "flex-1", children: "Password" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.TabsContent, { value: "magic-link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_sign_in.default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.TabsContent, { value: "password", children: type === "sign-up" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.CredentialSignUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_in.default, {}) })
-    ] }) : project.credentialEnabled ? type === "sign-up" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.CredentialSignUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_in.default, {}) : project.magicLinkEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_sign_in.default, {}) : null
-  ] });
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TabsContent, { value: "magic-link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_sign_in_form.MagicLinkSignInForm, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TabsContent, { value: "password", children: type === "sign-up" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_up_form.CredentialSignUpForm, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_in_form.CredentialSignInForm, {}) })
+    ] }) : project.credentialEnabled ? type === "sign-up" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_up_form.CredentialSignUpForm, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_credential_sign_in_form.CredentialSignInForm, {}) : project.magicLinkEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_sign_in_form.MagicLinkSignInForm, {}) : null
+  ] }) });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthPage
+});
 //# sourceMappingURL=auth-page.js.map