@hexclave/next 1.0.0 → 1.0.1

package/dist/components/oauth-button.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let ___lib_translations_js = require("../lib/translations.js");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -34,7 +34,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				textColor: "#000",
 				name: "Google",
 				border: "1px solid #ddd",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Google, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Google, { iconSize })
 			};
 			break;
 		case "github":
@@ -43,7 +43,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				textColor: "#fff",
 				border: "1px solid #333",
 				name: "GitHub",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.GitHub, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.GitHub, { iconSize })
 			};
 			break;
 		case "facebook":
@@ -51,7 +51,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#1877F2",
 				textColor: "#fff",
 				name: "Facebook",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Facebook, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Facebook, { iconSize })
 			};
 			break;
 		case "microsoft":
@@ -59,7 +59,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#2f2f2f",
 				textColor: "#fff",
 				name: "Microsoft",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Microsoft, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Microsoft, { iconSize })
 			};
 			break;
 		case "spotify":
@@ -67,7 +67,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#1DB954",
 				textColor: "#fff",
 				name: "Spotify",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Spotify, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Spotify, { iconSize })
 			};
 			break;
 		case "discord":
@@ -75,7 +75,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#5865F2",
 				textColor: "#fff",
 				name: "Discord",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Discord, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Discord, { iconSize })
 			};
 			break;
 		case "gitlab":
@@ -84,7 +84,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				textColor: "#fff",
 				border: "1px solid #333",
 				name: "Gitlab",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Gitlab, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Gitlab, { iconSize })
 			};
 			break;
 		case "apple":
@@ -93,7 +93,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				textColor: "#fff",
 				border: "1px solid #333",
 				name: "Apple",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Apple, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Apple, { iconSize })
 			};
 			break;
 		case "bitbucket":
@@ -102,7 +102,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				textColor: "#000",
 				border: "1px solid #ddd",
 				name: "Bitbucket",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Bitbucket, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Bitbucket, { iconSize })
 			};
 			break;
 		case "linkedin":
@@ -110,7 +110,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#0073b1",
 				textColor: "#fff",
 				name: "LinkedIn",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.LinkedIn, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.LinkedIn, { iconSize })
 			};
 			break;
 		case "x":
@@ -118,7 +118,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#000",
 				textColor: "#fff",
 				name: "X",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.X, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.X, { iconSize })
 			};
 			break;
 		case "twitch":
@@ -126,7 +126,7 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 				backgroundColor: "#6441a5",
 				textColor: "#fff",
 				name: "Twitch",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.BrandIcons.Twitch, { iconSize })
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.BrandIcons.Twitch, { iconSize })
 			};
 			break;
 		default: style = {
@@ -143,11 +143,11 @@ function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
     .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, {
+  ` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_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, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.Button, {
 			onClick: async () => {
 				localStorage.setItem("_HEXCLAVE.lastUsed", provider);
 				await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));

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

@@ -1 +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    // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).\n    setLastUsed(localStorage.getItem('_HEXCLAVE.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            // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).\n            localStorage.setItem('_HEXCLAVE.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":";;;;;;;;;;;;;;AAcA,MAAM,WAAW;AAEjB,MAAM,eAAe,GAAkB,UAAkB;AACvD,KAAI,EAAE,SAAS,CACb,SAAQ,CAAC;AAEX,QAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,WAAW,GAAG,MAAM,CAAC,UAAU;;AAG1E,SAAgB,YAAY,EAC1B,UACA,MACA,SAAS,OACT,kBAMC;CACD,MAAM,EAAE,kDAAsB;CAC9B,MAAM,6CAAwB;CAC9B,MAAM,4BAAiB,CAAC,WAAW,KAAK,IAAI;CAC5C,MAAM,gDAAwB;CAE9B,MAAM,CAAC,UAAU,mCAAuC,KAAK;AAC7D,4BAAgB;AAEd,cAAY,aAAa,QAAQ,qBAAqB,CAAC;IACtD,EAAE,CAAC;CAEN,IAAI;AAOJ,SAAQ,UAAR;EACE,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,QAAQ;IACR,MAAM,2CAACA,gCAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,gCAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,YAAmB,WAAY;IAClD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,aAAoB,WAAY;IACnD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,WAAkB,WAAY;IACjD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,WAAkB,WAAY;IACjD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,gCAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,gCAAW,SAAgB,WAAY;IAC/C;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,gCAAW,aAAoB,WAAY;IACnD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,YAAmB,WAAY;IAClD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,KAAY,WAAY;IAC3C;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,gCAAW,UAAiB,WAAY;IAChD;AACD;EAEF,QACE,SAAQ;GACN,MAAM;GACN,MAAM;GACP;;AAeL,QACE,qFACE,2CAAC,qBAbc;0BACK,QAAQ;0BACR,MAAM,gBAAgB;eACjC,MAAM,UAAU;gBACf,MAAM,OAAO;;0BAEH,QAAQ;0BACR,+BAAkB,MAAM,gBAAgB,EAAE,GAAG,CAAC;;MAMvC,EAC3B,2CAACC;EACC,UAAU,CAAC;EACX,SAAS,WAAW,2EAA2E;EAC/F,WAAU;YAEV,4CAACC;GACC,SAAS,YAAY;AAEnB,iBAAa,QAAQ,sBAAsB,SAAS;AACpD,WAAO,iBAAiB,gBAAgB,GAAG,SAAS,gBAAgB,SAAS;;GAE/E,WAAW,sBAAsB,QAAQ;GACzC,UAAU;cAET,CAAC,UAAU,aAAa,YACvB,2CAAC;IAAK,WAAU;cAA+E;KAExF,EAET,4CAAC;IAAI,WAAU;eACZ,MAAM,MACP,2CAAC;KAAK,WAAU;eACb,SAAS,YACV,EAAE,2BAA2B,EAAE,UAAU,MAAM,MAAM,CAAC,GACtD,EAAE,2BAA2B,EAAE,UAAU,MAAM,MAAM,CAAC;MAEjD;KACH;IACC;GACK,IACf"}
+{"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 '@hexclave/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    // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).\n    setLastUsed(localStorage.getItem('_HEXCLAVE.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            // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).\n            localStorage.setItem('_HEXCLAVE.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":";;;;;;;;;;;;;;AAcA,MAAM,WAAW;AAEjB,MAAM,eAAe,GAAkB,UAAkB;AACvD,KAAI,EAAE,SAAS,CACb,SAAQ,CAAC;AAEX,QAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,WAAW,GAAG,MAAM,CAAC,UAAU;;AAG1E,SAAgB,YAAY,EAC1B,UACA,MACA,SAAS,OACT,kBAMC;CACD,MAAM,EAAE,kDAAsB;CAC9B,MAAM,6CAAwB;CAC9B,MAAM,4BAAiB,CAAC,WAAW,KAAK,IAAI;CAC5C,MAAM,gDAAwB;CAE9B,MAAM,CAAC,UAAU,mCAAuC,KAAK;AAC7D,4BAAgB;AAEd,cAAY,aAAa,QAAQ,qBAAqB,CAAC;IACtD,EAAE,CAAC;CAEN,IAAI;AAOJ,SAAQ,UAAR;EACE,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,QAAQ;IACR,MAAM,2CAACA,wBAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,wBAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,YAAmB,WAAY;IAClD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,aAAoB,WAAY;IACnD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,WAAkB,WAAY;IACjD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,WAAkB,WAAY;IACjD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,wBAAW,UAAiB,WAAY;IAChD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,wBAAW,SAAgB,WAAY;IAC/C;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,QAAQ;IACR,MAAM;IACN,MAAM,2CAACA,wBAAW,aAAoB,WAAY;IACnD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,YAAmB,WAAY;IAClD;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,KAAY,WAAY;IAC3C;AACD;EAEF,KAAK;AACH,WAAQ;IACN,iBAAiB;IACjB,WAAW;IACX,MAAM;IACN,MAAM,2CAACA,wBAAW,UAAiB,WAAY;IAChD;AACD;EAEF,QACE,SAAQ;GACN,MAAM;GACN,MAAM;GACP;;AAeL,QACE,qFACE,2CAAC,qBAbc;0BACK,QAAQ;0BACR,MAAM,gBAAgB;eACjC,MAAM,UAAU;gBACf,MAAM,OAAO;;0BAEH,QAAQ;0BACR,+BAAkB,MAAM,gBAAgB,EAAE,GAAG,CAAC;;MAMvC,EAC3B,2CAACC;EACC,UAAU,CAAC;EACX,SAAS,WAAW,2EAA2E;EAC/F,WAAU;YAEV,4CAACC;GACC,SAAS,YAAY;AAEnB,iBAAa,QAAQ,sBAAsB,SAAS;AACpD,WAAO,iBAAiB,gBAAgB,GAAG,SAAS,gBAAgB,SAAS;;GAE/E,WAAW,sBAAsB,QAAQ;GACzC,UAAU;cAET,CAAC,UAAU,aAAa,YACvB,2CAAC;IAAK,WAAU;cAA+E;KAExF,EAET,4CAAC;IAAI,WAAU;eACZ,MAAM,MACP,2CAAC;KAAK,WAAU;eACb,SAAS,YACV,EAAE,2BAA2B,EAAE,UAAU,MAAM,MAAM,CAAC,GACtD,EAAE,2BAA2B,EAAE,UAAU,MAAM,MAAM,CAAC;MAEjD;KACH;IACC;GACK,IACf"}

package/dist/components/passkey-button.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let ___index_js = require("../index.js");
 let ___lib_translations_js = require("../lib/translations.js");
@@ -13,7 +13,7 @@ let lucide_react = require("lucide-react");
 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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 		onClick: async () => {
 			await stackApp.signInWithPasskey();
 		},

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

@@ -1 +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"}
+{"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 '@hexclave/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.js

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _hexclave_ui = require("@hexclave/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("@hexclave/shared/dist/utils/base64");
+let _hexclave_shared_dist_utils_base64 = require("@hexclave/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");
@@ -79,8 +79,8 @@ function ProfileImageEditor(props) {
 		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);
+			(0, _hexclave_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+				const rawUrl = await (0, _hexclave_shared_dist_utils_base64.fileToBase64)(file);
 				if (await checkImageUrl(rawUrl)) {
 					setRawUrl(rawUrl);
 					setError(null);
@@ -106,7 +106,7 @@ function ProfileImageEditor(props) {
 					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, {
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			variant: "destructive",
 			type: "label",
 			children: error
@@ -129,7 +129,7 @@ function ProfileImageEditor(props) {
 					onZoomChange
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Slider, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Slider, {
 				min: 1,
 				max: 3,
 				step: .1,
@@ -138,7 +138,7 @@ function ProfileImageEditor(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-row gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					onClick: async () => {
 						if (rawUrl && croppedAreaPixels) {
 							const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
@@ -154,7 +154,7 @@ function ProfileImageEditor(props) {
 						}
 					},
 					children: t("Save")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 					variant: "secondary",
 					onClick: reset,
 					children: t("Cancel")

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

@@ -1 +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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"}
+{"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 '@hexclave/shared/dist/utils/base64';\nimport { runAsynchronouslyWithAlert } from '@hexclave/shared/dist/utils/promises';\nimport { Button, Slider, Typography } from '@hexclave/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.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let ___index_js = require("../index.js");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,7 +17,7 @@ function SelectedTeamSwitcher(props) {
 	});
 }
 function Fallback() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
 }
 function Inner(props) {
 	const appFromHook = (0, ___index_js.useStackApp)();
@@ -34,7 +34,7 @@ function Inner(props) {
 	} : 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));
+		if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) (0, _hexclave_shared_dist_utils_promises.runAsynchronouslyWithAlert)(user?.setSelectedTeam(props.selectedTeam));
 	}, [
 		props.noUpdateSelectedTeam,
 		props.selectedTeam,

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

@@ -1 +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"}
+{"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 \"@hexclave/shared/dist/utils/promises\";\nimport {\n  Skeleton,\n} from \"@hexclave/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,yBAAS,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,sEAA2B,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.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 
@@ -10,16 +10,16 @@ function TeamIcon(props) {
 		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, {
+	if (props.team.profileImageUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_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, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_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, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 			className: "text-zinc-800 dark:text-zinc-800",
 			children: props.team.displayName.slice(0, 1).toUpperCase()
 		})

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

@@ -1 +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"}
+{"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 \"@hexclave/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"}

package/dist/components/team-switcher.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
-let _stackframe_stack_shared_dist_utils_errors = require("@hexclave/shared/dist/utils/errors");
-let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
-let _stackframe_stack_ui = require("@hexclave/ui");
+let _hexclave_shared_dist_utils_errors = require("@hexclave/shared/dist/utils/errors");
+let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _hexclave_ui = require("@hexclave/ui");
 let react = require("react");
 let ___index_js = require("../index.js");
 let ___lib_translations_js = require("../lib/translations.js");
@@ -20,7 +20,7 @@ function TeamSwitcher(props) {
 	});
 }
 function Fallback() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
 }
 function Inner(props) {
 	const { t } = (0, ___lib_translations_js.useTranslation)();
@@ -41,27 +41,27 @@ function Inner(props) {
 	const rawTeams = props.teams ?? user?.useTeams();
 	const selectedTeam = props.team || rawTeams?.find((team) => team.id === props.teamId);
 	const teams = (0, react.useMemo)(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Select, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.Select, {
 		value: selectedTeam?.id || (props.allowNull ? "null-sentinel" : void 0),
 		onValueChange: (value) => {
-			(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+			(0, _hexclave_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
 				let team = null;
 				if (value !== "null-sentinel") {
 					team = teams?.find((team) => team.id === value) || null;
-					if (!team) throw new _stackframe_stack_shared_dist_utils_errors.HexclaveAssertionError("Team not found, this should not happen");
+					if (!team) throw new _hexclave_shared_dist_utils_errors.HexclaveAssertionError("Team not found, this should not happen");
 				} else team = null;
 				if (props.onChange) await props.onChange(team);
 			});
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectTrigger, {
-			className: (0, _stackframe_stack_ui.cn)("stack-scope max-w-64", props.triggerClassName),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectValue, { placeholder: "Select team" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.SelectContent, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectTrigger, {
+			className: (0, _hexclave_ui.cn)("stack-scope max-w-64", props.triggerClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectValue, { placeholder: "Select team" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.SelectContent, {
 			className: "stack-scope",
 			children: [
-				selectedTeam ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.SelectGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectLabel, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				selectedTeam ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.SelectGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectLabel, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("Current team") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("Current team") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Button, {
 						variant: "ghost",
 						size: "icon",
 						className: "h-6 w-6",
@@ -70,38 +70,38 @@ function Inner(props) {
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "h-4 w-4" })
 					})]
-				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectItem, {
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectItem, {
 					value: selectedTeam.id,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team: selectedTeam }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team: selectedTeam }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 							className: "max-w-40 truncate",
 							children: selectedTeam.displayName
 						})]
 					})
 				})] }) : void 0,
-				props.allowNull && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectItem, {
+				props.allowNull && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectItem, {
 					value: "null-sentinel",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team: "personal" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team: "personal" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 							className: "max-w-40 truncate",
 							children: props.nullLabel || t("No team")
 						})]
 					})
 				}) }),
-				teams?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.SelectGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectLabel, { children: t("Other teams") }), teams.filter((team) => team.id !== selectedTeam?.id).map((team) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectItem, {
+				teams?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.SelectGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectLabel, { children: t("Other teams") }), teams.filter((team) => team.id !== selectedTeam?.id).map((team) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectItem, {
 					value: team.id,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__team_icon_js.TeamIcon, { team }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.Typography, {
 							className: "max-w-64 truncate",
 							children: team.displayName
 						})]
 					})
 				}, team.id))] }) : null,
-				!teams?.length && !props.allowNull ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectLabel, { children: t("No teams yet") }) }) : null,
-				project.config.clientTeamCreationEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Button, {
+				!teams?.length && !props.allowNull ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectLabel, { children: t("No teams yet") }) }) : null,
+				project.config.clientTeamCreationEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.SelectSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_hexclave_ui.Button, {
 					onClick: () => {
 						if (!props.mockUser) navigate(`${app.urls.accountSettings}#team-creation`);
 					},

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

@@ -1 +1 @@
-{"version":3,"file":"team-switcher.js","names":["Suspense","Skeleton","Select","HexclaveAssertionError","SelectTrigger","SelectValue","SelectContent","SelectGroup","SelectLabel","Button","Settings","SelectItem","TeamIcon","Typography","SelectSeparator","PlusCircle"],"sources":["../../src/components/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 { HexclaveAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography,\n  cn,\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype TeamSwitcherProps<AllowNull extends boolean = false> = {\n  team?: Team,\n  teamId?: string,\n  teams?: Team[],\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  triggerClassName?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>,\n  // Mock data props\n  mockUser?: {\n    team?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<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: TeamSwitcherProps<AllowNull>) {\n  const { t } = useTranslation();\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.team,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const navigate = app.useNavigate();\n  const project = app.useProject();\n  const rawTeams = props.teams ?? user?.useTeams();\n  const selectedTeam = props.team || rawTeams?.find(team => team.id === props.teamId);\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n\n  return (\n    <Select\n      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          let team: MockTeam | null = null;\n          if (value !== 'null-sentinel') {\n            team = teams?.find(team => team.id === value) || null;\n            if (!team) {\n              throw new HexclaveAssertionError('Team not found, this should not happen');\n            }\n          } else {\n            team = null;\n          }\n\n          // Call onChange callback if provided\n          if (props.onChange) {\n            await props.onChange(team as Team);\n          }\n        });\n      }}\n    >\n      <SelectTrigger className={cn(\"stack-scope max-w-64\", props.triggerClassName)}>\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${selectedTeam.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {props.allowNull && <SelectGroup>\n          <SelectItem value=\"null-sentinel\">\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team='personal' />\n              <Typography className=\"max-w-40 truncate\">{props.nullLabel || t('No team')}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup>}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> : null}\n\n        {!teams?.length && !props.allowNull ?\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup> : null}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"team-switcher.js","names":["Suspense","Skeleton","Select","HexclaveAssertionError","SelectTrigger","SelectValue","SelectContent","SelectGroup","SelectLabel","Button","Settings","SelectItem","TeamIcon","Typography","SelectSeparator","PlusCircle"],"sources":["../../src/components/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 { HexclaveAssertionError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography,\n  cn,\n} from \"@hexclave/ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype TeamSwitcherProps<AllowNull extends boolean = false> = {\n  team?: Team,\n  teamId?: string,\n  teams?: Team[],\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  triggerClassName?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>,\n  // Mock data props\n  mockUser?: {\n    team?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<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: TeamSwitcherProps<AllowNull>) {\n  const { t } = useTranslation();\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.team,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const navigate = app.useNavigate();\n  const project = app.useProject();\n  const rawTeams = props.teams ?? user?.useTeams();\n  const selectedTeam = props.team || rawTeams?.find(team => team.id === props.teamId);\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n\n  return (\n    <Select\n      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          let team: MockTeam | null = null;\n          if (value !== 'null-sentinel') {\n            team = teams?.find(team => team.id === value) || null;\n            if (!team) {\n              throw new HexclaveAssertionError('Team not found, this should not happen');\n            }\n          } else {\n            team = null;\n          }\n\n          // Call onChange callback if provided\n          if (props.onChange) {\n            await props.onChange(team as Team);\n          }\n        });\n      }}\n    >\n      <SelectTrigger className={cn(\"stack-scope max-w-64\", props.triggerClassName)}>\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${selectedTeam.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {props.allowNull && <SelectGroup>\n          <SelectItem value=\"null-sentinel\">\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team='personal' />\n              <Typography className=\"max-w-40 truncate\">{props.nullLabel || t('No team')}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup>}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> : null}\n\n        {!teams?.length && !props.allowNull ?\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup> : null}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}