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

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React8 = require('react');
 var index_js = 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;
@@ -601,10 +601,10 @@ var defaultConfigOptions = {
   initFocus,
   initReconnect
 };
-var IS_REACT_LEGACY = !React7__default.default.useId;
+var IS_REACT_LEGACY = !React8__default.default.useId;
 var IS_SERVER = !isWindowDefined || isLegacyDeno;
 var rAF = (f) => hasRequestAnimationFrame() ? window["requestAnimationFrame"](f) : setTimeout(f, 1);
-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",
@@ -906,23 +906,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);
   }
@@ -937,7 +937,7 @@ var SWRConfig = (props) => {
       return cacheContext[3];
     }
   }, []);
-  return React7.createElement(SWRConfigContext.Provider, mergeObjects(props, {
+  return React8.createElement(SWRConfigContext.Provider, mergeObjects(props, {
     value: extendedConfig
   }));
 };
@@ -948,7 +948,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 normalize = (args) => {
@@ -963,7 +963,7 @@ var normalize = (args) => {
   ];
 };
 var useSWRConfig = () => {
-  return mergeObjects(defaultConfig, React7.useContext(SWRConfigContext));
+  return mergeObjects(defaultConfig, React8.useContext(SWRConfigContext));
 };
 var middleware = (useSWRNext) => (key_, fetcher_, config) => {
   const fetcher = fetcher_ && ((...args) => {
@@ -1016,7 +1016,7 @@ var withMiddleware = (useSWR2, middleware2) => {
   };
 };
 setupDevTools();
-var use2 = React7__default.default.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax
+var use2 = 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
@@ -1047,15 +1047,15 @@ var useSWRHandler = (_key, fetcher, config) => {
   const { cache: cache2, compare: compare2, suspense, fallbackData, revalidateOnMount, revalidateIfStale, refreshInterval, refreshWhenHidden, refreshWhenOffline, keepPreviousData } = config;
   const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get(cache2);
   const [key, fnArg] = serialize(_key);
-  const initialMountedRef = React7.useRef(false);
-  const unmountedRef = React7.useRef(false);
-  const keyRef = React7.useRef(key);
-  const fetcherRef = React7.useRef(fetcher);
-  const configRef = React7.useRef(config);
+  const initialMountedRef = React8.useRef(false);
+  const unmountedRef = React8.useRef(false);
+  const keyRef = React8.useRef(key);
+  const fetcherRef = React8.useRef(fetcher);
+  const configRef = React8.useRef(config);
   const getConfig = () => configRef.current;
   const isActive = () => getConfig().isVisible() && getConfig().isOnline();
   const [getCache, setCache, subscribeCache, getInitialCache] = createCacheHelper(cache2, key);
-  const stateDependencies = React7.useRef({}).current;
+  const stateDependencies = React8.useRef({}).current;
   const fallback = isUndefined(fallbackData) ? isUndefined(config.fallback) ? UNDEFINED : config.fallback[key] : fallbackData;
   const isEqual2 = (prev, current) => {
     for (const _ in stateDependencies) {
@@ -1077,7 +1077,7 @@ var useSWRHandler = (_key, fetcher, config) => {
     }
     return true;
   };
-  const getSnapshot = React7.useMemo(() => {
+  const getSnapshot = React8.useMemo(() => {
     const shouldStartRequest = (() => {
       if (!key) return false;
       if (!fetcher) return false;
@@ -1124,7 +1124,7 @@ var useSWRHandler = (_key, fetcher, config) => {
     cache2,
     key
   ]);
-  const cached = index_js.useSyncExternalStore(React7.useCallback(
+  const cached = index_js.useSyncExternalStore(React8.useCallback(
     (callback) => subscribeCache(key, (current, prev) => {
       if (!isEqual2(prev, current)) callback();
     }),
@@ -1139,7 +1139,7 @@ var useSWRHandler = (_key, fetcher, config) => {
   const cachedData = cached.data;
   const data = isUndefined(cachedData) ? fallback && isPromiseLike(fallback) ? use2(fallback) : fallback : cachedData;
   const error = cached.error;
-  const laggyDataRef = React7.useRef(data);
+  const laggyDataRef = React8.useRef(data);
   const returnedData = keepPreviousData ? isUndefined(cachedData) ? isUndefined(laggyDataRef.current) ? data : laggyDataRef.current : cachedData : data;
   const shouldDoInitialRevalidation = (() => {
     if (hasRevalidator && !isUndefined(error)) return false;
@@ -1151,7 +1151,7 @@ var useSWRHandler = (_key, fetcher, config) => {
   const defaultValidatingState = !!(key && fetcher && isInitialMount && shouldDoInitialRevalidation);
   const isValidating = isUndefined(cached.isValidating) ? defaultValidatingState : cached.isValidating;
   const isLoading = isUndefined(cached.isLoading) ? defaultValidatingState : cached.isLoading;
-  const revalidate = React7.useCallback(
+  const revalidate = React8.useCallback(
     async (revalidateOpts) => {
       const currentFetcher = fetcherRef.current;
       if (!key || !currentFetcher || unmountedRef.current || getConfig().isPaused()) {
@@ -1281,7 +1281,7 @@ var useSWRHandler = (_key, fetcher, config) => {
       cache2
     ]
   );
-  const boundMutate = React7.useCallback(
+  const boundMutate = React8.useCallback(
     // Use callback to make sure `keyRef.current` returns latest result every time
     (...args) => {
       return internalMutate(cache2, keyRef.current, ...args);
@@ -1373,7 +1373,7 @@ var useSWRHandler = (_key, fetcher, config) => {
     refreshWhenOffline,
     key
   ]);
-  React7.useDebugValue(returnedData);
+  React8.useDebugValue(returnedData);
   if (suspense && isUndefined(data) && key) {
     if (!IS_REACT_LEGACY && IS_SERVER) {
       throw new Error("Fallback data is required when using Suspense in SSR.");
@@ -1490,7 +1490,7 @@ var getFirstPageKey = (getKey) => {
 };
 var EMPTY_PROMISE = Promise.resolve();
 var infinite = (useSWRNext) => (getKey, fn, config) => {
-  const didMountRef = React7.useRef(false);
+  const didMountRef = React8.useRef(false);
   const { cache: cache$1, initialSize = 1, revalidateAll = false, persistSize = false, revalidateFirstPage = true, revalidateOnMount = false, parallel = false } = config;
   const [, , , PRELOAD] = SWRGlobalState.get(cache);
   let infiniteKey;
@@ -1500,7 +1500,7 @@ var infinite = (useSWRNext) => (getKey, fn, config) => {
   } catch (err) {
   }
   const [get, set, subscribeCache] = createCacheHelper(cache$1, infiniteKey);
-  const getSnapshot = React7.useCallback(() => {
+  const getSnapshot = React8.useCallback(() => {
     const size = isUndefined(get()._l) ? initialSize : get()._l;
     return size;
   }, [
@@ -1508,7 +1508,7 @@ var infinite = (useSWRNext) => (getKey, fn, config) => {
     infiniteKey,
     initialSize
   ]);
-  index_js.useSyncExternalStore(React7.useCallback(
+  index_js.useSyncExternalStore(React8.useCallback(
     (callback) => {
       if (infiniteKey) return subscribeCache(infiniteKey, () => {
         callback();
@@ -1522,14 +1522,14 @@ var infinite = (useSWRNext) => (getKey, fn, config) => {
       infiniteKey
     ]
   ), getSnapshot, getSnapshot);
-  const resolvePageSize = React7.useCallback(() => {
+  const resolvePageSize = React8.useCallback(() => {
     const cachedPageSize = get()._l;
     return isUndefined(cachedPageSize) ? initialSize : cachedPageSize;
   }, [
     infiniteKey,
     initialSize
   ]);
-  const lastPageSizeRef = React7.useRef(resolvePageSize());
+  const lastPageSizeRef = React8.useRef(resolvePageSize());
   useIsomorphicLayoutEffect(() => {
     if (!didMountRef.current) {
       didMountRef.current = true;
@@ -1601,7 +1601,7 @@ var infinite = (useSWRNext) => (getKey, fn, config) => {
     });
     return data;
   }, config);
-  const mutate2 = React7.useCallback(
+  const mutate2 = React8.useCallback(
     // eslint-disable-next-line func-names
     function(data, opts) {
       const options = typeof opts === "boolean" ? {
@@ -1634,7 +1634,7 @@ var infinite = (useSWRNext) => (getKey, fn, config) => {
       cache$1
     ]
   );
-  const setSize = React7.useCallback(
+  const setSize = React8.useCallback(
     (arg) => {
       if (!infiniteKey) return EMPTY_PROMISE;
       const [, changeSize] = createCacheHelper(cache$1, infiniteKey);
@@ -1775,15 +1775,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 [
@@ -1793,23 +1793,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, useUserContext] = createContextAndHook("UserContext");
 var [ClientContext, useClientContext] = createContextAndHook("ClientContext");
 var [SessionContext, useSessionContext] = 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, useOrganizationContext] = 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;
@@ -1843,8 +1843,8 @@ function createCacheKeys(params) {
 var useWithSafeValues = (params, defaultValues) => {
   var _a5, _b, _c;
   const shouldUseDefaults = typeof params === "boolean" && params;
-  const initialPageRef = React7.useRef(shouldUseDefaults ? defaultValues.initialPage : (_a5 = params == null ? void 0 : params.initialPage) != null ? _a5 : defaultValues.initialPage);
-  const pageSizeRef = React7.useRef(shouldUseDefaults ? defaultValues.pageSize : (_b = params == null ? void 0 : params.pageSize) != null ? _b : defaultValues.pageSize);
+  const initialPageRef = React8.useRef(shouldUseDefaults ? defaultValues.initialPage : (_a5 = params == null ? void 0 : params.initialPage) != null ? _a5 : defaultValues.initialPage);
+  const pageSizeRef = React8.useRef(shouldUseDefaults ? defaultValues.pageSize : (_b = params == null ? void 0 : params.pageSize) != null ? _b : defaultValues.pageSize);
   const newObj = {};
   for (const key of Object.keys(defaultValues)) newObj[key] = shouldUseDefaults ? defaultValues[key] : (_c = params == null ? void 0 : params[key]) != null ? _c : defaultValues[key];
   return {
@@ -1860,8 +1860,8 @@ function getDifferentKeys(obj1, obj2) {
   return differentKeysObject;
 }
 function usePreviousValue(value) {
-  const currentRef = React7.useRef(value);
-  const previousRef = React7.useRef(null);
+  const currentRef = React8.useRef(value);
+  const previousRef = React8.useRef(null);
   if (currentRef.current !== value) {
     previousRef.current = currentRef.current;
     currentRef.current = value;
@@ -1879,9 +1879,9 @@ var cachingSWRInfiniteOptions = {
 var usePagesOrInfinite = (params) => {
   var _a5, _b, _c, _d, _e, _f, _g;
   const { fetcher, config, keys } = params;
-  const [paginatedPage, setPaginatedPage] = React7.useState((_a5 = config.initialPage) != null ? _a5 : 1);
-  const initialPageRef = React7.useRef((_b = config.initialPage) != null ? _b : 1);
-  const pageSizeRef = React7.useRef((_c = config.pageSize) != null ? _c : 10);
+  const [paginatedPage, setPaginatedPage] = React8.useState((_a5 = config.initialPage) != null ? _a5 : 1);
+  const initialPageRef = React8.useRef((_b = config.initialPage) != null ? _b : 1);
+  const pageSizeRef = React8.useRef((_c = config.pageSize) != null ? _c : 10);
   const enabled = (_d = config.enabled) != null ? _d : true;
   const cacheMode = config.__experimental_mode === "cache";
   const triggerInfinite = (_e = config.infinite) != null ? _e : false;
@@ -1922,7 +1922,7 @@ var usePagesOrInfinite = (params) => {
     });
     return fetcher == null ? void 0 : fetcher(requestParams);
   }, cachingSWRInfiniteOptions);
-  const page = React7.useMemo(() => {
+  const page = React8.useMemo(() => {
     if (triggerInfinite) return size;
     return paginatedPage;
   }, [
@@ -1930,14 +1930,14 @@ var usePagesOrInfinite = (params) => {
     size,
     paginatedPage
   ]);
-  const fetchPage = React7.useCallback((numberOrgFn) => {
+  const fetchPage = React8.useCallback((numberOrgFn) => {
     if (triggerInfinite) {
       setSize(numberOrgFn);
       return;
     }
     return setPaginatedPage(numberOrgFn);
   }, [setSize, triggerInfinite]);
-  const data = React7.useMemo(() => {
+  const data = React8.useMemo(() => {
     var _a6, _b2;
     if (triggerInfinite) return (_a6 = swrInfiniteData == null ? void 0 : swrInfiniteData.map((a) => a == null ? void 0 : a.data).flat()) != null ? _a6 : [];
     return (_b2 = swrData == null ? void 0 : swrData.data) != null ? _b2 : [];
@@ -1946,7 +1946,7 @@ var usePagesOrInfinite = (params) => {
     swrData,
     swrInfiniteData
   ]);
-  const count = React7.useMemo(() => {
+  const count = React8.useMemo(() => {
     var _a6, _b2;
     if (triggerInfinite) return ((_a6 = swrInfiniteData == null ? void 0 : swrInfiniteData[(swrInfiniteData == null ? void 0 : swrInfiniteData.length) - 1]) == null ? void 0 : _a6.total_count) || 0;
     return (_b2 = swrData == null ? void 0 : swrData.total_count) != null ? _b2 : 0;
@@ -1959,10 +1959,10 @@ var usePagesOrInfinite = (params) => {
   const isFetching = triggerInfinite ? swrInfiniteIsValidating : swrIsValidating;
   const error = (_g = triggerInfinite ? swrInfiniteError : swrError) != null ? _g : null;
   const isError = !!error;
-  const fetchNext = React7.useCallback(() => {
+  const fetchNext = React8.useCallback(() => {
     fetchPage((n) => Math.max(0, n + 1));
   }, [fetchPage]);
-  const fetchPrevious = React7.useCallback(() => {
+  const fetchPrevious = React8.useCallback(() => {
     fetchPage((n) => Math.max(0, n - 1));
   }, [fetchPage]);
   const offsetCount = (initialPageRef.current - 1) * pageSizeRef.current;
@@ -2291,7 +2291,7 @@ function useOrganizationList(params) {
     userSuggestions: suggestions
   };
 }
-var useSafeLayoutEffect = typeof window !== "undefined" ? React7__default.default.useLayoutEffect : React7__default.default.useEffect;
+var useSafeLayoutEffect = typeof window !== "undefined" ? React8__default.default.useLayoutEffect : React8__default.default.useEffect;
 var hookName$3 = `useSession`;
 var useSession = () => {
   var _a5;
@@ -2407,14 +2407,14 @@ function createReverificationHandler(params) {
 }
 var useReverification = (fetcher, options) => {
   const { __internal_openReverification, telemetry } = useClerk();
-  const fetcherRef = React7.useRef(fetcher);
-  const optionsRef = React7.useRef(options);
+  const fetcherRef = React8.useRef(fetcher);
+  const optionsRef = React8.useRef(options);
   telemetry == null ? void 0 : telemetry.record(eventMethodCalled("useReverification", { onNeedsReverification: Boolean(options == null ? void 0 : options.onNeedsReverification) }));
   useSafeLayoutEffect(() => {
     fetcherRef.current = fetcher;
     optionsRef.current = options;
   });
-  return React7.useCallback((...args) => {
+  return React8.useCallback((...args) => {
     return createReverificationHandler({
       openUIComponent: __internal_openReverification,
       telemetry,
@@ -2423,19 +2423,19 @@ var useReverification = (fetcher, options) => {
   }, [__internal_openReverification, telemetry]);
 };
 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) => {
@@ -2452,7 +2452,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.`);
@@ -2500,7 +2500,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) => {
@@ -2508,10 +2508,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);
@@ -2530,7 +2530,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);
@@ -2540,12 +2540,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();
@@ -2554,7 +2554,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",
@@ -2567,7 +2567,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
     });
@@ -2648,8 +2648,8 @@ var useAuth = (initialAuthStateOrOptions = {}) => {
     authContext = initialAuthState != null ? initialAuthState : {};
   }
   const isomorphicClerk = useIsomorphicClerkContext();
-  const getToken = React7.useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);
-  const signOut = React7.useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);
+  const getToken = React8.useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);
+  const signOut = React8.useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);
   (_a5 = isomorphicClerk.telemetry) == null ? void 0 : _a5.record(eventMethodCalled("useAuth", { treatPendingAsSignedOut }));
   return useDerivedAuth(
     {
@@ -2664,7 +2664,7 @@ var useAuth = (initialAuthStateOrOptions = {}) => {
 };
 function useDerivedAuth(authObject, { treatPendingAsSignedOut = true } = {}) {
   const { userId, orgId, orgRole, has: has3, signOut, getToken, orgPermissions, factorVerificationAge, sessionClaims } = authObject != null ? authObject : {};
-  const derivedHas = React7.useCallback(
+  const derivedHas = React8.useCallback(
     (params) => {
       if (has3) {
         return has3(params);
@@ -2698,8 +2698,8 @@ function useDerivedAuth(authObject, { treatPendingAsSignedOut = true } = {}) {
   return payload;
 }
 function useEmailLink(resource) {
-  const { startEmailLinkFlow, cancelEmailLinkFlow } = React7__default.default.useMemo(() => resource.createEmailLinkFlow(), [resource]);
-  React7__default.default.useEffect(() => {
+  const { startEmailLinkFlow, cancelEmailLinkFlow } = React8__default.default.useMemo(() => resource.createEmailLinkFlow(), [resource]);
+  React8__default.default.useEffect(() => {
     return cancelEmailLinkFlow;
   }, []);
   return {
@@ -2748,7 +2748,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,
@@ -2873,7 +2873,7 @@ var RedirectToSignIn = 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 {
@@ -2883,33 +2883,33 @@ var RedirectToSignIn = withClerk(({ clerk: clerk2, ...props }) => {
   return null;
 }, "RedirectToSignIn");
 var RedirectToSignUp = 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");
 var RedirectToUserProfile = withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToUserProfile", "Use the `redirectToUserProfile()` method instead.");
     void clerk2.redirectToUserProfile();
   }, []);
   return null;
 }, "RedirectToUserProfile");
 var RedirectToOrganizationProfile = withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToOrganizationProfile", "Use the `redirectToOrganizationProfile()` method instead.");
     void clerk2.redirectToOrganizationProfile();
   }, []);
   return null;
 }, "RedirectToOrganizationProfile");
 var RedirectToCreateOrganization = withClerk(({ clerk: clerk2 }) => {
-  React7__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     deprecated("RedirectToCreateOrganization", "Use the `redirectToCreateOrganization()` method instead.");
     void clerk2.redirectToCreateOrganization();
   }, []);
@@ -2917,7 +2917,7 @@ var RedirectToCreateOrganization = withClerk(({ clerk: clerk2 }) => {
 }, "RedirectToCreateOrganization");
 var AuthenticateWithRedirectCallback = withClerk(
   ({ clerk: clerk2, ...handleRedirectCallbackParams }) => {
-    React7__default.default.useEffect(() => {
+    React8__default.default.useEffect(() => {
       void clerk2.handleRedirectCallback(handleRedirectCallbackParams);
     }, []);
     return null;
@@ -2943,9 +2943,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));
   }
@@ -2955,7 +2959,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;
 };
@@ -2969,7 +2973,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);
@@ -2984,13 +2988,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)),
@@ -3006,7 +3010,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"];
@@ -3044,7 +3048,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);
     }
@@ -3055,7 +3059,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));
@@ -3174,7 +3178,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);
@@ -3185,7 +3189,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);
@@ -3345,9 +3349,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.");
     }
@@ -3377,10 +3381,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;
@@ -3426,12 +3430,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 })));
 };
 var SignIn = withClerk(
   ({ clerk: clerk2, component, fallback, ...props }) => {
@@ -3440,7 +3444,7 @@ var SignIn = 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,
@@ -3461,7 +3465,7 @@ var SignUp = 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,
@@ -3477,11 +3481,11 @@ var SignUp = 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(
   ({
@@ -3492,21 +3496,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 }
@@ -3515,7 +3521,7 @@ var UserProfile = Object.assign(_UserProfile, {
   Page: UserProfilePage,
   Link: UserProfileLink
 });
-var UserButtonContext = React7.createContext({
+var UserButtonContext = React8.createContext({
   mount: () => {
   },
   unmount: () => {
@@ -3532,6 +3538,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" } }
     };
@@ -3547,13 +3555,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,
@@ -3562,25 +3570,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: {
@@ -3588,7 +3596,7 @@ function UserButtonOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ React7__default.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ React8__default.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 var UserButton = Object.assign(_UserButton, {
   UserProfilePage,
@@ -3600,11 +3608,11 @@ var UserButton = 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(
   ({
@@ -3619,7 +3627,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,
@@ -3629,7 +3637,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 }
@@ -3645,7 +3653,7 @@ var CreateOrganization = 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,
@@ -3659,7 +3667,7 @@ var CreateOrganization = withClerk(
   },
   { component: "CreateOrganization", renderWhileLoading: true }
 );
-var OrganizationSwitcherContext = React7.createContext({
+var OrganizationSwitcherContext = React8.createContext({
   mount: () => {
   },
   unmount: () => {
@@ -3676,6 +3684,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" } }
     };
@@ -3688,25 +3698,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: {
@@ -3714,7 +3724,7 @@ function OrganizationSwitcherOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ React7__default.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ React8__default.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 var OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
   OrganizationProfilePage,
@@ -3728,7 +3738,7 @@ var OrganizationList = 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,
@@ -3749,7 +3759,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,
@@ -3770,7 +3780,7 @@ var Waitlist = 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,
@@ -3794,7 +3804,7 @@ var PricingTable = 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,
@@ -3815,7 +3825,7 @@ var APIKeys = 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,
@@ -3836,7 +3846,7 @@ var UserAvatar = 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,
@@ -3857,7 +3867,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,
@@ -4037,7 +4047,7 @@ var SignInButton = 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 }
 );
@@ -4057,7 +4067,7 @@ var SignInWithMetamaskButton = 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 }
 );
@@ -4072,7 +4082,7 @@ var SignOutButton = 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 }
 );
@@ -4119,7 +4129,7 @@ var SignUpButton = 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 }
 );
@@ -4399,7 +4409,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;
@@ -5633,24 +5643,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,
@@ -5666,7 +5676,7 @@ function ClerkContextProvider(props) {
     orgPermissions,
     factorVerificationAge
   } = derivedState;
-  const authCtx = React7__default.default.useMemo(() => {
+  const authCtx = React8__default.default.useMemo(() => {
     const value = {
       sessionId,
       sessionStatus,
@@ -5681,9 +5691,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
     };
@@ -5691,7 +5701,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
@@ -5701,15 +5711,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) {
@@ -5730,7 +5740,7 @@ function ClerkProviderBase(props) {
       errorThrower.throwInvalidPublishableKeyError({ key: publishableKey });
     }
   }
-  return /* @__PURE__ */ React7__default.default.createElement(
+  return /* @__PURE__ */ React8__default.default.createElement(
     ClerkContextProvider,
     {
       initialState,
@@ -5943,7 +5953,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,
@@ -5996,8 +6006,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 })