@stackframe/tanstack-start 0.0.1 → 2.8.92

package/dist/components/oauth-button.js

@@ -0,0 +1,173 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let ___lib_hooks_js = require("../lib/hooks.js");
+let color = require("color");
+color = require_chunk.__toESM(color);
+let __use_in_iframe_js = require("./use-in-iframe.js");
+
+//#region src/components/oauth-button.tsx
+const iconSize = 22;
+const changeColor = (c, value) => {
+	if (c.isLight()) value = -value;
+	return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
+};
+function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const stackApp = (0, ___lib_hooks_js.useStackApp)();
+	const styleId = (0, react.useId)().replaceAll(":", "-");
+	const isIframe = (0, __use_in_iframe_js.useInIframe)();
+	const [lastUsed, setLastUsed] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setLastUsed(localStorage.getItem("_STACK_AUTH.lastUsed"));
+	}, []);
+	let style;
+	switch (provider) {
+		case "google":
+			style = {
+				backgroundColor: "#fff",
+				textColor: "#000",
+				name: "Google",
+				border: "1px solid #ddd",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Google, { iconSize })
+			};
+			break;
+		case "github":
+			style = {
+				backgroundColor: "#111",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "GitHub",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.GitHub, { iconSize })
+			};
+			break;
+		case "facebook":
+			style = {
+				backgroundColor: "#1877F2",
+				textColor: "#fff",
+				name: "Facebook",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Facebook, { iconSize })
+			};
+			break;
+		case "microsoft":
+			style = {
+				backgroundColor: "#2f2f2f",
+				textColor: "#fff",
+				name: "Microsoft",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Microsoft, { iconSize })
+			};
+			break;
+		case "spotify":
+			style = {
+				backgroundColor: "#1DB954",
+				textColor: "#fff",
+				name: "Spotify",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Spotify, { iconSize })
+			};
+			break;
+		case "discord":
+			style = {
+				backgroundColor: "#5865F2",
+				textColor: "#fff",
+				name: "Discord",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Discord, { iconSize })
+			};
+			break;
+		case "gitlab":
+			style = {
+				backgroundColor: "#111",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "Gitlab",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Gitlab, { iconSize })
+			};
+			break;
+		case "apple":
+			style = {
+				backgroundColor: "#000",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "Apple",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Apple, { iconSize })
+			};
+			break;
+		case "bitbucket":
+			style = {
+				backgroundColor: "#fff",
+				textColor: "#000",
+				border: "1px solid #ddd",
+				name: "Bitbucket",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Bitbucket, { iconSize })
+			};
+			break;
+		case "linkedin":
+			style = {
+				backgroundColor: "#0073b1",
+				textColor: "#fff",
+				name: "LinkedIn",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.LinkedIn, { iconSize })
+			};
+			break;
+		case "x":
+			style = {
+				backgroundColor: "#000",
+				textColor: "#fff",
+				name: "X",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.X, { iconSize })
+			};
+			break;
+		case "twitch":
+			style = {
+				backgroundColor: "#6441a5",
+				textColor: "#fff",
+				name: "Twitch",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Twitch, { iconSize })
+			};
+			break;
+		default: style = {
+			name: provider,
+			icon: null
+		};
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+    .stack-oauth-button-${styleId} {
+      background-color: ${style.backgroundColor} !important;
+      color: ${style.textColor} !important;
+      border: ${style.border} !important;
+    }
+    .stack-oauth-button-${styleId}:hover {
+      background-color: ${changeColor((0, color.default)(style.backgroundColor), 10)} !important;
+    }
+  ` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SimpleTooltip, {
+		disabled: !isIframe,
+		tooltip: isIframe ? "This auth provider is not supported in an iframe for security reasons." : void 0,
+		className: "stack-scope w-full inline-flex",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Button, {
+			onClick: async () => {
+				localStorage.setItem("_STACK_AUTH.lastUsed", provider);
+				await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));
+			},
+			className: `stack-oauth-button-${styleId} stack-scope relative w-full`,
+			disabled: isIframe,
+			children: [!isMock && lastUsed === provider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md",
+				children: "last"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center w-full gap-4",
+				children: [style.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1",
+					children: type === "sign-up" ? t("Sign up with {provider}", { provider: style.name }) : t("Sign in with {provider}", { provider: style.name })
+				})]
+			})]
+		})
+	})] });
+}
+
+//#endregion
+exports.OAuthButton = OAuthButton;
+//# sourceMappingURL=oauth-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button.js","names":["BrandIcons","SimpleTooltip","Button"],"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { BrandIcons, Button, SimpleTooltip } from '@stackframe/stack-ui';\nimport Color, { ColorInstance } from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '../lib/hooks';\nimport { useTranslation } from '../lib/translations';\nimport { useInIframe } from './use-in-iframe';\n\nconst iconSize = 22;\n\nconst changeColor = (c: ColorInstance, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n  onAuthenticate,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n  onAuthenticate?: () => Promise<void>,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n  const isIframe = useInIframe();\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <BrandIcons.Google iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'twitch': {\n      style = {\n        backgroundColor: \"#6441a5\",\n        textColor: \"#fff\",\n        name: \"Twitch\",\n        icon: <BrandIcons.Twitch iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <SimpleTooltip\n        disabled={!isIframe}\n        tooltip={isIframe ? \"This auth provider is not supported in an iframe for security reasons.\" : undefined}\n        className='stack-scope w-full inline-flex'\n      >\n        <Button\n          onClick={async () => {\n            localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n            await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));\n          }}\n          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}\n          disabled={isIframe}\n        >\n          {!isMock && lastUsed === provider && (\n            <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n            </span>\n          )}\n          <div className='flex items-center w-full gap-4'>\n            {style.icon}\n            <span className='flex-1'>\n              {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n              }\n            </span>\n          </div>\n        </Button>\n      </SimpleTooltip>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/passkey-button.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/passkey-button.d.ts
+declare function PasskeyButton({
+  type
+}: {
+  type: 'sign-in' | 'sign-up';
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PasskeyButton };
+//# sourceMappingURL=passkey-button.d.ts.map

package/dist/components/passkey-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-button.d.ts","names":[],"sources":["../../src/components/passkey-button.tsx"],"mappings":";;;iBAcgB,aAAA,CAAA;EACd;AAAA;EAEA,IAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/passkey-button.js

@@ -0,0 +1,33 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___index_js = require("../index.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+
+//#region src/components/passkey-button.tsx
+function PasskeyButton({ type }) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const stackApp = (0, ___index_js.useStackApp)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+		onClick: async () => {
+			await stackApp.signInWithPasskey();
+		},
+		className: `stack-oauth-button-${(0, react.useId)().replaceAll(":", "-")} stack-scope`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center w-full gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.KeyRound, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex-1",
+				children: type === "sign-up" ? t("Sign up with Passkey") : t("Sign in with Passkey")
+			})]
+		})
+	}) });
+}
+
+//#endregion
+exports.PasskeyButton = PasskeyButton;
+//# sourceMappingURL=passkey-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-button.js","names":["Button","KeyRound"],"sources":["../../src/components/passkey-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { Button } from '@stackframe/stack-ui';\nimport { KeyRound } from 'lucide-react';\nimport { useId } from 'react';\nimport { useStackApp } from '..';\nimport { useTranslation } from '../lib/translations';\n\n\nexport function PasskeyButton({\n  type,\n}: {\n  type: 'sign-in' | 'sign-up',\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n\n  return (\n    <>\n      <Button\n        onClick={async () => { await stackApp.signInWithPasskey(); }}\n        className={`stack-oauth-button-${styleId} stack-scope`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          <KeyRound />\n          <span className='flex-1'>\n            {type === 'sign-up' ?\n              t('Sign up with Passkey') :\n              t('Sign in with Passkey')\n            }\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,cAAc,EAC5B,QAGC;CACD,MAAM,EAAE,kDAAsB;CAC9B,MAAM,yCAAwB;AAI9B,QACE,mFACE,2CAACA;EACC,SAAS,YAAY;AAAE,SAAM,SAAS,mBAAmB;;EACzD,WAAW,wCAPM,CAAC,WAAW,KAAK,IAAI,CAOG;YAEzC,4CAAC;GAAI,WAAU;cACb,2CAACC,0BAAW,EACZ,2CAAC;IAAK,WAAU;cACb,SAAS,YACR,EAAE,uBAAuB,GACzB,EAAE,uBAAuB;KAEtB;IACH;GACC,GACR"}

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

@@ -0,0 +1,15 @@
+import { UserAvatar } from "./elements/user-avatar.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+import { Area } from "react-easy-crop";
+
+//#region src/components/profile-image-editor.d.ts
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null>;
+declare function ProfileImageEditor(props: {
+  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProfileImageEditor, checkImageUrl, getCroppedImg };
+//# sourceMappingURL=profile-image-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"profile-image-editor.d.ts","names":[],"sources":["../../src/components/profile-image-editor.tsx"],"mappings":";;;;;;iBAcsB,aAAA,CAAc,GAAA,WAAW,OAAA;AAAA,iBAmBzB,aAAA,CAAc,QAAA,UAAkB,SAAA,EAAW,IAAA,GAAO,OAAA;AAAA,iBAkCxD,kBAAA,CAAmB,KAAA;EACjC,IAAA,EAAM,WAAA,CAAY,cAAA,QAAsB,UAAA;EACxC,uBAAA,GAA0B,eAAA,2BAA0C,OAAA;AAAA,IACrE,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,171 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _stackframe_stack_shared_dist_utils_base64 = require("@stackframe/stack-shared/dist/utils/base64");
+let browser_image_compression = require("browser-image-compression");
+browser_image_compression = require_chunk.__toESM(browser_image_compression);
+let react_easy_crop = require("react-easy-crop");
+react_easy_crop = require_chunk.__toESM(react_easy_crop);
+let __elements_user_avatar_js = require("./elements/user-avatar.js");
+
+//#region src/components/profile-image-editor.tsx
+async function checkImageUrl(url) {
+	try {
+		return (await (await fetch(url, { method: "HEAD" })).blob()).type.startsWith("image/");
+	} catch (e) {
+		return false;
+	}
+}
+const createImage = (url) => new Promise((resolve, reject) => {
+	const image = new Image();
+	image.addEventListener("load", () => resolve(image));
+	image.addEventListener("error", (error) => reject(error));
+	image.setAttribute("crossOrigin", "anonymous");
+	image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop) {
+	const image = await createImage(imageSrc);
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return null;
+	const safeCrop = {
+		x: Math.max(0, pixelCrop.x),
+		y: Math.max(0, pixelCrop.y),
+		width: Math.max(1, pixelCrop.width),
+		height: Math.max(1, pixelCrop.height)
+	};
+	canvas.width = safeCrop.width;
+	canvas.height = safeCrop.height;
+	ctx.drawImage(image, safeCrop.x, safeCrop.y, safeCrop.width, safeCrop.height, 0, 0, safeCrop.width, safeCrop.height);
+	return canvas.toDataURL("image/jpeg");
+}
+function ProfileImageEditor(props) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const [rawUrl, setRawUrl] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(null);
+	const [crop, setCrop] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = (0, react.useState)(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = (0, react.useState)(null);
+	function reset() {
+		setRawUrl(null);
+		setError(null);
+		setCrop({
+			x: 0,
+			y: 0
+		});
+		setZoom(1);
+		setCroppedAreaPixels(null);
+	}
+	const onCropChange = (0, react.useCallback)((crop) => {
+		setCrop(crop);
+	}, []);
+	const onCropComplete = (0, react.useCallback)((croppedArea, croppedAreaPixels) => {
+		setCroppedAreaPixels(croppedAreaPixels);
+	}, []);
+	const onZoomChange = (0, react.useCallback)((zoom) => {
+		setZoom(zoom);
+	}, []);
+	function upload() {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.onchange = (e) => {
+			const file = e.target.files?.[0];
+			if (!file) return;
+			(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+				const rawUrl = await (0, _stackframe_stack_shared_dist_utils_base64.fileToBase64)(file);
+				if (await checkImageUrl(rawUrl)) {
+					setRawUrl(rawUrl);
+					setError(null);
+				} else setError(t("Invalid image"));
+				input.remove();
+			});
+		};
+		input.click();
+	}
+	if (!rawUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cursor-pointer relative",
+			onClick: upload,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__elements_user_avatar_js.UserAvatar, {
+				size: 60,
+				user: props.user,
+				border: true
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute top-0 left-0 h-[60px] w-[60px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-background p-2 rounded-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "h-5 w-5" })
+				})
+			})]
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			variant: "destructive",
+			type: "label",
+			children: error
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative w-64 h-64",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_easy_crop.default, {
+					image: rawUrl || props.user.profileImageUrl || "",
+					crop,
+					zoom,
+					aspect: 1,
+					cropShape: "round",
+					showGrid: false,
+					onCropChange,
+					onCropComplete,
+					onZoomChange
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Slider, {
+				min: 1,
+				max: 3,
+				step: .1,
+				value: [zoom],
+				onValueChange: (v) => onZoomChange(v[0])
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					onClick: async () => {
+						if (rawUrl && croppedAreaPixels) {
+							const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
+							if (croppedImageUrl) {
+								const compressedFile = await (0, browser_image_compression.default)(await browser_image_compression.default.getFilefromDataUrl(croppedImageUrl, "profile-image"), {
+									maxSizeMB: .1,
+									fileType: "image/jpeg"
+								});
+								const compressedUrl = await browser_image_compression.default.getDataUrlFromFile(compressedFile);
+								await props.onProfileImageUrlChange(compressedUrl);
+								reset();
+							} else setError(t("Could not crop image."));
+						}
+					},
+					children: t("Save")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					variant: "secondary",
+					onClick: reset,
+					children: t("Cancel")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+exports.ProfileImageEditor = ProfileImageEditor;
+exports.checkImageUrl = checkImageUrl;
+exports.getCroppedImg = getCroppedImg;
+//# sourceMappingURL=profile-image-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"profile-image-editor.js","names":["UserAvatar","Upload","Typography","Cropper","Slider","Button","imageCompression"],"sources":["../../src/components/profile-image-editor.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';\nimport { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Slider, Typography } from '@stackframe/stack-ui';\nimport imageCompression from 'browser-image-compression';\nimport { Upload } from 'lucide-react';\nimport { ComponentProps, useCallback, useState } from 'react';\nimport Cropper, { Area } from 'react-easy-crop';\nimport { useTranslation } from '../lib/translations';\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\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', () => resolve(image));\n    image.addEventListener('error', (error) => reject(error));\n    image.setAttribute('crossOrigin', 'anonymous');\n    image.src = url;\n  });\n\nexport async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null> {\n  const image = await createImage(imageSrc);\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    return null;\n  }\n\n  const safeCrop = {\n    x: Math.max(0, pixelCrop.x),\n    y: Math.max(0, pixelCrop.y),\n    width: Math.max(1, pixelCrop.width),\n    height: Math.max(1, pixelCrop.height),\n  };\n\n  canvas.width = safeCrop.width;\n  canvas.height = safeCrop.height;\n\n  ctx.drawImage(\n    image,\n    safeCrop.x,\n    safeCrop.y,\n    safeCrop.width,\n    safeCrop.height,\n    0,\n    0,\n    safeCrop.width,\n    safeCrop.height\n  );\n\n  return canvas.toDataURL('image/jpeg');\n}\n\nexport function ProfileImageEditor(props: {\n  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,\n  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,\n}) {\n  const { t } = useTranslation();\n  const [rawUrl, setRawUrl] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n\n  function reset() {\n    setRawUrl(null);\n    setError(null);\n    setCrop({ x: 0, y: 0 });\n    setZoom(1);\n    setCroppedAreaPixels(null);\n  }\n\n  const onCropChange = useCallback((crop: { x: number, y: number }) => {\n    setCrop(crop);\n  }, []);\n\n  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {\n    setCroppedAreaPixels(croppedAreaPixels);\n  }, []);\n\n  const onZoomChange = useCallback((zoom: number) => {\n    setZoom(zoom);\n  }, []);\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      runAsynchronouslyWithAlert(async () => {\n        const rawUrl = await fileToBase64(file);\n        if (await checkImageUrl(rawUrl)) {\n          setRawUrl(rawUrl);\n          setError(null);\n        } else {\n          setError(t('Invalid image'));\n        }\n        input.remove();\n      });\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={60}\n          user={props.user}\n          border\n        />\n        <div className='absolute top-0 left-0 h-[60px] w-[60px] 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      <div className='relative w-64 h-64'>\n        <Cropper\n          image={rawUrl || props.user.profileImageUrl || \"\"}\n          crop={crop}\n          zoom={zoom}\n          aspect={1}\n          cropShape=\"round\"\n          showGrid={false}\n          onCropChange={onCropChange}\n          onCropComplete={onCropComplete}\n          onZoomChange={onZoomChange}\n        />\n      </div>\n      <Slider\n        min={1}\n        max={3}\n        step={0.1}\n        value={[zoom]}\n        onValueChange={(v) => onZoomChange(v[0])}\n      />\n\n      <div className='flex flex-row gap-2'>\n        <Button\n          onClick={async () => {\n            if (rawUrl && croppedAreaPixels) {\n              const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);\n              if (croppedImageUrl) {\n                const compressedFile = await imageCompression(\n                  await imageCompression.getFilefromDataUrl(croppedImageUrl, '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              } else {\n                setError(t('Could not crop image.'));\n              }\n            }\n          }}\n        >\n          {t('Save')}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={reset}\n        >\n          {t('Cancel')}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/selected-team-switcher.d.ts

@@ -0,0 +1,31 @@
+import { Team } from "../lib/stack-app/teams/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/selected-team-switcher.d.ts
+type MockTeam = {
+  id: string;
+  displayName: string;
+  profileImageUrl?: string | null;
+};
+type SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {
+  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string;
+  selectedTeam?: Team;
+  noUpdateSelectedTeam?: boolean;
+  allowNull?: AllowNull;
+  nullLabel?: string;
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => void;
+  triggerClassName?: string;
+  mockUser?: {
+    selectedTeam?: MockTeam;
+  };
+  mockTeams?: MockTeam[];
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean;
+    };
+  };
+};
+declare function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SelectedTeamSwitcher };
+//# sourceMappingURL=selected-team-switcher.d.ts.map

package/dist/components/selected-team-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selected-team-switcher.d.ts","names":[],"sources":["../../src/components/selected-team-switcher.tsx"],"mappings":";;;;KAcK,QAAA;EACH,EAAA;EACA,WAAA;EACA,eAAA;AAAA;AAAA,KAGG,yBAAA;EACH,MAAA,IAAU,IAAA,EAAM,SAAA,gBAAyB,IAAA,UAAc,IAAA;EACvD,YAAA,GAAe,IAAA;EACf,oBAAA;EACA,SAAA,GAAY,SAAA;EACZ,SAAA;EACA,QAAA,IAAY,IAAA,EAAM,SAAA,gBAAyB,IAAA,UAAc,IAAA;EACzD,gBAAA;EAEA,QAAA;IACE,YAAA,GAAe,QAAA;EAAA;EAEjB,SAAA,GAAY,QAAA;EACZ,WAAA;IACE,MAAA;MACE,yBAAA;IAAA;EAAA;AAAA;AAAA,iBAKU,oBAAA,mCAAA,CAAwD,KAAA,EAAO,yBAAA,CAA0B,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,59 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___index_js = require("../index.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __team_switcher_js = require("./team-switcher.js");
+
+//#region src/components/selected-team-switcher.tsx
+function SelectedTeamSwitcher(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inner, { ...props })
+	});
+}
+function Fallback() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
+	const appFromHook = (0, ___index_js.useStackApp)();
+	const userFromHook = (0, ___index_js.useUser)();
+	const app = props.mockUser ? {
+		useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
+		useNavigate: () => () => {},
+		urls: { accountSettings: "/account-settings" }
+	} : appFromHook;
+	const user = props.mockUser ? {
+		selectedTeam: props.mockUser.selectedTeam,
+		useTeams: () => props.mockTeams || [],
+		setSelectedTeam: async () => {}
+	} : userFromHook;
+	const navigate = app.useNavigate();
+	(0, react.useEffect)(() => {
+		if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(user?.setSelectedTeam(props.selectedTeam));
+	}, [
+		props.noUpdateSelectedTeam,
+		props.selectedTeam,
+		props.mockUser
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_switcher_js.TeamSwitcher, {
+		team: props.selectedTeam,
+		allowNull: props.allowNull,
+		nullLabel: props.nullLabel,
+		triggerClassName: props.triggerClassName,
+		onChange: async (team) => {
+			if (props.onChange) props.onChange(team);
+			if (props.mockUser) return;
+			if (!props.noUpdateSelectedTeam) await user?.setSelectedTeam(team);
+			if (props.urlMap) navigate(props.urlMap(team));
+		}
+	});
+}
+
+//#endregion
+exports.SelectedTeamSwitcher = SelectedTeamSwitcher;
+//# sourceMappingURL=selected-team-switcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selected-team-switcher.js","names":["Suspense","Skeleton","TeamSwitcher"],"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Skeleton,\n} from \"@stackframe/stack-ui\";\nimport { Suspense, useEffect } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { TeamSwitcher } from \"./team-switcher\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {\n  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,\n  triggerClassName?: string,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const navigate = app.useNavigate();\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <TeamSwitcher\n      team={props.selectedTeam}\n      allowNull={props.allowNull}\n      nullLabel={props.nullLabel}\n      triggerClassName={props.triggerClassName}\n      onChange={async (team) => {\n        if (props.onChange) {\n          props.onChange(team as Team);\n        }\n        // Skip actual navigation/updates in mock mode\n        if (props.mockUser) return;\n        if (!props.noUpdateSelectedTeam) {\n          await user?.setSelectedTeam(team as Team);\n        }\n        if (props.urlMap) {\n          navigate(props.urlMap(team as Team));\n        }\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAwCA,SAAgB,qBAAwD,OAA6C;AACnH,QAAO,2CAACA;EAAS,UAAU,2CAAC,aAAW;YACrC,2CAAC,SAAM,GAAI,QAAS;GACX;;AAGb,SAAS,WAAW;AAClB,QAAO,2CAACC,iCAAS,WAAU,oCAAoC;;AAGjE,SAAS,MAAiC,OAA6C;CACrF,MAAM,4CAA2B;CACjC,MAAM,yCAAwB;CAG9B,MAAM,MAAM,MAAM,WAAW;EAC3B,kBAAkB,MAAM,eAAe,EAAE,QAAQ,EAAE,2BAA2B,OAAO,EAAE;EACvF,yBAAyB;EACzB,MAAM,EAAE,iBAAiB,qBAAqB;EAC/C,GAAG;CAEJ,MAAM,OAAO,MAAM,WAAW;EAC5B,cAAc,MAAM,SAAS;EAC7B,gBAAgB,MAAM,aAAa,EAAE;EACrC,iBAAiB,YAAY;EAC9B,GAAG;CAEJ,MAAM,WAAW,IAAI,aAAa;AAElC,4BAAgB;AACd,MAAI,CAAC,MAAM,wBAAwB,MAAM,gBAAgB,CAAC,MAAM,SAC9D,8EAA2B,MAAM,gBAAgB,MAAM,aAAa,CAAC;IAEtE;EAAC,MAAM;EAAsB,MAAM;EAAc,MAAM;EAAS,CAAC;AAEpE,QACE,2CAACC;EACC,MAAM,MAAM;EACZ,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,kBAAkB,MAAM;EACxB,UAAU,OAAO,SAAS;AACxB,OAAI,MAAM,SACR,OAAM,SAAS,KAAa;AAG9B,OAAI,MAAM,SAAU;AACpB,OAAI,CAAC,MAAM,qBACT,OAAM,MAAM,gBAAgB,KAAa;AAE3C,OAAI,MAAM,OACR,UAAS,MAAM,OAAO,KAAa,CAAC;;GAGxC"}

package/dist/components/team-icon.d.ts

@@ -0,0 +1,10 @@
+import { Team } from "../lib/stack-app/teams/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/team-icon.d.ts
+declare function TeamIcon(props: {
+  team: Team | 'personal';
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TeamIcon };
+//# sourceMappingURL=team-icon.d.ts.map

package/dist/components/team-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-icon.d.ts","names":[],"sources":["../../src/components/team-icon.tsx"],"mappings":";;;;iBAQgB,QAAA,CAAS,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/team-icon.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+
+//#region src/components/team-icon.tsx
+function TeamIcon(props) {
+	if (props.team === "personal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.User2, { className: "w-4 h-4" })
+	});
+	if (props.team.profileImageUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Avatar, {
+		className: "min-w-6 min-h-6 max-w-6 max-h-6 rounded",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.AvatarImage, {
+			src: props.team.profileImageUrl,
+			alt: props.team.displayName
+		})
+	});
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			className: "text-zinc-800 dark:text-zinc-800",
+			children: props.team.displayName.slice(0, 1).toUpperCase()
+		})
+	});
+}
+
+//#endregion
+exports.TeamIcon = TeamIcon;
+//# sourceMappingURL=team-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"team-icon.js","names":["User2","Avatar","AvatarImage","Typography"],"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { User2 } from \"lucide-react\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team | 'personal' }) {\n  if (props.team === 'personal') {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <User2 className=\"w-4 h-4\" />\n      </div>\n    );\n  }\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-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 min-w-6 min-h-6 max-w-6 max-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}\n"],"mappings":";;;;;;;AAQA,SAAgB,SAAS,OAAoC;AAC3D,KAAI,MAAM,SAAS,WACjB,QACE,2CAAC;EAAI,WAAU;YACb,2CAACA,sBAAM,WAAU,YAAY;GACzB;AAGV,KAAI,MAAM,KAAK,gBACb,QACE,2CAACC;EAAO,WAAU;YAChB,2CAACC;GAAY,KAAK,MAAM,KAAK;GAAiB,KAAK,MAAM,KAAK;IAAe;GACtE;KAGX,QACE,2CAAC;EAAI,WAAU;YACb,2CAACC;GAAW,WAAU;aAAoC,MAAM,KAAK,YAAY,MAAM,GAAG,EAAE,CAAC,aAAa;IAAc;GACpH"}