@clerk/elements 0.18.0 → 0.18.1-canary.v8506fdd

package/dist/react/sign-in/index.mjs

@@ -1,9 +1,9 @@
 import {
   Router,
+  removeOptionalCatchAllSegment,
   useClerkRouter,
-  usePathnameWithoutCatchAll,
   useVirtualRouter
-} from "../../chunk-CVLZDETC.mjs";
+} from "../../chunk-ORV6AAIP.mjs";
 import {
   Form,
   FormStoreProvider,
@@ -91,8 +91,11 @@ function SignInRoot({
 }) {
   var _a;
   const clerk = useClerk();
-  const inferredPath = usePathnameWithoutCatchAll();
+  const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)();
+  const pathname = router.pathname();
+  const inferredPath = removeOptionalCatchAllSegment(pathname);
   const path = pathProp || inferredPath || SIGN_IN_DEFAULT_BASE_PATH;
+  const isRootPath = path === pathname;
   (_a = clerk.telemetry) == null ? void 0 : _a.record(
     eventComponentMounted("Elements_SignInRoot", {
       exampleMode,
@@ -101,8 +104,6 @@ function SignInRoot({
       routing
     })
   );
-  const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)();
-  const isRootPath = path === router.pathname();
   return /* @__PURE__ */ jsx(
     Router,
     {

package/dist/react/sign-in/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/react/sign-in/index.ts","../../../src/react/sign-in/root.tsx","../../../src/react/sign-in/action/action.tsx","../../../src/react/sign-in/action/navigate.tsx","../../../src/react/sign-in/action/resend.tsx","../../../src/react/sign-in/action/set-active-session.tsx","../../../src/react/sign-in/passkey.tsx","../../../src/react/sign-in/identifiers.tsx"],"sourcesContent":["// Mark as a client-only package. This will error if you try to import it in a React Server Component.\nimport 'client-only';\n\nexport { SignInRoot as SignIn, SignInRoot as Root } from './root';\nexport { SignInStep as Step } from './step';\nexport { SignInAction as Action } from './action';\nexport { SignInPasskey as Passkey } from './passkey';\nexport { SignInSupportedStrategy as SupportedStrategy } from './choose-strategy';\nexport { SignInSessionList as SessionList, SignInSessionListItem as SessionListItem } from './choose-session';\n\nexport {\n  SignInFirstFactor as FirstFactor,\n  SignInSecondFactor as SecondFactor,\n  SignInStrategy as Strategy,\n} from './verifications';\n\nexport { SignInSafeIdentifier as SafeIdentifier, SignInSalutation as Salutation } from './identifiers';\n","import { useClerk } from '@clerk/shared/react';\nimport { useClerkHostRouter } from '@clerk/shared/router';\nimport { eventComponentMounted } from '@clerk/shared/telemetry';\nimport { useSelector } from '@xstate/react';\nimport React, { useEffect } from 'react';\nimport { createActor } from 'xstate';\n\nimport { ROUTING, SIGN_IN_DEFAULT_BASE_PATH, SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';\nimport { FormStoreProvider, useFormStore } from '~/internals/machines/form/form.context';\nimport type { SignInRouterInitEvent } from '~/internals/machines/sign-in';\nimport { SignInRouterMachine } from '~/internals/machines/sign-in';\nimport { inspect } from '~/internals/utils/inspector';\nimport { Router, useClerkRouter, useVirtualRouter } from '~/react/router';\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nimport { Form } from '../common/form';\nimport { usePathnameWithoutCatchAll } from '../utils/path-inference/next';\n\ntype SignInFlowProviderProps = {\n  children: React.ReactNode;\n  exampleMode?: boolean;\n  /**\n   * Fallback markup to render while Clerk is loading\n   */\n  fallback?: React.ReactNode;\n  isRootPath: boolean;\n};\n\nconst actor = createActor(SignInRouterMachine, { inspect });\nactor.start();\n\nfunction SignInFlowProvider({ children, exampleMode, fallback, isRootPath }: SignInFlowProviderProps) {\n  const clerk = useClerk();\n  const router = useClerkRouter();\n  const formRef = useFormStore();\n  const isReady = useSelector(actor, state => state.value !== 'Idle');\n\n  useEffect(() => {\n    if (!clerk || !router) {\n      return;\n    }\n\n    const cb = () => {\n      const evt: SignInRouterInitEvent = {\n        type: 'INIT',\n        clerk,\n        exampleMode,\n        formRef,\n        router,\n        signUpPath: SIGN_UP_DEFAULT_BASE_PATH,\n      };\n\n      if (actor.getSnapshot().can(evt)) {\n        actor.send(evt);\n      }\n    };\n\n    if ('addOnLoaded' in clerk) {\n      // @ts-expect-error - addOnLoaded doesn't exist on the clerk type, but it does on IsomorphicClerk, which can be hit when Elements is used standalone\n      clerk.addOnLoaded(cb);\n    } else {\n      cb();\n    }\n\n    // Ensure that the latest instantiated formRef is attached to the router\n    if (formRef && actor.getSnapshot().can({ type: 'RESET.STEP' })) {\n      actor.send({\n        type: 'FORM.ATTACH',\n        formRef,\n      });\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [clerk, exampleMode, formRef?.id, !!router, clerk.loaded]);\n\n  return (\n    <SignInRouterCtx.Provider actorRef={actor}>\n      {isRootPath && !isReady && fallback ? <Form>{fallback}</Form> : null}\n      {clerk.loaded && isReady ? children : null}\n    </SignInRouterCtx.Provider>\n  );\n}\n\nexport type SignInRootProps = Omit<SignInFlowProviderProps, 'isRootPath'> & {\n  /**\n   * The base path for your sign-in route.\n   * Will be automatically inferred in Next.js.\n   * @example `/sign-in`\n   */\n  path?: string;\n  /**\n   * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.\n   */\n  routing?: ROUTING;\n};\n\n/**\n * Root component for the sign-in flow. It sets up providers and state management for its children.\n * Must wrap all sign-in related components.\n *\n * @param {string} path - The root path the sign-in flow is mounted at. Will be automatically inferred in Next.js. You can set it to `/sign-in` for example.\n * @param {React.ReactNode} fallback - Fallback markup to render while Clerk is loading. Default: `null`\n * @param {string} routing - If you want to render Clerk Elements in e.g. a modal, use the `'virtual'` routing mode. Default: `'path'`\n *\n * @example\n * import * as SignIn from \"@clerk/elements/sign-in\"\n *\n * export default SignInPage = () => (\n *  <SignIn.Root>\n *  </SignIn.Root>\n * )\n */\nexport function SignInRoot({\n  children,\n  exampleMode = false,\n  fallback = null,\n  path: pathProp,\n  routing = ROUTING.path,\n}: SignInRootProps): JSX.Element | null {\n  const clerk = useClerk();\n  const inferredPath = usePathnameWithoutCatchAll();\n  const path = pathProp || inferredPath || SIGN_IN_DEFAULT_BASE_PATH;\n\n  clerk.telemetry?.record(\n    eventComponentMounted('Elements_SignInRoot', {\n      exampleMode,\n      fallback: Boolean(fallback),\n      path,\n      routing,\n    }),\n  );\n\n  const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)();\n  const isRootPath = path === router.pathname();\n\n  return (\n    <Router\n      basePath={path}\n      router={router}\n    >\n      <FormStoreProvider>\n        <SignInFlowProvider\n          exampleMode={exampleMode}\n          fallback={fallback}\n          isRootPath={isRootPath}\n        >\n          {children}\n        </SignInFlowProvider>\n      </FormStoreProvider>\n    </Router>\n  );\n}\n","import * as React from 'react';\n\nimport type { FormSubmitProps } from '~/react/common';\nimport { Submit } from '~/react/common';\n\nimport type { SignInNavigateProps } from './navigate';\nimport { SignInNavigate } from './navigate';\nimport type { SignInResendProps } from './resend';\nimport { SignInResend } from './resend';\nimport { SignInSetActiveSession } from './set-active-session';\n\nexport type SignInActionProps = { asChild?: boolean } & FormSubmitProps &\n  (\n    | ({\n        navigate: SignInNavigateProps['to'];\n        resend?: never;\n        setActiveSession?: never;\n        submit?: never;\n      } & Omit<SignInNavigateProps, 'to'>)\n    | { navigate?: never; resend?: never; setActiveSession?: never; submit: true }\n    | { navigate?: never; resend?: never; setActiveSession: true; submit?: never }\n    | ({ navigate?: never; resend: true; setActiveSession?: never; submit?: never } & SignInResendProps)\n  );\n\nconst DISPLAY_NAME = 'SignInAction';\n\n/**\n * Perform various actions during the sign-in process. This component is used to navigate between steps, submit the form, or resend a verification codes.\n *\n * @param {boolean} [submit] - If `true`, the action will submit the form.\n * @param {string} [navigate] - The name of the step to navigate to.\n * @param {boolean} [resend] - If `true`, the action will resend the verification code for the currently active strategy, if applicable.\n * @param {Function} [fallback] - Only used when `resend` is `true`. If provided, the fallback markup will be rendered before the resend delay has expired.\n *\n * @example\n * <SignIn.Action navigate=\"start\">Go Back</SignIn.Action>\n *\n * @example\n * <SignIn.Action submit>Sign In</SignIn.Action>\n *\n * @example\n * <SignIn.Action resend>Resend</SignIn.Action>\n */\nexport const SignInAction = React.forwardRef<React.ElementRef<'button'>, SignInActionProps>((props, forwardedRef) => {\n  const { submit, navigate, resend, setActiveSession, ...rest } = props;\n  let Comp: React.ForwardRefExoticComponent<any> | undefined;\n\n  if (submit) {\n    Comp = Submit;\n  } else if (navigate) {\n    Comp = SignInNavigate;\n  } else if (resend) {\n    Comp = SignInResend;\n  } else if (setActiveSession) {\n    Comp = SignInSetActiveSession;\n  }\n\n  return Comp ? (\n    <Comp\n      to={navigate}\n      {...rest}\n      ref={forwardedRef}\n    />\n  ) : null;\n});\n\nSignInAction.displayName = DISPLAY_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nconst SIGN_IN_NAVIGATE_NAME = 'SignInNavigate';\nconst SignInNavigationEventMap = {\n  start: 'NAVIGATE.START',\n  previous: 'NAVIGATE.PREVIOUS',\n  'choose-strategy': 'NAVIGATE.CHOOSE_STRATEGY',\n  'forgot-password': 'NAVIGATE.FORGOT_PASSWORD',\n} as const;\n\nexport type SignInNavigateElementKey = keyof typeof SignInNavigationEventMap;\n\nexport type SignInNavigateElement = React.ElementRef<'button'>;\nexport type SignInNavigateProps = {\n  asChild?: boolean;\n  to: SignInNavigateElementKey;\n  children: React.ReactNode;\n};\n\n/**\n * Renders a button which will navigate to a different step in the sign-in flow.\n *\n * @param {SignInNavigateElementKey} to - The step to navigate to.\n * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.\n *\n * @example\n * <Navigate to=\"choose-strategy\">\n *    Choose a different sign-in method...\n * </Navigate>\n */\nexport const SignInNavigate = React.forwardRef<SignInNavigateElement, SignInNavigateProps>(\n  ({ asChild, to, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef();\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      const type = SignInNavigationEventMap[to];\n\n      if (actorRef.getSnapshot().can({ type })) {\n        actorRef.send({ type });\n      } else {\n        console.warn(\n          `Clerk: <SignIn.Action navigate=\"${to}\"> is an invalid navigation event. You can only navigate to: ${Object.keys(SignInNavigationEventMap).join(', ')}.`,\n        );\n      }\n    }, [actorRef, to]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInNavigate.displayName = SIGN_IN_NAVIGATE_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport { useSelector } from '@xstate/react';\nimport * as React from 'react';\n\nimport { SignInFirstFactorCtx, SignInSecondFactorCtx } from '../verifications';\n\nexport type SignInResendElement = React.ElementRef<'button'>;\nexport type SignInResendFallbackProps = {\n  resendable: boolean;\n  resendableAfter: number;\n};\nexport type SignInResendProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n  /**\n   * A fallback component to render when the resend action is not available.\n   * This can be a React element or a function that receives the `resendableAfter` prop.\n   */\n  fallback?: React.ReactNode | ((props: SignInResendFallbackProps) => React.ReactNode);\n};\n\nconst SIGN_IN_RESEND_NAME = 'SignInResend';\n\n/**\n * Resend verification codes during the sign-in process.\n * This component must be used within the <Step name=\"verifications\">.\n *\n * @note This component is not intended to be used directly. Instead, use the <Action resend> component.\n *\n * @example\n * import { Action } from '@clerk/elements/sign-in';\n * <Action resend fallback={({ resendableAfter }) => <p>Resendable in: {resendableAfter}s</p>}>Resend</Action>;\n */\nexport const SignInResend = React.forwardRef<SignInResendElement, SignInResendProps>(\n  ({ asChild, fallback, ...rest }, forwardedRef) => {\n    const firstFactorRef = SignInFirstFactorCtx.useActorRef(true);\n    const secondFactorRef = SignInSecondFactorCtx.useActorRef(true);\n    const actorRef = firstFactorRef || secondFactorRef;\n\n    if (!actorRef) {\n      throw new Error('The resend action must be used within <SignIn.Step name=\"verifications\">.');\n    }\n\n    const fallbackProps: SignInResendFallbackProps = useSelector(\n      actorRef,\n      state => ({\n        resendable: state.context.resendable,\n        resendableAfter: state.context.resendableAfter,\n      }),\n      (a, b) => a.resendableAfter === b.resendableAfter && a.resendable === b.resendable,\n    );\n\n    if (fallback && !fallbackProps.resendable) {\n      return typeof fallback === 'function' ? fallback(fallbackProps) : fallback;\n    }\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        disabled={!fallbackProps.resendable}\n        onClick={() => actorRef.send({ type: 'RETRY' })}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInResend.displayName = SIGN_IN_RESEND_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport type { SignInRouterSessionSetActiveEvent } from '~/internals/machines/sign-in';\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nimport { useSignInActiveSessionContext } from '../choose-session/choose-session.hooks';\n\nconst DISPLAY_NAME = 'SignInSetActiveSession';\n\nexport type SignInSetActiveSessionElement = React.ElementRef<'button'>;\nexport type SignInSetActiveSessionProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n};\n\n/**\n * Sets the active session to the session with the provided ID.\n *\n * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.\n *\n * @example\n * <SignInSetActiveSession setActiveSession>\n *    t*****m@clerk.dev\n * </SignInSetActiveSession>\n */\nexport const SignInSetActiveSession = React.forwardRef<SignInSetActiveSessionElement, SignInSetActiveSessionProps>(\n  ({ asChild, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef();\n    const session = useSignInActiveSessionContext();\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      const event: SignInRouterSessionSetActiveEvent = { type: 'SESSION.SET_ACTIVE', id: session.id };\n\n      if (actorRef.getSnapshot().can(event)) {\n        actorRef.send(event);\n      } else {\n        console.warn(\n          `Clerk: <SignIn.Action setActiveSession> is an invalid event. You can only choose an active session from <SignIn.Step name=\"choose-session\">.`,\n        );\n      }\n    }, [actorRef, session.id]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInSetActiveSession.displayName = DISPLAY_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nexport type SignInPasskeyElement = React.ElementRef<'button'>;\n\nexport type SignInPasskeyProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\nconst SIGN_IN_PASSKEY_NAME = 'SignInPasskey';\n\n/**\n * Prompt users to select a passkey from their device in order to sign in.\n * This component must be used within the <Step name=\"start\">.\n *\n * @example\n * <SignIn.Action passkey>Use Passkey instead</SignIn.Action>\n */\nexport const SignInPasskey = React.forwardRef<SignInPasskeyElement, SignInPasskeyProps>(\n  ({ asChild, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef(true);\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      actorRef?.send({ type: 'AUTHENTICATE.PASSKEY' });\n    }, [actorRef]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInPasskey.displayName = SIGN_IN_PASSKEY_NAME;\n","import { useMemo } from 'react';\n\nimport { SignInSafeIdentifierSelectorForStrategy, SignInSalutationSelector } from '~/internals/machines/sign-in';\n\nimport { SignInRouterCtx, useSignInStrategy } from './context';\n\n/**\n * Render an identifier that has been provided by the user during a sign-in attempt. Renders a `string` (or empty string if it can't find an identifier).\n *\n * @example\n * <SignIn.Strategy name=\"email_code\">\n *  <h1>Check your email</h1>\n *  <p>We've sent a code to <SignIn.SafeIdentifier />.</p>\n * </SignIn.Strategy>\n */\nexport function SignInSafeIdentifier({ transform }: { transform?: (s: string) => string }): string {\n  const strategy = useSignInStrategy();\n  const selector = useMemo(() => SignInSafeIdentifierSelectorForStrategy(strategy), [strategy]);\n  const safeIdentifier = SignInRouterCtx.useSelector(selector);\n\n  if (transform) {\n    return transform(safeIdentifier);\n  }\n\n  return safeIdentifier;\n}\n\n/**\n * Render a salutation for the user during a sign-in attempt. It attempts to resolve these values in this specific order: First name, Last name, Identifier. Renders a `string` (or empty string if it can't find an identifier).\n *\n * @example\n * <SignIn.Strategy name=\"password\">\n *  <p>Welcome back <SignIn.Salutation />!</p>\n * </SignIn.Strategy>\n */\nexport function SignInSalutation(): string {\n  return SignInRouterCtx.useSelector(SignInSalutationSelector);\n}\n"],"mappings":"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","names":["React","React","jsx","Slot","useSelector","React","jsx","useSelector","Slot","Slot","React","jsx","Slot","jsx","DISPLAY_NAME","Slot","React","jsx","Slot"]}
+{"version":3,"sources":["../../../src/react/sign-in/index.ts","../../../src/react/sign-in/root.tsx","../../../src/react/sign-in/action/action.tsx","../../../src/react/sign-in/action/navigate.tsx","../../../src/react/sign-in/action/resend.tsx","../../../src/react/sign-in/action/set-active-session.tsx","../../../src/react/sign-in/passkey.tsx","../../../src/react/sign-in/identifiers.tsx"],"sourcesContent":["// Mark as a client-only package. This will error if you try to import it in a React Server Component.\nimport 'client-only';\n\nexport { SignInRoot as SignIn, SignInRoot as Root } from './root';\nexport { SignInStep as Step } from './step';\nexport { SignInAction as Action } from './action';\nexport { SignInPasskey as Passkey } from './passkey';\nexport { SignInSupportedStrategy as SupportedStrategy } from './choose-strategy';\nexport { SignInSessionList as SessionList, SignInSessionListItem as SessionListItem } from './choose-session';\n\nexport {\n  SignInFirstFactor as FirstFactor,\n  SignInSecondFactor as SecondFactor,\n  SignInStrategy as Strategy,\n} from './verifications';\n\nexport { SignInSafeIdentifier as SafeIdentifier, SignInSalutation as Salutation } from './identifiers';\n","import { useClerk } from '@clerk/shared/react';\nimport { useClerkHostRouter } from '@clerk/shared/router';\nimport { eventComponentMounted } from '@clerk/shared/telemetry';\nimport { useSelector } from '@xstate/react';\nimport React, { useEffect } from 'react';\nimport { createActor } from 'xstate';\n\nimport { ROUTING, SIGN_IN_DEFAULT_BASE_PATH, SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';\nimport { FormStoreProvider, useFormStore } from '~/internals/machines/form/form.context';\nimport type { SignInRouterInitEvent } from '~/internals/machines/sign-in';\nimport { SignInRouterMachine } from '~/internals/machines/sign-in';\nimport { inspect } from '~/internals/utils/inspector';\nimport { Router, useClerkRouter, useVirtualRouter } from '~/react/router';\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nimport { Form } from '../common/form';\nimport { removeOptionalCatchAllSegment } from '../utils/path-inference/utils';\n\ntype SignInFlowProviderProps = {\n  children: React.ReactNode;\n  exampleMode?: boolean;\n  /**\n   * Fallback markup to render while Clerk is loading\n   */\n  fallback?: React.ReactNode;\n  isRootPath: boolean;\n};\n\nconst actor = createActor(SignInRouterMachine, { inspect });\nactor.start();\n\nfunction SignInFlowProvider({ children, exampleMode, fallback, isRootPath }: SignInFlowProviderProps) {\n  const clerk = useClerk();\n  const router = useClerkRouter();\n  const formRef = useFormStore();\n  const isReady = useSelector(actor, state => state.value !== 'Idle');\n\n  useEffect(() => {\n    if (!clerk || !router) {\n      return;\n    }\n\n    const cb = () => {\n      const evt: SignInRouterInitEvent = {\n        type: 'INIT',\n        clerk,\n        exampleMode,\n        formRef,\n        router,\n        signUpPath: SIGN_UP_DEFAULT_BASE_PATH,\n      };\n\n      if (actor.getSnapshot().can(evt)) {\n        actor.send(evt);\n      }\n    };\n\n    if ('addOnLoaded' in clerk) {\n      // @ts-expect-error - addOnLoaded doesn't exist on the clerk type, but it does on IsomorphicClerk, which can be hit when Elements is used standalone\n      clerk.addOnLoaded(cb);\n    } else {\n      cb();\n    }\n\n    // Ensure that the latest instantiated formRef is attached to the router\n    if (formRef && actor.getSnapshot().can({ type: 'RESET.STEP' })) {\n      actor.send({\n        type: 'FORM.ATTACH',\n        formRef,\n      });\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [clerk, exampleMode, formRef?.id, !!router, clerk.loaded]);\n\n  return (\n    <SignInRouterCtx.Provider actorRef={actor}>\n      {isRootPath && !isReady && fallback ? <Form>{fallback}</Form> : null}\n      {clerk.loaded && isReady ? children : null}\n    </SignInRouterCtx.Provider>\n  );\n}\n\nexport type SignInRootProps = Omit<SignInFlowProviderProps, 'isRootPath'> & {\n  /**\n   * The base path for your sign-in route.\n   * Will be automatically inferred in Next.js.\n   * @example `/sign-in`\n   */\n  path?: string;\n  /**\n   * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.\n   */\n  routing?: ROUTING;\n};\n\n/**\n * Root component for the sign-in flow. It sets up providers and state management for its children.\n * Must wrap all sign-in related components.\n *\n * @param {string} path - The root path the sign-in flow is mounted at. Will be automatically inferred in Next.js. You can set it to `/sign-in` for example.\n * @param {React.ReactNode} fallback - Fallback markup to render while Clerk is loading. Default: `null`\n * @param {string} routing - If you want to render Clerk Elements in e.g. a modal, use the `'virtual'` routing mode. Default: `'path'`\n *\n * @example\n * import * as SignIn from \"@clerk/elements/sign-in\"\n *\n * export default SignInPage = () => (\n *  <SignIn.Root>\n *  </SignIn.Root>\n * )\n */\nexport function SignInRoot({\n  children,\n  exampleMode = false,\n  fallback = null,\n  path: pathProp,\n  routing = ROUTING.path,\n}: SignInRootProps): JSX.Element | null {\n  const clerk = useClerk();\n  const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)();\n  const pathname = router.pathname();\n  const inferredPath = removeOptionalCatchAllSegment(pathname);\n  const path = pathProp || inferredPath || SIGN_IN_DEFAULT_BASE_PATH;\n  const isRootPath = path === pathname;\n\n  clerk.telemetry?.record(\n    eventComponentMounted('Elements_SignInRoot', {\n      exampleMode,\n      fallback: Boolean(fallback),\n      path,\n      routing,\n    }),\n  );\n\n  return (\n    <Router\n      basePath={path}\n      router={router}\n    >\n      <FormStoreProvider>\n        <SignInFlowProvider\n          exampleMode={exampleMode}\n          fallback={fallback}\n          isRootPath={isRootPath}\n        >\n          {children}\n        </SignInFlowProvider>\n      </FormStoreProvider>\n    </Router>\n  );\n}\n","import * as React from 'react';\n\nimport type { FormSubmitProps } from '~/react/common';\nimport { Submit } from '~/react/common';\n\nimport type { SignInNavigateProps } from './navigate';\nimport { SignInNavigate } from './navigate';\nimport type { SignInResendProps } from './resend';\nimport { SignInResend } from './resend';\nimport { SignInSetActiveSession } from './set-active-session';\n\nexport type SignInActionProps = { asChild?: boolean } & FormSubmitProps &\n  (\n    | ({\n        navigate: SignInNavigateProps['to'];\n        resend?: never;\n        setActiveSession?: never;\n        submit?: never;\n      } & Omit<SignInNavigateProps, 'to'>)\n    | { navigate?: never; resend?: never; setActiveSession?: never; submit: true }\n    | { navigate?: never; resend?: never; setActiveSession: true; submit?: never }\n    | ({ navigate?: never; resend: true; setActiveSession?: never; submit?: never } & SignInResendProps)\n  );\n\nconst DISPLAY_NAME = 'SignInAction';\n\n/**\n * Perform various actions during the sign-in process. This component is used to navigate between steps, submit the form, or resend a verification codes.\n *\n * @param {boolean} [submit] - If `true`, the action will submit the form.\n * @param {string} [navigate] - The name of the step to navigate to.\n * @param {boolean} [resend] - If `true`, the action will resend the verification code for the currently active strategy, if applicable.\n * @param {Function} [fallback] - Only used when `resend` is `true`. If provided, the fallback markup will be rendered before the resend delay has expired.\n *\n * @example\n * <SignIn.Action navigate=\"start\">Go Back</SignIn.Action>\n *\n * @example\n * <SignIn.Action submit>Sign In</SignIn.Action>\n *\n * @example\n * <SignIn.Action resend>Resend</SignIn.Action>\n */\nexport const SignInAction = React.forwardRef<React.ElementRef<'button'>, SignInActionProps>((props, forwardedRef) => {\n  const { submit, navigate, resend, setActiveSession, ...rest } = props;\n  let Comp: React.ForwardRefExoticComponent<any> | undefined;\n\n  if (submit) {\n    Comp = Submit;\n  } else if (navigate) {\n    Comp = SignInNavigate;\n  } else if (resend) {\n    Comp = SignInResend;\n  } else if (setActiveSession) {\n    Comp = SignInSetActiveSession;\n  }\n\n  return Comp ? (\n    <Comp\n      to={navigate}\n      {...rest}\n      ref={forwardedRef}\n    />\n  ) : null;\n});\n\nSignInAction.displayName = DISPLAY_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nconst SIGN_IN_NAVIGATE_NAME = 'SignInNavigate';\nconst SignInNavigationEventMap = {\n  start: 'NAVIGATE.START',\n  previous: 'NAVIGATE.PREVIOUS',\n  'choose-strategy': 'NAVIGATE.CHOOSE_STRATEGY',\n  'forgot-password': 'NAVIGATE.FORGOT_PASSWORD',\n} as const;\n\nexport type SignInNavigateElementKey = keyof typeof SignInNavigationEventMap;\n\nexport type SignInNavigateElement = React.ElementRef<'button'>;\nexport type SignInNavigateProps = {\n  asChild?: boolean;\n  to: SignInNavigateElementKey;\n  children: React.ReactNode;\n};\n\n/**\n * Renders a button which will navigate to a different step in the sign-in flow.\n *\n * @param {SignInNavigateElementKey} to - The step to navigate to.\n * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.\n *\n * @example\n * <Navigate to=\"choose-strategy\">\n *    Choose a different sign-in method...\n * </Navigate>\n */\nexport const SignInNavigate = React.forwardRef<SignInNavigateElement, SignInNavigateProps>(\n  ({ asChild, to, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef();\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      const type = SignInNavigationEventMap[to];\n\n      if (actorRef.getSnapshot().can({ type })) {\n        actorRef.send({ type });\n      } else {\n        console.warn(\n          `Clerk: <SignIn.Action navigate=\"${to}\"> is an invalid navigation event. You can only navigate to: ${Object.keys(SignInNavigationEventMap).join(', ')}.`,\n        );\n      }\n    }, [actorRef, to]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInNavigate.displayName = SIGN_IN_NAVIGATE_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport { useSelector } from '@xstate/react';\nimport * as React from 'react';\n\nimport { SignInFirstFactorCtx, SignInSecondFactorCtx } from '../verifications';\n\nexport type SignInResendElement = React.ElementRef<'button'>;\nexport type SignInResendFallbackProps = {\n  resendable: boolean;\n  resendableAfter: number;\n};\nexport type SignInResendProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n  /**\n   * A fallback component to render when the resend action is not available.\n   * This can be a React element or a function that receives the `resendableAfter` prop.\n   */\n  fallback?: React.ReactNode | ((props: SignInResendFallbackProps) => React.ReactNode);\n};\n\nconst SIGN_IN_RESEND_NAME = 'SignInResend';\n\n/**\n * Resend verification codes during the sign-in process.\n * This component must be used within the <Step name=\"verifications\">.\n *\n * @note This component is not intended to be used directly. Instead, use the <Action resend> component.\n *\n * @example\n * import { Action } from '@clerk/elements/sign-in';\n * <Action resend fallback={({ resendableAfter }) => <p>Resendable in: {resendableAfter}s</p>}>Resend</Action>;\n */\nexport const SignInResend = React.forwardRef<SignInResendElement, SignInResendProps>(\n  ({ asChild, fallback, ...rest }, forwardedRef) => {\n    const firstFactorRef = SignInFirstFactorCtx.useActorRef(true);\n    const secondFactorRef = SignInSecondFactorCtx.useActorRef(true);\n    const actorRef = firstFactorRef || secondFactorRef;\n\n    if (!actorRef) {\n      throw new Error('The resend action must be used within <SignIn.Step name=\"verifications\">.');\n    }\n\n    const fallbackProps: SignInResendFallbackProps = useSelector(\n      actorRef,\n      state => ({\n        resendable: state.context.resendable,\n        resendableAfter: state.context.resendableAfter,\n      }),\n      (a, b) => a.resendableAfter === b.resendableAfter && a.resendable === b.resendable,\n    );\n\n    if (fallback && !fallbackProps.resendable) {\n      return typeof fallback === 'function' ? fallback(fallbackProps) : fallback;\n    }\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        disabled={!fallbackProps.resendable}\n        onClick={() => actorRef.send({ type: 'RETRY' })}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInResend.displayName = SIGN_IN_RESEND_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport type { SignInRouterSessionSetActiveEvent } from '~/internals/machines/sign-in';\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nimport { useSignInActiveSessionContext } from '../choose-session/choose-session.hooks';\n\nconst DISPLAY_NAME = 'SignInSetActiveSession';\n\nexport type SignInSetActiveSessionElement = React.ElementRef<'button'>;\nexport type SignInSetActiveSessionProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n};\n\n/**\n * Sets the active session to the session with the provided ID.\n *\n * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.\n *\n * @example\n * <SignInSetActiveSession setActiveSession>\n *    t*****m@clerk.dev\n * </SignInSetActiveSession>\n */\nexport const SignInSetActiveSession = React.forwardRef<SignInSetActiveSessionElement, SignInSetActiveSessionProps>(\n  ({ asChild, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef();\n    const session = useSignInActiveSessionContext();\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      const event: SignInRouterSessionSetActiveEvent = { type: 'SESSION.SET_ACTIVE', id: session.id };\n\n      if (actorRef.getSnapshot().can(event)) {\n        actorRef.send(event);\n      } else {\n        console.warn(\n          `Clerk: <SignIn.Action setActiveSession> is an invalid event. You can only choose an active session from <SignIn.Step name=\"choose-session\">.`,\n        );\n      }\n    }, [actorRef, session.id]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInSetActiveSession.displayName = DISPLAY_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { SignInRouterCtx } from '~/react/sign-in/context';\n\nexport type SignInPasskeyElement = React.ElementRef<'button'>;\n\nexport type SignInPasskeyProps = {\n  asChild?: boolean;\n  children: React.ReactNode;\n} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\nconst SIGN_IN_PASSKEY_NAME = 'SignInPasskey';\n\n/**\n * Prompt users to select a passkey from their device in order to sign in.\n * This component must be used within the <Step name=\"start\">.\n *\n * @example\n * <SignIn.Action passkey>Use Passkey instead</SignIn.Action>\n */\nexport const SignInPasskey = React.forwardRef<SignInPasskeyElement, SignInPasskeyProps>(\n  ({ asChild, ...rest }, forwardedRef) => {\n    const actorRef = SignInRouterCtx.useActorRef(true);\n\n    const Comp = asChild ? Slot : 'button';\n    const defaultProps = asChild ? {} : { type: 'button' as const };\n\n    const sendEvent = React.useCallback(() => {\n      actorRef?.send({ type: 'AUTHENTICATE.PASSKEY' });\n    }, [actorRef]);\n\n    return (\n      <Comp\n        {...defaultProps}\n        {...rest}\n        onClick={sendEvent}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSignInPasskey.displayName = SIGN_IN_PASSKEY_NAME;\n","import { useMemo } from 'react';\n\nimport { SignInSafeIdentifierSelectorForStrategy, SignInSalutationSelector } from '~/internals/machines/sign-in';\n\nimport { SignInRouterCtx, useSignInStrategy } from './context';\n\n/**\n * Render an identifier that has been provided by the user during a sign-in attempt. Renders a `string` (or empty string if it can't find an identifier).\n *\n * @example\n * <SignIn.Strategy name=\"email_code\">\n *  <h1>Check your email</h1>\n *  <p>We've sent a code to <SignIn.SafeIdentifier />.</p>\n * </SignIn.Strategy>\n */\nexport function SignInSafeIdentifier({ transform }: { transform?: (s: string) => string }): string {\n  const strategy = useSignInStrategy();\n  const selector = useMemo(() => SignInSafeIdentifierSelectorForStrategy(strategy), [strategy]);\n  const safeIdentifier = SignInRouterCtx.useSelector(selector);\n\n  if (transform) {\n    return transform(safeIdentifier);\n  }\n\n  return safeIdentifier;\n}\n\n/**\n * Render a salutation for the user during a sign-in attempt. It attempts to resolve these values in this specific order: First name, Last name, Identifier. Renders a `string` (or empty string if it can't find an identifier).\n *\n * @example\n * <SignIn.Strategy name=\"password\">\n *  <p>Welcome back <SignIn.Salutation />!</p>\n * </SignIn.Strategy>\n */\nexport function SignInSalutation(): string {\n  return SignInRouterCtx.useSelector(SignInSalutationSelector);\n}\n"],"mappings":"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","names":["React","React","jsx","Slot","useSelector","React","jsx","useSelector","Slot","Slot","React","jsx","Slot","jsx","DISPLAY_NAME","Slot","React","jsx","Slot"]}

package/dist/react/sign-up/index.js

@@ -48,11 +48,11 @@ module.exports = __toCommonJS(sign_up_exports);
 var import_client_only2 = require("client-only");
 
 // src/react/sign-up/root.tsx
-var import_react6 = require("@clerk/shared/react");
-var import_router5 = require("@clerk/shared/router");
+var import_react5 = require("@clerk/shared/react");
+var import_router4 = require("@clerk/shared/router");
 var import_telemetry = require("@clerk/shared/telemetry");
-var import_react7 = require("@xstate/react");
-var import_react8 = require("react");
+var import_react6 = require("@xstate/react");
+var import_react7 = require("react");
 var import_xstate8 = require("xstate");
 
 // src/utils/safe-access.ts
@@ -2172,49 +2172,21 @@ var DISPLAY_NAME2 = "ClerkElementsSubmit";
 var Submit = import_react_form2.Submit;
 Submit.displayName = DISPLAY_NAME2;
 
-// src/react/utils/path-inference/next.tsx
-var import_router4 = require("next/compat/router");
-var import_navigation = require("next/navigation");
-var import_react5 = __toESM(require("react"));
-
 // src/react/utils/path-inference/utils.ts
 function removeOptionalCatchAllSegment(pathname) {
   return pathname.replace(/\/\[\[\.\.\..*/, "");
 }
 
-// src/react/utils/path-inference/next.tsx
-var usePathnameWithoutCatchAll = () => {
-  const pathRef = import_react5.default.useRef();
-  const pagesRouter = (0, import_router4.useRouter)();
-  if (pagesRouter) {
-    if (pathRef.current) {
-      return pathRef.current;
-    } else {
-      pathRef.current = removeOptionalCatchAllSegment(pagesRouter.pathname);
-      return pathRef.current;
-    }
-  }
-  const pathname = (0, import_navigation.usePathname)() || "";
-  const pathParts = pathname.split("/").filter(Boolean);
-  const catchAllParams = Object.values((0, import_navigation.useParams)() || {}).filter((v) => Array.isArray(v)).flat(Infinity);
-  if (pathRef.current) {
-    return pathRef.current;
-  } else {
-    pathRef.current = `/${pathParts.slice(0, pathParts.length - catchAllParams.length).join("/")}`;
-    return pathRef.current;
-  }
-};
-
 // src/react/sign-up/root.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var actor = (0, import_xstate8.createActor)(SignUpRouterMachine, { inspect });
 actor.start();
 function SignUpFlowProvider({ children, exampleMode, fallback, isRootPath }) {
-  const clerk = (0, import_react6.useClerk)();
+  const clerk = (0, import_react5.useClerk)();
   const router = (0, import_router2.useClerkRouter)();
   const formRef = useFormStore();
-  const isReady = (0, import_react7.useSelector)(actor, (state) => state.value !== "Idle");
-  (0, import_react8.useEffect)(() => {
+  const isReady = (0, import_react6.useSelector)(actor, (state) => state.value !== "Idle");
+  (0, import_react7.useEffect)(() => {
     if (!clerk || !router) {
       return;
     }
@@ -2256,9 +2228,12 @@ function SignUpRoot({
   routing = ROUTING.path
 }) {
   var _a;
-  const clerk = (0, import_react6.useClerk)();
-  const inferredPath = usePathnameWithoutCatchAll();
+  const clerk = (0, import_react5.useClerk)();
+  const router = (routing === ROUTING.virtual ? useVirtualRouter : import_router4.useClerkHostRouter)();
+  const pathname = router.pathname();
+  const inferredPath = removeOptionalCatchAllSegment(pathname);
   const path = pathProp || inferredPath || SIGN_UP_DEFAULT_BASE_PATH;
+  const isRootPath = path === pathname;
   (_a = clerk.telemetry) == null ? void 0 : _a.record(
     (0, import_telemetry.eventComponentMounted)("Elements_SignUpRoot", {
       exampleMode,
@@ -2267,8 +2242,6 @@ function SignUpRoot({
       routing
     })
   );
-  const router = (routing === ROUTING.virtual ? useVirtualRouter : import_router5.useClerkHostRouter)();
-  const isRootPath = path === router.pathname();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_router2.Router,
     {
@@ -2288,17 +2261,17 @@ function SignUpRoot({
 }
 
 // src/react/sign-up/step.tsx
-var import_react10 = require("@clerk/shared/react");
+var import_react9 = require("@clerk/shared/react");
 var import_telemetry2 = require("@clerk/shared/telemetry");
 
 // src/react/hooks/use-active-tags.hook.ts
-var import_react9 = require("@xstate/react");
+var import_react8 = require("@xstate/react");
 var ActiveTagsMode = {
   any: "any",
   all: "all"
 };
 function useActiveTags(actor2, tags, mode = ActiveTagsMode.any) {
-  const state = (0, import_react9.useSelector)(
+  const state = (0, import_react8.useSelector)(
     actor2,
     (s) => s,
     (prev, next) => prev.tags === next.tags
@@ -2427,7 +2400,7 @@ var SIGN_UP_STEPS = {
 };
 function SignUpStep(props) {
   var _a;
-  const clerk = (0, import_react10.useClerk)();
+  const clerk = (0, import_react9.useClerk)();
   (_a = clerk.telemetry) == null ? void 0 : _a.record((0, import_telemetry2.eventComponentMounted)("Elements_SignUpStep", { name: props.name }));
   switch (props.name) {
     case SIGN_UP_STEPS.start:
@@ -2446,26 +2419,26 @@ function SignUpStep(props) {
 }
 
 // src/react/sign-up/action/action.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 
 // src/react/common/index.ts
 var import_client_only = require("client-only");
 
 // src/react/sign-up/action/navigate.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SIGN_UP_NAVIGATE_NAME = "SignInNavigate";
 var SignUpNavigationEventMap = {
   start: `NAVIGATE.START`,
   previous: `NAVIGATE.PREVIOUS`
 };
-var SignUpNavigate = React4.forwardRef(
+var SignUpNavigate = React3.forwardRef(
   ({ asChild, to, ...rest }, forwardedRef) => {
     const actorRef = SignUpRouterCtx.useActorRef();
     const Comp = asChild ? import_react_slot.Slot : "button";
     const defaultProps = asChild ? {} : { type: "button" };
-    const sendEvent = React4.useCallback(() => {
+    const sendEvent = React3.useCallback(() => {
       const type = SignUpNavigationEventMap[to];
       if (actorRef.getSnapshot().can({ type })) {
         actorRef.send({ type });
@@ -2490,17 +2463,17 @@ SignUpNavigate.displayName = SIGN_UP_NAVIGATE_NAME;
 
 // src/react/sign-up/action/resend.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react11 = require("@xstate/react");
-var React5 = __toESM(require("react"));
+var import_react10 = require("@xstate/react");
+var React4 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SIGN_UP_RESEND_NAME = "SignUpResend";
-var SignUpResend = React5.forwardRef(
+var SignUpResend = React4.forwardRef(
   ({ asChild, fallback, ...rest }, forwardedRef) => {
     const ref = SignUpVerificationCtx.useActorRef(true);
     if (!ref) {
       throw new Error('The resend action must be used within <SignUp.Step name="verifications">.');
     }
-    const fallbackProps = (0, import_react11.useSelector)(
+    const fallbackProps = (0, import_react10.useSelector)(
       ref,
       (state) => ({
         resendable: state.context.resendable,
@@ -2529,7 +2502,7 @@ SignUpResend.displayName = SIGN_UP_RESEND_NAME;
 
 // src/react/sign-up/action/action.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var SignUpAction = React6.forwardRef((props, forwardedRef) => {
+var SignUpAction = React5.forwardRef((props, forwardedRef) => {
   const { submit, navigate, resend, ...rest } = props;
   let Comp;
   if (submit) {
@@ -2552,9 +2525,9 @@ SignUpAction.displayName = "SignUpAction";
 
 // src/react/sign-up/captcha.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
-var React7 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var SignUpCaptcha = React7.forwardRef(
+var SignUpCaptcha = React6.forwardRef(
   ({ asChild, children, ...rest }, forwardedRef) => {
     const ref = SignUpStartCtx.useActorRef(true);
     if (!ref) {