@meetreeve/module-team 0.0.0-stage → 0.1.0

package/dist/config/index.mjs

@@ -0,0 +1,607 @@
+"use client";
+
+// src/config/team-members-panel.tsx
+import { useCallback, useEffect as useEffect2, useId, useRef as useRef2, useState } from "react";
+
+// src/config/modal.tsx
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+function Modal({
+  open,
+  onClose,
+  titleId,
+  descriptionId,
+  dismissible = true,
+  children
+}) {
+  const panelRef = useRef(null);
+  const closeRef = useRef({ onClose, dismissible });
+  useEffect(() => {
+    closeRef.current = { onClose, dismissible };
+  });
+  useEffect(() => {
+    if (!open) return;
+    const previouslyFocused = document.activeElement;
+    const first = panelRef.current?.querySelector(
+      "input, select, textarea, button:not([disabled])"
+    );
+    first?.focus();
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && closeRef.current.dismissible) closeRef.current.onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      previouslyFocused?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget && dismissible) onClose();
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            className: "w-full max-w-md rounded-lg border border-border bg-background p-6 text-foreground shadow-lg",
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/config/team-members-panel.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_INVITE_ROLES = ["admin", "member", "viewer"];
+var ROLE_LABELS = {
+  owner: "Owner",
+  admin: "Admin",
+  billing_manager: "Billing",
+  member: "Member",
+  viewer: "Viewer"
+};
+var INVITE_ROLE_OPTIONS = {
+  admin: {
+    label: "Admin \u2014 Can manage the team",
+    description: "Can manage team members, billing, and all settings"
+  },
+  member: {
+    label: "Member \u2014 Full agent access",
+    description: "Can use all agents and connectors, but can't manage team"
+  },
+  viewer: {
+    label: "Viewer \u2014 Read-only dashboards",
+    description: "Read-only access to dashboards and reports"
+  }
+};
+function roleLabel(role) {
+  return ROLE_LABELS[role] ?? role;
+}
+function nameFromEmail(email) {
+  if (!email) return "Team Member";
+  return email.split("@")[0].replace(/[._-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function formatDate(iso) {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? "\u2014" : d.toLocaleDateString();
+}
+function formatAgo(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  const diff = Date.now() - d.getTime();
+  const mins = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  const days = Math.floor(diff / 864e5);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return d.toLocaleDateString();
+}
+function errorInfo(err, fallback) {
+  const e = typeof err === "object" && err !== null ? err : {};
+  const detail = typeof e.body?.detail === "string" ? e.body.detail : "";
+  const message = typeof e.message === "string" ? e.message : "";
+  const status = typeof e.status === "number" ? e.status : Number(/^(?:API error )?(\d{3})\b/.exec(message)?.[1]) || null;
+  return { status, message: detail || message || fallback };
+}
+function plural(n, one, many) {
+  return `${n} ${n === 1 ? one : many}`;
+}
+var BUTTON = "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium disabled:pointer-events-none disabled:opacity-50";
+var BUTTON_PRIMARY = `${BUTTON} bg-primary text-primary-foreground hover:bg-primary/90`;
+var BUTTON_OUTLINE = `${BUTTON} border border-border bg-background hover:bg-muted`;
+var BUTTON_DESTRUCTIVE = `${BUTTON} bg-destructive text-white hover:bg-destructive/90`;
+var BUTTON_GHOST = `${BUTTON} text-muted-foreground hover:bg-muted hover:text-foreground`;
+var CONTROL = "rounded-md border border-border bg-background text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50";
+var FIELD = `${CONTROL} w-full px-3 py-2`;
+var BADGE = "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium";
+function roleBadgeClass(role) {
+  return role === "owner" || role === "admin" ? `${BADGE} border-primary/30 bg-primary/15 text-foreground` : `${BADGE} border-border bg-muted text-muted-foreground`;
+}
+function TeamMembersPanel(props) {
+  return /* @__PURE__ */ jsx2(TeamMembersPanelBody, { ...props }, props.orgId);
+}
+function TeamMembersPanelBody({
+  client,
+  orgId,
+  inviteRoles = DEFAULT_INVITE_ROLES,
+  currentUserEmail,
+  renderMemberActions,
+  onNotice
+}) {
+  const ids = useId();
+  const roleOptions = DEFAULT_INVITE_ROLES.filter((r) => inviteRoles.includes(r));
+  const defaultInviteRole = roleOptions.includes("member") ? "member" : roleOptions[0] ?? "member";
+  const [state, setState] = useState({ status: "loading" });
+  const [notice, setNotice] = useState(null);
+  const [busy, setBusy] = useState({});
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState(defaultInviteRole);
+  const [inviteSubmitting, setInviteSubmitting] = useState(false);
+  const [memberToRemove, setMemberToRemove] = useState(null);
+  const mounted = useRef2(true);
+  const generation = useRef2(0);
+  const notify = useCallback(
+    (next) => {
+      if (!mounted.current) return;
+      setNotice(next);
+      onNotice?.(next);
+    },
+    [onNotice]
+  );
+  const load = useCallback(async () => {
+    const mine = ++generation.current;
+    try {
+      const [members, invitations] = await Promise.all([
+        client.listMembers(orgId),
+        client.listInvitations(orgId)
+      ]);
+      if (!mounted.current || mine !== generation.current) return;
+      setState({
+        status: "ready",
+        members,
+        invitations: invitations.filter((inv) => inv.status === "pending")
+      });
+    } catch (err) {
+      if (!mounted.current || mine !== generation.current) return;
+      setState({ status: "error", message: errorInfo(err, "Failed to load team data").message });
+    }
+  }, [client, orgId]);
+  useEffect2(() => {
+    mounted.current = true;
+    void load();
+    return () => {
+      mounted.current = false;
+    };
+  }, [load]);
+  const setBusyFor = (key, value) => {
+    if (mounted.current) setBusy((b) => ({ ...b, [key]: value }));
+  };
+  const updateReady = (fn) => {
+    if (!mounted.current) return;
+    setState((s) => s.status === "ready" ? fn(s) : s);
+  };
+  const handleInvite = async () => {
+    const email = inviteEmail.trim();
+    if (!email || inviteSubmitting) return;
+    setInviteSubmitting(true);
+    try {
+      await client.inviteMember(orgId, email, inviteRole);
+      if (!mounted.current) return;
+      notify({ kind: "success", message: `Invitation sent to ${email}` });
+      setInviteEmail("");
+      setInviteRole(defaultInviteRole);
+      setInviteOpen(false);
+      await load();
+    } catch (err) {
+      const { status, message } = errorInfo(err, "Failed to send invitation");
+      notify({
+        kind: "error",
+        message: status === 409 ? "A pending invitation already exists for this email" : message
+      });
+    } finally {
+      if (mounted.current) setInviteSubmitting(false);
+    }
+  };
+  const handleRevoke = async (inv) => {
+    const key = `inv:${inv.id}`;
+    setBusyFor(key, true);
+    try {
+      await client.revokeInvitation(orgId, inv.id);
+      notify({ kind: "success", message: "Invitation revoked" });
+      updateReady((s) => ({ ...s, invitations: s.invitations.filter((i) => i.id !== inv.id) }));
+    } catch {
+      notify({ kind: "error", message: "Failed to revoke invitation" });
+    } finally {
+      setBusyFor(key, false);
+    }
+  };
+  const handleResend = async (inv) => {
+    const key = `inv:${inv.id}`;
+    setBusyFor(key, true);
+    try {
+      await client.resendInvitation(orgId, inv.id);
+      notify({ kind: "success", message: "Invitation resent \u2014 7-day expiry reset" });
+      if (mounted.current) await load();
+    } catch {
+      notify({ kind: "error", message: "Failed to resend invitation" });
+    } finally {
+      setBusyFor(key, false);
+    }
+  };
+  const handleRoleChange = async (member, role) => {
+    if (role === member.role) return;
+    const key = `member:${member.id}`;
+    setBusyFor(key, true);
+    try {
+      await client.updateMemberRole(orgId, member.id, role);
+      notify({ kind: "success", message: `Role updated to ${roleLabel(role)}` });
+      updateReady((s) => ({
+        ...s,
+        members: s.members.map((m) => m.id === member.id ? { ...m, role } : m)
+      }));
+    } catch {
+      notify({ kind: "error", message: "Failed to update role" });
+    } finally {
+      setBusyFor(key, false);
+    }
+  };
+  const handleRemove = async () => {
+    const member = memberToRemove;
+    if (!member) return;
+    const key = `member:${member.id}`;
+    setBusyFor(key, true);
+    try {
+      await client.removeMember(orgId, member.id);
+      notify({ kind: "success", message: "Member removed from the team" });
+      updateReady((s) => ({ ...s, members: s.members.filter((m) => m.id !== member.id) }));
+      if (mounted.current) setMemberToRemove(null);
+    } catch (err) {
+      const { message } = errorInfo(err, "Failed to remove member");
+      notify({
+        kind: "error",
+        message: /last owner/i.test(message) ? "Can't remove the last owner" : message
+      });
+    } finally {
+      setBusyFor(key, false);
+    }
+  };
+  const ready = state.status === "ready" ? state : null;
+  const me = currentUserEmail?.toLowerCase() ?? null;
+  const inviteTitleId = `${ids}-invite-title`;
+  const inviteDescId = `${ids}-invite-desc`;
+  const removeTitleId = `${ids}-remove-title`;
+  const removeDescId = `${ids}-remove-desc`;
+  const removeBusy = memberToRemove ? Boolean(busy[`member:${memberToRemove.id}`]) : false;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": "team-members-panel", "data-org-id": orgId, children: [
+    notice ? /* @__PURE__ */ jsx2(
+      "p",
+      {
+        role: notice.kind === "error" ? "alert" : "status",
+        "data-testid": "team-notice",
+        className: `rounded-md border px-3 py-2 text-sm ${notice.kind === "error" ? "border-destructive/30 bg-destructive/10 text-destructive" : "border-border bg-muted text-foreground"}`,
+        children: notice.message
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${ids}-members-title`,
+        className: "rounded-lg border border-border bg-card text-card-foreground",
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border p-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("h3", { id: `${ids}-members-title`, className: "text-base font-semibold", children: [
+                "Team Members",
+                ready ? ` (${ready.members.length})` : ""
+              ] }),
+              ready ? /* @__PURE__ */ jsxs("p", { "data-testid": "team-seat-count", className: "text-xs text-muted-foreground", children: [
+                plural(ready.members.length, "seat", "seats"),
+                " in use",
+                ready.invitations.length > 0 ? ` \xB7 ${plural(ready.invitations.length, "invitation", "invitations")} pending` : ""
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: BUTTON_PRIMARY,
+                disabled: roleOptions.length === 0,
+                onClick: () => setInviteOpen(true),
+                children: "Invite Member"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            state.status === "loading" ? /* @__PURE__ */ jsx2("p", { "data-testid": "team-loading", className: "py-6 text-center text-sm text-muted-foreground", children: "Loading team\u2026" }) : null,
+            state.status === "error" ? /* @__PURE__ */ jsxs("div", { role: "alert", "data-testid": "team-load-error", className: "space-y-3 py-4 text-center", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
+                "Couldn't load this team: ",
+                state.message
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: BUTTON_OUTLINE,
+                  onClick: () => {
+                    setState({ status: "loading" });
+                    void load();
+                  },
+                  children: "Retry"
+                }
+              )
+            ] }) : null,
+            ready && ready.members.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No members yet \u2014 invite someone to get started." }) : null,
+            ready && ready.members.length > 0 ? /* @__PURE__ */ jsx2("ul", { className: "divide-y divide-border", children: ready.members.map((member) => {
+              const name = nameFromEmail(member.email);
+              const isMe = me !== null && member.email?.toLowerCase() === me;
+              const isOwner = member.role === "owner";
+              const rowBusy = Boolean(busy[`member:${member.id}`]);
+              const pickerRoles = roleOptions.includes(member.role) ? roleOptions : [member.role, ...roleOptions];
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  "data-testid": `member-row-${member.id}`,
+                  className: "flex flex-wrap items-center justify-between gap-3 py-3",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+                      /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-medium text-foreground",
+                          children: name.slice(0, 2).toUpperCase()
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [
+                          /* @__PURE__ */ jsx2("span", { className: "truncate", children: name }),
+                          isMe ? /* @__PURE__ */ jsx2("span", { className: "rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] text-foreground", children: "you" }) : null
+                        ] }),
+                        /* @__PURE__ */ jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [
+                          member.email ?? "No email on record",
+                          " \xB7 joined ",
+                          formatDate(member.created_at)
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+                      isOwner ? /* @__PURE__ */ jsx2("span", { className: roleBadgeClass(member.role), children: roleLabel(member.role) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2(
+                          "select",
+                          {
+                            "aria-label": `Role for ${name}`,
+                            className: `${CONTROL} px-2 py-1`,
+                            value: member.role,
+                            disabled: rowBusy,
+                            onChange: (e) => void handleRoleChange(member, e.target.value),
+                            children: pickerRoles.map((role) => /* @__PURE__ */ jsx2("option", { value: role, children: roleLabel(role) }, role))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            type: "button",
+                            className: BUTTON_GHOST,
+                            disabled: rowBusy,
+                            onClick: () => setMemberToRemove(member),
+                            children: "Remove"
+                          }
+                        )
+                      ] }),
+                      renderMemberActions?.(member)
+                    ] })
+                  ]
+                },
+                member.id
+              );
+            }) }) : null
+          ] })
+        ]
+      }
+    ),
+    ready && ready.invitations.length > 0 ? /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${ids}-invites-title`,
+        className: "rounded-lg border border-border bg-card text-card-foreground",
+        children: [
+          /* @__PURE__ */ jsx2("header", { className: "border-b border-border p-4", children: /* @__PURE__ */ jsxs("h3", { id: `${ids}-invites-title`, className: "text-base font-semibold", children: [
+            "Pending Invitations (",
+            ready.invitations.length,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx2("ul", { className: "divide-y divide-border p-4", children: ready.invitations.map((inv) => {
+            const invBusy = Boolean(busy[`inv:${inv.id}`]);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                "data-testid": `invitation-row-${inv.id}`,
+                className: "flex flex-wrap items-center justify-between gap-3 py-3",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium", children: inv.email }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                      "invited ",
+                      formatAgo(inv.created_at),
+                      " by ",
+                      inv.invited_by_email ?? "a team member",
+                      " \xB7 expires ",
+                      formatDate(inv.expires_at)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx2("span", { className: roleBadgeClass(inv.role), children: roleLabel(inv.role) }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: BUTTON_GHOST,
+                        disabled: invBusy,
+                        "aria-label": `Resend invitation to ${inv.email}`,
+                        onClick: () => void handleResend(inv),
+                        children: "Resend"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: BUTTON_GHOST,
+                        disabled: invBusy,
+                        "aria-label": `Revoke invitation to ${inv.email}`,
+                        onClick: () => void handleRevoke(inv),
+                        children: "Revoke"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              inv.id
+            );
+          }) })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      Modal,
+      {
+        open: inviteOpen,
+        onClose: () => setInviteOpen(false),
+        titleId: inviteTitleId,
+        descriptionId: inviteDescId,
+        dismissible: !inviteSubmitting,
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "space-y-4",
+            onSubmit: (e) => {
+              e.preventDefault();
+              void handleInvite();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx2("h2", { id: inviteTitleId, className: "text-lg font-semibold", children: "Invite a Team Member" }),
+                /* @__PURE__ */ jsx2("p", { id: inviteDescId, className: "text-sm text-muted-foreground", children: "Send an invitation to join your team. They'll receive an email with a magic link." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx2("label", { htmlFor: `${ids}-invite-email`, className: "text-sm font-medium", children: "Email Address" }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: `${ids}-invite-email`,
+                    type: "email",
+                    placeholder: "teammate@company.com",
+                    className: FIELD,
+                    value: inviteEmail,
+                    disabled: inviteSubmitting,
+                    onChange: (e) => setInviteEmail(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx2("label", { htmlFor: `${ids}-invite-role`, className: "text-sm font-medium", children: "Role" }),
+                /* @__PURE__ */ jsx2(
+                  "select",
+                  {
+                    id: `${ids}-invite-role`,
+                    className: FIELD,
+                    value: inviteRole,
+                    disabled: inviteSubmitting,
+                    onChange: (e) => setInviteRole(e.target.value),
+                    children: roleOptions.map((role) => /* @__PURE__ */ jsx2("option", { value: role, children: INVITE_ROLE_OPTIONS[role].label }, role))
+                  }
+                ),
+                /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: INVITE_ROLE_OPTIONS[inviteRole]?.description })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: BUTTON_OUTLINE,
+                    disabled: inviteSubmitting,
+                    onClick: () => setInviteOpen(false),
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "submit",
+                    className: BUTTON_PRIMARY,
+                    disabled: !inviteEmail.trim() || inviteSubmitting,
+                    children: inviteSubmitting ? "Sending\u2026" : "Send Invitation"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Modal,
+      {
+        open: memberToRemove !== null,
+        onClose: () => setMemberToRemove(null),
+        titleId: removeTitleId,
+        descriptionId: removeDescId,
+        dismissible: !removeBusy,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx2("h2", { id: removeTitleId, className: "text-lg font-semibold", children: "Remove Team Member" }),
+            /* @__PURE__ */ jsxs("p", { id: removeDescId, className: "text-sm text-muted-foreground", children: [
+              "Are you sure you want to remove",
+              " ",
+              /* @__PURE__ */ jsx2("span", { className: "font-medium text-foreground", children: memberToRemove ? nameFromEmail(memberToRemove.email) : "" }),
+              " ",
+              "from the team? They will lose access to all team resources."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: BUTTON_OUTLINE,
+                disabled: removeBusy,
+                onClick: () => setMemberToRemove(null),
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: BUTTON_DESTRUCTIVE,
+                disabled: removeBusy,
+                onClick: () => void handleRemove(),
+                children: "Remove Member"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  TeamMembersPanel
+};