@stackframe/stack 2.8.2 → 2.8.5

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.js

@@ -0,0 +1,64 @@
+// src/components-page/account-settings/teams/team-api-keys-section.tsx
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+import { Button } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs";
+import { ApiKeyTable } from "../../../components/api-key-table";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TeamApiKeysSection(props) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(props.team.id);
+  if (!team) {
+    throw new StackAssertionError("Team not found");
+  }
+  const manageApiKeysPermission = user.usePermission(props.team, "$manage_api_keys");
+  if (!manageApiKeysPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(TeamApiKeysSectionInner, { team: props.team });
+}
+function TeamApiKeysSectionInner(props) {
+  const { t } = useTranslation();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState(null);
+  const apiKeys = props.team.useApiKeys();
+  const CreateDialog = CreateApiKeyDialog;
+  const ShowDialog = ShowApiKeyDialog;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("API Keys"),
+        description: t("API keys grant programmatic access to your team."),
+        children: /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") })
+      }
+    ),
+    /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ jsx(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await props.team.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
+export {
+  TeamApiKeysSection
+};
+//# sourceMappingURL=team-api-keys-section.js.map

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-api-keys-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { CreateApiKeyDialog, ShowApiKeyDialog } from \"../../../components/api-key-dialogs\";\nimport { ApiKeyTable } from \"../../../components/api-key-table\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { TeamApiKeyFirstView } from \"../../../lib/stack-app/api-keys\";\nimport { Team } from \"../../../lib/stack-app/teams\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function TeamApiKeysSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const team = user.useTeam(props.team.id);\n\n  if (!team) {\n    throw new StackAssertionError(\"Team not found\");\n  }\n\n  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');\n  if (!manageApiKeysPermission) {\n    return null;\n  }\n\n  return <TeamApiKeysSectionInner team={props.team} />;\n}\n\nfunction TeamApiKeysSectionInner(props: { team: Team }) {\n  const { t } = useTranslation();\n\n  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);\n  const [returnedApiKey, setReturnedApiKey] = useState<TeamApiKeyFirstView | null>(null);\n\n  const apiKeys = props.team.useApiKeys();\n\n  const CreateDialog = CreateApiKeyDialog<\"team\">;\n  const ShowDialog = ShowApiKeyDialog<\"team\">;\n\n  return (\n    <>\n      <Section\n        title={t(\"API Keys\")}\n        description={t(\"API keys grant programmatic access to your team.\")}\n      >\n        <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>\n          {t(\"Create API Key\")}\n        </Button>\n      </Section>\n      <ApiKeyTable apiKeys={apiKeys} />\n\n      <CreateDialog\n        open={isNewApiKeyDialogOpen}\n        onOpenChange={setIsNewApiKeyDialogOpen}\n        onKeyCreated={setReturnedApiKey}\n        createApiKey={async (data) => {\n          const apiKey = await props.team.createApiKey(data);\n          return apiKey;\n        }}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </>\n  );\n}\n"],"mappings":";AAIA,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAGxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAgBf,SAeL,UAfK,KAeL,YAfK;AAbF,SAAS,mBAAmB,OAAuB;AACxD,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,OAAO,KAAK,QAAQ,MAAM,KAAK,EAAE;AAEvC,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,oBAAoB,gBAAgB;AAAA,EAChD;AAEA,QAAM,0BAA0B,KAAK,cAAc,MAAM,MAAM,kBAAkB;AACjF,MAAI,CAAC,yBAAyB;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,2BAAwB,MAAM,MAAM,MAAM;AACpD;AAEA,SAAS,wBAAwB,OAAuB;AACtD,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAqC,IAAI;AAErF,QAAM,UAAU,MAAM,KAAK,WAAW;AAEtC,QAAM,eAAe;AACrB,QAAM,aAAa;AAEnB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,UAAU;AAAA,QACnB,aAAa,EAAE,kDAAkD;AAAA,QAEjE,8BAAC,UAAO,SAAS,MAAM,yBAAyB,IAAI,GACjD,YAAE,gBAAgB,GACrB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAY,SAAkB;AAAA,IAE/B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;AAC5B,gBAAM,SAAS,MAAM,MAAM,KAAK,aAAa,IAAI;AACjD,iBAAO;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,kBAAkB,IAAI;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-creation-page.js

@@ -0,0 +1,67 @@
+// src/components-page/account-settings/teams/team-creation-page.tsx
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { MessageCard } from "../../../components/message-cards/message-card";
+import { useStackApp, useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+import { Section } from "../section";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TeamCreationPage() {
+  const { t } = useTranslation();
+  const teamCreationSchema = yupObject({
+    displayName: yupString().defined().nonEmpty(t("Please enter a team name"))
+  });
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(teamCreationSchema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: "redirect" });
+  const navigate = app.useNavigate();
+  const [loading, setLoading] = useState(false);
+  if (!project.config.clientTeamCreationEnabled) {
+    return /* @__PURE__ */ jsx(MessageCard, { title: t("Team creation is not enabled") });
+  }
+  const onSubmit = async (data) => {
+    setLoading(true);
+    let team;
+    try {
+      team = await user.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+    navigate(`#team-${team.id}`);
+  };
+  return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      className: "flex gap-2 flex-col sm:flex-row",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "displayName",
+              type: "text",
+              ...register("displayName")
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Create") })
+      ]
+    }
+  ) }) });
+}
+export {
+  TeamCreationPage
+};
+//# sourceMappingURL=team-creation-page.js.map

package/dist/esm/components-page/account-settings/teams/team-creation-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-creation-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { MessageCard } from \"../../../components/message-cards/message-card\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function TeamCreationPage() {\n  const { t } = useTranslation();\n\n  const teamCreationSchema = yupObject({\n    displayName: yupString().defined().nonEmpty(t(\"Please enter a team name\")),\n  });\n\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const navigate = app.useNavigate();\n  const [loading, setLoading] = useState(false);\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title={t(\"Team creation is not enabled\")} />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    setLoading(true);\n\n    let team;\n    try {\n      team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n\n    navigate(`#team-${team.id}`);\n  };\n\n  return (\n    <PageLayout>\n      <Section title={t(\"Create a Team\")} description={t(\"Enter a display name for your new team\")}>\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='flex gap-2 flex-col sm:flex-row'\n        >\n          <div className='flex flex-col flex-1'>\n            <Input\n              id=\"displayName\"\n              type=\"text\"\n              {...register(\"displayName\")}\n            />\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n          </div>\n          <Button type=\"submit\" loading={loading}>{t(\"Create\")}</Button>\n        </form>\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,iBAAiB;AACrC,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,aAAa;AAC9B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAmBb,cAwBD,YAxBC;AAjBJ,SAAS,mBAAmB;AACjC,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,qBAAqB,UAAU;AAAA,IACnC,aAAa,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAA0B,CAAC;AAAA,EAC3E,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,IAAI,QAAQ;AAAA,IAChE,UAAU,YAAY,kBAAkB;AAAA,EAC1C,CAAC;AACD,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,oBAAC,eAAY,OAAO,EAAE,8BAA8B,GAAG;AAAA,EAChE;AAEA,QAAM,WAAW,OAAO,SAAmD;AACzE,eAAW,IAAI;AAEf,QAAI;AACJ,QAAI;AACF,aAAO,MAAM,KAAK,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AAAA,IAChE,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAEA,aAAS,SAAS,KAAK,EAAE,EAAE;AAAA,EAC7B;AAEA,SACE,oBAAC,cACC,8BAAC,WAAQ,OAAO,EAAE,eAAe,GAAG,aAAa,EAAE,wCAAwC,GACzF;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,wBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACJ,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,WAClE;AAAA,QACA,oBAAC,UAAO,MAAK,UAAS,SAAmB,YAAE,QAAQ,GAAE;AAAA;AAAA;AAAA,EACvD,GACF,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-display-name-section.js

@@ -0,0 +1,32 @@
+// src/components-page/account-settings/teams/team-display-name-section.tsx
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { EditableText } from "../editable-text";
+import { Section } from "../section";
+import { jsx } from "react/jsx-runtime";
+function TeamDisplayNameSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team display name"),
+      description: t("Change the display name of your team"),
+      children: /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          value: props.team.displayName,
+          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+        }
+      )
+    }
+  );
+}
+export {
+  TeamDisplayNameSection
+};
+//# sourceMappingURL=team-display-name-section.js.map

package/dist/esm/components-page/account-settings/teams/team-display-name-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-display-name-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { Section } from \"../section\";\n\nexport function TeamDisplayNameSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Team display name\")}\n      description={t(\"Change the display name of your team\")}\n    >\n      <EditableText\n        value={props.team.displayName}\n        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n      />\n    </Section>\n  );\n}\n"],"mappings":";AAKA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAgBlB;AAdC,SAAS,uBAAuB,OAAuB;AAC5D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,cAAc;AAE1E,MAAI,CAAC,sBAAsB;AACzB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,mBAAmB;AAAA,MAC5B,aAAa,EAAE,sCAAsC;AAAA,MAErD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,KAAK;AAAA,UAClB,QAAQ,OAAO,mBAAmB,MAAM,MAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.js

@@ -0,0 +1,106 @@
+// src/components-page/account-settings/teams/team-member-invitation-section.tsx
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { Trash } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TeamMemberInvitationSection(props) {
+  const user = useUser({ or: "redirect" });
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  if (!inviteMemberPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(MemberInvitationSectionInner, { team: props.team });
+}
+function MemberInvitationsSectionInvitationsList(props) {
+  const user = useUser({ or: "redirect" });
+  const { t } = useTranslation();
+  const invitationsToShow = props.team.useInvitations();
+  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, { className: "mt-6", children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
+      ] }, invitation.id)),
+      invitationsToShow.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("No outstanding invitations") }) }) })
+    ] })
+  ] }) });
+}
+function MemberInvitationSectionInner(props) {
+  const user = useUser({ or: "redirect" });
+  const { t } = useTranslation();
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const invitationSchema = yupObject({
+    email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
+  });
+  const { register, handleSubmit, formState: { errors }, watch } = useForm({
+    resolver: yupResolver(invitationSchema)
+  });
+  const [loading, setLoading] = useState(false);
+  const [invitedEmail, setInvitedEmail] = useState(null);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    setInvitedEmail(null);
+  }, [watch("email")]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Invite member"),
+        description: t("Invite a user to your team through email"),
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+            noValidate: true,
+            className: "w-full",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row w-full", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: t("Email"),
+                    ...register("email")
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Invite User") })
+              ] }),
+              /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+              invitedEmail && /* @__PURE__ */ jsxs(Typography, { type: "label", variant: "secondary", children: [
+                "Invited ",
+                invitedEmail
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    readMemberPermission && /* @__PURE__ */ jsx(MemberInvitationsSectionInvitationsList, { team: props.team })
+  ] });
+}
+export {
+  TeamMemberInvitationSection
+};
+//# sourceMappingURL=team-member-invitation-section.js.map

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-member-invitation-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { Trash } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { Team } from \"../../..\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function TeamMemberInvitationSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  return <MemberInvitationSectionInner team={props.team} />;\n}\n\nfunction MemberInvitationsSectionInvitationsList(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const invitationsToShow = props.team.useInvitations();\n  const removeMemberPermission = user.usePermission(props.team, '$remove_members');\n\n  return <>\n    <Table className='mt-6'>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[200px]\">{t(\"Outstanding invitations\")}</TableHead>\n          <TableHead className=\"w-[60px]\">{t(\"Expires\")}</TableHead>\n          <TableHead className=\"w-[36px] max-w-[36px]\"></TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invitationsToShow.map((invitation, i) => (\n          <TableRow key={invitation.id}>\n            <TableCell>\n              <Typography>{invitation.recipientEmail}</Typography>\n            </TableCell>\n            <TableCell>\n              <Typography variant='secondary'>{invitation.expiresAt.toLocaleString()}</Typography>\n            </TableCell>\n            <TableCell align='right' className='max-w-[36px]'>\n              {removeMemberPermission && (\n                <Button onClick={async () => await invitation.revoke()} size='icon' variant='ghost'>\n                  <Trash className=\"w-4 h-4\" />\n                </Button>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n        {invitationsToShow.length === 0 && <TableRow>\n          <TableCell colSpan={3}>\n            <Typography variant='secondary'>{t(\"No outstanding invitations\")}</Typography>\n          </TableCell>\n        </TableRow>}\n      </TableBody>\n    </Table>\n  </>;\n}\n\nfunction MemberInvitationSectionInner(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n\n  const invitationSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address')).defined().nonEmpty(t('Please enter an email address')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <>\n      <Section\n        title={t(\"Invite member\")}\n        description={t(\"Invite a user to your team through email\")}\n      >\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='w-full'\n        >\n          <div className=\"flex flex-col gap-4 sm:flex-row w-full\">\n            <Input\n              placeholder={t(\"Email\")}\n              {...register(\"email\")}\n            />\n            <Button type=\"submit\" loading={loading}>{t(\"Invite User\")}</Button>\n          </div>\n          <FormWarningText text={errors.email?.message?.toString()} />\n          {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n        </form>\n      </Section>\n      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/account-settings/teams/team-member-list-section.js

@@ -0,0 +1,36 @@
+// src/components-page/account-settings/teams/team-member-list-section.tsx
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { UserAvatar } from "../../../components/elements/user-avatar";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TeamMemberListSection(props) {
+  const user = useUser({ or: "redirect" });
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(MemberListSectionInner, { team: props.team });
+}
+function MemberListSectionInner(props) {
+  const { t } = useTranslation();
+  const users = props.team.useUsers();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Typography, { className: "font-medium mb-2", children: t("Members") }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: t("User") }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Name") })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserAvatar, { user: teamProfile }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: teamProfile.displayName }) })
+      ] }, id)) })
+    ] }) })
+  ] });
+}
+export {
+  TeamMemberListSection
+};
+//# sourceMappingURL=team-member-list-section.js.map

package/dist/esm/components-page/account-settings/teams/team-member-list-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-member-list-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { Team } from \"../../..\";\nimport { UserAvatar } from \"../../../components/elements/user-avatar\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function TeamMemberListSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  return <MemberListSectionInner team={props.team} />;\n}\n\nfunction MemberListSectionInner(props: { team: Team }) {\n  const { t } = useTranslation();\n  const users = props.team.useUsers();\n\n  return (\n    <div>\n      <Typography className='font-medium mb-2'>{t(\"Members\")}</Typography>\n      <div className='border rounded-md'>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[100px]\">{t(\"User\")}</TableHead>\n              <TableHead className=\"w-[200px]\">{t(\"Name\")}</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {users.map(({ id, teamProfile }, i) => (\n              <TableRow key={id}>\n                <TableCell>\n                  <UserAvatar user={teamProfile} />\n                </TableCell>\n                <TableCell>\n                  <Typography>{teamProfile.displayName}</Typography>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,OAAO,WAAW,WAAW,WAAW,aAAa,UAAU,kBAAkB;AAE1F,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAWtB,cAaG,YAbH;AATF,SAAS,sBAAsB,OAAuB;AAC3D,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,eAAe;AAC3E,QAAM,yBAAyB,KAAK,cAAc,MAAM,MAAM,iBAAiB;AAE/E,MAAI,CAAC,wBAAwB,CAAC,wBAAwB;AACpD,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,0BAAuB,MAAM,MAAM,MAAM;AACnD;AAEA,SAAS,uBAAuB,OAAuB;AACrD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,QAAQ,MAAM,KAAK,SAAS;AAElC,SACE,qBAAC,SACC;AAAA,wBAAC,cAAW,WAAU,oBAAoB,YAAE,SAAS,GAAE;AAAA,IACvD,oBAAC,SAAI,WAAU,qBACb,+BAAC,SACC;AAAA,0BAAC,eACC,+BAAC,YACC;AAAA,4BAAC,aAAU,WAAU,aAAa,YAAE,MAAM,GAAE;AAAA,QAC5C,oBAAC,aAAU,WAAU,aAAa,YAAE,MAAM,GAAE;AAAA,SAC9C,GACF;AAAA,MACA,oBAAC,aACE,gBAAM,IAAI,CAAC,EAAE,IAAI,YAAY,GAAG,MAC/B,qBAAC,YACC;AAAA,4BAAC,aACC,8BAAC,cAAW,MAAM,aAAa,GACjC;AAAA,QACA,oBAAC,aACC,8BAAC,cAAY,sBAAY,aAAY,GACvC;AAAA,WANa,EAOf,CACD,GACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-page.js

@@ -0,0 +1,25 @@
+// src/components-page/account-settings/teams/team-page.tsx
+import { PageLayout } from "../page-layout";
+import { LeaveTeamSection } from "./leave-team-section";
+import { TeamApiKeysSection } from "./team-api-keys-section";
+import { TeamDisplayNameSection } from "./team-display-name-section";
+import { TeamMemberInvitationSection } from "./team-member-invitation-section";
+import { TeamMemberListSection } from "./team-member-list-section";
+import { TeamProfileImageSection } from "./team-profile-image-section";
+import { TeamUserProfileSection } from "./team-profile-user-section";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TeamPage(props) {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(TeamUserProfileSection, { team: props.team }, `user-profile-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamProfileImageSection, { team: props.team }, `profile-image-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamDisplayNameSection, { team: props.team }, `display-name-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamMemberListSection, { team: props.team }, `member-list-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamMemberInvitationSection, { team: props.team }, `member-invitation-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamApiKeysSection, { team: props.team }, `api-keys-${props.team.id}`),
+    /* @__PURE__ */ jsx(LeaveTeamSection, { team: props.team }, `leave-team-${props.team.id}`)
+  ] });
+}
+export {
+  TeamPage
+};
+//# sourceMappingURL=team-page.js.map

package/dist/esm/components-page/account-settings/teams/team-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Team } from \"../../..\";\nimport { PageLayout } from \"../page-layout\";\nimport { LeaveTeamSection } from \"./leave-team-section\";\nimport { TeamApiKeysSection } from \"./team-api-keys-section\";\nimport { TeamDisplayNameSection } from \"./team-display-name-section\";\nimport { TeamMemberInvitationSection } from \"./team-member-invitation-section\";\nimport { TeamMemberListSection } from \"./team-member-list-section\";\nimport { TeamProfileImageSection } from \"./team-profile-image-section\";\nimport { TeamUserProfileSection } from \"./team-profile-user-section\";\n\n\nexport function TeamPage(props: { team: Team }) {\n  return (\n    <PageLayout>\n      <TeamUserProfileSection key={`user-profile-${props.team.id}`} team={props.team} />\n      <TeamProfileImageSection key={`profile-image-${props.team.id}`} team={props.team} />\n      <TeamDisplayNameSection key={`display-name-${props.team.id}`} team={props.team} />\n      <TeamMemberListSection key={`member-list-${props.team.id}`} team={props.team} />\n      <TeamMemberInvitationSection key={`member-invitation-${props.team.id}`} team={props.team} />\n      <TeamApiKeysSection key={`api-keys-${props.team.id}`} team={props.team} />\n      <LeaveTeamSection key={`leave-team-${props.team.id}`} team={props.team} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAKA,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,mCAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AAKnC,SACE,KADF;AAFG,SAAS,SAAS,OAAuB;AAC9C,SACE,qBAAC,cACC;AAAA,wBAAC,0BAA6D,MAAM,MAAM,QAA7C,gBAAgB,MAAM,KAAK,EAAE,EAAsB;AAAA,IAChF,oBAAC,2BAA+D,MAAM,MAAM,QAA9C,iBAAiB,MAAM,KAAK,EAAE,EAAsB;AAAA,IAClF,oBAAC,0BAA6D,MAAM,MAAM,QAA7C,gBAAgB,MAAM,KAAK,EAAE,EAAsB;AAAA,IAChF,oBAAC,yBAA2D,MAAM,MAAM,QAA5C,eAAe,MAAM,KAAK,EAAE,EAAsB;AAAA,IAC9E,oBAAC,+BAAuE,MAAM,MAAM,QAAlD,qBAAqB,MAAM,KAAK,EAAE,EAAsB;AAAA,IAC1F,oBAAC,sBAAqD,MAAM,MAAM,QAAzC,YAAY,MAAM,KAAK,EAAE,EAAsB;AAAA,IACxE,oBAAC,oBAAqD,MAAM,MAAM,QAA3C,cAAc,MAAM,KAAK,EAAE,EAAsB;AAAA,KAC1E;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-profile-image-section.js

@@ -0,0 +1,34 @@
+// src/components-page/account-settings/teams/team-profile-image-section.tsx
+import { ProfileImageEditor } from "../../../components/profile-image-editor";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+import { jsx } from "react/jsx-runtime";
+function TeamProfileImageSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team profile image"),
+      description: t("Upload an image for your team"),
+      children: /* @__PURE__ */ jsx(
+        ProfileImageEditor,
+        {
+          user: props.team,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await props.team.update({ profileImageUrl });
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  TeamProfileImageSection
+};
+//# sourceMappingURL=team-profile-image-section.js.map

package/dist/esm/components-page/account-settings/teams/team-profile-image-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-profile-image-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Team } from \"../../..\";\nimport { ProfileImageEditor } from \"../../../components/profile-image-editor\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function TeamProfileImageSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Team profile image\")}\n      description={t(\"Upload an image for your team\")}\n    >\n      <ProfileImageEditor\n        user={props.team}\n        onProfileImageUrlChange={async (profileImageUrl) => {\n          await props.team.update({ profileImageUrl });\n        }}\n      />\n    </Section>\n  );\n}\n"],"mappings":";AAKA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAgBlB;AAdC,SAAS,wBAAwB,OAAuB;AAC7D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,cAAc;AAE1E,MAAI,CAAC,sBAAsB;AACzB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,oBAAoB;AAAA,MAC7B,aAAa,EAAE,+BAA+B;AAAA,MAE9C;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,yBAAyB,OAAO,oBAAoB;AAClD,kBAAM,MAAM,KAAK,OAAO,EAAE,gBAAgB,CAAC;AAAA,UAC7C;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-profile-user-section.js

@@ -0,0 +1,31 @@
+// src/components-page/account-settings/teams/team-profile-user-section.tsx
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { EditableText } from "../editable-text";
+import { Section } from "../section";
+import { jsx } from "react/jsx-runtime";
+function TeamUserProfileSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const profile = user.useTeamProfile(props.team);
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team user name"),
+      description: t("Overwrite your user display name in this team"),
+      children: /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          value: profile.displayName || "",
+          onSave: async (newDisplayName) => {
+            await profile.update({ displayName: newDisplayName });
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  TeamUserProfileSection
+};
+//# sourceMappingURL=team-profile-user-section.js.map

package/dist/esm/components-page/account-settings/teams/team-profile-user-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-profile-user-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { Section } from \"../section\";\n\nexport function TeamUserProfileSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <Section\n      title={t(\"Team user name\")}\n      description={t(\"Overwrite your user display name in this team\")}\n    >\n      <EditableText\n        value={profile.displayName || ''}\n        onSave={async (newDisplayName) => {\n          await profile.update({ displayName: newDisplayName });\n        }}\n      />\n    </Section>\n  );\n}\n"],"mappings":";AAKA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAYlB;AAVC,SAAS,uBAAuB,OAAuB;AAC5D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,UAAU,KAAK,eAAe,MAAM,IAAI;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,+CAA+C;AAAA,MAE9D;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,eAAe;AAAA,UAC9B,QAAQ,OAAO,mBAAmB;AAChC,kBAAM,QAAQ,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA,UACtD;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}