@clerk/clerk-react/dist/index.mjs.map

Clerk React library

{"version":3,"sources":["../src/polyfills.ts","../src/index.ts","../src/components/SignInButton.tsx","../src/components/SignInWithMetamaskButton.tsx","../src/components/SignOutButton.tsx","../src/components/SignUpButton.tsx","../src/contexts/ClerkProvider.tsx","../src/contexts/ClerkContextProvider.tsx","../src/isomorphicClerk.ts","../src/stateProxy.ts"],"sourcesContent":["/**\n * Vite does not define `global` by default\n * One workaround is to use the `define` config prop\n * https://vitejs.dev/config/#define\n * We are solving this in the SDK level to reduce setup steps.\n */\nif (typeof window !== 'undefined' && !window.global) {\n  window.global = typeof global === 'undefined' ? window : global;\n}\n\nexport {};\n","import './polyfills';\n\nimport { setClerkJsLoadingErrorPackageName } from '@clerk/shared/loadClerkJsScript';\n\nimport { setErrorThrowerOptions } from './errors/errorThrower';\n\nexport * from './components';\nexport * from './contexts';\n\nexport * from './hooks';\nexport type { BrowserClerk, ClerkProp, HeadlessBrowserClerk, ClerkProviderProps } from './types';\n\nsetErrorThrowerOptions({ packageName: PACKAGE_NAME });\nsetClerkJsLoadingErrorPackageName(PACKAGE_NAME);\n","import type { SignInButtonProps, SignInProps } from '@clerk/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignInButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {\n    const {\n      signUpFallbackRedirectUrl,\n      forceRedirectUrl,\n      fallbackRedirectUrl,\n      signUpForceRedirectUrl,\n      mode,\n      initialValues,\n      withSignUp,\n      oauthFlow,\n      ...rest\n    } = props;\n    children = normalizeWithDefaultValue(children, 'Sign in');\n    const child = assertSingleChild(children)('SignInButton');\n\n    const clickHandler = () => {\n      const opts: SignInProps = {\n        forceRedirectUrl,\n        fallbackRedirectUrl,\n        signUpFallbackRedirectUrl,\n        signUpForceRedirectUrl,\n        initialValues,\n        withSignUp,\n        oauthFlow,\n      };\n\n      if (mode === 'modal') {\n        return clerk.openSignIn({ ...opts, appearance: props.appearance });\n      }\n      return clerk.redirectToSignIn({\n        ...opts,\n        signInFallbackRedirectUrl: fallbackRedirectUrl,\n        signInForceRedirectUrl: forceRedirectUrl,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SignInButton', renderWhileLoading: true },\n);\n","import React from 'react';\n\nimport type { SignInWithMetamaskButtonProps, WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignInWithMetamaskButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<SignInWithMetamaskButtonProps>) => {\n    const { redirectUrl, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Sign in with Metamask');\n    const child = assertSingleChild(children)('SignInWithMetamaskButton');\n\n    // TODO: Properly fix this code\n    // eslint-disable-next-line @typescript-eslint/require-await\n    const clickHandler = async () => {\n      async function authenticate() {\n        await clerk.authenticateWithMetamask({ redirectUrl: redirectUrl || undefined });\n      }\n      void authenticate();\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      await safeExecute((child as any).props.onClick)(e);\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SignInWithMetamask', renderWhileLoading: true },\n);\n","import type { SignOutOptions } from '@clerk/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport type SignOutButtonProps = {\n  redirectUrl?: string;\n  signOutOptions?: SignOutOptions;\n  children?: React.ReactNode;\n};\n\nexport const SignOutButton = withClerk(\n  ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {\n    const { redirectUrl = '/', signOutOptions, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Sign out');\n    const child = assertSingleChild(children)('SignOutButton');\n\n    const clickHandler = () => clerk.signOut({ redirectUrl, ...signOutOptions });\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      await safeExecute((child as any).props.onClick)(e);\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SignOutButton', renderWhileLoading: true },\n);\n","import type { SignUpButtonProps, SignUpProps } from '@clerk/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignUpButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {\n    const {\n      fallbackRedirectUrl,\n      forceRedirectUrl,\n      signInFallbackRedirectUrl,\n      signInForceRedirectUrl,\n      mode,\n      initialValues,\n      oauthFlow,\n      ...rest\n    } = props;\n\n    children = normalizeWithDefaultValue(children, 'Sign up');\n    const child = assertSingleChild(children)('SignUpButton');\n\n    const clickHandler = () => {\n      const opts: SignUpProps = {\n        fallbackRedirectUrl,\n        forceRedirectUrl,\n        signInFallbackRedirectUrl,\n        signInForceRedirectUrl,\n        initialValues,\n        oauthFlow,\n      };\n\n      if (mode === 'modal') {\n        return clerk.openSignUp({\n          ...opts,\n          appearance: props.appearance,\n          unsafeMetadata: props.unsafeMetadata,\n        });\n      }\n\n      return clerk.redirectToSignUp({\n        ...opts,\n        signUpFallbackRedirectUrl: fallbackRedirectUrl,\n        signUpForceRedirectUrl: forceRedirectUrl,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SignUpButton', renderWhileLoading: true },\n);\n","import { isPublishableKey } from '@clerk/shared/keys';\nimport React from 'react';\n\nimport { errorThrower } from '../errors/errorThrower';\nimport { multipleClerkProvidersError } from '../errors/messages';\nimport type { ClerkProviderProps } from '../types';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { ClerkContextProvider } from './ClerkContextProvider';\n\nfunction ClerkProviderBase(props: ClerkProviderProps) {\n  const { initialState, children, __internal_bypassMissingPublishableKey, ...restIsomorphicClerkOptions } = props;\n  const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;\n\n  if (!userInitialisedClerk && !__internal_bypassMissingPublishableKey) {\n    if (!publishableKey) {\n      errorThrower.throwMissingPublishableKeyError();\n    } else if (publishableKey && !isPublishableKey(publishableKey)) {\n      errorThrower.throwInvalidPublishableKeyError({ key: publishableKey });\n    }\n  }\n\n  return (\n    <ClerkContextProvider\n      initialState={initialState}\n      isomorphicClerkOptions={restIsomorphicClerkOptions}\n    >\n      {children}\n    </ClerkContextProvider>\n  );\n}\n\nconst ClerkProvider = withMaxAllowedInstancesGuard(ClerkProviderBase, 'ClerkProvider', multipleClerkProvidersError);\n\nClerkProvider.displayName = 'ClerkProvider';\n\nexport { ClerkProvider };\n","import { deriveState } from '@clerk/shared/deriveState';\nimport {\n  __experimental_CheckoutProvider as CheckoutProvider,\n  ClientContext,\n  OrganizationProvider,\n  SessionContext,\n  UserContext,\n} from '@clerk/shared/react';\nimport type { ClientResource, InitialState, Resources } from '@clerk/types';\nimport React from 'react';\n\nimport { IsomorphicClerk } from '../isomorphicClerk';\nimport type { IsomorphicClerkOptions } from '../types';\nimport { AuthContext } from './AuthContext';\nimport { IsomorphicClerkContext } from './IsomorphicClerkContext';\n\ntype ClerkContextProvider = {\n  isomorphicClerkOptions: IsomorphicClerkOptions;\n  initialState: InitialState | undefined;\n  children: React.ReactNode;\n};\n\nexport type ClerkContextProviderState = Resources;\n\nexport function ClerkContextProvider(props: ClerkContextProvider) {\n  const { isomorphicClerkOptions, initialState, children } = props;\n  const { isomorphicClerk: clerk, clerkStatus } = useLoadedIsomorphicClerk(isomorphicClerkOptions);\n\n  const [state, setState] = React.useState<ClerkContextProviderState>({\n    client: clerk.client as ClientResource,\n    session: clerk.session,\n    user: clerk.user,\n    organization: clerk.organization,\n  });\n\n  React.useEffect(() => {\n    return clerk.addListener(e => setState({ ...e }));\n  }, []);\n\n  const derivedState = deriveState(clerk.loaded, state, initialState);\n  const clerkCtx = React.useMemo(\n    () => ({ value: clerk }),\n    [\n      // Only update the clerk reference on status change\n      clerkStatus,\n    ],\n  );\n  const clientCtx = React.useMemo(() => ({ value: state.client }), [state.client]);\n\n  const {\n    sessionId,\n    sessionStatus,\n    sessionClaims,\n    session,\n    userId,\n    user,\n    orgId,\n    actor,\n    organization,\n    orgRole,\n    orgSlug,\n    orgPermissions,\n    factorVerificationAge,\n  } = derivedState;\n\n  const authCtx = React.useMemo(() => {\n    const value = {\n      sessionId,\n      sessionStatus,\n      sessionClaims,\n      userId,\n      actor,\n      orgId,\n      orgRole,\n      orgSlug,\n      orgPermissions,\n      factorVerificationAge,\n    };\n    return { value };\n  }, [sessionId, sessionStatus, userId, actor, orgId, orgRole, orgSlug, factorVerificationAge, sessionClaims?.__raw]);\n\n  const sessionCtx = React.useMemo(() => ({ value: session }), [sessionId, session]);\n  const userCtx = React.useMemo(() => ({ value: user }), [userId, user]);\n  const organizationCtx = React.useMemo(() => {\n    const value = {\n      organization: organization,\n    };\n    return { value };\n  }, [orgId, organization]);\n\n  return (\n    // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk\n    <IsomorphicClerkContext.Provider value={clerkCtx}>\n      <ClientContext.Provider value={clientCtx}>\n        <SessionContext.Provider value={sessionCtx}>\n          <OrganizationProvider {...organizationCtx.value}>\n            <AuthContext.Provider value={authCtx}>\n              <UserContext.Provider value={userCtx}>\n                <CheckoutProvider\n                  // @ts-expect-error - value is not used\n                  value={undefined}\n                >\n                  {children}\n                </CheckoutProvider>\n              </UserContext.Provider>\n            </AuthContext.Provider>\n          </OrganizationProvider>\n        </SessionContext.Provider>\n      </ClientContext.Provider>\n    </IsomorphicClerkContext.Provider>\n  );\n}\n\nconst useLoadedIsomorphicClerk = (options: IsomorphicClerkOptions) => {\n  const isomorphicClerkRef = React.useRef(IsomorphicClerk.getOrCreateInstance(options));\n  const [clerkStatus, setClerkStatus] = React.useState(isomorphicClerkRef.current.status);\n\n  React.useEffect(() => {\n    void isomorphicClerkRef.current.__unstable__updateProps({ appearance: options.appearance });\n  }, [options.appearance]);\n\n  React.useEffect(() => {\n    void isomorphicClerkRef.current.__unstable__updateProps({ options });\n  }, [options.localization]);\n\n  React.useEffect(() => {\n    isomorphicClerkRef.current.on('status', setClerkStatus);\n    return () => {\n      if (isomorphicClerkRef.current) {\n        isomorphicClerkRef.current.off('status', setClerkStatus);\n      }\n      IsomorphicClerk.clearInstance();\n    };\n  }, []);\n\n  return { isomorphicClerk: isomorphicClerkRef.current, clerkStatus };\n};\n","import { inBrowser } from '@clerk/shared/browser';\nimport { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';\nimport { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';\nimport { handleValueOrFn } from '@clerk/shared/utils';\nimport type {\n  __internal_CheckoutProps,\n  __internal_OAuthConsentProps,\n  __internal_PlanDetailsProps,\n  __internal_SubscriptionDetailsProps,\n  __internal_UserVerificationModalProps,\n  __internal_UserVerificationProps,\n  APIKeysNamespace,\n  APIKeysProps,\n  AuthenticateWithBaseParams,\n  AuthenticateWithCoinbaseWalletParams,\n  AuthenticateWithGoogleOneTapParams,\n  AuthenticateWithMetamaskParams,\n  AuthenticateWithOKXWalletParams,\n  BillingNamespace,\n  Clerk,\n  ClerkAuthenticateWithWeb3Params,\n  ClerkOptions,\n  ClerkStatus,\n  ClientResource,\n  CreateOrganizationParams,\n  CreateOrganizationProps,\n  DomainOrProxyUrl,\n  GoogleOneTapProps,\n  HandleEmailLinkVerificationParams,\n  HandleOAuthCallbackParams,\n  JoinWaitlistParams,\n  ListenerCallback,\n  LoadedClerk,\n  OrganizationListProps,\n  OrganizationProfileProps,\n  OrganizationResource,\n  OrganizationSwitcherProps,\n  PricingTableProps,\n  RedirectOptions,\n  SetActiveParams,\n  SignInProps,\n  SignInRedirectOptions,\n  SignInResource,\n  SignUpProps,\n  SignUpRedirectOptions,\n  SignUpResource,\n  State,\n  TaskChooseOrganizationProps,\n  TasksRedirectOptions,\n  UnsubscribeCallback,\n  UserAvatarProps,\n  UserButtonProps,\n  UserProfileProps,\n  WaitlistProps,\n  WaitlistResource,\n  Without,\n} from '@clerk/types';\n\nimport { errorThrower } from './errors/errorThrower';\nimport { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors/messages';\nimport { StateProxy } from './stateProxy';\nimport type {\n  BrowserClerk,\n  BrowserClerkConstructor,\n  ClerkProp,\n  HeadlessBrowserClerk,\n  HeadlessBrowserClerkConstructor,\n  IsomorphicClerkOptions,\n} from './types';\nimport { isConstructor } from './utils';\n\nif (typeof globalThis.__BUILD_DISABLE_RHC__ === 'undefined') {\n  globalThis.__BUILD_DISABLE_RHC__ = false;\n}\n\nconst SDK_METADATA = {\n  name: PACKAGE_NAME,\n  version: PACKAGE_VERSION,\n  environment: process.env.NODE_ENV,\n};\n\nexport interface Global {\n  Clerk?: HeadlessBrowserClerk | BrowserClerk;\n}\n\ndeclare const global: Global;\n\ntype GenericFunction<TArgs = never> = (...args: TArgs[]) => unknown;\n\ntype MethodName<T> = {\n  [P in keyof T]: T[P] extends GenericFunction ? P : never;\n}[keyof T];\n\ntype MethodCallback = () => Promise<unknown> | unknown;\n\ntype WithVoidReturn<F extends (...args: any) => any> = (\n  ...args: Parameters<F>\n) => ReturnType<F> extends Promise<infer T> ? Promise<T | void> : ReturnType<F> | void;\ntype WithVoidReturnFunctions<T> = {\n  [K in keyof T]: T[K] extends (...args: any) => any ? WithVoidReturn<T[K]> : T[K];\n};\n\ntype IsomorphicLoadedClerk = Without<\n  WithVoidReturnFunctions<LoadedClerk>,\n  | 'client'\n  | '__internal_addNavigationListener'\n  | '__internal_getCachedResources'\n  | '__internal_reloadInitialResources'\n  | 'billing'\n  | 'apiKeys'\n  | '__internal_setActiveInProgress'\n> & {\n  client: ClientResource | undefined;\n  billing: BillingNamespace | undefined;\n  apiKeys: APIKeysNamespace | undefined;\n};\n\nexport class IsomorphicClerk implements IsomorphicLoadedClerk {\n  private readonly mode: 'browser' | 'server';\n  private readonly options: IsomorphicClerkOptions;\n  private readonly Clerk: ClerkProp;\n  private clerkjs: BrowserClerk | HeadlessBrowserClerk | null = null;\n  private preopenOneTap?: null | GoogleOneTapProps = null;\n  private preopenUserVerification?: null | __internal_UserVerificationProps = null;\n  private preopenSignIn?: null | SignInProps = null;\n  private preopenCheckout?: null | __internal_CheckoutProps = null;\n  private preopenPlanDetails: null | __internal_PlanDetailsProps = null;\n  private preopenSubscriptionDetails: null | __internal_SubscriptionDetailsProps = null;\n  private preopenSignUp?: null | SignUpProps = null;\n  private preopenUserProfile?: null | UserProfileProps = null;\n  private preopenOrganizationProfile?: null | OrganizationProfileProps = null;\n  private preopenCreateOrganization?: null | CreateOrganizationProps = null;\n  private preOpenWaitlist?: null | WaitlistProps = null;\n  private premountSignInNodes = new Map<HTMLDivElement, SignInProps | undefined>();\n  private premountSignUpNodes = new Map<HTMLDivElement, SignUpProps | undefined>();\n  private premountUserAvatarNodes = new Map<HTMLDivElement, UserAvatarProps | undefined>();\n  private premountUserProfileNodes = new Map<HTMLDivElement, UserProfileProps | undefined>();\n  private premountUserButtonNodes = new Map<HTMLDivElement, UserButtonProps | undefined>();\n  private premountOrganizationProfileNodes = new Map<HTMLDivElement, OrganizationProfileProps | undefined>();\n  private premountCreateOrganizationNodes = new Map<HTMLDivElement, CreateOrganizationProps | undefined>();\n  private premountOrganizationSwitcherNodes = new Map<HTMLDivElement, OrganizationSwitcherProps | undefined>();\n  private premountOrganizationListNodes = new Map<HTMLDivElement, OrganizationListProps | undefined>();\n  private premountMethodCalls = new Map<MethodName<BrowserClerk>, MethodCallback>();\n  private premountWaitlistNodes = new Map<HTMLDivElement, WaitlistProps | undefined>();\n  private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();\n  private premountApiKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();\n  private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();\n  private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();\n  // A separate Map of `addListener` method calls to handle multiple listeners.\n  private premountAddListenerCalls = new Map<\n    ListenerCallback,\n    {\n      unsubscribe: UnsubscribeCallback;\n      nativeUnsubscribe?: UnsubscribeCallback;\n    }\n  >();\n  private loadedListeners: Array<() => void> = [];\n\n  #status: ClerkStatus = 'loading';\n  #domain: DomainOrProxyUrl['domain'];\n  #proxyUrl: DomainOrProxyUrl['proxyUrl'];\n  #publishableKey: string;\n  #eventBus = createClerkEventBus();\n  #stateProxy: StateProxy;\n\n  get publishableKey(): string {\n    return this.#publishableKey;\n  }\n\n  get loaded(): boolean {\n    return this.clerkjs?.loaded || false;\n  }\n\n  get status(): ClerkStatus {\n    /**\n     * If clerk-js is not available the returned value can either be \"loading\" or \"error\".\n     */\n    if (!this.clerkjs) {\n      return this.#status;\n    }\n    return (\n      this.clerkjs?.status ||\n      /**\n       * Support older clerk-js versions.\n       * If clerk-js is available but `.status` is missing it we need to fallback to `.loaded`.\n       * Since \"degraded\" an \"error\" did not exist before,\n       * map \"loaded\" to \"ready\" and \"not loaded\" to \"loading\".\n       */\n      (this.clerkjs.loaded ? 'ready' : 'loading')\n    );\n  }\n\n  static #instance: IsomorphicClerk | null | undefined;\n\n  static getOrCreateInstance(options: IsomorphicClerkOptions) {\n    // During SSR: a new instance should be created for every request\n    // During CSR: use the cached instance for the whole lifetime of the app\n    // Also will recreate the instance if the provided Clerk instance changes\n    // This method should be idempotent in both scenarios\n    if (\n      !inBrowser() ||\n      !this.#instance ||\n      (options.Clerk && this.#instance.Clerk !== options.Clerk) ||\n      // Allow hot swapping PKs on the client\n      this.#instance.publishableKey !== options.publishableKey\n    ) {\n      this.#instance = new IsomorphicClerk(options);\n    }\n    return this.#instance;\n  }\n\n  static clearInstance() {\n    this.#instance = null;\n  }\n\n  get domain(): string {\n    // This getter can run in environments where window is not available.\n    // In those cases we should expect and use domain as a string\n    if (typeof window !== 'undefined' && window.location) {\n      return handleValueOrFn(this.#domain, new URL(window.location.href), '');\n    }\n    if (typeof this.#domain === 'function') {\n      return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n    }\n    return this.#domain || '';\n  }\n\n  get proxyUrl(): string {\n    // This getter can run in environments where window is not available.\n    // In those cases we should expect and use proxy as a string\n    if (typeof window !== 'undefined' && window.location) {\n      return handleValueOrFn(this.#proxyUrl, new URL(window.location.href), '');\n    }\n    if (typeof this.#proxyUrl === 'function') {\n      return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n    }\n    return this.#proxyUrl || '';\n  }\n\n  /**\n   * Accesses private options from the `Clerk` instance and defaults to\n   * `IsomorphicClerk` options when in SSR context.\n   *  @internal\n   */\n  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] | undefined {\n    return this.clerkjs?.__internal_getOption ? this.clerkjs?.__internal_getOption(key) : this.options[key];\n  }\n\n  constructor(options: IsomorphicClerkOptions) {\n    const { Clerk = null, publishableKey } = options || {};\n    this.#publishableKey = publishableKey;\n    this.#proxyUrl = options?.proxyUrl;\n    this.#domain = options?.domain;\n    this.options = options;\n    this.Clerk = Clerk;\n    this.mode = inBrowser() ? 'browser' : 'server';\n    this.#stateProxy = new StateProxy(this);\n\n    if (!this.options.sdkMetadata) {\n      this.options.sdkMetadata = SDK_METADATA;\n    }\n    this.#eventBus.emit(clerkEvents.Status, 'loading');\n    this.#eventBus.prioritizedOn(clerkEvents.Status, status => (this.#status = status));\n\n    if (this.#publishableKey) {\n      void this.loadClerkJS();\n    }\n  }\n\n  get sdkMetadata() {\n    return this.clerkjs?.sdkMetadata || this.options.sdkMetadata || undefined;\n  }\n\n  get instanceType() {\n    return this.clerkjs?.instanceType;\n  }\n\n  get frontendApi() {\n    return this.clerkjs?.frontendApi || '';\n  }\n\n  get isStandardBrowser() {\n    return this.clerkjs?.isStandardBrowser || this.options.standardBrowser || false;\n  }\n\n  get isSatellite() {\n    // This getter can run in environments where window is not available.\n    // In those cases we should expect and use domain as a string\n    if (typeof window !== 'undefined' && window.location) {\n      return handleValueOrFn(this.options.isSatellite, new URL(window.location.href), false);\n    }\n    if (typeof this.options.isSatellite === 'function') {\n      return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n    }\n    return false;\n  }\n\n  buildSignInUrl = (opts?: RedirectOptions): string | void => {\n    const callback = () => this.clerkjs?.buildSignInUrl(opts) || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildSignInUrl', callback);\n    }\n  };\n\n  buildSignUpUrl = (opts?: RedirectOptions): string | void => {\n    const callback = () => this.clerkjs?.buildSignUpUrl(opts) || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildSignUpUrl', callback);\n    }\n  };\n\n  buildAfterSignInUrl = (...args: Parameters<Clerk['buildAfterSignInUrl']>): string | void => {\n    const callback = () => this.clerkjs?.buildAfterSignInUrl(...args) || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildAfterSignInUrl', callback);\n    }\n  };\n\n  buildAfterSignUpUrl = (...args: Parameters<Clerk['buildAfterSignUpUrl']>): string | void => {\n    const callback = () => this.clerkjs?.buildAfterSignUpUrl(...args) || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildAfterSignUpUrl', callback);\n    }\n  };\n\n  buildAfterSignOutUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildAfterSignOutUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildAfterSignOutUrl', callback);\n    }\n  };\n\n  buildNewSubscriptionRedirectUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildNewSubscriptionRedirectUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildNewSubscriptionRedirectUrl', callback);\n    }\n  };\n\n  buildAfterMultiSessionSingleSignOutUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildAfterMultiSessionSingleSignOutUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildAfterMultiSessionSingleSignOutUrl', callback);\n    }\n  };\n\n  buildUserProfileUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildUserProfileUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildUserProfileUrl', callback);\n    }\n  };\n\n  buildCreateOrganizationUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildCreateOrganizationUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildCreateOrganizationUrl', callback);\n    }\n  };\n\n  buildOrganizationProfileUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildOrganizationProfileUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildOrganizationProfileUrl', callback);\n    }\n  };\n\n  buildWaitlistUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildWaitlistUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildWaitlistUrl', callback);\n    }\n  };\n\n  buildTasksUrl = (): string | void => {\n    const callback = () => this.clerkjs?.buildTasksUrl() || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildTasksUrl', callback);\n    }\n  };\n\n  buildUrlWithAuth = (to: string): string | void => {\n    const callback = () => this.clerkjs?.buildUrlWithAuth(to) || '';\n    if (this.clerkjs && this.loaded) {\n      return callback();\n    } else {\n      this.premountMethodCalls.set('buildUrlWithAuth', callback);\n    }\n  };\n\n  handleUnauthenticated = async () => {\n    const callback = () => this.clerkjs?.handleUnauthenticated();\n    if (this.clerkjs && this.loaded) {\n      void callback();\n    } else {\n      this.premountMethodCalls.set('handleUnauthenticated', callback);\n    }\n  };\n\n  #waitForClerkJS(): Promise<HeadlessBrowserClerk | BrowserClerk> {\n    return new Promise<HeadlessBrowserClerk | BrowserClerk>(resolve => {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      this.addOnLoaded(() => resolve(this.clerkjs!));\n    });\n  }\n\n  async loadClerkJS(): Promise<HeadlessBrowserClerk | BrowserClerk | undefined> {\n    if (this.mode !== 'browser' || this.loaded) {\n      return;\n    }\n\n    // Store frontendAPI value on window as a fallback. This value can be used as a\n    // fallback during ClerkJS hot loading in case ClerkJS fails to find the\n    // \"data-clerk-frontend-api\" attribute on its script tag.\n\n    // This can happen when the DOM is altered completely during client rehydration.\n    // For example, in Remix with React 18 the document changes completely via `hydrateRoot(document)`.\n\n    // For more information refer to:\n    // - https://github.com/remix-run/remix/issues/2947\n    // - https://github.com/facebook/react/issues/24430\n    if (typeof window !== 'undefined') {\n      window.__clerk_publishable_key = this.#publishableKey;\n      window.__clerk_proxy_url = this.proxyUrl;\n      window.__clerk_domain = this.domain;\n    }\n\n    try {\n      if (this.Clerk) {\n        // Set a fixed Clerk version\n        let c: ClerkProp;\n\n        if (isConstructor<BrowserClerkConstructor | HeadlessBrowserClerkConstructor>(this.Clerk)) {\n          // Construct a new Clerk object if a constructor is passed\n          c = new this.Clerk(this.#publishableKey, {\n            proxyUrl: this.proxyUrl,\n            domain: this.domain,\n          } as any);\n\n          this.beforeLoad(c);\n          await c.load(this.options);\n        } else {\n          // Otherwise use the instantiated Clerk object\n          c = this.Clerk;\n          if (!c.loaded) {\n            this.beforeLoad(c);\n            await c.load(this.options);\n          }\n        }\n\n        global.Clerk = c;\n      } else if (!__BUILD_DISABLE_RHC__) {\n        // Hot-load latest ClerkJS from Clerk CDN\n        if (!global.Clerk) {\n          await loadClerkJsScript({\n            ...this.options,\n            publishableKey: this.#publishableKey,\n            proxyUrl: this.proxyUrl,\n            domain: this.domain,\n            nonce: this.options.nonce,\n          });\n        }\n\n        if (!global.Clerk) {\n          throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');\n        }\n\n        this.beforeLoad(global.Clerk);\n        await global.Clerk.load(this.options);\n      }\n\n      if (global.Clerk?.loaded) {\n        return this.hydrateClerkJS(global.Clerk);\n      }\n      return;\n    } catch (err) {\n      const error = err as Error;\n      this.#eventBus.emit(clerkEvents.Status, 'error');\n      console.error(error.stack || error.message || error);\n      return;\n    }\n  }\n\n  public on: Clerk['on'] = (...args) => {\n    // Support older clerk-js versions.\n    if (this.clerkjs?.on) {\n      return this.clerkjs.on(...args);\n    } else {\n      this.#eventBus.on(...args);\n    }\n  };\n\n  public off: Clerk['off'] = (...args) => {\n    // Support older clerk-js versions.\n    if (this.clerkjs?.off) {\n      return this.clerkjs.off(...args);\n    } else {\n      this.#eventBus.off(...args);\n    }\n  };\n\n  /**\n   * @deprecated Please use `addStatusListener`. This api will be removed in the next major.\n   */\n  public addOnLoaded = (cb: () => void) => {\n    this.loadedListeners.push(cb);\n    /**\n     * When IsomorphicClerk is loaded execute the callback directly\n     */\n    if (this.loaded) {\n      this.emitLoaded();\n    }\n  };\n\n  /**\n   * @deprecated Please use `__internal_setStatus`. This api will be removed in the next major.\n   */\n  public emitLoaded = () => {\n    this.loadedListeners.forEach(cb => cb());\n    this.loadedListeners = [];\n  };\n\n  private beforeLoad = (clerkjs: BrowserClerk | HeadlessBrowserClerk | undefined) => {\n    if (!clerkjs) {\n      throw new Error('Failed to hydrate latest Clerk JS');\n    }\n  };\n\n  private hydrateClerkJS = (clerkjs: BrowserClerk | HeadlessBrowserClerk | undefined) => {\n    if (!clerkjs) {\n      throw new Error('Failed to hydrate latest Clerk JS');\n    }\n\n    this.clerkjs = clerkjs;\n\n    this.premountMethodCalls.forEach(cb => cb());\n    this.premountAddListenerCalls.forEach((listenerHandlers, listener) => {\n      listenerHandlers.nativeUnsubscribe = clerkjs.addListener(listener);\n    });\n\n    this.#eventBus.internal.retrieveListeners('status')?.forEach(listener => {\n      // Since clerkjs exists it will call `this.clerkjs.on('status', listener)`\n      this.on('status', listener, { notify: true });\n    });\n\n    if (this.preopenSignIn !== null) {\n      clerkjs.openSignIn(this.preopenSignIn);\n    }\n\n    if (this.preopenCheckout !== null) {\n      clerkjs.__internal_openCheckout(this.preopenCheckout);\n    }\n\n    if (this.preopenPlanDetails !== null) {\n      clerkjs.__internal_openPlanDetails(this.preopenPlanDetails);\n    }\n\n    if (this.preopenSubscriptionDetails !== null) {\n      clerkjs.__internal_openSubscriptionDetails(this.preopenSubscriptionDetails);\n    }\n\n    if (this.preopenSignUp !== null) {\n      clerkjs.openSignUp(this.preopenSignUp);\n    }\n\n    if (this.preopenUserProfile !== null) {\n      clerkjs.openUserProfile(this.preopenUserProfile);\n    }\n\n    if (this.preopenUserVerification !== null) {\n      clerkjs.__internal_openReverification(this.preopenUserVerification);\n    }\n\n    if (this.preopenOneTap !== null) {\n      clerkjs.openGoogleOneTap(this.preopenOneTap);\n    }\n\n    if (this.preopenOrganizationProfile !== null) {\n      clerkjs.openOrganizationProfile(this.preopenOrganizationProfile);\n    }\n\n    if (this.preopenCreateOrganization !== null) {\n      clerkjs.openCreateOrganization(this.preopenCreateOrganization);\n    }\n\n    if (this.preOpenWaitlist !== null) {\n      clerkjs.openWaitlist(this.preOpenWaitlist);\n    }\n\n    this.premountSignInNodes.forEach((props, node) => {\n      clerkjs.mountSignIn(node, props);\n    });\n\n    this.premountSignUpNodes.forEach((props, node) => {\n      clerkjs.mountSignUp(node, props);\n    });\n\n    this.premountUserProfileNodes.forEach((props, node) => {\n      clerkjs.mountUserProfile(node, props);\n    });\n\n    this.premountUserAvatarNodes.forEach((props, node) => {\n      clerkjs.mountUserAvatar(node, props);\n    });\n\n    this.premountUserButtonNodes.forEach((props, node) => {\n      clerkjs.mountUserButton(node, props);\n    });\n\n    this.premountOrganizationListNodes.forEach((props, node) => {\n      clerkjs.mountOrganizationList(node, props);\n    });\n\n    this.premountWaitlistNodes.forEach((props, node) => {\n      clerkjs.mountWaitlist(node, props);\n    });\n\n    this.premountPricingTableNodes.forEach((props, node) => {\n      clerkjs.mountPricingTable(node, props);\n    });\n\n    this.premountApiKeysNodes.forEach((props, node) => {\n      clerkjs.mountApiKeys(node, props);\n    });\n\n    this.premountOAuthConsentNodes.forEach((props, node) => {\n      clerkjs.__internal_mountOAuthConsent(node, props);\n    });\n\n    this.premountTaskChooseOrganizationNodes.forEach((props, node) => {\n      clerkjs.mountTaskChooseOrganization(node, props);\n    });\n\n    /**\n     * Only update status in case `clerk.status` is missing. In any other case, `clerk-js` should be the orchestrator.\n     */\n    if (typeof this.clerkjs.status === 'undefined') {\n      this.#eventBus.emit(clerkEvents.Status, 'ready');\n    }\n\n    this.emitLoaded();\n    return this.clerkjs;\n  };\n\n  get version() {\n    return this.clerkjs?.version;\n  }\n\n  get client(): ClientResource | undefined {\n    if (this.clerkjs) {\n      return this.clerkjs.client;\n      // TODO: add ssr condition\n    } else {\n      return undefined;\n    }\n  }\n\n  get session() {\n    if (this.clerkjs) {\n      return this.clerkjs.session;\n    } else {\n      return undefined;\n    }\n  }\n\n  get user() {\n    if (this.clerkjs) {\n      return this.clerkjs.user;\n    } else {\n      return undefined;\n    }\n  }\n\n  get organization() {\n    if (this.clerkjs) {\n      return this.clerkjs.organization;\n    } else {\n      return undefined;\n    }\n  }\n\n  get telemetry() {\n    if (this.clerkjs) {\n      return this.clerkjs.telemetry;\n    } else {\n      return undefined;\n    }\n  }\n\n  get __unstable__environment(): any {\n    if (this.clerkjs) {\n      return (this.clerkjs as any).__unstable__environment;\n      // TODO: add ssr condition\n    } else {\n      return undefined;\n    }\n  }\n\n  get isSignedIn(): boolean {\n    if (this.clerkjs) {\n      return this.clerkjs.isSignedIn;\n    } else {\n      return false;\n    }\n  }\n\n  get billing(): BillingNamespace | undefined {\n    return this.clerkjs?.billing;\n  }\n\n  get __internal_state(): State {\n    return this.loaded && this.clerkjs ? this.clerkjs.__internal_state : this.#stateProxy;\n  }\n\n  get apiKeys(): APIKeysNamespace | undefined {\n    return this.clerkjs?.apiKeys;\n  }\n\n  __experimental_checkout = (...args: Parameters<Clerk['__experimental_checkout']>) => {\n    return this.clerkjs?.__experimental_checkout(...args);\n  };\n\n  __unstable__setEnvironment(...args: any): void {\n    if (this.clerkjs && '__unstable__setEnvironment' in this.clerkjs) {\n      (this.clerkjs as any).__unstable__setEnvironment(args);\n    } else {\n      return undefined;\n    }\n  }\n\n  // TODO @userland-errors:\n  __unstable__updateProps = async (props: any): Promise<void> => {\n    const clerkjs = await this.#waitForClerkJS();\n    // Handle case where accounts has clerk-react@4 installed, but clerk-js@3 is manually loaded\n    if (clerkjs && '__unstable__updateProps' in clerkjs) {\n      return (clerkjs as any).__unstable__updateProps(props);\n    }\n  };\n\n  /**\n   * `setActive` can be used to set the active session and/or organization.\n   */\n  setActive = (params: SetActiveParams): Promise<void> => {\n    if (this.clerkjs) {\n      return this.clerkjs.setActive(params);\n    } else {\n      return Promise.reject();\n    }\n  };\n\n  openSignIn = (props?: SignInProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openSignIn(props);\n    } else {\n      this.preopenSignIn = props;\n    }\n  };\n\n  closeSignIn = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeSignIn();\n    } else {\n      this.preopenSignIn = null;\n    }\n  };\n\n  __internal_openCheckout = (props?: __internal_CheckoutProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_openCheckout(props);\n    } else {\n      this.preopenCheckout = props;\n    }\n  };\n\n  __internal_closeCheckout = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_closeCheckout();\n    } else {\n      this.preopenCheckout = null;\n    }\n  };\n\n  __internal_openPlanDetails = (props: __internal_PlanDetailsProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_openPlanDetails(props);\n    } else {\n      this.preopenPlanDetails = props;\n    }\n  };\n\n  __internal_closePlanDetails = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_closePlanDetails();\n    } else {\n      this.preopenPlanDetails = null;\n    }\n  };\n\n  __internal_openSubscriptionDetails = (props?: __internal_SubscriptionDetailsProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_openSubscriptionDetails(props);\n    } else {\n      this.preopenSubscriptionDetails = props ?? null;\n    }\n  };\n\n  __internal_closeSubscriptionDetails = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_closeSubscriptionDetails();\n    } else {\n      this.preopenSubscriptionDetails = null;\n    }\n  };\n\n  __internal_openReverification = (props?: __internal_UserVerificationModalProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_openReverification(props);\n    } else {\n      this.preopenUserVerification = props;\n    }\n  };\n\n  __internal_closeReverification = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_closeReverification();\n    } else {\n      this.preopenUserVerification = null;\n    }\n  };\n\n  openGoogleOneTap = (props?: GoogleOneTapProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openGoogleOneTap(props);\n    } else {\n      this.preopenOneTap = props;\n    }\n  };\n\n  closeGoogleOneTap = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeGoogleOneTap();\n    } else {\n      this.preopenOneTap = null;\n    }\n  };\n\n  openUserProfile = (props?: UserProfileProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openUserProfile(props);\n    } else {\n      this.preopenUserProfile = props;\n    }\n  };\n\n  closeUserProfile = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeUserProfile();\n    } else {\n      this.preopenUserProfile = null;\n    }\n  };\n\n  openOrganizationProfile = (props?: OrganizationProfileProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openOrganizationProfile(props);\n    } else {\n      this.preopenOrganizationProfile = props;\n    }\n  };\n\n  closeOrganizationProfile = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeOrganizationProfile();\n    } else {\n      this.preopenOrganizationProfile = null;\n    }\n  };\n\n  openCreateOrganization = (props?: CreateOrganizationProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openCreateOrganization(props);\n    } else {\n      this.preopenCreateOrganization = props;\n    }\n  };\n\n  closeCreateOrganization = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeCreateOrganization();\n    } else {\n      this.preopenCreateOrganization = null;\n    }\n  };\n\n  openWaitlist = (props?: WaitlistProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openWaitlist(props);\n    } else {\n      this.preOpenWaitlist = props;\n    }\n  };\n\n  closeWaitlist = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeWaitlist();\n    } else {\n      this.preOpenWaitlist = null;\n    }\n  };\n\n  openSignUp = (props?: SignUpProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.openSignUp(props);\n    } else {\n      this.preopenSignUp = props;\n    }\n  };\n\n  closeSignUp = () => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.closeSignUp();\n    } else {\n      this.preopenSignUp = null;\n    }\n  };\n\n  mountSignIn = (node: HTMLDivElement, props?: SignInProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountSignIn(node, props);\n    } else {\n      this.premountSignInNodes.set(node, props);\n    }\n  };\n\n  unmountSignIn = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountSignIn(node);\n    } else {\n      this.premountSignInNodes.delete(node);\n    }\n  };\n\n  mountSignUp = (node: HTMLDivElement, props?: SignUpProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountSignUp(node, props);\n    } else {\n      this.premountSignUpNodes.set(node, props);\n    }\n  };\n\n  unmountSignUp = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountSignUp(node);\n    } else {\n      this.premountSignUpNodes.delete(node);\n    }\n  };\n\n  mountUserAvatar = (node: HTMLDivElement, props?: UserAvatarProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountUserAvatar(node, props);\n    } else {\n      this.premountUserAvatarNodes.set(node, props);\n    }\n  };\n\n  unmountUserAvatar = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountUserAvatar(node);\n    } else {\n      this.premountUserAvatarNodes.delete(node);\n    }\n  };\n\n  mountUserProfile = (node: HTMLDivElement, props?: UserProfileProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountUserProfile(node, props);\n    } else {\n      this.premountUserProfileNodes.set(node, props);\n    }\n  };\n\n  unmountUserProfile = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountUserProfile(node);\n    } else {\n      this.premountUserProfileNodes.delete(node);\n    }\n  };\n\n  mountOrganizationProfile = (node: HTMLDivElement, props?: OrganizationProfileProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountOrganizationProfile(node, props);\n    } else {\n      this.premountOrganizationProfileNodes.set(node, props);\n    }\n  };\n\n  unmountOrganizationProfile = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountOrganizationProfile(node);\n    } else {\n      this.premountOrganizationProfileNodes.delete(node);\n    }\n  };\n\n  mountCreateOrganization = (node: HTMLDivElement, props?: CreateOrganizationProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountCreateOrganization(node, props);\n    } else {\n      this.premountCreateOrganizationNodes.set(node, props);\n    }\n  };\n\n  unmountCreateOrganization = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountCreateOrganization(node);\n    } else {\n      this.premountCreateOrganizationNodes.delete(node);\n    }\n  };\n\n  mountOrganizationSwitcher = (node: HTMLDivElement, props?: OrganizationSwitcherProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountOrganizationSwitcher(node, props);\n    } else {\n      this.premountOrganizationSwitcherNodes.set(node, props);\n    }\n  };\n\n  unmountOrganizationSwitcher = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountOrganizationSwitcher(node);\n    } else {\n      this.premountOrganizationSwitcherNodes.delete(node);\n    }\n  };\n\n  __experimental_prefetchOrganizationSwitcher = () => {\n    const callback = () => this.clerkjs?.__experimental_prefetchOrganizationSwitcher();\n    if (this.clerkjs && this.loaded) {\n      void callback();\n    } else {\n      this.premountMethodCalls.set('__experimental_prefetchOrganizationSwitcher', callback);\n    }\n  };\n\n  mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountOrganizationList(node, props);\n    } else {\n      this.premountOrganizationListNodes.set(node, props);\n    }\n  };\n\n  unmountOrganizationList = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountOrganizationList(node);\n    } else {\n      this.premountOrganizationListNodes.delete(node);\n    }\n  };\n\n  mountUserButton = (node: HTMLDivElement, userButtonProps?: UserButtonProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountUserButton(node, userButtonProps);\n    } else {\n      this.premountUserButtonNodes.set(node, userButtonProps);\n    }\n  };\n\n  unmountUserButton = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountUserButton(node);\n    } else {\n      this.premountUserButtonNodes.delete(node);\n    }\n  };\n\n  mountWaitlist = (node: HTMLDivElement, props?: WaitlistProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountWaitlist(node, props);\n    } else {\n      this.premountWaitlistNodes.set(node, props);\n    }\n  };\n\n  unmountWaitlist = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountWaitlist(node);\n    } else {\n      this.premountWaitlistNodes.delete(node);\n    }\n  };\n\n  mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountPricingTable(node, props);\n    } else {\n      this.premountPricingTableNodes.set(node, props);\n    }\n  };\n\n  unmountPricingTable = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountPricingTable(node);\n    } else {\n      this.premountPricingTableNodes.delete(node);\n    }\n  };\n\n  mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountApiKeys(node, props);\n    } else {\n      this.premountApiKeysNodes.set(node, props);\n    }\n  };\n\n  unmountApiKeys = (node: HTMLDivElement): void => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.unmountApiKeys(node);\n    } else {\n      this.premountApiKeysNodes.delete(node);\n    }\n  };\n\n  __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_mountOAuthConsent(node, props);\n    } else {\n      this.premountOAuthConsentNodes.set(node, props);\n    }\n  };\n\n  __internal_unmountOAuthConsent = (node: HTMLDivElement) => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.__internal_unmountOAuthConsent(node);\n    } else {\n      this.premountOAuthConsentNodes.delete(node);\n    }\n  };\n\n  mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps): void => {\n    if (this.clerkjs && this.loaded) {\n      this.clerkjs.mountTaskChooseOrganization(node, props);\n    } else {\n      this.premountTaskChooseOrganizationNodes.set(node, props);\n    }\n  };\n