@clerk/react 6.9.0 → 6.9.1-canary.v20260610190754

package/dist/hooks-BiY5Zgpp.mjs

@@ -0,0 +1,1369 @@
+import { n as useIsomorphicClerkContext, r as errorThrower, t as useAssertWrappedByClerkProvider$1 } from "./useAssertWrappedByClerkProvider-GaNwZpWo.mjs";
+import React, { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { ClerkRuntimeError } from "@clerk/shared/error";
+import { logErrorInDevMode } from "@clerk/shared/utils";
+import { getEnvVariable } from "@clerk/shared/getEnvVariable";
+import { without } from "@clerk/shared/object";
+import { __experimental_CheckoutProvider, __experimental_PaymentElement, __experimental_PaymentElementProvider, __experimental_useCheckout, __experimental_usePaymentElement, isDeeplyEqual, useAPIKeys, useClerk, useClerkInstanceContext, useInitialStateContext, useOAuthConsent as useOAuthConsent$1, useOrganization, useOrganizationCreationDefaults, useOrganizationList, usePortalRoot, useReverification, useSession, useSessionList, useUser } from "@clerk/shared/react";
+import { createCheckAuthorization, resolveAuthState } from "@clerk/shared/authorization";
+import { eventMethodCalled } from "@clerk/shared/telemetry";
+import { deriveState } from "@clerk/shared/deriveState";
+import { inBrowser } from "@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.Children.only(children);
+	} catch {
+		const childArray = React.Children.toArray(children);
+		if (childArray.length === 1 && React.isValidElement(childArray[0])) return childArray[0];
+		return errorThrower.throw(multipleChildrenInButtonComponent(name));
+	}
+};
+const normalizeWithDefaultValue = (children, defaultText) => {
+	if (!children) children = defaultText;
+	if (typeof children === "string") children = /* @__PURE__ */ React.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 getEnvVariable(`VITE_${name}`) || 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.useEffect(() => {
+		const count = counts.get(name) || 0;
+		if (count == maxCount) return 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.createElement(WrappedComponent, props);
+	};
+	Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
+	return Hoc;
+}
+
+//#endregion
+//#region src/utils/useCustomElementPortal.tsx
+const useCustomElementPortal = (elements) => {
+	const [nodeMap, setNodeMap] = useState(/* @__PURE__ */ new Map());
+	const nodeMapRef = useRef(nodeMap);
+	const elementsRef = useRef(/* @__PURE__ */ new Map());
+	const portalsRef = 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 ? 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.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.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.Children.forEach(children, (child) => {
+		if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
+			if (child && !allowForAnyChildren) 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 {
+			logErrorInDevMode(customPageWrongProps(componentName));
+			return;
+		}
+		if (isThatComponent(child, LinkComponent)) if (isExternalLink$1(props)) validChildren.push({
+			label,
+			labelIcon,
+			url,
+			portalId: getCustomPagePortalId("link", props, childKey, portalIdCounts)
+		});
+		else {
+			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.Children.forEach(children, (child) => {
+		if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
+			if (child && !allowForAnyChildren) logErrorInDevMode(userButtonIgnoredComponent);
+			return;
+		}
+		if (isThatComponent(child, UserProfileLinkComponent) || isThatComponent(child, UserProfilePageComponent)) return;
+		const { props } = child;
+		React.Children.forEach(props.children, (child) => {
+			if (!isThatComponent(child, MenuActionComponent) && !isThatComponent(child, MenuLinkComponent)) {
+				if (child) 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 {
+					logErrorInDevMode("Custom menu item must have either onClick or open property");
+					return;
+				}
+			} else {
+				logErrorInDevMode(userButtonMenuItemsActionWrongsProps);
+				return;
+			}
+			if (isThatComponent(child, MenuLinkComponent)) if (isExternalLink(props)) validChildren.push({
+				label,
+				labelIcon,
+				href,
+				portalId: getCustomMenuItemPortalId("link", props, childKey, portalIdCounts)
+			});
+			else {
+				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 = useRef();
+	const [status, setStatus] = useState("rendering");
+	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.PureComponent {
+	constructor(..._args) {
+		super(..._args);
+		this.rootRef = React.createRef();
+	}
+	componentDidUpdate(_prevProps) {
+		if (!isMountProps(_prevProps) || !isMountProps(this.props)) return;
+		const prevProps = without(_prevProps.props || {}, "customPages", "customMenuItems", "children");
+		const newProps = 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 (!isDeeplyEqual(prevProps, newProps) || !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.createElement(React.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ React.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) => {
+		useAssertWrappedByClerkProvider$1(displayName || "withClerk");
+		const clerk = useIsomorphicClerkContext();
+		const getContainer = usePortalRoot();
+		if (!clerk.loaded && !options?.renderWhileLoading) return null;
+		return /* @__PURE__ */ React.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.createElement(React.Fragment, null, props?.customPagesPortals?.map(({ key, portal }) => createElement(portal, { key })), props?.customMenuItemsPortals?.map(({ key, portal }) => 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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountSignUp,
+		unmount: clerk.unmountSignUp,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "SignUp",
+	renderWhileLoading: true
+});
+function UserProfilePage({ children }) {
+	logErrorInDevMode(userProfilePageRenderedError);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+function UserProfileLink({ children }) {
+	logErrorInDevMode(userProfileLinkRenderedError);
+	return /* @__PURE__ */ React.createElement(React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountUserProfile,
+		unmount: clerk.unmountUserProfile,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			customPages
+		},
+		rootProps: rendererRootProps
+	}, /* @__PURE__ */ React.createElement(CustomPortalsRenderer, { customPagesPortals })));
+}, {
+	component: "UserProfile",
+	renderWhileLoading: true
+});
+const UserProfile = Object.assign(_UserProfile, {
+	Page: UserProfilePage,
+	Link: UserProfileLink
+});
+const UserButtonContext = 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.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		component,
+		...passableProps,
+		hideRootHtmlElement: !!props.__experimental_asProvider,
+		rootProps: rendererRootProps
+	}, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ React.createElement(CustomPortalsRenderer, portalProps)));
+}, {
+	component: "UserButton",
+	renderWhileLoading: true
+});
+function MenuItems({ children }) {
+	logErrorInDevMode(userButtonMenuItemsRenderedError);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+function MenuAction({ children }) {
+	logErrorInDevMode(userButtonMenuActionRenderedError);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+function MenuLink({ children }) {
+	logErrorInDevMode(userButtonMenuLinkRenderedError);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+function UserButtonOutlet(outletProps) {
+	const providerProps = useContext(UserButtonContext);
+	const portalProps = {
+		...providerProps,
+		props: {
+			...providerProps.props,
+			...outletProps
+		}
+	};
+	return /* @__PURE__ */ React.createElement(ClerkHostRenderer, portalProps);
+}
+const UserButton = Object.assign(_UserButton, {
+	UserProfilePage,
+	UserProfileLink,
+	MenuItems,
+	Action: MenuAction,
+	Link: MenuLink,
+	__experimental_Outlet: UserButtonOutlet
+});
+function OrganizationProfilePage({ children }) {
+	logErrorInDevMode(organizationProfilePageRenderedError);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+function OrganizationProfileLink({ children }) {
+	logErrorInDevMode(organizationProfileLinkRenderedError);
+	return /* @__PURE__ */ React.createElement(React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountOrganizationProfile,
+		unmount: clerk.unmountOrganizationProfile,
+		updateProps: clerk.__internal_updateProps,
+		props: {
+			...props,
+			customPages
+		},
+		rootProps: rendererRootProps
+	}, /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		component,
+		mount: clerk.mountCreateOrganization,
+		unmount: clerk.unmountCreateOrganization,
+		updateProps: clerk.__internal_updateProps,
+		props,
+		rootProps: rendererRootProps
+	}));
+}, {
+	component: "CreateOrganization",
+	renderWhileLoading: true
+});
+const OrganizationSwitcherContext = 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.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ React.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.createElement(ClerkHostRenderer, {
+		...passableProps,
+		hideRootHtmlElement: !!props.__experimental_asProvider
+	}, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ React.createElement(CustomPortalsRenderer, { customPagesPortals }))));
+}, {
+	component: "OrganizationSwitcher",
+	renderWhileLoading: true
+});
+function OrganizationSwitcherOutlet(outletProps) {
+	const providerProps = useContext(OrganizationSwitcherContext);
+	const portalProps = {
+		...providerProps,
+		props: {
+			...providerProps.props,
+			...outletProps
+		}
+	};
+	return /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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.createElement(React.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React.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 = useClerkInstanceContext();
+	const initialState = useInitialStateContext();
+	const getInitialState = useCallback(() => initialState, [initialState]);
+	const state = useSyncExternalStore(useCallback((callback) => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]), useCallback(() => {
+		if (!clerk.loaded || !clerk.__internal_lastEmittedResources) return getInitialState();
+		return clerk.__internal_lastEmittedResources;
+	}, [clerk, getInitialState]), getInitialState);
+	return useMemo(() => {
+		if (!state) return defaultDerivedInitialState;
+		return authStateFromFull(isInitialState(state) ? deriveState(false, {}, state) : 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 (!inBrowser()) throw new 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 = {}) => {
+	useAssertWrappedByClerkProvider$1("useAuth");
+	const { treatPendingAsSignedOut } = options ?? {};
+	const authState = useAuthBase();
+	const isomorphicClerk = useIsomorphicClerkContext();
+	const getToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);
+	const signOut = useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);
+	isomorphicClerk.telemetry?.record(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 = useCallback((params) => {
+		if (has) return has(params);
+		return createCheckAuthorization({
+			userId,
+			orgId,
+			orgRole,
+			orgPermissions,
+			factorVerificationAge,
+			features: sessionClaims?.fea || "",
+			plans: sessionClaims?.pla || ""
+		})(params);
+	}, [
+		has,
+		userId,
+		orgId,
+		orgRole,
+		orgPermissions,
+		factorVerificationAge,
+		sessionClaims
+	]);
+	const payload = resolveAuthState({
+		authObject: {
+			...authObject,
+			getToken,
+			signOut,
+			has: derivedHas
+		},
+		options: { treatPendingAsSignedOut }
+	});
+	if (!payload) return errorThrower.throw(invalidStateError);
+	return payload;
+}
+
+//#endregion
+//#region src/hooks/useEmailLink.ts
+function useEmailLink(resource) {
+	const { startEmailLinkFlow, cancelEmailLinkFlow } = React.useMemo(() => resource.createEmailLinkFlow(), [resource]);
+	React.useEffect(() => {
+		return cancelEmailLinkFlow;
+	}, []);
+	return {
+		startEmailLinkFlow,
+		cancelEmailLinkFlow
+	};
+}
+
+//#endregion
+//#region src/hooks/useClerkSignal.ts
+function useClerkSignal(signal) {
+	useAssertWrappedByClerkProvider$1("useClerkSignal");
+	const clerk = useIsomorphicClerkContext();
+	switch (signal) {
+		case "signIn":
+			clerk.telemetry?.record(eventMethodCalled("useSignIn", { apiVersion: "2025-11" }));
+			break;
+		case "signUp":
+			clerk.telemetry?.record(eventMethodCalled("useSignUp", { apiVersion: "2025-11" }));
+			break;
+		case "waitlist":
+			clerk.telemetry?.record(eventMethodCalled("useWaitlist", { apiVersion: "2025-11" }));
+			break;
+		default: break;
+	}
+	const subscribe = 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 = 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 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
+export { SignIn as A, withMaxAllowedInstancesGuard as B, CreateOrganization as C, OrganizationProfile as D, OrganizationList as E, UserAvatar as F, safeExecute as G, mergeWithEnv as H, UserButton as I, noPathProvidedError as J, incompatibleRoutingWithPathProvidedError as K, UserProfile as L, TaskChooseOrganization as M, TaskResetPassword as N, OrganizationSwitcher as O, TaskSetupMFA as P, Waitlist as R, APIKeys as S, OAuthConsent as T, assertSingleChild as U, isConstructor as V, normalizeWithDefaultValue as W, unsupportedNonBrowserDomainOrProxyUrlFunction as Y, useSignUp as _, __experimental_usePaymentElement as a, useAuth as b, useOAuthConsent$1 as c, useOrganizationList as d, useReverification as f, useSignIn as g, useUser as h, __experimental_useCheckout as i, SignUp as j, PricingTable as k, useOrganization as l, useSessionList as m, __experimental_PaymentElement as n, useAPIKeys as o, useSession as p, multipleClerkProvidersError as q, __experimental_PaymentElementProvider as r, useClerk as s, __experimental_CheckoutProvider as t, useOrganizationCreationDefaults as u, useWaitlist as v, GoogleOneTap as w, useDerivedAuth as x, useEmailLink as y, withClerk as z };
+//# sourceMappingURL=hooks-BiY5Zgpp.mjs.map