@authowl/react 0.18.5 → 0.18.6

package/dist/index.cjs

@@ -3591,7 +3591,7 @@ function AuthOwlBranding({ href, showEnvironment = true } = {}) {
     showAppName ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ba-branding-name", children: appName }) : null
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    "header",
+    "div",
     {
       className: `ba-branding ba-branding-align-${alignment}`,
       "data-testid": "authowl-branding",
@@ -5862,7 +5862,9 @@ var React39 = __toESM(require("react"), 1);
 
 // src/components/ModalSurface.tsx
 var React38 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var import_jsx_runtime46 = require("react/jsx-runtime");
+var useClientLayoutEffect = typeof document === "undefined" ? React38.useEffect : React38.useLayoutEffect;
 function ModalSurface({
   overlayClassName,
   panelClassName,
@@ -5872,12 +5874,18 @@ function ModalSurface({
   onClose,
   children
 }) {
+  const ownerRef = React38.useRef(null);
   const panelRef = React38.useRef(null);
+  const [portalTarget, setPortalTarget] = React38.useState(null);
   const onCloseRef = React38.useRef(onClose);
   const returnFocusRefRef = React38.useRef(returnFocusRef);
   onCloseRef.current = onClose;
   returnFocusRefRef.current = returnFocusRef;
+  useClientLayoutEffect(() => {
+    setPortalTarget(ownerRef.current?.closest(".authowl-root") ?? document.body);
+  }, []);
   React38.useEffect(() => {
+    if (!portalTarget) return;
     const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -5909,8 +5917,8 @@ function ModalSurface({
       const returnTarget = returnFocusRefRef.current?.current ?? previousFocus;
       window.setTimeout(() => returnTarget?.focus(), 0);
     };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: overlayClassName, role: "presentation", onMouseDown: (event) => {
+  }, [portalTarget]);
+  const surface = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: overlayClassName, role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget) onClose();
   }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
@@ -5924,6 +5932,10 @@ function ModalSurface({
       children
     }
   ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { ref: ownerRef, hidden: true, "aria-hidden": "true" }),
+    portalTarget ? (0, import_react_dom.createPortal)(surface, portalTarget) : null
+  ] });
 }
 
 // src/components/user-profile/UserProfileModal.tsx
@@ -5944,7 +5956,7 @@ function UserProfileModal({
       testId: "user-profile-modal",
       onClose,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: "ba-profile-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ba-profile-modal-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
             branding,
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { id: titleId, children: t("userProfile.title") }),
@@ -6323,7 +6335,7 @@ function OrganizationModal({
       returnFocusRef,
       onClose,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("header", { className: "ba-organization-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "ba-organization-modal-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { id: titleId, className: "ba-title", children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "button",

package/dist/index.js

@@ -3513,7 +3513,7 @@ function AuthOwlBranding({ href, showEnvironment = true } = {}) {
     showAppName ? /* @__PURE__ */ jsx20("span", { className: "ba-branding-name", children: appName }) : null
   ] });
   return /* @__PURE__ */ jsxs16(
-    "header",
+    "div",
     {
       className: `ba-branding ba-branding-align-${alignment}`,
       "data-testid": "authowl-branding",
@@ -5784,7 +5784,9 @@ import * as React39 from "react";
 
 // src/components/ModalSurface.tsx
 import * as React38 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+var useClientLayoutEffect = typeof document === "undefined" ? React38.useEffect : React38.useLayoutEffect;
 function ModalSurface({
   overlayClassName,
   panelClassName,
@@ -5794,12 +5796,18 @@ function ModalSurface({
   onClose,
   children
 }) {
+  const ownerRef = React38.useRef(null);
   const panelRef = React38.useRef(null);
+  const [portalTarget, setPortalTarget] = React38.useState(null);
   const onCloseRef = React38.useRef(onClose);
   const returnFocusRefRef = React38.useRef(returnFocusRef);
   onCloseRef.current = onClose;
   returnFocusRefRef.current = returnFocusRef;
+  useClientLayoutEffect(() => {
+    setPortalTarget(ownerRef.current?.closest(".authowl-root") ?? document.body);
+  }, []);
   React38.useEffect(() => {
+    if (!portalTarget) return;
     const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -5831,8 +5839,8 @@ function ModalSurface({
       const returnTarget = returnFocusRefRef.current?.current ?? previousFocus;
       window.setTimeout(() => returnTarget?.focus(), 0);
     };
-  }, []);
-  return /* @__PURE__ */ jsx46("div", { className: overlayClassName, role: "presentation", onMouseDown: (event) => {
+  }, [portalTarget]);
+  const surface = /* @__PURE__ */ jsx46("div", { className: overlayClassName, role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget) onClose();
   }, children: /* @__PURE__ */ jsx46(
     "div",
@@ -5846,10 +5854,14 @@ function ModalSurface({
       children
     }
   ) });
+  return /* @__PURE__ */ jsxs41(Fragment15, { children: [
+    /* @__PURE__ */ jsx46("span", { ref: ownerRef, hidden: true, "aria-hidden": "true" }),
+    portalTarget ? createPortal(surface, portalTarget) : null
+  ] });
 }
 
 // src/components/user-profile/UserProfileModal.tsx
-import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 function UserProfileModal({
   children,
   onClose,
@@ -5857,7 +5869,7 @@ function UserProfileModal({
 }) {
   const t = useT();
   const titleId = React39.useId();
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     ModalSurface,
     {
       overlayClassName: "ba-profile-overlay",
@@ -5866,8 +5878,8 @@ function UserProfileModal({
       testId: "user-profile-modal",
       onClose,
       children: [
-        /* @__PURE__ */ jsxs41("header", { className: "ba-profile-modal-header", children: [
-          /* @__PURE__ */ jsxs41("span", { children: [
+        /* @__PURE__ */ jsxs42("div", { className: "ba-profile-modal-header", children: [
+          /* @__PURE__ */ jsxs42("span", { children: [
             branding,
             /* @__PURE__ */ jsx47("h1", { id: titleId, children: t("userProfile.title") }),
             /* @__PURE__ */ jsx47("p", { children: t("userProfile.description") })
@@ -5900,7 +5912,7 @@ function UserProfileModal({
 }
 
 // src/components/UserProfile.tsx
-import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var SECTION_KEYS = {
   profile: "userProfile.nav.profile",
   email: "userProfile.nav.email",
@@ -5966,7 +5978,7 @@ function UserProfile(props = {}) {
       window.history.replaceState(null, "", userProfileSectionHash(next));
     }
   };
-  const content = !isLoaded ? /* @__PURE__ */ jsxs42("div", { className: "ba-profile-loading", "aria-busy": "true", children: [
+  const content = !isLoaded ? /* @__PURE__ */ jsxs43("div", { className: "ba-profile-loading", "aria-busy": "true", children: [
     /* @__PURE__ */ jsx48("div", { className: "ba-skeleton" }),
     /* @__PURE__ */ jsx48("div", { className: "ba-skeleton" }),
     /* @__PURE__ */ jsx48("div", { className: "ba-skeleton" })
@@ -5991,8 +6003,8 @@ function UserProfile(props = {}) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs42("article", { className: "ba-profile ba-profile-page", "data-testid": "user-profile", children: [
-    /* @__PURE__ */ jsxs42("header", { className: "ba-profile-heading", children: [
+  return /* @__PURE__ */ jsxs43("article", { className: "ba-profile ba-profile-page", "data-testid": "user-profile", children: [
+    /* @__PURE__ */ jsxs43("header", { className: "ba-profile-heading", children: [
       showBranding ? /* @__PURE__ */ jsx48(AuthOwlBranding, {}) : null,
       /* @__PURE__ */ jsx48("h1", { children: t("userProfile.title") }),
       /* @__PURE__ */ jsx48("p", { children: t("userProfile.description") })
@@ -6009,7 +6021,7 @@ function UserProfileBody({
   capabilities
 }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs42("div", { className: "ba-profile-layout", children: [
+  return /* @__PURE__ */ jsxs43("div", { className: "ba-profile-layout", children: [
     /* @__PURE__ */ jsx48("nav", { className: "ba-profile-nav", "aria-label": t("userProfile.nav.aria"), children: sections.map((item) => /* @__PURE__ */ jsx48(
       "button",
       {
@@ -6021,7 +6033,7 @@ function UserProfileBody({
       },
       item
     )) }),
-    /* @__PURE__ */ jsxs42("div", { className: "ba-profile-content", "data-section": active, children: [
+    /* @__PURE__ */ jsxs43("div", { className: "ba-profile-content", "data-section": active, children: [
       active === "profile" && /* @__PURE__ */ jsx48(
         ProfileSection,
         {
@@ -6043,7 +6055,7 @@ function UserProfileBody({
 }
 
 // src/components/UserButton.tsx
-import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 function UserButton() {
   const t = useT();
   const { user, isLoaded } = useUser();
@@ -6053,7 +6065,7 @@ function UserButton() {
   const triggerRef = React41.useRef(null);
   if (!isLoaded || !user) return null;
   const identity = user.email ?? user.phoneNumber ?? user.name ?? "?";
-  return /* @__PURE__ */ jsxs43("div", { className: "ba-user-button", "data-testid": "user-button", children: [
+  return /* @__PURE__ */ jsxs44("div", { className: "ba-user-button", "data-testid": "user-button", children: [
     /* @__PURE__ */ jsx49(
       "button",
       {
@@ -6064,7 +6076,7 @@ function UserButton() {
         children: user.image ? /* @__PURE__ */ jsx49("img", { className: "ba-avatar", src: user.image, alt: "" }) : /* @__PURE__ */ jsx49("span", { className: "ba-avatar ba-avatar-fallback", children: identity[0]?.toUpperCase() })
       }
     ),
-    open && /* @__PURE__ */ jsxs43("div", { className: "ba-menu", children: [
+    open && /* @__PURE__ */ jsxs44("div", { className: "ba-menu", children: [
       /* @__PURE__ */ jsx49("p", { className: "ba-menu-label", children: identity }),
       /* @__PURE__ */ jsx49(
         "button",
@@ -6116,7 +6128,7 @@ function canManageOrganization(member) {
 }
 
 // src/components/CreateOrganization.tsx
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 function CreateOrganization({ onCreated, title } = {}) {
   const t = useT();
   const { config, isLoading: configLoading } = usePublicConfig();
@@ -6156,13 +6168,13 @@ function CreateOrganization({ onCreated, title } = {}) {
       }
     );
   };
-  return /* @__PURE__ */ jsxs44("section", { className: "ba-organization-create", children: [
-    title !== null && /* @__PURE__ */ jsxs44("header", { className: "ba-organization-section-header", children: [
+  return /* @__PURE__ */ jsxs45("section", { className: "ba-organization-create", children: [
+    title !== null && /* @__PURE__ */ jsxs45("header", { className: "ba-organization-section-header", children: [
       /* @__PURE__ */ jsx50("h2", { className: "ba-title", children: title ?? t("organization.create.title") }),
       /* @__PURE__ */ jsx50("p", { className: "ba-muted", children: t("organization.create.description") })
     ] }),
-    /* @__PURE__ */ jsxs44("form", { method: "post", className: "ba-fields", onSubmit: submit, children: [
-      /* @__PURE__ */ jsxs44("label", { className: "ba-label", children: [
+    /* @__PURE__ */ jsxs45("form", { method: "post", className: "ba-fields", onSubmit: submit, children: [
+      /* @__PURE__ */ jsxs45("label", { className: "ba-label", children: [
         t("organization.create.name"),
         /* @__PURE__ */ jsx50(
           "input",
@@ -6179,7 +6191,7 @@ function CreateOrganization({ onCreated, title } = {}) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs44("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs45("label", { className: "ba-label", children: [
         t("organization.create.slug"),
         /* @__PURE__ */ jsx50(
           "input",
@@ -6196,7 +6208,7 @@ function CreateOrganization({ onCreated, title } = {}) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs44("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs45("label", { className: "ba-label", children: [
         t("organization.create.logo"),
         /* @__PURE__ */ jsx50(
           "input",
@@ -6227,7 +6239,7 @@ function CreateOrganization({ onCreated, title } = {}) {
 
 // src/components/organization/OrganizationModal.tsx
 import * as React43 from "react";
-import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function OrganizationModal({
   title,
   onClose,
@@ -6236,7 +6248,7 @@ function OrganizationModal({
 }) {
   const t = useT();
   const titleId = React43.useId();
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     ModalSurface,
     {
       overlayClassName: "ba-organization-overlay",
@@ -6245,7 +6257,7 @@ function OrganizationModal({
       returnFocusRef,
       onClose,
       children: [
-        /* @__PURE__ */ jsxs45("header", { className: "ba-organization-modal-header", children: [
+        /* @__PURE__ */ jsxs46("div", { className: "ba-organization-modal-header", children: [
           /* @__PURE__ */ jsx51("h2", { id: titleId, className: "ba-title", children: title }),
           /* @__PURE__ */ jsx51(
             "button",
@@ -6320,7 +6332,7 @@ import * as React49 from "react";
 
 // src/components/organization/DangerSection.tsx
 import * as React45 from "react";
-import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function DangerSection({
   organization,
   membership,
@@ -6361,20 +6373,20 @@ function DangerSection({
       }
     );
   };
-  return /* @__PURE__ */ jsxs46("section", { className: "ba-organization-section ba-organization-danger", children: [
-    /* @__PURE__ */ jsxs46("header", { className: "ba-organization-section-header", children: [
+  return /* @__PURE__ */ jsxs47("section", { className: "ba-organization-section ba-organization-danger", children: [
+    /* @__PURE__ */ jsxs47("header", { className: "ba-organization-section-header", children: [
       /* @__PURE__ */ jsx52("h3", { className: "ba-title", children: t("organization.profile.danger.title") }),
       /* @__PURE__ */ jsx52("p", { className: "ba-muted", children: t("organization.profile.danger.description") })
     ] }),
-    /* @__PURE__ */ jsxs46("div", { className: "ba-organization-danger-action", children: [
+    /* @__PURE__ */ jsxs47("div", { className: "ba-organization-danger-action", children: [
       /* @__PURE__ */ jsx52("strong", { children: t("organization.profile.danger.leaveTitle") }),
       /* @__PURE__ */ jsx52("p", { className: "ba-muted", children: isOwner ? t("organization.profile.danger.ownerLeaveHint") : t("organization.profile.danger.leaveHint") }),
       /* @__PURE__ */ jsx52("button", { className: "ba-button ba-button-secondary", type: "button", disabled: pending, onClick: leave, children: t("organization.profile.danger.leave") })
     ] }),
-    isOwner && /* @__PURE__ */ jsxs46("form", { method: "post", className: "ba-organization-danger-action ba-organization-delete", onSubmit: remove, children: [
+    isOwner && /* @__PURE__ */ jsxs47("form", { method: "post", className: "ba-organization-danger-action ba-organization-delete", onSubmit: remove, children: [
       /* @__PURE__ */ jsx52("strong", { children: t("organization.profile.danger.deleteTitle") }),
       /* @__PURE__ */ jsx52("p", { className: "ba-muted", children: t("organization.profile.danger.deleteHint") }),
-      /* @__PURE__ */ jsxs46("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs47("label", { className: "ba-label", children: [
         t("organization.profile.danger.deleteConfirm"),
         " ",
         /* @__PURE__ */ jsx52(Bidi, { children: organization.slug }),
@@ -6397,7 +6409,7 @@ function DangerSection({
 
 // src/components/organization/GeneralSection.tsx
 import * as React46 from "react";
-import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 function GeneralSection({
   organization,
   canManage,
@@ -6415,14 +6427,14 @@ function GeneralSection({
     setLogo(organization.logo ?? "");
   }, [organization.id, organization.logo, organization.name, organization.slug]);
   if (!canManage) {
-    return /* @__PURE__ */ jsxs47("section", { className: "ba-organization-section", children: [
+    return /* @__PURE__ */ jsxs48("section", { className: "ba-organization-section", children: [
       /* @__PURE__ */ jsx53("p", { className: "ba-muted", children: t("organization.profile.general.readOnly") }),
-      /* @__PURE__ */ jsxs47("dl", { className: "ba-organization-facts", children: [
-        /* @__PURE__ */ jsxs47("div", { children: [
+      /* @__PURE__ */ jsxs48("dl", { className: "ba-organization-facts", children: [
+        /* @__PURE__ */ jsxs48("div", { children: [
           /* @__PURE__ */ jsx53("dt", { children: t("organization.create.name") }),
           /* @__PURE__ */ jsx53("dd", { children: organization.name })
         ] }),
-        /* @__PURE__ */ jsxs47("div", { children: [
+        /* @__PURE__ */ jsxs48("div", { children: [
           /* @__PURE__ */ jsx53("dt", { children: t("organization.create.slug") }),
           /* @__PURE__ */ jsx53("dd", { children: /* @__PURE__ */ jsx53(Bidi, { children: organization.slug }) })
         ] })
@@ -6442,17 +6454,17 @@ function GeneralSection({
       }
     );
   };
-  return /* @__PURE__ */ jsxs47("section", { className: "ba-organization-section", children: [
-    /* @__PURE__ */ jsxs47("header", { className: "ba-organization-section-header", children: [
+  return /* @__PURE__ */ jsxs48("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs48("header", { className: "ba-organization-section-header", children: [
       /* @__PURE__ */ jsx53("h3", { className: "ba-title", children: t("organization.profile.general.title") }),
       /* @__PURE__ */ jsx53("p", { className: "ba-muted", children: t("organization.profile.general.description") })
     ] }),
-    /* @__PURE__ */ jsxs47("form", { method: "post", className: "ba-fields", onSubmit: submit, children: [
-      /* @__PURE__ */ jsxs47("label", { className: "ba-label", children: [
+    /* @__PURE__ */ jsxs48("form", { method: "post", className: "ba-fields", onSubmit: submit, children: [
+      /* @__PURE__ */ jsxs48("label", { className: "ba-label", children: [
         t("organization.create.name"),
         /* @__PURE__ */ jsx53("input", { className: "ba-input", value: name, onChange: (event) => setName(event.target.value), required: true })
       ] }),
-      /* @__PURE__ */ jsxs47("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs48("label", { className: "ba-label", children: [
         t("organization.create.slug"),
         /* @__PURE__ */ jsx53(
           "input",
@@ -6466,7 +6478,7 @@ function GeneralSection({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs47("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs48("label", { className: "ba-label", children: [
         t("organization.create.logo"),
         /* @__PURE__ */ jsx53("input", { className: "ba-input", type: "url", dir: "ltr", value: logo, onChange: (event) => setLogo(event.target.value), placeholder: "https://" })
       ] }),
@@ -6537,7 +6549,7 @@ function useOrganizationRoles(organizationId) {
 }
 
 // src/components/organization/InvitationsSection.tsx
-import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
 function InvitationsSection({
   organization,
   onChanged
@@ -6569,17 +6581,17 @@ function InvitationsSection({
       { failure: t("organization.profile.invitations.cancelError"), onSuccess: onChanged }
     );
   };
-  return /* @__PURE__ */ jsxs48("section", { className: "ba-organization-section", children: [
-    /* @__PURE__ */ jsxs48("header", { className: "ba-organization-section-header", children: [
+  return /* @__PURE__ */ jsxs49("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs49("header", { className: "ba-organization-section-header", children: [
       /* @__PURE__ */ jsx54("h3", { className: "ba-title", children: t("organization.profile.invitations.title") }),
       /* @__PURE__ */ jsx54("p", { className: "ba-muted", children: t("organization.profile.invitations.description") })
     ] }),
-    /* @__PURE__ */ jsxs48("form", { method: "post", className: "ba-organization-invite-form", onSubmit: invite, children: [
-      /* @__PURE__ */ jsxs48("label", { className: "ba-label", children: [
+    /* @__PURE__ */ jsxs49("form", { method: "post", className: "ba-organization-invite-form", onSubmit: invite, children: [
+      /* @__PURE__ */ jsxs49("label", { className: "ba-label", children: [
         t("organization.profile.invitations.email"),
         /* @__PURE__ */ jsx54("input", { className: "ba-input", type: "email", dir: "ltr", value: email, onChange: (event) => setEmail(event.target.value), required: true })
       ] }),
-      /* @__PURE__ */ jsxs48("label", { className: "ba-label", children: [
+      /* @__PURE__ */ jsxs49("label", { className: "ba-label", children: [
         t("organization.profile.members.role"),
         /* @__PURE__ */ jsx54("select", { className: "ba-input", value: role, onChange: (event) => setRole(event.target.value), children: roles.map((option) => /* @__PURE__ */ jsx54("option", { value: option, children: organizationRoleLabel(option, t) }, option)) })
       ] }),
@@ -6595,8 +6607,8 @@ function InvitationsSection({
       )
     ] }),
     /* @__PURE__ */ jsx54(FormError, { children: error }),
-    invitations.length === 0 ? /* @__PURE__ */ jsx54("p", { className: "ba-muted", children: t("organization.profile.invitations.empty") }) : /* @__PURE__ */ jsx54("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs48("li", { className: "ba-organization-invitation", children: [
-      /* @__PURE__ */ jsxs48("span", { children: [
+    invitations.length === 0 ? /* @__PURE__ */ jsx54("p", { className: "ba-muted", children: t("organization.profile.invitations.empty") }) : /* @__PURE__ */ jsx54("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs49("li", { className: "ba-organization-invitation", children: [
+      /* @__PURE__ */ jsxs49("span", { children: [
         /* @__PURE__ */ jsx54("strong", { children: /* @__PURE__ */ jsx54(Bidi, { children: invitation.email }) }),
         /* @__PURE__ */ jsx54("small", { children: organizationRoleLabel(invitation.role, t) })
       ] }),
@@ -6606,7 +6618,7 @@ function InvitationsSection({
 }
 
 // src/components/organization/MembersSection.tsx
-import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
 function MembersSection({
   organization,
   userId,
@@ -6633,8 +6645,8 @@ function MembersSection({
       { failure: t("organization.profile.members.removeError"), onSuccess: onChanged }
     );
   };
-  return /* @__PURE__ */ jsxs49("section", { className: "ba-organization-section", children: [
-    /* @__PURE__ */ jsxs49("header", { className: "ba-organization-section-header", children: [
+  return /* @__PURE__ */ jsxs50("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs50("header", { className: "ba-organization-section-header", children: [
       /* @__PURE__ */ jsx55("h3", { className: "ba-title", children: t("organization.profile.members.title") }),
       /* @__PURE__ */ jsx55("p", { className: "ba-muted", children: t("organization.profile.members.description") })
     ] }),
@@ -6642,16 +6654,16 @@ function MembersSection({
     /* @__PURE__ */ jsx55("ul", { className: "ba-organization-list", children: organization.members.map((member) => {
       const primaryRole = organizationRoles(member.role)[0] ?? member.role;
       const isCurrent = member.userId === userId;
-      return /* @__PURE__ */ jsxs49("li", { className: "ba-organization-member", children: [
+      return /* @__PURE__ */ jsxs50("li", { className: "ba-organization-member", children: [
         /* @__PURE__ */ jsx55("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: member.user.name.trim().charAt(0).toUpperCase() || "?" }),
-        /* @__PURE__ */ jsxs49("span", { className: "ba-organization-member-copy", children: [
-          /* @__PURE__ */ jsxs49("strong", { children: [
+        /* @__PURE__ */ jsxs50("span", { className: "ba-organization-member-copy", children: [
+          /* @__PURE__ */ jsxs50("strong", { children: [
             member.user.name,
             isCurrent ? ` ${t("organization.profile.members.you")}` : ""
           ] }),
           /* @__PURE__ */ jsx55("small", { children: /* @__PURE__ */ jsx55(Bidi, { children: member.user.email }) })
         ] }),
-        canManage && !isCurrent ? /* @__PURE__ */ jsxs49("span", { className: "ba-organization-member-actions", children: [
+        canManage && !isCurrent ? /* @__PURE__ */ jsxs50("span", { className: "ba-organization-member-actions", children: [
           /* @__PURE__ */ jsx55("label", { className: "ba-sr-only", htmlFor: `organization-role-${member.id}`, children: t("organization.profile.members.role") }),
           /* @__PURE__ */ jsx55(
             "select",
@@ -6672,7 +6684,7 @@ function MembersSection({
 }
 
 // src/components/OrganizationProfile.tsx
-import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs51 } from "react/jsx-runtime";
 var SECTION_KEYS2 = {
   general: "organization.profile.nav.general",
   members: "organization.profile.nav.members",
@@ -6731,7 +6743,7 @@ function OrganizationProfile({ organizationId, defaultSection = "general", onDel
   if (wasRemoved) return /* @__PURE__ */ jsx56("p", { className: "ba-muted", children: t("organization.profile.noActive") });
   if (!requestedId) return /* @__PURE__ */ jsx56("p", { className: "ba-muted", children: t("organization.profile.noActive") });
   if (error) {
-    return /* @__PURE__ */ jsxs50("div", { className: "ba-inline-error", children: [
+    return /* @__PURE__ */ jsxs51("div", { className: "ba-inline-error", children: [
       /* @__PURE__ */ jsx56(FormError, { children: error }),
       /* @__PURE__ */ jsx56("button", { className: "ba-link-button", type: "button", onClick: () => void load(), children: t("organization.retry") })
     ] });
@@ -6747,15 +6759,15 @@ function OrganizationProfile({ organizationId, defaultSection = "general", onDel
     setOrganization(null);
     callback?.(removedOrganization);
   };
-  return /* @__PURE__ */ jsxs50("article", { className: "ba-organization-profile", children: [
-    /* @__PURE__ */ jsxs50("header", { className: "ba-organization-profile-heading", children: [
+  return /* @__PURE__ */ jsxs51("article", { className: "ba-organization-profile", children: [
+    /* @__PURE__ */ jsxs51("header", { className: "ba-organization-profile-heading", children: [
       /* @__PURE__ */ jsx56("span", { className: "ba-organization-avatar ba-organization-avatar-large", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
-      /* @__PURE__ */ jsxs50("span", { children: [
+      /* @__PURE__ */ jsxs51("span", { children: [
         /* @__PURE__ */ jsx56("h2", { className: "ba-title", children: organization.name }),
         /* @__PURE__ */ jsx56("p", { className: "ba-muted", children: organization.slug })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs50("div", { className: "ba-organization-profile-layout", children: [
+    /* @__PURE__ */ jsxs51("div", { className: "ba-organization-profile-layout", children: [
       /* @__PURE__ */ jsx56("nav", { className: "ba-organization-profile-nav", "aria-label": t("organization.profile.nav.label"), children: visibleSections.map((item) => /* @__PURE__ */ jsx56(
         "button",
         {
@@ -6767,7 +6779,7 @@ function OrganizationProfile({ organizationId, defaultSection = "general", onDel
         },
         item
       )) }),
-      /* @__PURE__ */ jsxs50("div", { className: "ba-organization-profile-content", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "ba-organization-profile-content", children: [
         activeSection === "general" && /* @__PURE__ */ jsx56(GeneralSection, { organization, canManage, onChanged: load }),
         activeSection === "members" && /* @__PURE__ */ jsx56(MembersSection, { organization, userId: user.id, canManage, onChanged: load }),
         activeSection === "invitations" && /* @__PURE__ */ jsx56(InvitationsSection, { organization, onChanged: load }),
@@ -6786,7 +6798,7 @@ function OrganizationProfile({ organizationId, defaultSection = "general", onDel
 }
 
 // src/components/OrganizationSwitcher.tsx
-import { Fragment as Fragment15, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
 function OrganizationSwitcher({ showPersonalWorkspace = true, onOrganizationChange } = {}) {
   const t = useT();
   const { config, isLoading: configLoading } = usePublicConfig();
@@ -6864,9 +6876,9 @@ function OrganizationSwitcher({ showPersonalWorkspace = true, onOrganizationChan
     else if (event.key === "ArrowDown") items[(current + 1 + items.length) % items.length]?.focus();
     else items[(current - 1 + items.length) % items.length]?.focus();
   };
-  return /* @__PURE__ */ jsxs51(Fragment15, { children: [
-    /* @__PURE__ */ jsxs51("div", { ref: rootRef, className: "ba-organization-switcher", children: [
-      /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(Fragment16, { children: [
+    /* @__PURE__ */ jsxs52("div", { ref: rootRef, className: "ba-organization-switcher", children: [
+      /* @__PURE__ */ jsxs52(
         "button",
         {
           ref: triggerRef,
@@ -6889,25 +6901,25 @@ function OrganizationSwitcher({ showPersonalWorkspace = true, onOrganizationChan
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs51("div", { ref: menuRef, id: menuId, className: "ba-organization-menu", role: "menu", "aria-label": t("organization.switcher.label"), onKeyDown: onMenuKeyDown, children: [
-        isLoading ? /* @__PURE__ */ jsx57("div", { className: "ba-skeleton" }) : /* @__PURE__ */ jsxs51(Fragment15, { children: [
-          showPersonalWorkspace && /* @__PURE__ */ jsxs51("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === null ? "true" : void 0, disabled: pending, onClick: () => select(null), children: [
+      open && /* @__PURE__ */ jsxs52("div", { ref: menuRef, id: menuId, className: "ba-organization-menu", role: "menu", "aria-label": t("organization.switcher.label"), onKeyDown: onMenuKeyDown, children: [
+        isLoading ? /* @__PURE__ */ jsx57("div", { className: "ba-skeleton" }) : /* @__PURE__ */ jsxs52(Fragment16, { children: [
+          showPersonalWorkspace && /* @__PURE__ */ jsxs52("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === null ? "true" : void 0, disabled: pending, onClick: () => select(null), children: [
             /* @__PURE__ */ jsx57("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: "P" }),
             /* @__PURE__ */ jsx57("span", { children: t("organization.personal") })
           ] }),
-          organizations?.map((organization) => /* @__PURE__ */ jsxs51("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === organization.id ? "true" : void 0, disabled: pending, onClick: () => select(organization), children: [
+          organizations?.map((organization) => /* @__PURE__ */ jsxs52("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === organization.id ? "true" : void 0, disabled: pending, onClick: () => select(organization), children: [
             /* @__PURE__ */ jsx57("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
-            /* @__PURE__ */ jsxs51("span", { children: [
+            /* @__PURE__ */ jsxs52("span", { children: [
               organization.name,
               /* @__PURE__ */ jsx57("small", { children: organization.slug })
             ] })
           ] }, organization.id))
         ] }),
-        (loadError || error) && /* @__PURE__ */ jsxs51("div", { className: "ba-inline-error", children: [
+        (loadError || error) && /* @__PURE__ */ jsxs52("div", { className: "ba-inline-error", children: [
           /* @__PURE__ */ jsx57(FormError, { children: loadError ?? error }),
           loadError && /* @__PURE__ */ jsx57("button", { className: "ba-link-button", type: "button", onClick: () => void refresh(), children: t("organization.retry") })
         ] }),
-        /* @__PURE__ */ jsxs51("div", { className: "ba-organization-menu-actions", children: [
+        /* @__PURE__ */ jsxs52("div", { className: "ba-organization-menu-actions", children: [
           active && /* @__PURE__ */ jsx57("button", { className: "ba-menu-item", type: "button", role: "menuitem", onClick: () => {
             setOpen(false);
             setDialog("profile");
@@ -6939,7 +6951,7 @@ function OrganizationSwitcher({ showPersonalWorkspace = true, onOrganizationChan
 
 // src/components/OrganizationList.tsx
 import * as React51 from "react";
-import { Fragment as Fragment16, jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx58, jsxs as jsxs53 } from "react/jsx-runtime";
 function OrganizationList({ onOrganizationChange } = {}) {
   const t = useT();
   const toServerError = useServerError();
@@ -7031,10 +7043,10 @@ function OrganizationList({ onOrganizationChange } = {}) {
     setDialog(null);
     setProfileId(null);
   };
-  return /* @__PURE__ */ jsxs52(Fragment16, { children: [
-    /* @__PURE__ */ jsxs52("section", { className: "ba-organization-directory", children: [
-      /* @__PURE__ */ jsxs52("header", { className: "ba-organization-directory-header", children: [
-        /* @__PURE__ */ jsxs52("span", { children: [
+  return /* @__PURE__ */ jsxs53(Fragment17, { children: [
+    /* @__PURE__ */ jsxs53("section", { className: "ba-organization-directory", children: [
+      /* @__PURE__ */ jsxs53("header", { className: "ba-organization-directory-header", children: [
+        /* @__PURE__ */ jsxs53("span", { children: [
           /* @__PURE__ */ jsx58("h2", { className: "ba-title", children: t("organization.list.title") }),
           /* @__PURE__ */ jsx58("p", { className: "ba-muted", children: t("organization.list.description") })
         ] }),
@@ -7043,40 +7055,40 @@ function OrganizationList({ onOrganizationChange } = {}) {
           setDialog("create");
         }, children: t("organization.switcher.create") })
       ] }),
-      (organizationError || error) && /* @__PURE__ */ jsxs52("div", { className: "ba-inline-error", children: [
+      (organizationError || error) && /* @__PURE__ */ jsxs53("div", { className: "ba-inline-error", children: [
         /* @__PURE__ */ jsx58(FormError, { children: organizationError ?? error }),
         organizationError && /* @__PURE__ */ jsx58("button", { className: "ba-link-button", type: "button", onClick: () => void refresh(), children: t("organization.retry") })
       ] }),
-      isLoading ? /* @__PURE__ */ jsxs52("div", { className: "ba-organization-card-grid", children: [
+      isLoading ? /* @__PURE__ */ jsxs53("div", { className: "ba-organization-card-grid", children: [
         /* @__PURE__ */ jsx58("div", { className: "ba-skeleton" }),
         /* @__PURE__ */ jsx58("div", { className: "ba-skeleton" })
-      ] }) : organizations?.length ? /* @__PURE__ */ jsx58("ul", { className: "ba-organization-card-grid", children: organizations.map((organization) => /* @__PURE__ */ jsxs52("li", { className: "ba-organization-card", children: [
+      ] }) : organizations?.length ? /* @__PURE__ */ jsx58("ul", { className: "ba-organization-card-grid", children: organizations.map((organization) => /* @__PURE__ */ jsxs53("li", { className: "ba-organization-card", children: [
         /* @__PURE__ */ jsx58("span", { className: "ba-organization-avatar ba-organization-avatar-large", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
-        /* @__PURE__ */ jsxs52("span", { className: "ba-organization-card-copy", children: [
+        /* @__PURE__ */ jsxs53("span", { className: "ba-organization-card-copy", children: [
           /* @__PURE__ */ jsx58("strong", { children: organization.name }),
           /* @__PURE__ */ jsx58("small", { children: /* @__PURE__ */ jsx58(Bidi, { children: organization.slug }) })
         ] }),
         activeId === organization.id && /* @__PURE__ */ jsx58("span", { className: "ba-organization-active", children: t("organization.list.active") }),
-        /* @__PURE__ */ jsxs52("span", { className: "ba-organization-card-actions", children: [
+        /* @__PURE__ */ jsxs53("span", { className: "ba-organization-card-actions", children: [
           activeId !== organization.id && /* @__PURE__ */ jsx58("button", { className: "ba-button ba-button-secondary", type: "button", disabled: pending, onClick: () => setActive(organization), children: t("organization.list.switch") }),
           /* @__PURE__ */ jsx58("button", { className: "ba-link-button", type: "button", onClick: (event) => openProfile(organization, event.currentTarget), children: t("organization.list.manage") })
         ] })
       ] }, organization.id)) }) : /* @__PURE__ */ jsx58("p", { className: "ba-muted", children: t("organization.list.empty") }),
-      /* @__PURE__ */ jsxs52("section", { className: "ba-organization-user-invitations", children: [
-        /* @__PURE__ */ jsxs52("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsxs53("section", { className: "ba-organization-user-invitations", children: [
+        /* @__PURE__ */ jsxs53("header", { className: "ba-organization-section-header", children: [
           /* @__PURE__ */ jsx58("h3", { className: "ba-title", children: t("organization.list.invitationsTitle") }),
           /* @__PURE__ */ jsx58("p", { className: "ba-muted", children: t("organization.list.invitationsDescription") })
         ] }),
-        invitationError && /* @__PURE__ */ jsxs52("div", { className: "ba-inline-error", children: [
+        invitationError && /* @__PURE__ */ jsxs53("div", { className: "ba-inline-error", children: [
           /* @__PURE__ */ jsx58(FormError, { children: invitationError }),
           /* @__PURE__ */ jsx58("button", { className: "ba-link-button", type: "button", onClick: () => void loadInvitations(), children: t("organization.retry") })
         ] }),
-        invitations === null && !invitationError ? /* @__PURE__ */ jsx58("div", { className: "ba-skeleton" }) : invitations?.length ? /* @__PURE__ */ jsx58("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs52("li", { className: "ba-organization-invitation", children: [
-          /* @__PURE__ */ jsxs52("span", { children: [
+        invitations === null && !invitationError ? /* @__PURE__ */ jsx58("div", { className: "ba-skeleton" }) : invitations?.length ? /* @__PURE__ */ jsx58("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs53("li", { className: "ba-organization-invitation", children: [
+          /* @__PURE__ */ jsxs53("span", { children: [
             /* @__PURE__ */ jsx58("strong", { children: invitation.organizationName }),
             /* @__PURE__ */ jsx58("small", { children: organizationRoleLabel(invitation.role, t) })
           ] }),
-          /* @__PURE__ */ jsxs52("span", { className: "ba-organization-card-actions", children: [
+          /* @__PURE__ */ jsxs53("span", { className: "ba-organization-card-actions", children: [
             /* @__PURE__ */ jsx58("button", { className: "ba-button", type: "button", disabled: pending, onClick: () => invitationAction(invitation, "accept"), children: t("organization.list.accept") }),
             /* @__PURE__ */ jsx58("button", { className: "ba-link-button", type: "button", disabled: pending, onClick: () => invitationAction(invitation, "reject"), children: t("organization.list.reject") })
           ] })

package/dist/styles.css

@@ -206,7 +206,7 @@
    tab - Profile, an avatar field and a button - is the one most people open
    first, and it left roughly 200px of empty white below the content, reading as
    a broken panel rather than a stable one. */
-.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
+.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
 .ba-profile-nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-inline-end: 1px solid var(--ba-divider); background: color-mix(in srgb, var(--ba-hover) 55%, var(--ba-surface)); }
 .ba-profile-nav-item { width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ba-muted); cursor: pointer; font: inherit; font-weight: 500; text-align: start; }
 .ba-profile-nav-item:hover { color: var(--ba-fg); background: var(--ba-hover); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authowl/react",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "description": "React provider, hooks, and drop-in components for AuthOwl, the multi-tenant auth SaaS.",
   "license": "MIT",
   "publishConfig": {