@clerk/react 6.9.0 → 6.9.1-canary.v20260610190754

package/dist/hooks-CBghYU21.cjs

@@ -0,0 +1,1606 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const require_useAssertWrappedByClerkProvider = require('./useAssertWrappedByClerkProvider-Cm0djUcB.cjs');
+let react = require("react");
+react = __toESM(react);
+let react_dom = require("react-dom");
+let _clerk_shared_error = require("@clerk/shared/error");
+let _clerk_shared_utils = require("@clerk/shared/utils");
+let _clerk_shared_getEnvVariable = require("@clerk/shared/getEnvVariable");
+let _clerk_shared_object = require("@clerk/shared/object");
+let _clerk_shared_react = require("@clerk/shared/react");
+let _clerk_shared_authorization = require("@clerk/shared/authorization");
+let _clerk_shared_telemetry = require("@clerk/shared/telemetry");
+let _clerk_shared_deriveState = require("@clerk/shared/deriveState");
+let _clerk_shared_browser = require("@clerk/shared/browser");
+
+//#region src/errors/messages.ts
+const multipleClerkProvidersError = "You've added multiple <ClerkProvider> components in your React component tree. Wrap your components in a single <ClerkProvider>.";
+const multipleChildrenInButtonComponent = (name) => `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
+const invalidStateError = "Invalid state. Feel free to submit a bug or reach out to support here: https://clerk.com/contact/support";
+const unsupportedNonBrowserDomainOrProxyUrlFunction = "Unsupported usage of isSatellite, domain or proxyUrl. The usage of isSatellite, domain or proxyUrl as function is not supported in non-browser environments.";
+const userProfilePageRenderedError = "<UserProfile.Page /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
+const userProfileLinkRenderedError = "<UserProfile.Link /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
+const organizationProfilePageRenderedError = "<OrganizationProfile.Page /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
+const organizationProfileLinkRenderedError = "<OrganizationProfile.Link /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
+const customPagesIgnoredComponent = (componentName) => `<${componentName} /> can only accept <${componentName}.Page /> and <${componentName}.Link /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.`;
+const customPageWrongProps = (componentName) => `Missing props. <${componentName}.Page /> component requires the following props: url, label, labelIcon, alongside with children to be rendered inside the page.`;
+const customLinkWrongProps = (componentName) => `Missing props. <${componentName}.Link /> component requires the following props: url, label and labelIcon.`;
+const noPathProvidedError = (componentName) => `The <${componentName}/> component uses path-based routing by default unless a different routing strategy is provided using the \`routing\` prop. When path-based routing is used, you need to provide the path where the component is mounted on by using the \`path\` prop. Example: <${componentName} path={'/my-path'} />`;
+const incompatibleRoutingWithPathProvidedError = (componentName) => `The \`path\` prop will only be respected when the Clerk component uses path-based routing. To resolve this error, pass \`routing='path'\` to the <${componentName}/> component, or drop the \`path\` prop to switch to hash-based routing. For more details please refer to our docs: https://clerk.com/docs`;
+const userButtonIgnoredComponent = `<UserButton /> can only accept <UserButton.UserProfilePage />, <UserButton.UserProfileLink /> and <UserButton.MenuItems /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.`;
+const customMenuItemsIgnoredComponent = "<UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.";
+const userButtonMenuItemsRenderedError = "<UserButton.MenuItems /> component needs to be a direct child of `<UserButton />`.";
+const userButtonMenuActionRenderedError = "<UserButton.Action /> component needs to be a direct child of `<UserButton.MenuItems />`.";
+const userButtonMenuLinkRenderedError = "<UserButton.Link /> component needs to be a direct child of `<UserButton.MenuItems />`.";
+const userButtonMenuItemLinkWrongProps = "Missing props. <UserButton.Link /> component requires the following props: href, label and labelIcon.";
+const userButtonMenuItemsActionWrongsProps = "Missing props. <UserButton.Action /> component requires the following props: label.";
+
+//#endregion
+//#region src/utils/childrenUtils.tsx
+const assertSingleChild = (children) => (name) => {
+	try {
+		return react.default.Children.only(children);
+	} catch {
+		const childArray = react.default.Children.toArray(children);
+		if (childArray.length === 1 && react.default.isValidElement(childArray[0])) return childArray[0];
+		return require_useAssertWrappedByClerkProvider.errorThrower.throw(multipleChildrenInButtonComponent(name));
+	}
+};
+const normalizeWithDefaultValue = (children, defaultText) => {
+	if (!children) children = defaultText;
+	if (typeof children === "string") children = /* @__PURE__ */ react.default.createElement("button", null, children);
+	return children;
+};
+const safeExecute = (cb) => (...args) => {
+	if (cb && typeof cb === "function") return cb(...args);
+};
+
+//#endregion
+//#region src/utils/envVariables.ts
+/**
+* Gets an environment variable value, checking for Vite's VITE_ prefix first.
+* This allows React SDK users with Vite to use VITE_CLERK_* env vars
+* (which Vite exposes client-side) without manual configuration.
+*
+* Note: Empty string values are treated as "not set" and will fall through to
+* the next env var in the chain. This is intentional since empty values are
+* typically invalid for these options.
+*
+* @param name - The environment variable name without prefix (e.g., 'CLERK_PUBLISHABLE_KEY')
+* @returns The value of the environment variable, or empty string if not found
+*/
+const getEnvVar = (name) => {
+	return (0, _clerk_shared_getEnvVariable.getEnvVariable)(`VITE_${name}`) || (0, _clerk_shared_getEnvVariable.getEnvVariable)(name);
+};
+/**
+* Helper to get env fallback only when the option is undefined.
+* We check for undefined specifically (not falsy) to avoid conflicting with framework SDKs
+* that may pass an empty string when their env var is not set.
+*
+* Returns the env var value only if it's non-empty, otherwise returns undefined
+* to preserve the original behavior when no env var is set.
+*/
+const withEnvFallback = (value, envVarName) => {
+	if (value !== void 0) return value;
+	return getEnvVar(envVarName) || void 0;
+};
+/**
+* Merges ClerkProvider options with environment variable fallbacks.
+* This supports Vite users who set VITE_CLERK_* or CLERK_* env vars.
+* Passed-in options always take priority over environment variables.
+*
+* Supported environment variables:
+* - VITE_CLERK_PUBLISHABLE_KEY / CLERK_PUBLISHABLE_KEY
+*
+* @param options - The options passed to ClerkProvider
+* @returns Options with environment variable fallbacks applied
+*/
+const mergeWithEnv = (options) => {
+	const publishableKey = withEnvFallback(options.publishableKey, "CLERK_PUBLISHABLE_KEY");
+	return {
+		...options,
+		...publishableKey !== void 0 && { publishableKey }
+	};
+};
+
+//#endregion
+//#region src/utils/isConstructor.ts
+function isConstructor(f) {
+	return typeof f === "function";
+}
+
+//#endregion
+//#region src/utils/useMaxAllowedInstancesGuard.tsx
+const counts = /* @__PURE__ */ new Map();
+function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
+	react.default.useEffect(() => {
+		const count = counts.get(name) || 0;
+		if (count == maxCount) return require_useAssertWrappedByClerkProvider.errorThrower.throw(error);
+		counts.set(name, count + 1);
+		return () => {
+			counts.set(name, (counts.get(name) || 1) - 1);
+		};
+	}, []);
+}
+function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
+	const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component";
+	const Hoc = (props) => {
+		useMaxAllowedInstancesGuard(name, error);
+		return /* @__PURE__ */ react.default.createElement(WrappedComponent, props);
+	};
+	Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
+	return Hoc;
+}
+
+//#endregion
+//#region src/utils/useCustomElementPortal.tsx
+const useCustomElementPortal = (elements) => {
+	const [nodeMap, setNodeMap] = (0, react.useState)(/* @__PURE__ */ new Map());
+	const nodeMapRef = (0, react.useRef)(nodeMap);
+	const elementsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const portalsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	nodeMapRef.current = nodeMap;
+	elementsRef.current = new Map(elements.map((el) => [el.id, el.component]));
+	const elementIds = new Set(elements.map((el) => el.id));
+	portalsRef.current.forEach((_, id) => {
+		if (!elementIds.has(id)) portalsRef.current.delete(id);
+	});
+	return elements.map((el) => {
+		const id = el.id;
+		const existingPortal = portalsRef.current.get(id);
+		if (existingPortal) return existingPortal;
+		const portal = () => {
+			const node = nodeMapRef.current.get(id);
+			const component = elementsRef.current.get(id);
+			return node ? (0, react_dom.createPortal)(component, node) : null;
+		};
+		const customElementPortal = {
+			id: el.id,
+			mount: (node) => setNodeMap((prev) => new Map(prev).set(id, node)),
+			unmount: () => setNodeMap((prev) => {
+				const newMap = new Map(prev);
+				newMap.set(id, null);
+				return newMap;
+			}),
+			portal
+		};
+		portalsRef.current.set(id, customElementPortal);
+		return customElementPortal;
+	});
+};
+
+//#endregion
+//#region src/utils/componentValidation.ts
+const isThatComponent = (v, component) => {
+	return !!v && react.default.isValidElement(v) && v?.type === component;
+};
+
+//#endregion
+//#region src/utils/useCustomPages.tsx
+const useUserProfileCustomPages = (children, options) => {
+	return useCustomPages({
+		children,
+		reorderItemsLabels: [
+			"account",
+			"security",
+			"billing",
+			"apiKeys"
+		],
+		LinkComponent: UserProfileLink,
+		PageComponent: UserProfilePage,
+		MenuItemsComponent: MenuItems,
+		componentName: "UserProfile"
+	}, options);
+};
+const useOrganizationProfileCustomPages = (children, options) => {
+	return useCustomPages({
+		children,
+		reorderItemsLabels: [
+			"general",
+			"members",
+			"billing",
+			"apiKeys"
+		],
+		LinkComponent: OrganizationProfileLink,
+		PageComponent: OrganizationProfilePage,
+		componentName: "OrganizationProfile"
+	}, options);
+};
+/**
+* Exclude any children that is used for identifying Custom Pages or Custom Items.
+* Passing:
+* ```tsx
+*  <UserProfile.Page/>
+*  <OrganizationProfile.Link/>
+*  <MyComponent>
+*  <UserButton.MenuItems/>
+* ```
+* Gives back
+* ```tsx
+* <MyComponent>
+* ````
+*/
+const useSanitizedChildren = (children) => {
+	const sanitizedChildren = [];
+	const excludedComponents = [
+		OrganizationProfileLink,
+		OrganizationProfilePage,
+		MenuItems,
+		UserProfilePage,
+		UserProfileLink
+	];
+	react.default.Children.forEach(children, (child) => {
+		if (!excludedComponents.some((component) => isThatComponent(child, component))) sanitizedChildren.push(child);
+	});
+	return sanitizedChildren;
+};
+const useCustomPages = (params, options) => {
+	const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
+	const { allowForAnyChildren = false } = options || {};
+	const validChildren = [];
+	const portalIdCounts = /* @__PURE__ */ new Map();
+	react.default.Children.forEach(children, (child) => {
+		if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
+			if (child && !allowForAnyChildren) (0, _clerk_shared_utils.logErrorInDevMode)(customPagesIgnoredComponent(componentName));
+			return;
+		}
+		const { props } = child;
+		const { children, label, url, labelIcon } = props;
+		const childKey = child.key;
+		if (isThatComponent(child, PageComponent)) if (isReorderItem$1(props, reorderItemsLabels)) validChildren.push({ label });
+		else if (isCustomPage(props)) validChildren.push({
+			label,
+			labelIcon,
+			children,
+			url,
+			portalId: getCustomPagePortalId("page", props, childKey, portalIdCounts)
+		});
+		else {
+			(0, _clerk_shared_utils.logErrorInDevMode)(customPageWrongProps(componentName));
+			return;
+		}
+		if (isThatComponent(child, LinkComponent)) if (isExternalLink$1(props)) validChildren.push({
+			label,
+			labelIcon,
+			url,
+			portalId: getCustomPagePortalId("link", props, childKey, portalIdCounts)
+		});
+		else {
+			(0, _clerk_shared_utils.logErrorInDevMode)(customLinkWrongProps(componentName));
+			return;
+		}
+	});
+	const customPageContents = [];
+	const customPageLabelIcons = [];
+	const customLinkLabelIcons = [];
+	validChildren.forEach((cp, index) => {
+		if (isCustomPage(cp)) {
+			customPageContents.push({
+				component: cp.children,
+				id: cp.portalId || index
+			});
+			customPageLabelIcons.push({
+				component: cp.labelIcon,
+				id: cp.portalId || index
+			});
+			return;
+		}
+		if (isExternalLink$1(cp)) customLinkLabelIcons.push({
+			component: cp.labelIcon,
+			id: cp.portalId || index
+		});
+	});
+	const customPageContentsPortals = useCustomElementPortal(customPageContents);
+	const customPageLabelIconsPortals = useCustomElementPortal(customPageLabelIcons);
+	const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);
+	const customPages = [];
+	const customPagesPortals = [];
+	validChildren.forEach((cp, index) => {
+		if (isReorderItem$1(cp, reorderItemsLabels)) {
+			customPages.push({ label: cp.label });
+			return;
+		}
+		if (isCustomPage(cp)) {
+			const { portal: contentPortal, mount, unmount } = customPageContentsPortals.find((p) => p.id === (cp.portalId || index));
+			const { portal: labelPortal, mount: mountIcon, unmount: unmountIcon } = customPageLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
+			customPages.push({
+				label: cp.label,
+				url: cp.url,
+				mount,
+				unmount,
+				mountIcon,
+				unmountIcon
+			});
+			customPagesPortals.push({
+				key: `content:${cp.portalId || index}`,
+				portal: contentPortal
+			});
+			customPagesPortals.push({
+				key: `label:${cp.portalId || index}`,
+				portal: labelPortal
+			});
+			return;
+		}
+		if (isExternalLink$1(cp)) {
+			const { portal: labelPortal, mount: mountIcon, unmount: unmountIcon } = customLinkLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
+			customPages.push({
+				label: cp.label,
+				url: cp.url,
+				mountIcon,
+				unmountIcon
+			});
+			customPagesPortals.push({
+				key: `label:${cp.portalId || index}`,
+				portal: labelPortal
+			});
+			return;
+		}
+	});
+	return {
+		customPages,
+		customPagesPortals
+	};
+};
+const getCustomPagePortalId = (type, props, key, portalIdCounts) => {
+	if (key != null) return `${type}:key:${key}`;
+	const baseId = `${type}:${props.label}:${props.url}`;
+	const occurrence = portalIdCounts.get(baseId) ?? 0;
+	portalIdCounts.set(baseId, occurrence + 1);
+	return `${baseId}:${occurrence}`;
+};
+const isReorderItem$1 = (childProps, validItems) => {
+	const { children, label, url, labelIcon } = childProps;
+	return !children && !url && !labelIcon && validItems.some((v) => v === label);
+};
+const isCustomPage = (childProps) => {
+	const { children, label, url, labelIcon } = childProps;
+	return !!children && !!url && !!labelIcon && !!label;
+};
+const isExternalLink$1 = (childProps) => {
+	const { children, label, url, labelIcon } = childProps;
+	return !children && !!url && !!labelIcon && !!label;
+};
+
+//#endregion
+//#region src/utils/useCustomMenuItems.tsx
+const useUserButtonCustomMenuItems = (children, options) => {
+	return useCustomMenuItems({
+		children,
+		reorderItemsLabels: ["manageAccount", "signOut"],
+		MenuItemsComponent: MenuItems,
+		MenuActionComponent: MenuAction,
+		MenuLinkComponent: MenuLink,
+		UserProfileLinkComponent: UserProfileLink,
+		UserProfilePageComponent: UserProfilePage,
+		allowForAnyChildren: options?.allowForAnyChildren ?? false
+	});
+};
+const useCustomMenuItems = ({ children, MenuItemsComponent, MenuActionComponent, MenuLinkComponent, UserProfileLinkComponent, UserProfilePageComponent, reorderItemsLabels, allowForAnyChildren = false }) => {
+	const validChildren = [];
+	const customMenuItems = [];
+	const customMenuItemsPortals = [];
+	const portalIdCounts = /* @__PURE__ */ new Map();
+	react.default.Children.forEach(children, (child) => {
+		if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
+			if (child && !allowForAnyChildren) (0, _clerk_shared_utils.logErrorInDevMode)(userButtonIgnoredComponent);
+			return;
+		}
+		if (isThatComponent(child, UserProfileLinkComponent) || isThatComponent(child, UserProfilePageComponent)) return;
+		const { props } = child;
+		react.default.Children.forEach(props.children, (child) => {
+			if (!isThatComponent(child, MenuActionComponent) && !isThatComponent(child, MenuLinkComponent)) {
+				if (child) (0, _clerk_shared_utils.logErrorInDevMode)(customMenuItemsIgnoredComponent);
+				return;
+			}
+			const { props } = child;
+			const childKey = child.key;
+			const { label, labelIcon, href, onClick, open } = props;
+			if (isThatComponent(child, MenuActionComponent)) if (isReorderItem(props, reorderItemsLabels)) validChildren.push({ label });
+			else if (isCustomMenuItem(props)) {
+				const baseItem = {
+					label,
+					labelIcon
+				};
+				if (onClick !== void 0) validChildren.push({
+					...baseItem,
+					onClick,
+					portalId: getCustomMenuItemPortalId("action", props, childKey, portalIdCounts)
+				});
+				else if (open !== void 0) validChildren.push({
+					...baseItem,
+					open: open.startsWith("/") ? open : `/${open}`,
+					portalId: getCustomMenuItemPortalId("action", props, childKey, portalIdCounts)
+				});
+				else {
+					(0, _clerk_shared_utils.logErrorInDevMode)("Custom menu item must have either onClick or open property");
+					return;
+				}
+			} else {
+				(0, _clerk_shared_utils.logErrorInDevMode)(userButtonMenuItemsActionWrongsProps);
+				return;
+			}
+			if (isThatComponent(child, MenuLinkComponent)) if (isExternalLink(props)) validChildren.push({
+				label,
+				labelIcon,
+				href,
+				portalId: getCustomMenuItemPortalId("link", props, childKey, portalIdCounts)
+			});
+			else {
+				(0, _clerk_shared_utils.logErrorInDevMode)(userButtonMenuItemLinkWrongProps);
+				return;
+			}
+		});
+	});
+	const customMenuItemLabelIcons = [];
+	const customLinkLabelIcons = [];
+	validChildren.forEach((mi, index) => {
+		if (isCustomMenuItem(mi)) customMenuItemLabelIcons.push({
+			component: mi.labelIcon,
+			id: mi.portalId || index
+		});
+		if (isExternalLink(mi)) customLinkLabelIcons.push({
+			component: mi.labelIcon,
+			id: mi.portalId || index
+		});
+	});
+	const customMenuItemLabelIconsPortals = useCustomElementPortal(customMenuItemLabelIcons);
+	const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);
+	validChildren.forEach((mi, index) => {
+		if (isReorderItem(mi, reorderItemsLabels)) customMenuItems.push({ label: mi.label });
+		if (isCustomMenuItem(mi)) {
+			const { portal: iconPortal, mount: mountIcon, unmount: unmountIcon } = customMenuItemLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
+			const menuItem = {
+				label: mi.label,
+				mountIcon,
+				unmountIcon
+			};
+			if ("onClick" in mi) menuItem.onClick = mi.onClick;
+			else if ("open" in mi) menuItem.open = mi.open;
+			customMenuItems.push(menuItem);
+			customMenuItemsPortals.push({
+				key: `icon:${mi.portalId || index}`,
+				portal: iconPortal
+			});
+		}
+		if (isExternalLink(mi)) {
+			const { portal: iconPortal, mount: mountIcon, unmount: unmountIcon } = customLinkLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
+			customMenuItems.push({
+				label: mi.label,
+				href: mi.href,
+				mountIcon,
+				unmountIcon
+			});
+			customMenuItemsPortals.push({
+				key: `icon:${mi.portalId || index}`,
+				portal: iconPortal
+			});
+		}
+	});
+	return {
+		customMenuItems,
+		customMenuItemsPortals
+	};
+};
+const getCustomMenuItemPortalId = (type, props, key, portalIdCounts) => {
+	if (key != null) return `${type}:key:${key}`;
+	const target = props.href || props.open || "";
+	const baseId = `${type}:${props.label}:${target}`;
+	const occurrence = portalIdCounts.get(baseId) ?? 0;
+	portalIdCounts.set(baseId, occurrence + 1);
+	return `${baseId}:${occurrence}`;
+};
+const isReorderItem = (childProps, validItems) => {
+	const { children, label, onClick, labelIcon } = childProps;
+	return !children && !onClick && !labelIcon && validItems.some((v) => v === label);
+};
+const isCustomMenuItem = (childProps) => {
+	const { label, labelIcon, onClick, open } = childProps;
+	return !!labelIcon && !!label && (typeof onClick === "function" || typeof open === "string");
+};
+const isExternalLink = (childProps) => {
+	const { label, href, labelIcon } = childProps;
+	return !!href && !!labelIcon && !!label;
+};
+
+//#endregion
+//#region src/utils/useWaitForComponentMount.ts
+const createAwaitableMutationObserver = (globalOptions) => {
+	const isReady = globalOptions?.isReady;
+	return (options) => new Promise((resolve, reject) => {
+		const { root = document?.body, selector, timeout = 0 } = options;
+		if (!root) {
+			reject(/* @__PURE__ */ new Error("No root element provided"));
+			return;
+		}
+		let elementToWatch = root;
+		if (selector) elementToWatch = root?.querySelector(selector);
+		if (isReady(elementToWatch, selector)) {
+			resolve();
+			return;
+		}
+		const observer = new MutationObserver((mutationsList) => {
+			for (const mutation of mutationsList) {
+				if (!elementToWatch && selector) elementToWatch = root?.querySelector(selector);
+				if (globalOptions.childList && mutation.type === "childList" || globalOptions.attributes && mutation.type === "attributes") {
+					if (isReady(elementToWatch, selector)) {
+						observer.disconnect();
+						resolve();
+						return;
+					}
+				}
+			}
+		});
+		observer.observe(root, globalOptions);
+		if (timeout > 0) setTimeout(() => {
+			observer.disconnect();
+			reject(/* @__PURE__ */ new Error(`Timeout waiting for ${selector}`));
+		}, timeout);
+	});
+};
+const waitForElementChildren = createAwaitableMutationObserver({
+	childList: true,
+	subtree: true,
+	isReady: (el, selector) => !!el?.childElementCount && el?.matches?.(selector) && el.childElementCount > 0
+});
+/**
+* Detect when a Clerk component has mounted by watching DOM updates to an element with a `data-clerk-component="${component}"` property.
+*/
+function useWaitForComponentMount(component, options) {
+	const watcherRef = (0, react.useRef)();
+	const [status, setStatus] = (0, react.useState)("rendering");
+	(0, react.useEffect)(() => {
+		if (!component) throw new Error("Clerk: no component name provided, unable to detect mount.");
+		if (typeof window !== "undefined" && !watcherRef.current) {
+			const defaultSelector = `[data-clerk-component="${component}"]`;
+			const selector = options?.selector;
+			watcherRef.current = waitForElementChildren({ selector: selector ? defaultSelector + selector : defaultSelector }).then(() => {
+				setStatus("rendered");
+			}).catch(() => {
+				setStatus("error");
+			});
+		}
+	}, [component, options?.selector]);
+	return status;
+}
+
+//#endregion
+//#region src/components/ClerkHostRenderer.tsx
+const isMountProps = (props) => {
+	return "mount" in props;
+};
+const isOpenProps = (props) => {
+	return "open" in props;
+};
+const stripMenuItemIconHandlers = (menuItems) => {
+	return menuItems?.map(({ mountIcon, unmountIcon, ...rest }) => rest);
+};
+/**
+* Used to orchestrate mounting of Clerk components in a host React application.
+* Components are rendered into a specific DOM node using mount/unmount methods provided by the Clerk class.
+*/
+var ClerkHostRenderer = class extends react.default.PureComponent {
+	constructor(..._args) {
+		super(..._args);
+		this.rootRef = react.default.createRef();
+	}
+	componentDidUpdate(_prevProps) {
+		if (!isMountProps(_prevProps) || !isMountProps(this.props)) return;
+		const prevProps = (0, _clerk_shared_object.without)(_prevProps.props || {}, "customPages", "customMenuItems", "children");
+		const newProps = (0, _clerk_shared_object.without)(this.props.props || {}, "customPages", "customMenuItems", "children");
+		const customPagesChanged = _prevProps.props?.customPages?.length !== this.props.props?.customPages?.length;
+		const customMenuItemsChanged = _prevProps.props?.customMenuItems?.length !== this.props.props?.customMenuItems?.length;
+		const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers(_prevProps.props?.customMenuItems);
+		const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers(this.props.props?.customMenuItems);
+		if (!(0, _clerk_shared_react.isDeeplyEqual)(prevProps, newProps) || !(0, _clerk_shared_react.isDeeplyEqual)(prevMenuItemsWithoutHandlers, newMenuItemsWithoutHandlers) || customPagesChanged || customMenuItemsChanged) {
+			if (this.rootRef.current) this.props.updateProps({
+				node: this.rootRef.current,
+				props: this.props.props
+			});
+		}
+	}
+	componentDidMount() {
+		if (this.rootRef.current) {
+			if (isMountProps(this.props)) this.props.mount(this.rootRef.current, this.props.props);
+			if (isOpenProps(this.props)) this.props.open(this.props.props);
+		}
+	}
+	componentWillUnmount() {
+		if (this.rootRef.current) {
+			if (isMountProps(this.props)) this.props.unmount(this.rootRef.current);
+			if (isOpenProps(this.props)) this.props.close();
+		}
+	}
+	render() {
+		const { hideRootHtmlElement = false } = this.props;
+		const rootAttributes = {
+			ref: this.rootRef,
+			...this.props.rootProps,
+			...this.props.component && { "data-clerk-component": this.props.component }
+		};
+		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ react.default.createElement("div", rootAttributes), this.props.children);
+	}
+};
+
+//#endregion
+//#region src/components/withClerk.tsx
+const withClerk = (Component, displayNameOrOptions) => {
+	const displayName = (typeof displayNameOrOptions === "string" ? displayNameOrOptions : displayNameOrOptions?.component) || Component.displayName || Component.name || "Component";
+	Component.displayName = displayName;
+	const options = typeof displayNameOrOptions === "string" ? void 0 : displayNameOrOptions;
+	const HOC = (props) => {
+		require_useAssertWrappedByClerkProvider.useAssertWrappedByClerkProvider(displayName || "withClerk");
+		const clerk = require_useAssertWrappedByClerkProvider.useIsomorphicClerkContext();
+		const getContainer = (0, _clerk_shared_react.usePortalRoot)();
+		if (!clerk.loaded && !options?.renderWhileLoading) return null;
+		return /* @__PURE__ */ react.default.createElement(Component, {
+			getContainer,
+			...props,
+			component: displayName,
+			clerk
+		});
+	};
+	HOC.displayName = `withClerk(${displayName})`;
+	return HOC;
+};
+
+//#endregion
+//#region src/components/uiComponents.tsx
+const CustomPortalsRenderer = (props) => {
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, props?.customPagesPortals?.map(({ key, portal }) => (0, react.createElement)(portal, { key })), props?.customMenuItemsPortals?.map(({ key, portal }) => (0, react.createElement)(portal, { key })));
+};
+const SignIn = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountSignIn,
+		unmount: clerk.unmountSignIn,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "SignIn",
+	renderWhileLoading: true
+});
+const SignUp = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountSignUp,
+		unmount: clerk.unmountSignUp,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "SignUp",
+	renderWhileLoading: true
+});
+function UserProfilePage({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(userProfilePageRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+function UserProfileLink({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(userProfileLinkRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+const _UserProfile = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountUserProfile,
+		unmount: clerk.unmountUserProfile,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			customPages
+		},
+		rootProps: rendererRootProps
+	}, /* @__PURE__ */ react.default.createElement(CustomPortalsRenderer, { customPagesPortals })));
+}, {
+	component: "UserProfile",
+	renderWhileLoading: true
+});
+const UserProfile = Object.assign(_UserProfile, {
+	Page: UserProfilePage,
+	Link: UserProfileLink
+});
+const UserButtonContext = (0, react.createContext)({
+	mount: () => {},
+	unmount: () => {},
+	updateProps: () => {}
+});
+const _UserButton = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider });
+	const userProfileProps = {
+		...props.userProfileProps,
+		customPages
+	};
+	const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems(props.children, { allowForAnyChildren: !!props.__experimental_asProvider });
+	const sanitizedChildren = useSanitizedChildren(props.children);
+	const passableProps = {
+		mount: clerk.mountUserButton,
+		unmount: clerk.unmountUserButton,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			userProfileProps,
+			customMenuItems
+		}
+	};
+	const portalProps = {
+		customPagesPortals,
+		customMenuItemsPortals
+	};
+	return /* @__PURE__ */ react.default.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		...passableProps,
+		hideRootHtmlElement: !!props.__experimental_asProvider,
+		rootProps: rendererRootProps
+	}, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ react.default.createElement(CustomPortalsRenderer, portalProps)));
+}, {
+	component: "UserButton",
+	renderWhileLoading: true
+});
+function MenuItems({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(userButtonMenuItemsRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+function MenuAction({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(userButtonMenuActionRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+function MenuLink({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(userButtonMenuLinkRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+function UserButtonOutlet(outletProps) {
+	const providerProps = (0, react.useContext)(UserButtonContext);
+	const portalProps = {
+		...providerProps,
+		props: {
+			...providerProps.props,
+			...outletProps
+		}
+	};
+	return /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, portalProps);
+}
+const UserButton = Object.assign(_UserButton, {
+	UserProfilePage,
+	UserProfileLink,
+	MenuItems,
+	Action: MenuAction,
+	Link: MenuLink,
+	__experimental_Outlet: UserButtonOutlet
+});
+function OrganizationProfilePage({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(organizationProfilePageRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+function OrganizationProfileLink({ children }) {
+	(0, _clerk_shared_utils.logErrorInDevMode)(organizationProfileLinkRenderedError);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+}
+const _OrganizationProfile = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountOrganizationProfile,
+		unmount: clerk.unmountOrganizationProfile,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			customPages
+		},
+		rootProps: rendererRootProps
+	}, /* @__PURE__ */ react.default.createElement(CustomPortalsRenderer, { customPagesPortals })));
+}, {
+	component: "OrganizationProfile",
+	renderWhileLoading: true
+});
+const OrganizationProfile = Object.assign(_OrganizationProfile, {
+	Page: OrganizationProfilePage,
+	Link: OrganizationProfileLink
+});
+const CreateOrganization = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountCreateOrganization,
+		unmount: clerk.unmountCreateOrganization,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "CreateOrganization",
+	renderWhileLoading: true
+});
+const OrganizationSwitcherContext = (0, react.createContext)({
+	mount: () => {},
+	unmount: () => {},
+	updateProps: () => {}
+});
+const _OrganizationSwitcher = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider });
+	const organizationProfileProps = {
+		...props.organizationProfileProps,
+		customPages
+	};
+	const sanitizedChildren = useSanitizedChildren(props.children);
+	const passableProps = {
+		mount: clerk.mountOrganizationSwitcher,
+		unmount: clerk.unmountOrganizationSwitcher,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			organizationProfileProps
+		},
+		rootProps: rendererRootProps,
+		component
+	};
+	/**
+	* Prefetch organization list
+	*/
+	clerk.__experimental_prefetchOrganizationSwitcher();
+	return /* @__PURE__ */ react.default.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		...passableProps,
+		hideRootHtmlElement: !!props.__experimental_asProvider
+	}, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ react.default.createElement(CustomPortalsRenderer, { customPagesPortals }))));
+}, {
+	component: "OrganizationSwitcher",
+	renderWhileLoading: true
+});
+function OrganizationSwitcherOutlet(outletProps) {
+	const providerProps = (0, react.useContext)(OrganizationSwitcherContext);
+	const portalProps = {
+		...providerProps,
+		props: {
+			...providerProps.props,
+			...outletProps
+		}
+	};
+	return /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, portalProps);
+}
+const OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
+	OrganizationProfilePage,
+	OrganizationProfileLink,
+	__experimental_Outlet: OrganizationSwitcherOutlet
+});
+const OrganizationList = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountOrganizationList,
+		unmount: clerk.unmountOrganizationList,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "OrganizationList",
+	renderWhileLoading: true
+});
+const GoogleOneTap = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		open: clerk.openGoogleOneTap,
+		close: clerk.closeGoogleOneTap,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "GoogleOneTap",
+	renderWhileLoading: true
+});
+const Waitlist = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountWaitlist,
+		unmount: clerk.unmountWaitlist,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "Waitlist",
+	renderWhileLoading: true
+});
+const PricingTable = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component, { selector: "[data-component-status=\"ready\"]" }) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountPricingTable,
+		unmount: clerk.unmountPricingTable,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "PricingTable",
+	renderWhileLoading: true
+});
+/**
+* @experimental This component is in early access and may change in future releases.
+*/
+const APIKeys = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountAPIKeys,
+		unmount: clerk.unmountAPIKeys,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "ApiKeys",
+	renderWhileLoading: true
+});
+const OAuthConsent = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.__internal_mountOAuthConsent,
+		unmount: clerk.__internal_unmountOAuthConsent,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "OAuthConsent",
+	renderWhileLoading: true
+});
+const UserAvatar = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountUserAvatar,
+		unmount: clerk.unmountUserAvatar,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "UserAvatar",
+	renderWhileLoading: true
+});
+const TaskChooseOrganization = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountTaskChooseOrganization,
+		unmount: clerk.unmountTaskChooseOrganization,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "TaskChooseOrganization",
+	renderWhileLoading: true
+});
+const TaskResetPassword = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountTaskResetPassword,
+		unmount: clerk.unmountTaskResetPassword,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "TaskResetPassword",
+	renderWhileLoading: true
+});
+const TaskSetupMFA = withClerk(({ clerk, component, fallback, ...props }) => {
+	const shouldShowFallback = useWaitForComponentMount(component) === "rendering" || !clerk.loaded;
+	const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } };
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ react.default.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountTaskSetupMFA,
+		unmount: clerk.unmountTaskSetupMFA,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "TaskSetupMFA",
+	renderWhileLoading: true
+});
+
+//#endregion
+//#region src/hooks/useAuthBase.tsx
+const defaultDerivedInitialState = {
+	actor: void 0,
+	factorVerificationAge: null,
+	orgId: void 0,
+	orgPermissions: void 0,
+	orgRole: void 0,
+	orgSlug: void 0,
+	sessionClaims: void 0,
+	sessionId: void 0,
+	sessionStatus: void 0,
+	userId: void 0
+};
+function useAuthBase() {
+	const clerk = (0, _clerk_shared_react.useClerkInstanceContext)();
+	const initialState = (0, _clerk_shared_react.useInitialStateContext)();
+	const getInitialState = (0, react.useCallback)(() => initialState, [initialState]);
+	const state = (0, react.useSyncExternalStore)((0, react.useCallback)((callback) => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]), (0, react.useCallback)(() => {
+		if (!clerk.loaded || !clerk.__internal_lastEmittedResources) return getInitialState();
+		return clerk.__internal_lastEmittedResources;
+	}, [clerk, getInitialState]), getInitialState);
+	return (0, react.useMemo)(() => {
+		if (!state) return defaultDerivedInitialState;
+		return authStateFromFull(isInitialState(state) ? (0, _clerk_shared_deriveState.deriveState)(false, {}, state) : (0, _clerk_shared_deriveState.deriveState)(true, state, void 0));
+	}, [state]);
+}
+function authStateFromFull(derivedState) {
+	return {
+		sessionId: derivedState.sessionId,
+		sessionStatus: derivedState.sessionStatus,
+		sessionClaims: derivedState.sessionClaims,
+		userId: derivedState.userId,
+		actor: derivedState.actor,
+		orgId: derivedState.orgId,
+		orgRole: derivedState.orgRole,
+		orgSlug: derivedState.orgSlug,
+		orgPermissions: derivedState.orgPermissions,
+		factorVerificationAge: derivedState.factorVerificationAge
+	};
+}
+function isInitialState(state) {
+	return !("client" in state);
+}
+
+//#endregion
+//#region src/hooks/utils.ts
+/**
+* @internal
+*/
+const clerkLoaded = (isomorphicClerk) => {
+	return new Promise((resolve) => {
+		const handler = (status) => {
+			if (["ready", "degraded"].includes(status)) {
+				resolve();
+				isomorphicClerk.off("status", handler);
+			}
+		};
+		isomorphicClerk.on("status", handler, { notify: true });
+	});
+};
+/**
+* @internal
+*/
+const createGetToken = (isomorphicClerk) => {
+	return async (options) => {
+		if (!(0, _clerk_shared_browser.inBrowser)()) throw new _clerk_shared_error.ClerkRuntimeError("useAuth().getToken() can only be used in browser environments. To access auth data server-side, see the Auth object reference doc: https://clerk.com/docs/reference/backend/types/auth-object", { code: "clerk_runtime_not_browser" });
+		await clerkLoaded(isomorphicClerk);
+		if (!isomorphicClerk.session) return null;
+		return isomorphicClerk.session.getToken(options);
+	};
+};
+/**
+* @internal
+*/
+const createSignOut = (isomorphicClerk) => {
+	return async (...args) => {
+		await clerkLoaded(isomorphicClerk);
+		return isomorphicClerk.signOut(...args);
+	};
+};
+
+//#endregion
+//#region src/hooks/useAuth.ts
+/**
+* The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
+*
+* > [!NOTE]
+* > To access auth data server-side, see the [`Auth` object reference doc](https://clerk.com/docs/reference/backend/types/auth-object).
+*
+* <If sdk="nextjs">
+* By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](https://clerk.com/docs/guides/development/rendering-modes) for more information, including code examples.
+* </If>
+*
+* @unionReturnHeadings
+* ["Loading", "Signed out", "Signed in (no active organization)", "Signed in (with active organization)"]
+*
+* @param [options] - An object containing options for the `useAuth()` hook. `treatPendingAsSignedOut` indicates whether pending sessions are considered as signed out or not. Defaults to `true`.
+*
+* @function
+*
+* @example
+*
+* The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
+*
+* <Tabs items='React,Next.js'>
+* <Tab>
+*
+* ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+* import { useAuth } from '@clerk/react'
+*
+* export default function ExternalDataPage() {
+*   const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+*
+*   const fetchExternalData = async () => {
+*     const token = await getToken()
+*
+*     // Fetch data from an external API
+*     const response = await fetch('https://api.example.com/data', {
+*       headers: {
+*         Authorization: `Bearer ${token}`,
+*       },
+*     })
+*
+*     return response.json()
+*   }
+*
+*   if (!isLoaded) {
+*     return <div>Loading...</div>
+*   }
+*
+*   if (!isSignedIn) {
+*     return <div>Sign in to view this page</div>
+*   }
+*
+*   return (
+*     <div>
+*       <p>
+*         Hello, {userId}! Your current active session is {sessionId}.
+*       </p>
+*       <button onClick={fetchExternalData}>Fetch Data</button>
+*     </div>
+*   )
+* }
+* ```
+*
+* </Tab>
+* <Tab>
+*
+* {@include ../../docs/use-auth.md#nextjs-01}
+*
+* </Tab>
+* </Tabs>
+*/
+const useAuth = (options = {}) => {
+	require_useAssertWrappedByClerkProvider.useAssertWrappedByClerkProvider("useAuth");
+	const { treatPendingAsSignedOut } = options ?? {};
+	const authState = useAuthBase();
+	const isomorphicClerk = require_useAssertWrappedByClerkProvider.useIsomorphicClerkContext();
+	const getToken = (0, react.useCallback)(createGetToken(isomorphicClerk), [isomorphicClerk]);
+	const signOut = (0, react.useCallback)(createSignOut(isomorphicClerk), [isomorphicClerk]);
+	isomorphicClerk.telemetry?.record((0, _clerk_shared_telemetry.eventMethodCalled)("useAuth", { treatPendingAsSignedOut }));
+	return useDerivedAuth({
+		...authState,
+		getToken,
+		signOut
+	}, { treatPendingAsSignedOut });
+};
+/**
+* A hook that derives and returns authentication state and utility functions based on the provided auth object.
+*
+* @param authObject - An object containing authentication-related properties and functions.
+*
+* @returns A derived authentication state with helper methods. If the authentication state is invalid, an error is thrown.
+*
+* @remarks
+* This hook inspects session, user, and organization information to determine the current authentication state.
+* It returns an object that includes various properties such as whether the state is loaded, if a user is signed in,
+* session and user identifiers, Organization Roles, and a `has` function for authorization checks.
+* Additionally, it provides `signOut` and `getToken` functions if applicable.
+*
+* @example
+* ```tsx
+* const {
+*   isLoaded,
+*   isSignedIn,
+*   userId,
+*   orgId,
+*   has,
+*   signOut,
+*   getToken
+* } = useDerivedAuth(authObject);
+* ```
+*/
+function useDerivedAuth(authObject, { treatPendingAsSignedOut = true } = {}) {
+	const { userId, orgId, orgRole, has, signOut, getToken, orgPermissions, factorVerificationAge, sessionClaims } = authObject ?? {};
+	const derivedHas = (0, react.useCallback)((params) => {
+		if (has) return has(params);
+		return (0, _clerk_shared_authorization.createCheckAuthorization)({
+			userId,
+			orgId,
+			orgRole,
+			orgPermissions,
+			factorVerificationAge,
+			features: sessionClaims?.fea || "",
+			plans: sessionClaims?.pla || ""
+		})(params);
+	}, [
+		has,
+		userId,
+		orgId,
+		orgRole,
+		orgPermissions,
+		factorVerificationAge,
+		sessionClaims
+	]);
+	const payload = (0, _clerk_shared_authorization.resolveAuthState)({
+		authObject: {
+			...authObject,
+			getToken,
+			signOut,
+			has: derivedHas
+		},
+		options: { treatPendingAsSignedOut }
+	});
+	if (!payload) return require_useAssertWrappedByClerkProvider.errorThrower.throw(invalidStateError);
+	return payload;
+}
+
+//#endregion
+//#region src/hooks/useEmailLink.ts
+function useEmailLink(resource) {
+	const { startEmailLinkFlow, cancelEmailLinkFlow } = react.default.useMemo(() => resource.createEmailLinkFlow(), [resource]);
+	react.default.useEffect(() => {
+		return cancelEmailLinkFlow;
+	}, []);
+	return {
+		startEmailLinkFlow,
+		cancelEmailLinkFlow
+	};
+}
+
+//#endregion
+//#region src/hooks/useClerkSignal.ts
+function useClerkSignal(signal) {
+	require_useAssertWrappedByClerkProvider.useAssertWrappedByClerkProvider("useClerkSignal");
+	const clerk = require_useAssertWrappedByClerkProvider.useIsomorphicClerkContext();
+	switch (signal) {
+		case "signIn":
+			clerk.telemetry?.record((0, _clerk_shared_telemetry.eventMethodCalled)("useSignIn", { apiVersion: "2025-11" }));
+			break;
+		case "signUp":
+			clerk.telemetry?.record((0, _clerk_shared_telemetry.eventMethodCalled)("useSignUp", { apiVersion: "2025-11" }));
+			break;
+		case "waitlist":
+			clerk.telemetry?.record((0, _clerk_shared_telemetry.eventMethodCalled)("useWaitlist", { apiVersion: "2025-11" }));
+			break;
+		default: break;
+	}
+	const subscribe = (0, react.useCallback)((callback) => {
+		if (!clerk.loaded) return () => {};
+		return clerk.__internal_state.__internal_effect(() => {
+			switch (signal) {
+				case "signIn":
+					clerk.__internal_state.signInSignal();
+					break;
+				case "signUp":
+					clerk.__internal_state.signUpSignal();
+					break;
+				case "waitlist":
+					clerk.__internal_state.waitlistSignal();
+					break;
+				default: throw new Error(`Unknown signal: ${signal}`);
+			}
+			callback();
+		});
+	}, [
+		clerk,
+		clerk.loaded,
+		clerk.__internal_state
+	]);
+	const getSnapshot = (0, react.useCallback)(() => {
+		switch (signal) {
+			case "signIn": return clerk.__internal_state.signInSignal();
+			case "signUp": return clerk.__internal_state.signUpSignal();
+			case "waitlist": return clerk.__internal_state.waitlistSignal();
+			default: throw new Error(`Unknown signal: ${signal}`);
+		}
+	}, [clerk.__internal_state]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+/**
+* This hook allows you to access the Signal-based `SignIn` resource.
+*
+* @example
+* import { useSignIn } from "@clerk/react";
+*
+* function SignInForm() {
+*   const { signIn, errors, fetchStatus } = useSignIn();
+*   //
+* }
+*/
+const useSignIn = () => {
+	return useClerkSignal("signIn");
+};
+/**
+* This hook allows you to access the Signal-based `SignUp` resource.
+*
+* @example
+* import { useSignUp } from "@clerk/react";
+*
+* function SignUpForm() {
+*   const { signUp, errors, fetchStatus } = useSignUp();
+*   //
+* }
+*/
+const useSignUp = () => {
+	return useClerkSignal("signUp");
+};
+/**
+* This hook allows you to access the Signal-based `Waitlist` resource.
+*
+* @example
+* import { useWaitlist } from "@clerk/react";
+*
+* function WaitlistForm() {
+*   const { waitlist, errors, fetchStatus } = useWaitlist();
+*   //
+* }
+*/
+function useWaitlist() {
+	return useClerkSignal("waitlist");
+}
+
+//#endregion
+Object.defineProperty(exports, 'APIKeys', {
+  enumerable: true,
+  get: function () {
+    return APIKeys;
+  }
+});
+Object.defineProperty(exports, 'CreateOrganization', {
+  enumerable: true,
+  get: function () {
+    return CreateOrganization;
+  }
+});
+Object.defineProperty(exports, 'GoogleOneTap', {
+  enumerable: true,
+  get: function () {
+    return GoogleOneTap;
+  }
+});
+Object.defineProperty(exports, 'OAuthConsent', {
+  enumerable: true,
+  get: function () {
+    return OAuthConsent;
+  }
+});
+Object.defineProperty(exports, 'OrganizationList', {
+  enumerable: true,
+  get: function () {
+    return OrganizationList;
+  }
+});
+Object.defineProperty(exports, 'OrganizationProfile', {
+  enumerable: true,
+  get: function () {
+    return OrganizationProfile;
+  }
+});
+Object.defineProperty(exports, 'OrganizationSwitcher', {
+  enumerable: true,
+  get: function () {
+    return OrganizationSwitcher;
+  }
+});
+Object.defineProperty(exports, 'PricingTable', {
+  enumerable: true,
+  get: function () {
+    return PricingTable;
+  }
+});
+Object.defineProperty(exports, 'SignIn', {
+  enumerable: true,
+  get: function () {
+    return SignIn;
+  }
+});
+Object.defineProperty(exports, 'SignUp', {
+  enumerable: true,
+  get: function () {
+    return SignUp;
+  }
+});
+Object.defineProperty(exports, 'TaskChooseOrganization', {
+  enumerable: true,
+  get: function () {
+    return TaskChooseOrganization;
+  }
+});
+Object.defineProperty(exports, 'TaskResetPassword', {
+  enumerable: true,
+  get: function () {
+    return TaskResetPassword;
+  }
+});
+Object.defineProperty(exports, 'TaskSetupMFA', {
+  enumerable: true,
+  get: function () {
+    return TaskSetupMFA;
+  }
+});
+Object.defineProperty(exports, 'UserAvatar', {
+  enumerable: true,
+  get: function () {
+    return UserAvatar;
+  }
+});
+Object.defineProperty(exports, 'UserButton', {
+  enumerable: true,
+  get: function () {
+    return UserButton;
+  }
+});
+Object.defineProperty(exports, 'UserProfile', {
+  enumerable: true,
+  get: function () {
+    return UserProfile;
+  }
+});
+Object.defineProperty(exports, 'Waitlist', {
+  enumerable: true,
+  get: function () {
+    return Waitlist;
+  }
+});
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});
+Object.defineProperty(exports, 'assertSingleChild', {
+  enumerable: true,
+  get: function () {
+    return assertSingleChild;
+  }
+});
+Object.defineProperty(exports, 'incompatibleRoutingWithPathProvidedError', {
+  enumerable: true,
+  get: function () {
+    return incompatibleRoutingWithPathProvidedError;
+  }
+});
+Object.defineProperty(exports, 'isConstructor', {
+  enumerable: true,
+  get: function () {
+    return isConstructor;
+  }
+});
+Object.defineProperty(exports, 'mergeWithEnv', {
+  enumerable: true,
+  get: function () {
+    return mergeWithEnv;
+  }
+});
+Object.defineProperty(exports, 'multipleClerkProvidersError', {
+  enumerable: true,
+  get: function () {
+    return multipleClerkProvidersError;
+  }
+});
+Object.defineProperty(exports, 'noPathProvidedError', {
+  enumerable: true,
+  get: function () {
+    return noPathProvidedError;
+  }
+});
+Object.defineProperty(exports, 'normalizeWithDefaultValue', {
+  enumerable: true,
+  get: function () {
+    return normalizeWithDefaultValue;
+  }
+});
+Object.defineProperty(exports, 'safeExecute', {
+  enumerable: true,
+  get: function () {
+    return safeExecute;
+  }
+});
+Object.defineProperty(exports, 'unsupportedNonBrowserDomainOrProxyUrlFunction', {
+  enumerable: true,
+  get: function () {
+    return unsupportedNonBrowserDomainOrProxyUrlFunction;
+  }
+});
+Object.defineProperty(exports, 'useAuth', {
+  enumerable: true,
+  get: function () {
+    return useAuth;
+  }
+});
+Object.defineProperty(exports, 'useDerivedAuth', {
+  enumerable: true,
+  get: function () {
+    return useDerivedAuth;
+  }
+});
+Object.defineProperty(exports, 'useEmailLink', {
+  enumerable: true,
+  get: function () {
+    return useEmailLink;
+  }
+});
+Object.defineProperty(exports, 'useSignIn', {
+  enumerable: true,
+  get: function () {
+    return useSignIn;
+  }
+});
+Object.defineProperty(exports, 'useSignUp', {
+  enumerable: true,
+  get: function () {
+    return useSignUp;
+  }
+});
+Object.defineProperty(exports, 'useWaitlist', {
+  enumerable: true,
+  get: function () {
+    return useWaitlist;
+  }
+});
+Object.defineProperty(exports, 'withClerk', {
+  enumerable: true,
+  get: function () {
+    return withClerk;
+  }
+});
+Object.defineProperty(exports, 'withMaxAllowedInstancesGuard', {
+  enumerable: true,
+  get: function () {
+    return withMaxAllowedInstancesGuard;
+  }
+});
+//# sourceMappingURL=hooks-CBghYU21.cjs.map