@stackframe/stack 2.5.25 → 2.5.27

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @stackframe/stack
 
+## 2.5.27
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.27
+  - @stackframe/stack-sc@2.5.27
+  - @stackframe/stack-ui@2.5.27
+
+## 2.5.26
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-sc@2.5.26
+  - @stackframe/stack-shared@2.5.26
+  - @stackframe/stack-ui@2.5.26
+
 ## 2.5.25
 
 ### Patch Changes

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

@@ -7,6 +7,7 @@ declare function UserAvatar(props: {
         displayName?: string | null;
         primaryEmail?: string | null;
     } | null;
+    border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 export { UserAvatar };

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

@@ -7,6 +7,7 @@ declare function UserAvatar(props: {
         displayName?: string | null;
         primaryEmail?: string | null;
     } | null;
+    border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 export { UserAvatar };

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

@@ -23,14 +23,15 @@ __export(user_avatar_exports, {
   UserAvatar: () => UserAvatar
 });
 module.exports = __toCommonJS(user_avatar_exports);
-var import_lucide_react = require("lucide-react");
 var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var defaultSize = 34;
 function UserAvatar(props) {
   const user = props.user;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || "34px", width: props.size || "34px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || defaultSize, width: props.size || defaultSize }, className: props.border ? "border" : "", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "h-5 w-5 text-zinc-500" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", style: { fontSize: (props.size || defaultSize) * 0.5 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "text-zinc-500", size: (props.size || defaultSize) * 0.6 }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA0B;AAE1B,sBAAoD;AAYhD;AAVG,SAAS,WAAW,OAOxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\nimport { UserRound } from \"lucide-react\";\n\nconst defaultSize = 34;\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n  border?: boolean,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.5 }}>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"text-zinc-500\" size={(props.size || defaultSize) * 0.6} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoD;AACpD,0BAA0B;AAetB;AAbJ,IAAM,cAAc;AAEb,SAAS,WAAW,OAQxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,YAAY,GAAG,WAAW,MAAM,SAAS,WAAW,IAC3H;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eAAc,OAAO,EAAE,WAAW,MAAM,QAAQ,eAAe,IAAI,GAC9E,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,iBAAgB,OAAO,MAAM,QAAQ,eAAe,KAAK,GAClF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/profile-image-editor.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { UserAvatar } from './elements/user-avatar.mjs';
+
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function ProfileImageEditor(props: {
+    user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+    onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { ProfileImageEditor, checkImageUrl };

package/dist/components/profile-image-editor.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { UserAvatar } from './elements/user-avatar.js';
+
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function ProfileImageEditor(props: {
+    user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+    onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { ProfileImageEditor, checkImageUrl };

package/dist/components/profile-image-editor.js

@@ -0,0 +1,160 @@
+"use strict";
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/profile-image-editor.tsx
+var profile_image_editor_exports = {};
+__export(profile_image_editor_exports, {
+  ProfileImageEditor: () => ProfileImageEditor,
+  checkImageUrl: () => checkImageUrl
+});
+module.exports = __toCommonJS(profile_image_editor_exports);
+var import_base64 = require("@stackframe/stack-shared/dist/utils/base64");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_browser_image_compression = __toESM(require("browser-image-compression"));
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_react_avatar_editor = __toESM(require("react-avatar-editor"));
+var import_user_avatar = require("./elements/user-avatar");
+var import_jsx_runtime = require("react/jsx-runtime");
+async function checkImageUrl(url) {
+  try {
+    const res = await fetch(url, { method: "HEAD" });
+    const buff = await res.blob();
+    return buff.type.startsWith("image/");
+  } catch (e) {
+    return false;
+  }
+}
+function ProfileImageEditor(props) {
+  const cropRef = (0, import_react.useRef)(null);
+  const [slideValue, setSlideValue] = (0, import_react.useState)(1);
+  const [rawUrl, setRawUrl] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  function reset() {
+    setSlideValue(1);
+    setRawUrl(null);
+    setError(null);
+  }
+  function upload() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.onchange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      (0, import_base64.fileToBase64)(file).then(async (rawUrl2) => {
+        if (await checkImageUrl(rawUrl2)) {
+          setRawUrl(rawUrl2);
+          setError(null);
+        } else {
+          setError("Invalid image");
+        }
+      }).then(() => input.remove()).catch(console.error);
+    };
+    input.click();
+  }
+  if (!rawUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cursor-pointer relative", onClick: upload, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_user_avatar.UserAvatar,
+          {
+            size: 100,
+            user: props.user,
+            border: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-background p-2 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Upload, { className: "h-5 w-5" }) }) })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", type: "label", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_avatar_editor.default,
+      {
+        ref: cropRef,
+        image: rawUrl || props.user.profileImageUrl || "",
+        borderRadius: 1e3,
+        color: [0, 0, 0, 0.72],
+        scale: slideValue,
+        rotate: 0,
+        border: 20,
+        className: "border"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Slider,
+      {
+        min: 1,
+        max: 5,
+        step: 0.1,
+        defaultValue: [slideValue],
+        value: [slideValue],
+        onValueChange: (v) => setSlideValue(v[0])
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          onClick: async () => {
+            if (cropRef.current && rawUrl) {
+              const croppedUrl = cropRef.current.getImage().toDataURL("image/jpeg");
+              const compressedFile = await (0, import_browser_image_compression.default)(
+                await import_browser_image_compression.default.getFilefromDataUrl(croppedUrl, "profile-image"),
+                {
+                  maxSizeMB: 0.1,
+                  fileType: "image/jpeg"
+                }
+              );
+              const compressedUrl = await import_browser_image_compression.default.getDataUrlFromFile(compressedFile);
+              await props.onProfileImageUrlChange(compressedUrl);
+              reset();
+            }
+          },
+          children: "Save"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: reset,
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProfileImageEditor,
+  checkImageUrl
+});
+//# sourceMappingURL=profile-image-editor.js.map

package/dist/components/profile-image-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/profile-image-editor.tsx"],"sourcesContent":["import { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';\nimport { Button, Slider, Typography } from '@stackframe/stack-ui';\nimport imageCompression from 'browser-image-compression';\nimport { Upload } from 'lucide-react';\nimport { ComponentProps, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\nimport { UserAvatar } from './elements/user-avatar';\n\nexport async function checkImageUrl(url: string){\n  try {\n    const res = await fetch(url, { method: 'HEAD' });\n    const buff = await res.blob();\n    return buff.type.startsWith('image/');\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function ProfileImageEditor(props: {\n  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,\n  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,\n}) {\n  const cropRef = useRef<AvatarEditor>(null);\n  const [slideValue, setSlideValue] = useState(1);\n  const [rawUrl, setRawUrl] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  function reset() {\n    setSlideValue(1);\n    setRawUrl(null);\n    setError(null);\n  }\n\n  function upload() {\n    const input = document.createElement('input');\n    input.type = 'file';\n    input.onchange = (e) => {\n      const file = (e.target as HTMLInputElement).files?.[0];\n      if (!file) return;\n      fileToBase64(file)\n        .then(async (rawUrl) => {\n          if (await checkImageUrl(rawUrl)) {\n            setRawUrl(rawUrl);\n            setError(null);\n          } else {\n            setError('Invalid image');\n          }\n        })\n        .then(() => input.remove())\n        .catch(console.error);\n    };\n    input.click();\n  }\n\n  if (!rawUrl) {\n    return <div className='flex flex-col'>\n      <div className='cursor-pointer relative' onClick={upload}>\n        <UserAvatar\n          size={100}\n          user={props.user}\n          border\n        />\n        <div className='absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity'>\n          <div className='bg-background p-2 rounded-full'>\n            <Upload className='h-5 w-5' />\n          </div>\n        </div>\n      </div>\n      {error && <Typography variant='destructive' type='label'>{error}</Typography>}\n    </div>;\n  }\n\n  return (\n    <div className='flex flex-col items-center gap-4'>\n      <AvatarEditor\n        ref={cropRef}\n        image={rawUrl || props.user.profileImageUrl || \"\"}\n        borderRadius={1000}\n        color={[0, 0, 0, 0.72]}\n        scale={slideValue}\n        rotate={0}\n        border={20}\n        className='border'\n      />\n      <Slider\n        min={1}\n        max={5}\n        step={0.1}\n        defaultValue={[slideValue]}\n        value={[slideValue]}\n        onValueChange={(v) => setSlideValue(v[0])}\n      />\n\n      <div className='flex flex-row gap-2'>\n        <Button\n          onClick={async () => {\n            if (cropRef.current && rawUrl) {\n              const croppedUrl = cropRef.current.getImage().toDataURL('image/jpeg');\n              const compressedFile = await imageCompression(\n                await imageCompression.getFilefromDataUrl(croppedUrl, 'profile-image'),\n                {\n                  maxSizeMB: 0.1,\n                  fileType: \"image/jpeg\",\n                }\n              );\n              const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);\n              await props.onProfileImageUrlChange(compressedUrl);\n              reset();\n            }\n          }}\n        >\n          Save\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={reset}\n        >\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":["rawUrl","AvatarEditor","imageCompression"]}

package/dist/components/team-icon.js

@@ -1,9 +1,7 @@
 "use strict";
-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)
@@ -17,14 +15,6 @@ 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/team-icon.tsx
@@ -33,14 +23,13 @@ __export(team_icon_exports, {
   TeamIcon: () => TeamIcon
 });
 module.exports = __toCommonJS(team_icon_exports);
-var import_image = __toESM(require("next/image"));
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function TeamIcon(props) {
   if (props.team.profileImageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-6 h-6 rounded bg-gray-200 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: props.team.profileImageUrl, alt: props.team.displayName, className: "w-6 h-6" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Avatar, { className: "w-6 h-6 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: props.team.profileImageUrl, alt: props.team.displayName }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.team.displayName.slice(0, 1).toUpperCase() }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-zinc-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "text-zinc-800 dark:text-zinc-800", children: props.team.displayName.slice(0, 1).toUpperCase() }) });
   }
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/team-icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,sBAA2B;AAMnB;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,SAAI,WAAU,+CACb,sDAAC,aAAAA,SAAA,EAAM,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,WAAU,WAAU,GAC3F;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,gEACb,sDAAC,8BAAY,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAChE;AAAA,EAEJ;AACF;","names":["Image"]}
+{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"w-6 h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAgD;AAMxC;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,0BAAO,WAAU,mBAChB,sDAAC,+BAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,gEACb,sDAAC,8BAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}

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

@@ -54,6 +54,7 @@ var import__ = require("..");
 var import_form_warning = require("../components/elements/form-warning");
 var import_sidebar_layout = require("../components/elements/sidebar-layout");
 var import_user_avatar = require("../components/elements/user-avatar");
+var import_profile_image_editor = require("../components/profile-image-editor");
 var import_team_icon = require("../components/team-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AccountSettings({ fullPage = false }) {
@@ -124,12 +125,26 @@ function AccountSettings({ fullPage = false }) {
 }
 function ProfileSection() {
   const user = (0, import__.useUser)({ or: "redirect" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
-      await user.update({ displayName: newDisplayName });
-    } })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { className: "mb-2", children: "Profile image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_profile_image_editor.ProfileImageEditor,
+        {
+          user,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await user.update({ profileImageUrl });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
+        await user.update({ displayName: newDisplayName });
+      } })
+    ] })
+  ] });
 }
 function EmailVerificationSection() {
   const user = (0, import__.useUser)({ or: "redirect" });
@@ -348,7 +363,6 @@ function SignOutSection() {
   ) }) });
 }
 function UserSettings(props) {
-  const app = (0, import__.useStackApp)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const [leaving, setLeaving] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -375,16 +389,30 @@ function ManagementSettings(props) {
   if (!updateTeamPermission) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.EditableText,
-      {
-        value: props.team.displayName,
-        onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_profile_image_editor.ProfileImageEditor,
+        {
+          user: props.team,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await props.team.update({ profileImageUrl });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.EditableText,
+        {
+          value: props.team.displayName,
+          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+        }
+      )
+    ] })
+  ] });
 }
 function ProfileSettings(props) {
   const user = (0, import__.useUser)({ or: "redirect" });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';\nimport { CirclePlus, Contact, LogOut, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { CurrentUser, MessageCard, Project, Team, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { TeamIcon } from '../components/team-icon';\n\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n  const teams = user.useTeams();\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n\n  return (\n    <SidebarLayout\n      items={([\n        {\n          title: 'My Profile',\n          type: 'item',\n          subpath: '/profile',\n          icon: Contact,\n          content: <ProfileSection/>,\n        },\n        {\n          title: 'Security',\n          type: 'item',\n          icon: ShieldCheck,\n          subpath: '/security',\n          content: (\n            <div className='flex flex-col gap-8'>\n              <EmailVerificationSection />\n              <PasswordSection />\n              <MfaSection />\n            </div>\n          ),\n        },\n        {\n          title: 'Sign Out',\n          subpath: '/sign-out',\n          type: 'item',\n          icon: LogOut,\n          content: <SignOutSection />,\n        },\n        ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n          title: 'Teams',\n          type: 'divider',\n        }] as const : [],\n        ...teams.map(team => ({\n          title: <div className='flex gap-2 items-center'>\n            <TeamIcon team={team}/>\n            {team.displayName}\n          </div>,\n          type: 'item',\n          subpath: `/teams/${team.id}`,\n          content: (\n            <div className=\"flex flex-col gap-8\">\n              <ProfileSettings team={team}/>\n              <ManagementSettings team={team}/>\n              <MemberInvitation team={team}/>\n              <MembersSettings team={team}/>\n              <UserSettings team={team}/>\n            </div>\n          ),\n        } as const)),\n        ...project.config.clientTeamCreationEnabled ? [{\n          title: 'Create a team',\n          icon: CirclePlus,\n          type: 'item',\n          subpath: '/team-creation',\n          content: <TeamCreation />,\n        }] as const : [],\n      ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n      title='Account Settings'\n      basePath={stackApp.urls.accountSettings}\n    />\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <div>\n      <div>\n        <Label>Display name</Label>\n        <EditableText value={user.displayName || ''} onSave={async (newDisplayName) => {\n          await user.update({ displayName: newDisplayName });\n        }}/>\n      </div>\n    </div>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser({ or: 'redirect' });\n  const [emailSent, setEmailSent] = useState(false);\n\n  if (!user.primaryEmail) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Email Verification</Label>\n        {user.primaryEmailVerified ? (\n          <Typography variant='success'>Your email has been verified.</Typography>\n        ) : (\n          <>\n            <Typography variant='destructive'>Your email has not been verified.</Typography>\n            <div className='flex mt-4'>\n              <Button\n                disabled={emailSent}\n                onClick={async () => {\n                  await user.sendVerificationEmail();\n                  setEmailSent(true);\n                }}\n              >\n                {emailSent ? 'Email sent!' : 'Send Verification Email'}\n              </Button>\n            </div>\n          </>\n        )}\n\n      </div>\n    </>\n  );\n}\n\nconst passwordSchema = yupObject({\n  oldPassword: yupString().required('Please enter your old password'),\n  newPassword: yupString().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], 'Passwords do not match').required('Please repeat your password')\n});\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [changingPassword, setChangingPassword] = useState(false);\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n  const [alreadyReset, setAlreadyReset] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = await user.updatePassword({ oldPassword, newPassword });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });\n      } else {\n        reset();\n        setAlreadyReset(true);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Change password</Label>\n      <div>\n        {\n          alreadyReset ?\n            <Typography variant='success'>Password changed successfully!</Typography> :\n            !changingPassword ?\n              <Button\n                variant='secondary'\n                onClick={async () => {\n                  setChangingPassword(true);\n                }}\n              >\n                Change Password\n              </Button> :\n              <form\n                onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n                noValidate\n              >\n                <Label htmlFor=\"old-password\" className=\"mb-1\">Old password</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  {...register('oldPassword')}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n\n                <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">Password</Label>\n                <PasswordInput\n                  id=\"new-password\"\n                  {...registerPassword}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPassword.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n                <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat password</Label>\n                <PasswordInput\n                  id=\"repeat-password\"\n                  {...registerPasswordRepeat}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPasswordRepeat.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n                <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n                  Change Password\n                </Button>\n              </form>\n        }\n      </div>\n    </div>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <div>\n      <div>\n        <Label>Multi-factor Authentication</Label>\n\n        <div>\n          {isEnabled ? (\n            <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n          ) : (\n            generatedSecret ? (\n              <div className='flex flex-col gap-4 items-center'>\n                <Typography>Scan this QR code with your authenticator app:</Typography>\n                <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n                <Typography>Then, enter your six-digit MFA code:</Typography>\n                <Input\n                  value={mfaCode}\n                  onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n                  }}\n                  placeholder=\"123456\"\n                  maxLength={6}\n                  disabled={isLoading}\n                />\n                {isMaybeWrong && mfaCode.length === 6 && (\n                  <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n                )}\n              </div>\n            ) : (\n              <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n            )\n          )}\n\n          <Button\n            className=\"mt-4\"\n            variant={isEnabled ? 'secondary' : 'default'}\n            onClick={async () => {\n              if (isEnabled) {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              } else if (!generatedSecret) {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              } else {\n                setGeneratedSecret(null);\n                setQrCodeUrl(null);\n                setMfaCode(\"\");\n              }\n            }}\n          >\n            {isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        <Button\n          variant='secondary'\n          onClick={() => user.signOut()}\n        >\n          Sign Out\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction UserSettings(props: { team: Team }) {\n  const app = useStackApp();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        { !leaving ?\n          <Button\n            variant='secondary'\n            onClick={async () => setLeaving(true)}\n          >\n          Leave team\n          </Button> :\n          <div className=''>\n            <Typography variant='destructive'>Are you sure you want to leave the team?</Typography>\n            <div className='flex gap-2'>\n              <Button variant='destructive' onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}>\n                Leave\n              </Button>\n              <Button variant='secondary' onClick={() => setLeaving(false)}>\n                Cancel\n              </Button>\n            </div>\n          </div>}\n      </div>\n    </div>\n  );\n}\n\nfunction ManagementSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Team display name</Label>\n        <EditableText\n          value={props.team.displayName}\n          onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n        />\n      </div>\n    </>\n  );\n}\n\nfunction ProfileSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"flex flex-col\">\n        <Label className=\"flex gap-2\">User display name <SimpleTooltip tooltip=\"This overwrites your user display name in the account setting\" type='info'/></Label>\n        <EditableText\n          value={profile.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await profile.update({ displayName: newDisplayName });\n          }}/>\n      </div>\n    </div>\n  );\n}\n\nconst invitationSchema = yupObject({\n  email: yupString().email().required('Please enter an email address'),\n});\n\nfunction MemberInvitation(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <div>\n      <Label>Invite a user to team</Label>\n      <form\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <div className=\"flex flex-col gap-4 md:flex-row\">\n          <div>\n            <Input\n              placeholder=\"Email\"\n              {...register('email')}\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Invite User\n          </Button>\n        </div>\n        <FormWarningText text={errors.email?.message?.toString()} />\n        {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n      </form>\n    </div>\n  );\n}\n\n\nfunction MembersSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  const users = props.team.useUsers();\n\n  if (!readMemberPermission) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Members</Label>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">User</TableHead>\n            <TableHead className=\"w-[200px]\">Name</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {users.map(({ id, teamProfile }, i) => (\n            <TableRow key={id}>\n              <TableCell>\n                <UserAvatar user={teamProfile}/>\n              </TableCell>\n              <TableCell>\n                <Typography>{teamProfile.displayName}</Typography>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nconst teamCreationSchema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className='stack-scope flex flex-col items-stretch'>\n      <div className=\"mb-6\">\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <div className=\"flex items-end gap-4\">\n            <div>\n              <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                {...register('displayName')}\n              />\n            </div>\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n\n            <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';\nimport { CirclePlus, Contact, LogOut, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { CurrentUser, MessageCard, Project, Team, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { ProfileImageEditor } from \"../components/profile-image-editor\";\nimport { TeamIcon } from '../components/team-icon';\n\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n  const teams = user.useTeams();\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n\n  return (\n    <SidebarLayout\n      items={([\n        {\n          title: 'My Profile',\n          type: 'item',\n          subpath: '/profile',\n          icon: Contact,\n          content: <ProfileSection/>,\n        },\n        {\n          title: 'Security',\n          type: 'item',\n          icon: ShieldCheck,\n          subpath: '/security',\n          content: (\n            <div className='flex flex-col gap-8'>\n              <EmailVerificationSection />\n              <PasswordSection />\n              <MfaSection />\n            </div>\n          ),\n        },\n        {\n          title: 'Sign Out',\n          subpath: '/sign-out',\n          type: 'item',\n          icon: LogOut,\n          content: <SignOutSection />,\n        },\n        ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n          title: 'Teams',\n          type: 'divider',\n        }] as const : [],\n        ...teams.map(team => ({\n          title: <div className='flex gap-2 items-center'>\n            <TeamIcon team={team}/>\n            {team.displayName}\n          </div>,\n          type: 'item',\n          subpath: `/teams/${team.id}`,\n          content: (\n            <div className=\"flex flex-col gap-8\">\n              <ProfileSettings team={team}/>\n              <ManagementSettings team={team}/>\n              <MemberInvitation team={team}/>\n              <MembersSettings team={team}/>\n              <UserSettings team={team}/>\n            </div>\n          ),\n        } as const)),\n        ...project.config.clientTeamCreationEnabled ? [{\n          title: 'Create a team',\n          icon: CirclePlus,\n          type: 'item',\n          subpath: '/team-creation',\n          content: <TeamCreation />,\n        }] as const : [],\n      ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n      title='Account Settings'\n      basePath={stackApp.urls.accountSettings}\n    />\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <div className='flex flex-col gap-8'>\n      <div className='flex flex-col items-start'>\n        <Label className=\"mb-2\">Profile image</Label>\n        <ProfileImageEditor\n          user={user}\n          onProfileImageUrlChange={async (profileImageUrl) => {\n            await user.update({ profileImageUrl });\n          }}\n        />\n      </div>\n      <div className='flex flex-col'>\n        <Label>Display name</Label>\n        <EditableText value={user.displayName || ''} onSave={async (newDisplayName) => {\n          await user.update({ displayName: newDisplayName });\n        }}/>\n      </div>\n    </div>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser({ or: 'redirect' });\n  const [emailSent, setEmailSent] = useState(false);\n\n  if (!user.primaryEmail) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Email Verification</Label>\n        {user.primaryEmailVerified ? (\n          <Typography variant='success'>Your email has been verified.</Typography>\n        ) : (\n          <>\n            <Typography variant='destructive'>Your email has not been verified.</Typography>\n            <div className='flex mt-4'>\n              <Button\n                disabled={emailSent}\n                onClick={async () => {\n                  await user.sendVerificationEmail();\n                  setEmailSent(true);\n                }}\n              >\n                {emailSent ? 'Email sent!' : 'Send Verification Email'}\n              </Button>\n            </div>\n          </>\n        )}\n\n      </div>\n    </>\n  );\n}\n\nconst passwordSchema = yupObject({\n  oldPassword: yupString().required('Please enter your old password'),\n  newPassword: yupString().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], 'Passwords do not match').required('Please repeat your password')\n});\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [changingPassword, setChangingPassword] = useState(false);\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n  const [alreadyReset, setAlreadyReset] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = await user.updatePassword({ oldPassword, newPassword });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });\n      } else {\n        reset();\n        setAlreadyReset(true);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Change password</Label>\n      <div>\n        {\n          alreadyReset ?\n            <Typography variant='success'>Password changed successfully!</Typography> :\n            !changingPassword ?\n              <Button\n                variant='secondary'\n                onClick={async () => {\n                  setChangingPassword(true);\n                }}\n              >\n                Change Password\n              </Button> :\n              <form\n                onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n                noValidate\n              >\n                <Label htmlFor=\"old-password\" className=\"mb-1\">Old password</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  {...register('oldPassword')}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n\n                <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">Password</Label>\n                <PasswordInput\n                  id=\"new-password\"\n                  {...registerPassword}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPassword.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n                <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat password</Label>\n                <PasswordInput\n                  id=\"repeat-password\"\n                  {...registerPasswordRepeat}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPasswordRepeat.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n                <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n                  Change Password\n                </Button>\n              </form>\n        }\n      </div>\n    </div>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <div>\n      <div>\n        <Label>Multi-factor Authentication</Label>\n\n        <div>\n          {isEnabled ? (\n            <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n          ) : (\n            generatedSecret ? (\n              <div className='flex flex-col gap-4 items-center'>\n                <Typography>Scan this QR code with your authenticator app:</Typography>\n                <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n                <Typography>Then, enter your six-digit MFA code:</Typography>\n                <Input\n                  value={mfaCode}\n                  onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n                  }}\n                  placeholder=\"123456\"\n                  maxLength={6}\n                  disabled={isLoading}\n                />\n                {isMaybeWrong && mfaCode.length === 6 && (\n                  <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n                )}\n              </div>\n            ) : (\n              <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n            )\n          )}\n\n          <Button\n            className=\"mt-4\"\n            variant={isEnabled ? 'secondary' : 'default'}\n            onClick={async () => {\n              if (isEnabled) {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              } else if (!generatedSecret) {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              } else {\n                setGeneratedSecret(null);\n                setQrCodeUrl(null);\n                setMfaCode(\"\");\n              }\n            }}\n          >\n            {isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        <Button\n          variant='secondary'\n          onClick={() => user.signOut()}\n        >\n          Sign Out\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction UserSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        { !leaving ?\n          <Button\n            variant='secondary'\n            onClick={async () => setLeaving(true)}\n          >\n          Leave team\n          </Button> :\n          <div className=''>\n            <Typography variant='destructive'>Are you sure you want to leave the team?</Typography>\n            <div className='flex gap-2'>\n              <Button variant='destructive' onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}>\n                Leave\n              </Button>\n              <Button variant='secondary' onClick={() => setLeaving(false)}>\n                Cancel\n              </Button>\n            </div>\n          </div>}\n      </div>\n    </div>\n  );\n}\n\nfunction ManagementSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <div className='flex flex-col'>\n        <Label>Team display name</Label>\n        <ProfileImageEditor\n          user={props.team}\n          onProfileImageUrlChange={async (profileImageUrl) => {\n            await props.team.update({ profileImageUrl });\n          }}\n        />\n      </div>\n\n      <div className='flex flex-col'>\n        <Label>Team display name</Label>\n        <EditableText\n          value={props.team.displayName}\n          onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n        />\n      </div>\n    </>\n  );\n}\n\nfunction ProfileSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"flex flex-col\">\n        <Label className=\"flex gap-2\">User display name <SimpleTooltip tooltip=\"This overwrites your user display name in the account setting\" type='info'/></Label>\n        <EditableText\n          value={profile.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await profile.update({ displayName: newDisplayName });\n          }}/>\n      </div>\n    </div>\n  );\n}\n\nconst invitationSchema = yupObject({\n  email: yupString().email().required('Please enter an email address'),\n});\n\nfunction MemberInvitation(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <div>\n      <Label>Invite a user to team</Label>\n      <form\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <div className=\"flex flex-col gap-4 md:flex-row\">\n          <div>\n            <Input\n              placeholder=\"Email\"\n              {...register('email')}\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Invite User\n          </Button>\n        </div>\n        <FormWarningText text={errors.email?.message?.toString()} />\n        {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n      </form>\n    </div>\n  );\n}\n\n\nfunction MembersSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  const users = props.team.useUsers();\n\n  if (!readMemberPermission) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Members</Label>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">User</TableHead>\n            <TableHead className=\"w-[200px]\">Name</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {users.map(({ id, teamProfile }, i) => (\n            <TableRow key={id}>\n              <TableCell>\n                <UserAvatar user={teamProfile}/>\n              </TableCell>\n              <TableCell>\n                <Typography>{teamProfile.displayName}</Typography>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nconst teamCreationSchema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className='stack-scope flex flex-col items-stretch'>\n      <div className=\"mb-6\">\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <div className=\"flex items-end gap-4\">\n            <div>\n              <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                {...register('displayName')}\n              />\n            </div>\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n\n            <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}

package/dist/esm/components/elements/user-avatar.js

@@ -1,12 +1,13 @@
 // src/components/elements/user-avatar.tsx
-import { UserRound } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@stackframe/stack-ui";
+import { UserRound } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var defaultSize = 34;
 function UserAvatar(props) {
   const user = props.user;
-  return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size || "34px", width: props.size || "34px" }, children: [
+  return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size || defaultSize, width: props.size || defaultSize }, className: props.border ? "border" : "", children: [
     /* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(UserRound, { className: "h-5 w-5 text-zinc-500" }) })
+    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx("div", { className: "font-medium", style: { fontSize: (props.size || defaultSize) * 0.5 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(UserRound, { className: "text-zinc-500", size: (props.size || defaultSize) * 0.6 }) })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAE1B,SAAS,QAAQ,gBAAgB,mBAAmB;AAYhD,SACE,KADF;AAVG,SAAS,WAAW,OAOxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,aAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\nimport { UserRound } from \"lucide-react\";\n\nconst defaultSize = 34;\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n  border?: boolean,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.5 }}>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"text-zinc-500\" size={(props.size || defaultSize) * 0.6} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}"],"mappings":";AAAA,SAAS,QAAQ,gBAAgB,mBAAmB;AACpD,SAAS,iBAAiB;AAetB,SACE,KADF;AAbJ,IAAM,cAAc;AAEb,SAAS,WAAW,OAQxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,YAAY,GAAG,WAAW,MAAM,SAAS,WAAW,IAC3H;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,SAAI,WAAU,eAAc,OAAO,EAAE,WAAW,MAAM,QAAQ,eAAe,IAAI,GAC9E,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,aAAU,WAAU,iBAAgB,OAAO,MAAM,QAAQ,eAAe,KAAK,GAClF;AAAA,KACF;AAEJ;","names":[]}