@clerk/chrome-extension 2.8.2-snapshot.v20251117213621 → 2.8.2-snapshot.v20251117224912

package/dist/cjs/react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React8 = require('react');
 require('use-sync-external-store/shim/index.js');
 var reactDom = require('react-dom');
 var noRhc = require('@clerk/clerk-js/no-rhc');
@@ -9,7 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var browser__default = /*#__PURE__*/_interopDefault(browser);
 
 var __defProp = Object.defineProperty;
@@ -374,9 +374,9 @@ var defaultConfigOptions = {
   initFocus,
   initReconnect
 };
-!React7__default.default.useId;
+!React8__default.default.useId;
 var IS_SERVER = !isWindowDefined || isLegacyDeno;
-var useIsomorphicLayoutEffect = IS_SERVER ? React7.useEffect : React7.useLayoutEffect;
+var useIsomorphicLayoutEffect = IS_SERVER ? React8.useEffect : React8.useLayoutEffect;
 var navigatorConnection = typeof navigator !== "undefined" && navigator.connection;
 var slowConnection = !IS_SERVER && navigatorConnection && ([
   "slow-2g",
@@ -678,23 +678,23 @@ var mergeConfigs = (a, b) => {
   }
   return v;
 };
-var SWRConfigContext = React7.createContext({});
+var SWRConfigContext = React8.createContext({});
 var SWRConfig = (props) => {
   const { value } = props;
-  const parentConfig = React7.useContext(SWRConfigContext);
+  const parentConfig = React8.useContext(SWRConfigContext);
   const isFunctionalConfig = isFunction(value);
-  const config = React7.useMemo(() => isFunctionalConfig ? value(parentConfig) : value, [
+  const config = React8.useMemo(() => isFunctionalConfig ? value(parentConfig) : value, [
     isFunctionalConfig,
     parentConfig,
     value
   ]);
-  const extendedConfig = React7.useMemo(() => isFunctionalConfig ? config : mergeConfigs(parentConfig, config), [
+  const extendedConfig = React8.useMemo(() => isFunctionalConfig ? config : mergeConfigs(parentConfig, config), [
     isFunctionalConfig,
     parentConfig,
     config
   ]);
   const provider = config && config.provider;
-  const cacheContextRef = React7.useRef(UNDEFINED);
+  const cacheContextRef = React8.useRef(UNDEFINED);
   if (provider && !cacheContextRef.current) {
     cacheContextRef.current = initCache(provider(extendedConfig.cache || cache), config);
   }
@@ -709,7 +709,7 @@ var SWRConfig = (props) => {
       return cacheContext[3];
     }
   }, []);
-  return React7.createElement(SWRConfigContext.Provider, mergeObjects(props, {
+  return React8.createElement(SWRConfigContext.Provider, mergeObjects(props, {
     value: extendedConfig
   }));
 };
@@ -720,7 +720,7 @@ var enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__;
 var use = enableDevtools ? window.__SWR_DEVTOOLS_USE__ : [];
 var setupDevTools = () => {
   if (enableDevtools) {
-    window.__SWR_DEVTOOLS_REACT__ = React7__default.default;
+    window.__SWR_DEVTOOLS_REACT__ = React8__default.default;
   }
 };
 var middleware = (useSWRNext) => (key_, fetcher_, config) => {
@@ -739,7 +739,7 @@ var middleware = (useSWRNext) => (key_, fetcher_, config) => {
 };
 use.concat(middleware);
 setupDevTools();
-React7__default.default.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax
+React8__default.default.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax
 // and emitting an error.
 // We assume that this is only for the `use(thenable)` case, not `use(context)`.
 // https://github.com/facebook/react/blob/aed00dacfb79d17c53218404c52b1c7aa59c4a89/packages/react-server/src/ReactFizzThenable.js#L45
@@ -850,15 +850,15 @@ function assertContextExists(contextVal, msgOrCtx) {
 }
 var createContextAndHook = (displayName, options) => {
   const { assertCtxFn = assertContextExists } = {};
-  const Ctx = React7__default.default.createContext(void 0);
+  const Ctx = React8__default.default.createContext(void 0);
   Ctx.displayName = displayName;
   const useCtx = () => {
-    const ctx = React7__default.default.useContext(Ctx);
+    const ctx = React8__default.default.useContext(Ctx);
     assertCtxFn(ctx, `${displayName} not found`);
     return ctx.value;
   };
   const useCtxWithoutGuarantee = () => {
-    const ctx = React7__default.default.useContext(Ctx);
+    const ctx = React8__default.default.useContext(Ctx);
     return ctx ? ctx.value : {};
   };
   return [
@@ -868,23 +868,23 @@ var createContextAndHook = (displayName, options) => {
   ];
 };
 function SWRConfigCompat({ swrConfig, children }) {
-  return /* @__PURE__ */ React7__default.default.createElement(SWRConfig2, { value: swrConfig }, children);
+  return /* @__PURE__ */ React8__default.default.createElement(SWRConfig2, { value: swrConfig }, children);
 }
 var [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook("ClerkInstanceContext");
 var [UserContext] = createContextAndHook("UserContext");
 var [ClientContext] = createContextAndHook("ClientContext");
 var [SessionContext] = createContextAndHook("SessionContext");
-React7__default.default.createContext({});
+React8__default.default.createContext({});
 var [CheckoutContext] = createContextAndHook("CheckoutContext");
 var __experimental_CheckoutProvider = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React7__default.default.createElement(CheckoutContext.Provider, { value: { value: rest } }, children);
+  return /* @__PURE__ */ React8__default.default.createElement(CheckoutContext.Provider, { value: { value: rest } }, children);
 };
 var [OrganizationContextInternal] = createContextAndHook("OrganizationContext");
 var OrganizationProvider = ({ children, organization, swrConfig }) => {
-  return /* @__PURE__ */ React7__default.default.createElement(SWRConfigCompat, { swrConfig }, /* @__PURE__ */ React7__default.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children));
+  return /* @__PURE__ */ React8__default.default.createElement(SWRConfigCompat, { swrConfig }, /* @__PURE__ */ React8__default.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children));
 };
 function useAssertWrappedByClerkProvider(displayNameOrFn) {
-  if (!React7__default.default.useContext(ClerkInstanceContext)) {
+  if (!React8__default.default.useContext(ClerkInstanceContext)) {
     if (typeof displayNameOrFn === "function") {
       displayNameOrFn();
       return;
@@ -898,22 +898,22 @@ Possible fixes:
 Learn more: https://clerk.com/docs/components/clerk-provider`.trim());
   }
 }
-typeof window !== "undefined" ? React7__default.default.useLayoutEffect : React7__default.default.useEffect;
+typeof window !== "undefined" ? React8__default.default.useLayoutEffect : React8__default.default.useEffect;
 var isDeeplyEqual = dequal2;
 var usePrevious = (value) => {
-  const ref = React7.useRef(value);
-  React7.useEffect(() => {
+  const ref = React8.useRef(value);
+  React8.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 };
 var useAttachEvent = (element, event, cb) => {
   const cbDefined = !!cb;
-  const cbRef = React7.useRef(cb);
-  React7.useEffect(() => {
+  const cbRef = React8.useRef(cb);
+  React8.useEffect(() => {
     cbRef.current = cb;
   }, [cb]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!cbDefined || !element) return () => {
     };
     const decoratedCb = (...args) => {
@@ -930,7 +930,7 @@ var useAttachEvent = (element, event, cb) => {
     cbRef
   ]);
 };
-var ElementsContext = React7__default.default.createContext(null);
+var ElementsContext = React8__default.default.createContext(null);
 ElementsContext.displayName = "ElementsContext";
 var parseElementsContext = (ctx, useCase) => {
   if (!ctx) throw new Error(`Could not find Elements context; You need to wrap the part of your app that ${useCase} in an <Elements> provider.`);
@@ -978,7 +978,7 @@ var isEqual = (left, right) => {
   return allKeys.every(pred);
 };
 var useElementsOrCheckoutSdkContextWithUseCase = (useCaseString) => {
-  return parseElementsContext(React7__default.default.useContext(ElementsContext), useCaseString);
+  return parseElementsContext(React8__default.default.useContext(ElementsContext), useCaseString);
 };
 var capitalized = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 var createElementComponent = (type, isServer) => {
@@ -986,10 +986,10 @@ var createElementComponent = (type, isServer) => {
   const ClientElement = ({ id, className, fallback, options = {}, onBlur, onFocus, onReady, onChange, onEscape, onClick, onLoadError, onLoaderStart, onNetworksChange, onConfirm, onCancel, onShippingAddressChange, onShippingRateChange }) => {
     const ctx = useElementsOrCheckoutSdkContextWithUseCase(`mounts <${displayName}>`);
     const elements = "elements" in ctx ? ctx.elements : null;
-    const [element, setElement] = React7__default.default.useState(null);
-    const elementRef = React7__default.default.useRef(null);
-    const domNode = React7__default.default.useRef(null);
-    const [isReady, setReady] = React7.useState(false);
+    const [element, setElement] = React8__default.default.useState(null);
+    const elementRef = React8__default.default.useRef(null);
+    const domNode = React8__default.default.useRef(null);
+    const [isReady, setReady] = React8.useState(false);
     useAttachEvent(element, "blur", onBlur);
     useAttachEvent(element, "focus", onFocus);
     useAttachEvent(element, "escape", onEscape);
@@ -1008,7 +1008,7 @@ var createElementComponent = (type, isServer) => {
       onReady(element);
     };
     useAttachEvent(element, "ready", readyCallback);
-    React7__default.default.useLayoutEffect(() => {
+    React8__default.default.useLayoutEffect(() => {
       if (elementRef.current === null && domNode.current !== null && elements) {
         let newElement = null;
         if (elements) newElement = elements.create(type, options);
@@ -1018,12 +1018,12 @@ var createElementComponent = (type, isServer) => {
       }
     }, [elements, options]);
     const prevOptions = usePrevious(options);
-    React7__default.default.useEffect(() => {
+    React8__default.default.useEffect(() => {
       if (!elementRef.current) return;
       const updates = extractAllowedOptionsUpdates(options, prevOptions, ["paymentRequest"]);
       if (updates && "update" in elementRef.current) elementRef.current.update(updates);
     }, [options, prevOptions]);
-    React7__default.default.useLayoutEffect(() => {
+    React8__default.default.useLayoutEffect(() => {
       return () => {
         if (elementRef.current && typeof elementRef.current.destroy === "function") try {
           elementRef.current.destroy();
@@ -1032,7 +1032,7 @@ var createElementComponent = (type, isServer) => {
         }
       };
     }, []);
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, !isReady && fallback, /* @__PURE__ */ React7__default.default.createElement("div", {
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, !isReady && fallback, /* @__PURE__ */ React8__default.default.createElement("div", {
       id,
       style: {
         height: isReady ? "unset" : "0px",
@@ -1045,7 +1045,7 @@ var createElementComponent = (type, isServer) => {
   const ServerElement = (props) => {
     useElementsOrCheckoutSdkContextWithUseCase(`mounts <${displayName}>`);
     const { id, className } = props;
-    return /* @__PURE__ */ React7__default.default.createElement("div", {
+    return /* @__PURE__ */ React8__default.default.createElement("div", {
       id,
       className
     });
@@ -1099,7 +1099,7 @@ var withClerk = (Component, displayNameOrOptions) => {
     if (!clerk2.loaded && !(options == null ? void 0 : options.renderWhileLoading)) {
       return null;
     }
-    return /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(
       Component,
       {
         ...props,
@@ -1151,7 +1151,7 @@ withClerk(({ clerk: clerk2, ...props }) => {
     // Compat for clerk-js<5.54.0 (which was released with the `signedInSessions` property)
     client.activeSessions && client.activeSessions.length > 0
   );
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     if (session === null && hasSignedInSessions) {
       void clerk2.redirectToAfterSignOut();
     } else {
@@ -1161,33 +1161,33 @@ withClerk(({ clerk: clerk2, ...props }) => {
   return null;
 }, "RedirectToSignIn");
 withClerk(({ clerk: clerk2, ...props }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     void clerk2.redirectToSignUp(props);
   }, []);
   return null;
 }, "RedirectToSignUp");
 withClerk(({ clerk: clerk2, ...props }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     void clerk2.redirectToTasks(props);
   }, []);
   return null;
 }, "RedirectToTasks");
 withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToUserProfile", "Use the `redirectToUserProfile()` method instead.");
     void clerk2.redirectToUserProfile();
   }, []);
   return null;
 }, "RedirectToUserProfile");
 withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToOrganizationProfile", "Use the `redirectToOrganizationProfile()` method instead.");
     void clerk2.redirectToOrganizationProfile();
   }, []);
   return null;
 }, "RedirectToOrganizationProfile");
 withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToCreateOrganization", "Use the `redirectToCreateOrganization()` method instead.");
     void clerk2.redirectToCreateOrganization();
   }, []);
@@ -1195,7 +1195,7 @@ withClerk(({ clerk: clerk2 }) => {
 }, "RedirectToCreateOrganization");
 withClerk(
   ({ clerk: clerk2, ...handleRedirectCallbackParams }) => {
-    React7__default.default.useEffect(() => {
+    React8__default.default.useEffect(() => {
       void clerk2.handleRedirectCallback(handleRedirectCallbackParams);
     }, []);
     return null;
@@ -1221,9 +1221,13 @@ var without = (obj, ...props) => {
   for (const prop of props) delete copy[prop];
   return copy;
 };
+var PortalContext = React8.createContext(void 0);
+function usePortalConfig() {
+  return React8.useContext(PortalContext);
+}
 var assertSingleChild = (children) => (name) => {
   try {
-    return React7__default.default.Children.only(children);
+    return React8__default.default.Children.only(children);
   } catch {
     return errorThrower.throw(multipleChildrenInButtonComponent(name));
   }
@@ -1233,7 +1237,7 @@ var normalizeWithDefaultValue = (children, defaultText) => {
     children = defaultText;
   }
   if (typeof children === "string") {
-    children = /* @__PURE__ */ React7__default.default.createElement("button", null, children);
+    children = /* @__PURE__ */ React8__default.default.createElement("button", null, children);
   }
   return children;
 };
@@ -1247,7 +1251,7 @@ function isConstructor(f) {
 }
 var counts = /* @__PURE__ */ new Map();
 function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     const count = counts.get(name) || 0;
     if (count == maxCount) {
       return errorThrower.throw(error);
@@ -1262,13 +1266,13 @@ function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
   const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component";
   const Hoc = (props) => {
     useMaxAllowedInstancesGuard(name, error);
-    return /* @__PURE__ */ React7__default.default.createElement(WrappedComponent, { ...props });
+    return /* @__PURE__ */ React8__default.default.createElement(WrappedComponent, { ...props });
   };
   Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
   return Hoc;
 }
 var useCustomElementPortal = (elements) => {
-  const [nodeMap, setNodeMap] = React7.useState(/* @__PURE__ */ new Map());
+  const [nodeMap, setNodeMap] = React8.useState(/* @__PURE__ */ new Map());
   return elements.map((el) => ({
     id: el.id,
     mount: (node) => setNodeMap((prev) => new Map(prev).set(String(el.id), node)),
@@ -1284,7 +1288,7 @@ var useCustomElementPortal = (elements) => {
   }));
 };
 var isThatComponent = (v, component) => {
-  return !!v && React7__default.default.isValidElement(v) && (v == null ? void 0 : v.type) === component;
+  return !!v && React8__default.default.isValidElement(v) && (v == null ? void 0 : v.type) === component;
 };
 var useUserProfileCustomPages = (children, options) => {
   const reorderItemsLabels = ["account", "security"];
@@ -1322,7 +1326,7 @@ var useSanitizedChildren = (children) => {
     UserProfilePage,
     UserProfileLink
   ];
-  React7__default.default.Children.forEach(children, (child) => {
+  React8__default.default.Children.forEach(children, (child) => {
     if (!excludedComponents.some((component) => isThatComponent(child, component))) {
       sanitizedChildren.push(child);
     }
@@ -1333,7 +1337,7 @@ var useCustomPages = (params, options) => {
   const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
   const { allowForAnyChildren = false } = options || {};
   const validChildren = [];
-  React7__default.default.Children.forEach(children, (child) => {
+  React8__default.default.Children.forEach(children, (child) => {
     if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
       if (child && !allowForAnyChildren) {
         logErrorInDevMode(customPagesIgnoredComponent(componentName));
@@ -1452,7 +1456,7 @@ var useCustomMenuItems = ({
   const validChildren = [];
   const customMenuItems = [];
   const customMenuItemsPortals = [];
-  React7__default.default.Children.forEach(children, (child) => {
+  React8__default.default.Children.forEach(children, (child) => {
     if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
       if (child && !allowForAnyChildren) {
         logErrorInDevMode(userButtonIgnoredComponent);
@@ -1463,7 +1467,7 @@ var useCustomMenuItems = ({
       return;
     }
     const { props } = child;
-    React7__default.default.Children.forEach(props.children, (child2) => {
+    React8__default.default.Children.forEach(props.children, (child2) => {
       if (!isThatComponent(child2, MenuActionComponent) && !isThatComponent(child2, MenuLinkComponent)) {
         if (child2) {
           logErrorInDevMode(customMenuItemsIgnoredComponent);
@@ -1623,9 +1627,9 @@ var waitForElementChildren = createAwaitableMutationObserver({
   }
 });
 function useWaitForComponentMount(component, options) {
-  const watcherRef = React7.useRef();
-  const [status, setStatus] = React7.useState("rendering");
-  React7.useEffect(() => {
+  const watcherRef = React8.useRef();
+  const [status, setStatus] = React8.useState("rendering");
+  React8.useEffect(() => {
     if (!component) {
       throw new Error("Clerk: no component name provided, unable to detect mount.");
     }
@@ -1655,10 +1659,10 @@ var isOpenProps = (props) => {
 var stripMenuItemIconHandlers = (menuItems) => {
   return menuItems == null ? void 0 : menuItems.map(({ mountIcon, unmountIcon, ...rest }) => rest);
 };
-var ClerkHostRenderer = class extends React7__default.default.PureComponent {
+var ClerkHostRenderer = class extends React8__default.default.PureComponent {
   constructor() {
     super(...arguments);
-    this.rootRef = React7__default.default.createRef();
+    this.rootRef = React8__default.default.createRef();
   }
   componentDidUpdate(_prevProps) {
     var _a5, _b, _c, _d;
@@ -1704,12 +1708,12 @@ var ClerkHostRenderer = class extends React7__default.default.PureComponent {
       ...this.props.rootProps,
       ...this.props.component && { "data-clerk-component": this.props.component }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ React7__default.default.createElement("div", { ...rootAttributes }), this.props.children);
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ React8__default.default.createElement("div", { ...rootAttributes }), this.props.children);
   }
 };
 var CustomPortalsRenderer = (props) => {
   var _a5, _b;
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, (_a5 = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a5.map((portal, index) => React7.createElement(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => React7.createElement(portal, { key: index })));
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, (_a5 = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a5.map((portal, index) => React8.createElement(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => React8.createElement(portal, { key: index })));
 };
 withClerk(
   ({ clerk: clerk2, component, fallback, ...props }) => {
@@ -1718,7 +1722,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -1739,7 +1743,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -1755,11 +1759,11 @@ withClerk(
 );
 function UserProfilePage({ children }) {
   logErrorInDevMode(userProfilePageRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 function UserProfileLink({ children }) {
   logErrorInDevMode(userProfileLinkRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 var _UserProfile = withClerk(
   ({
@@ -1770,21 +1774,23 @@ var _UserProfile = withClerk(
   }) => {
     const mountingStatus = useWaitForComponentMount(component);
     const shouldShowFallback = mountingStatus === "rendering" || !clerk2.loaded;
+    const portalFromContext = usePortalConfig();
+    const portal = props.portal !== void 0 ? props.portal : portalFromContext;
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
     const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children);
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
         mount: clerk2.mountUserProfile,
         unmount: clerk2.unmountUserProfile,
         updateProps: clerk2.__unstable__updateProps,
-        props: { ...props, customPages },
+        props: { ...props, portal, customPages },
         rootProps: rendererRootProps
       },
-      /* @__PURE__ */ React7__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ React8__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     ));
   },
   { component: "UserProfile", renderWhileLoading: true }
@@ -1793,7 +1799,7 @@ Object.assign(_UserProfile, {
   Page: UserProfilePage,
   Link: UserProfileLink
 });
-var UserButtonContext = React7.createContext({
+var UserButtonContext = React8.createContext({
   mount: () => {
   },
   unmount: () => {
@@ -1810,6 +1816,8 @@ var _UserButton = withClerk(
   }) => {
     const mountingStatus = useWaitForComponentMount(component);
     const shouldShowFallback = mountingStatus === "rendering" || !clerk2.loaded;
+    const portalFromContext = usePortalConfig();
+    const portal = props.portal !== void 0 ? props.portal : portalFromContext;
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
@@ -1825,13 +1833,13 @@ var _UserButton = withClerk(
       mount: clerk2.mountUserButton,
       unmount: clerk2.unmountUserButton,
       updateProps: clerk2.__unstable__updateProps,
-      props: { ...props, userProfileProps, customMenuItems }
+      props: { ...props, portal, userProfileProps, customMenuItems }
     };
     const portalProps = {
       customPagesPortals,
       customMenuItemsPortals
     };
-    return /* @__PURE__ */ React7__default.default.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -1840,25 +1848,25 @@ var _UserButton = withClerk(
         rootProps: rendererRootProps
       },
       props.__experimental_asProvider ? sanitizedChildren : null,
-      /* @__PURE__ */ React7__default.default.createElement(CustomPortalsRenderer, { ...portalProps })
+      /* @__PURE__ */ React8__default.default.createElement(CustomPortalsRenderer, { ...portalProps })
     ));
   },
   { component: "UserButton", renderWhileLoading: true }
 );
 function MenuItems({ children }) {
   logErrorInDevMode(userButtonMenuItemsRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 function MenuAction({ children }) {
   logErrorInDevMode(userButtonMenuActionRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 function MenuLink({ children }) {
   logErrorInDevMode(userButtonMenuLinkRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 function UserButtonOutlet(outletProps) {
-  const providerProps = React7.useContext(UserButtonContext);
+  const providerProps = React8.useContext(UserButtonContext);
   const portalProps = {
     ...providerProps,
     props: {
@@ -1866,7 +1874,7 @@ function UserButtonOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ React7__default.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ React8__default.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 Object.assign(_UserButton, {
   UserProfilePage,
@@ -1878,11 +1886,11 @@ Object.assign(_UserButton, {
 });
 function OrganizationProfilePage({ children }) {
   logErrorInDevMode(organizationProfilePageRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 function OrganizationProfileLink({ children }) {
   logErrorInDevMode(organizationProfileLinkRenderedError);
-  return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, children);
+  return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, children);
 }
 var _OrganizationProfile = withClerk(
   ({
@@ -1897,7 +1905,7 @@ var _OrganizationProfile = withClerk(
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
     const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children);
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -1907,7 +1915,7 @@ var _OrganizationProfile = withClerk(
         props: { ...props, customPages },
         rootProps: rendererRootProps
       },
-      /* @__PURE__ */ React7__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ React8__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     ));
   },
   { component: "OrganizationProfile", renderWhileLoading: true }
@@ -1923,7 +1931,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -1937,7 +1945,7 @@ withClerk(
   },
   { component: "CreateOrganization", renderWhileLoading: true }
 );
-var OrganizationSwitcherContext = React7.createContext({
+var OrganizationSwitcherContext = React8.createContext({
   mount: () => {
   },
   unmount: () => {
@@ -1954,6 +1962,8 @@ var _OrganizationSwitcher = withClerk(
   }) => {
     const mountingStatus = useWaitForComponentMount(component);
     const shouldShowFallback = mountingStatus === "rendering" || !clerk2.loaded;
+    const portalFromContext = usePortalConfig();
+    const portal = props.portal !== void 0 ? props.portal : portalFromContext;
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
@@ -1966,25 +1976,25 @@ var _OrganizationSwitcher = withClerk(
       mount: clerk2.mountOrganizationSwitcher,
       unmount: clerk2.unmountOrganizationSwitcher,
       updateProps: clerk2.__unstable__updateProps,
-      props: { ...props, organizationProfileProps },
+      props: { ...props, portal, organizationProfileProps },
       rootProps: rendererRootProps,
       component
     };
     clerk2.__experimental_prefetchOrganizationSwitcher();
-    return /* @__PURE__ */ React7__default.default.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         ...passableProps,
         hideRootHtmlElement: !!props.__experimental_asProvider
       },
       props.__experimental_asProvider ? sanitizedChildren : null,
-      /* @__PURE__ */ React7__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ React8__default.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     )));
   },
   { component: "OrganizationSwitcher", renderWhileLoading: true }
 );
 function OrganizationSwitcherOutlet(outletProps) {
-  const providerProps = React7.useContext(OrganizationSwitcherContext);
+  const providerProps = React8.useContext(OrganizationSwitcherContext);
   const portalProps = {
     ...providerProps,
     props: {
@@ -1992,7 +2002,7 @@ function OrganizationSwitcherOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ React7__default.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ React8__default.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 Object.assign(_OrganizationSwitcher, {
   OrganizationProfilePage,
@@ -2006,7 +2016,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2027,7 +2037,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2048,7 +2058,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2072,7 +2082,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2093,7 +2103,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2114,7 +2124,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2135,7 +2145,7 @@ withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ React7__default.default.createElement(React7__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React7__default.default.createElement(
+    return /* @__PURE__ */ React8__default.default.createElement(React8__default.default.Fragment, null, shouldShowFallback && fallback, clerk2.loaded && /* @__PURE__ */ React8__default.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -2315,7 +2325,7 @@ withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React7__default.default.cloneElement(child, childProps);
+    return React8__default.default.cloneElement(child, childProps);
   },
   { component: "SignInButton", renderWhileLoading: true }
 );
@@ -2335,7 +2345,7 @@ withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React7__default.default.cloneElement(child, childProps);
+    return React8__default.default.cloneElement(child, childProps);
   },
   { component: "SignInWithMetamask", renderWhileLoading: true }
 );
@@ -2350,7 +2360,7 @@ withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React7__default.default.cloneElement(child, childProps);
+    return React8__default.default.cloneElement(child, childProps);
   },
   { component: "SignOutButton", renderWhileLoading: true }
 );
@@ -2397,7 +2407,7 @@ withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React7__default.default.cloneElement(child, childProps);
+    return React8__default.default.cloneElement(child, childProps);
   },
   { component: "SignUpButton", renderWhileLoading: true }
 );
@@ -2677,7 +2687,7 @@ if (typeof globalThis.__BUILD_DISABLE_RHC__ === "undefined") {
 }
 var SDK_METADATA = {
   name: "@clerk/clerk-react",
-  version: "5.56.0-snapshot.v20251117213621",
+  version: "5.56.0-snapshot.v20251117224912",
   environment: process.env.NODE_ENV
 };
 var _status;
@@ -3911,24 +3921,24 @@ var IsomorphicClerk = _IsomorphicClerk;
 function ClerkContextProvider(props) {
   const { isomorphicClerkOptions, initialState, children } = props;
   const { isomorphicClerk: clerk2, clerkStatus } = useLoadedIsomorphicClerk(isomorphicClerkOptions);
-  const [state, setState] = React7__default.default.useState({
+  const [state, setState] = React8__default.default.useState({
     client: clerk2.client,
     session: clerk2.session,
     user: clerk2.user,
     organization: clerk2.organization
   });
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     return clerk2.addListener((e) => setState({ ...e }));
   }, []);
   const derivedState = deriveState(clerk2.loaded, state, initialState);
-  const clerkCtx = React7__default.default.useMemo(
+  const clerkCtx = React8__default.default.useMemo(
     () => ({ value: clerk2 }),
     [
       // Only update the clerk reference on status change
       clerkStatus
     ]
   );
-  const clientCtx = React7__default.default.useMemo(() => ({ value: state.client }), [state.client]);
+  const clientCtx = React8__default.default.useMemo(() => ({ value: state.client }), [state.client]);
   const {
     sessionId,
     sessionStatus,
@@ -3944,7 +3954,7 @@ function ClerkContextProvider(props) {
     orgPermissions,
     factorVerificationAge
   } = derivedState;
-  const authCtx = React7__default.default.useMemo(() => {
+  const authCtx = React8__default.default.useMemo(() => {
     const value = {
       sessionId,
       sessionStatus,
@@ -3959,9 +3969,9 @@ function ClerkContextProvider(props) {
     };
     return { value };
   }, [sessionId, sessionStatus, userId, actor, orgId, orgRole, orgSlug, factorVerificationAge, sessionClaims == null ? void 0 : sessionClaims.__raw]);
-  const sessionCtx = React7__default.default.useMemo(() => ({ value: session }), [sessionId, session]);
-  const userCtx = React7__default.default.useMemo(() => ({ value: user }), [userId, user]);
-  const organizationCtx = React7__default.default.useMemo(() => {
+  const sessionCtx = React8__default.default.useMemo(() => ({ value: session }), [sessionId, session]);
+  const userCtx = React8__default.default.useMemo(() => ({ value: user }), [userId, user]);
+  const organizationCtx = React8__default.default.useMemo(() => {
     const value = {
       organization
     };
@@ -3969,7 +3979,7 @@ function ClerkContextProvider(props) {
   }, [orgId, organization]);
   return (
     // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk
-    /* @__PURE__ */ React7__default.default.createElement(IsomorphicClerkContext.Provider, { value: clerkCtx }, /* @__PURE__ */ React7__default.default.createElement(ClientContext.Provider, { value: clientCtx }, /* @__PURE__ */ React7__default.default.createElement(SessionContext.Provider, { value: sessionCtx }, /* @__PURE__ */ React7__default.default.createElement(OrganizationProvider, { ...organizationCtx.value }, /* @__PURE__ */ React7__default.default.createElement(AuthContext.Provider, { value: authCtx }, /* @__PURE__ */ React7__default.default.createElement(UserContext.Provider, { value: userCtx }, /* @__PURE__ */ React7__default.default.createElement(
+    /* @__PURE__ */ React8__default.default.createElement(IsomorphicClerkContext.Provider, { value: clerkCtx }, /* @__PURE__ */ React8__default.default.createElement(ClientContext.Provider, { value: clientCtx }, /* @__PURE__ */ React8__default.default.createElement(SessionContext.Provider, { value: sessionCtx }, /* @__PURE__ */ React8__default.default.createElement(OrganizationProvider, { ...organizationCtx.value }, /* @__PURE__ */ React8__default.default.createElement(AuthContext.Provider, { value: authCtx }, /* @__PURE__ */ React8__default.default.createElement(UserContext.Provider, { value: userCtx }, /* @__PURE__ */ React8__default.default.createElement(
       __experimental_CheckoutProvider,
       {
         value: void 0
@@ -3979,15 +3989,15 @@ function ClerkContextProvider(props) {
   );
 }
 var useLoadedIsomorphicClerk = (options) => {
-  const isomorphicClerkRef = React7__default.default.useRef(IsomorphicClerk.getOrCreateInstance(options));
-  const [clerkStatus, setClerkStatus] = React7__default.default.useState(isomorphicClerkRef.current.status);
-  React7__default.default.useEffect(() => {
+  const isomorphicClerkRef = React8__default.default.useRef(IsomorphicClerk.getOrCreateInstance(options));
+  const [clerkStatus, setClerkStatus] = React8__default.default.useState(isomorphicClerkRef.current.status);
+  React8__default.default.useEffect(() => {
     void isomorphicClerkRef.current.__unstable__updateProps({ appearance: options.appearance });
   }, [options.appearance]);
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     void isomorphicClerkRef.current.__unstable__updateProps({ options });
   }, [options.localization]);
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     isomorphicClerkRef.current.on("status", setClerkStatus);
     return () => {
       if (isomorphicClerkRef.current) {
@@ -4008,7 +4018,7 @@ function ClerkProviderBase(props) {
       errorThrower.throwInvalidPublishableKeyError({ key: publishableKey });
     }
   }
-  return /* @__PURE__ */ React7__default.default.createElement(
+  return /* @__PURE__ */ React8__default.default.createElement(
     ClerkContextProvider,
     {
       initialState,
@@ -4221,7 +4231,7 @@ var BrowserStorageCache = createBrowserStorageCache();
 var clerk;
 noRhc.Clerk.sdkMetadata = {
   name: "@clerk/chrome-extension",
-  version: "2.8.2-snapshot.v20251117213621"
+  version: "2.8.2-snapshot.v20251117224912"
 };
 async function createClerkClient({
   __experimental_syncHostListener = false,
@@ -4274,8 +4284,8 @@ async function createClerkClient({
 function ClerkProvider2(props) {
   const { children, storageCache, syncHost, __experimental_syncHostListener, ...rest } = props;
   const { publishableKey = "" } = props;
-  const [clerkInstance, setClerkInstance] = React7__default.default.useState(null);
-  React7__default.default.useEffect(() => {
+  const [clerkInstance, setClerkInstance] = React8__default.default.useState(null);
+  React8__default.default.useEffect(() => {
     void (async () => {
       setClerkInstance(
         await createClerkClient({ publishableKey, storageCache, syncHost, __experimental_syncHostListener })