import * as React from 'react';
import React__default from 'react';
import { R as ROUTING } from '../../index-BT_Jj2MC.js';
export { d as FirstFactor, e as SecondFactor, b as SessionList, c as SessionListItem, S as Step, f as Strategy, a as SupportedStrategy } from '../../step-MsK0UT__.js';
import { F as FormSubmitProps } from '../../submit-gXm55DfO.js';
import 'react/jsx-runtime';
import '@clerk/types';
import '@radix-ui/react-form';
import 'xstate';
import 'type-fest';

type SignInFlowProviderProps = {
    children: React__default.ReactNode;
    exampleMode?: boolean;
    /**
     * Fallback markup to render while Clerk is loading
     */
    fallback?: React__default.ReactNode;
    isRootPath: boolean;
};
type SignInRootProps = Omit<SignInFlowProviderProps, 'isRootPath'> & {
    /**
     * The base path for your sign-in route.
     * Will be automatically inferred in Next.js.
     * @example `/sign-in`
     */
    path?: string;
    /**
     * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.
     */
    routing?: ROUTING;
};
/**
 * Root component for the sign-in flow. It sets up providers and state management for its children.
 * Must wrap all sign-in related components.
 *
 * @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.
 * @param {React.ReactNode} fallback - Fallback markup to render while Clerk is loading. Default: `null`
 * @param {string} routing - If you want to render Clerk Elements in e.g. a modal, use the `'virtual'` routing mode. Default: `'path'`
 *
 * @example
 * import * as SignIn from "@clerk/elements/sign-in"
 *
 * export default SignInPage = () => (
 *  <SignIn.Root>
 *  </SignIn.Root>
 * )
 */
declare function SignInRoot({ children, exampleMode, fallback, path: pathProp, routing, }: SignInRootProps): JSX.Element | null;

declare const SignInNavigationEventMap: {
    readonly start: "NAVIGATE.START";
    readonly previous: "NAVIGATE.PREVIOUS";
    readonly 'choose-strategy': "NAVIGATE.CHOOSE_STRATEGY";
    readonly 'forgot-password': "NAVIGATE.FORGOT_PASSWORD";
};
type SignInNavigateElementKey = keyof typeof SignInNavigationEventMap;
type SignInNavigateProps = {
    asChild?: boolean;
    to: SignInNavigateElementKey;
    children: React.ReactNode;
};

type SignInResendFallbackProps = {
    resendable: boolean;
    resendableAfter: number;
};
type SignInResendProps = {
    asChild?: boolean;
    children: React.ReactNode;
    /**
     * A fallback component to render when the resend action is not available.
     * This can be a React element or a function that receives the `resendableAfter` prop.
     */
    fallback?: React.ReactNode | ((props: SignInResendFallbackProps) => React.ReactNode);
};

type SignInActionProps = {
    asChild?: boolean;
} & FormSubmitProps & (({
    navigate: SignInNavigateProps['to'];
    resend?: never;
    setActiveSession?: never;
    submit?: never;
} & Omit<SignInNavigateProps, 'to'>) | {
    navigate?: never;
    resend?: never;
    setActiveSession?: never;
    submit: true;
} | {
    navigate?: never;
    resend?: never;
    setActiveSession: true;
    submit?: never;
} | ({
    navigate?: never;
    resend: true;
    setActiveSession?: never;
    submit?: never;
} & SignInResendProps));
/**
 * Perform various actions during the sign-in process. This component is used to navigate between steps, submit the form, or resend a verification codes.
 *
 * @param {boolean} [submit] - If `true`, the action will submit the form.
 * @param {string} [navigate] - The name of the step to navigate to.
 * @param {boolean} [resend] - If `true`, the action will resend the verification code for the currently active strategy, if applicable.
 * @param {Function} [fallback] - Only used when `resend` is `true`. If provided, the fallback markup will be rendered before the resend delay has expired.
 *
 * @example
 * <SignIn.Action navigate="start">Go Back</SignIn.Action>
 *
 * @example
 * <SignIn.Action submit>Sign In</SignIn.Action>
 *
 * @example
 * <SignIn.Action resend>Resend</SignIn.Action>
 */
declare const SignInAction: React.ForwardRefExoticComponent<SignInActionProps & React.RefAttributes<HTMLButtonElement>>;

type SignInPasskeyProps = {
    asChild?: boolean;
    children: React.ReactNode;
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
/**
 * Prompt users to select a passkey from their device in order to sign in.
 * This component must be used within the <Step name="start">.
 *
 * @example
 * <SignIn.Action passkey>Use Passkey instead</SignIn.Action>
 */
declare const SignInPasskey: React.ForwardRefExoticComponent<Omit<SignInPasskeyProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

type CaptchaElementProps = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'id' | 'children'>;
/**
 * The `<SignIn.Captcha>` component is used to render the Cloudflare Turnstile widget. It must be used within the `<SignIn.Step name="sso-callback">` component.
 *
 * If utilizing the `asChild` prop, the component must be a self-closing element or component. Any children passed to the immediate child component of <SignIn.Captcha> will be ignored.
 *
 * @param {boolean} [asChild] - If true, `<Captcha />` will render as its child element, passing along any necessary props.
 *
 * @example
 * <SignIn.Root>
 *   <SignIn.Step name="sso-callback">
 *     <SignIn.Captcha />
 *   </SignIn.Step>
 * </SignIn.Root>
 *
 * @example
 * <SignIn.Root>
 *   <SignIn.Step name="sso-callback">
 *     <SignIn.Captcha asChild>
 *       <aside/>
 *     </SignIn.Captcha>
 *   </SignIn.Step>
 * </SignIn.Root>
 */
declare const SignInCaptcha: React.ForwardRefExoticComponent<(Omit<{
    asChild: true;
    children: React.ReactElement;
} & CaptchaElementProps, "ref"> | Omit<{
    asChild?: false;
    children?: undefined;
} & CaptchaElementProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

/**
 * 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).
 *
 * @example
 * <SignIn.Strategy name="email_code">
 *  <h1>Check your email</h1>
 *  <p>We've sent a code to <SignIn.SafeIdentifier />.</p>
 * </SignIn.Strategy>
 */
declare function SignInSafeIdentifier({ transform }: {
    transform?: (s: string) => string;
}): string;
/**
 * 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).
 *
 * @example
 * <SignIn.Strategy name="password">
 *  <p>Welcome back <SignIn.Salutation />!</p>
 * </SignIn.Strategy>
 */
declare function SignInSalutation(): string;

export { SignInAction as Action, SignInCaptcha as Captcha, SignInPasskey as Passkey, SignInRoot as Root, SignInSafeIdentifier as SafeIdentifier, SignInSalutation as Salutation, SignInRoot as SignIn };