@coinbase/cdp-react 0.0.97 → 0.0.99

package/dist/components/VerifyMfa/VerifyMfaFooter.d.ts

@@ -1,2 +1,20 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A footer component for the MFA verification flow.
+ *
+ * @param props - The props for the component.
+ * @returns The rendered footer.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ *   <VerifyMfaFooter />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaImage.d.ts

@@ -1,6 +1,29 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VerifyMfaMethodComponentProps } from './types';
+/**
+ * The props for the VerifyMfaImage component.
+ */
 export interface VerifyMfaImageProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
+/**
+ * A description for the VerifyMfa component.
+ *
+ * @param {VerifyMfaImageProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The element type to render the description as.
+ * @param {MfaMethod} [props.method] - The MFA method to render the description for.
+ * @param {VerifyMfaState["step"]} [props.step] - The step of the verification flow.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaImage />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaImage: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaItem.d.ts

@@ -1,10 +1,30 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { MfaMethod } from './types';
+/**
+ * The props for the VerifyMfaItem component.
+ *
+ * @see {@link VerifyMfaItem}
+ */
 export interface VerifyMfaItemProps {
+    /** The MFA method this item represents. */
     method: MfaMethod;
+    /** An icon to display. */
     icon?: ReactNode;
+    /** A label for the MFA method. */
     label: string;
+    /** A function to call when the user selects this method. */
     onSelect: MouseEventHandler<HTMLButtonElement>;
 }
+/**
+ * A component for displaying an MFA method in the verification list.
+ *
+ * @param {VerifyMfaItemProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @see {@link VerifyMfaItems}
+ * @see {@link VerifyMfa}
+ *
+ * @group Components
+ */
 declare const VerifyMfaItem: ({ icon, label, onSelect }: VerifyMfaItemProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaItem };

package/dist/components/VerifyMfa/VerifyMfaItems.d.ts

@@ -1,9 +1,27 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { MfaMethod } from './types';
 import { VerifyMfaItemProps } from './VerifyMfaItem';
+/**
+ * The props for the VerifyMfaItems component.
+ *
+ * @see {@link VerifyMfaItems}
+ */
 interface VerifyMfaItemsProps extends Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
+    /** A render function for the MFA method item. */
     children?: (props: VerifyMfaItemProps) => ReactNode;
+    /** A function to call when a method is selected. */
     onSelect?: (method: MfaMethod) => void;
 }
+/**
+ * A list of alternate MFA verification methods.
+ * Filters out the currently selected method.
+ *
+ * @param {VerifyMfaItemsProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @see {@link VerifyMfa}
+ *
+ * @group Components
+ */
 declare const VerifyMfaItems: ({ children, className, onSelect, ...props }: VerifyMfaItemsProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaItems, type VerifyMfaItemsProps };

package/dist/components/VerifyMfa/VerifyMfaProvider.d.ts

@@ -1,15 +1,55 @@
 import { Dispatch, ReactNode } from 'react';
 import { VerifyMfaAction, VerifyMfaState } from './types';
+/**
+ * The context value for the VerifyMfa component.
+ *
+ * @see {@link useVerifyMfaContext}
+ */
 export interface VerifyMfaContextValue {
+    /** The function to call when verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** The function to call when verification errors. */
     onError?: (error: Error) => void;
+    /** The current state of the verification flow. */
     state: VerifyMfaState;
+    /** The dispatch function to update the state. */
     dispatch: Dispatch<VerifyMfaAction>;
 }
+/**
+ * Hook to access the VerifyMfa context.
+ *
+ * @returns The current state and dispatch function of the VerifyMfa component.
+ *
+ * @group Hooks
+ *
+ * @see {@link VerifyMfa}
+ *
+ * @example
+ * ```tsx
+ * function MfaCodeDisplay() {
+ *   const { state } = useVerifyMfaContext();
+ *   return <div>Code: {state.mfaCode}</div>;
+ * }
+ * ```
+ */
 export declare const useVerifyMfaContext: () => VerifyMfaContextValue;
+/**
+ * Props for the VerifyMfaProvider component.
+ */
 export interface VerifyMfaProviderProps {
     children: ReactNode;
+    /** The function to call when verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** The function to call when verification errors. */
     onError?: (error: Error) => void;
 }
+/**
+ * A provider for the VerifyMfaContext.
+ *
+ * @param props - The props for the VerifyMfaProvider component.
+ * @param props.children - The children to render inside the provider.
+ * @param props.onSuccess - The function to call when verification is successful.
+ * @param props.onError - The function to call when verification errors.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const VerifyMfaProvider: ({ children, onError, onSuccess }: VerifyMfaProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaTitle.d.ts

@@ -1,6 +1,30 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VerifyMfaMethodComponentProps } from './types';
+/**
+ * The props for the VerifyMfaTitle component.
+ */
 export interface VerifyMfaTitleProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the title as. */
     as?: ElementType;
 }
+/**
+ * A title for the VerifyMfa component.
+ *
+ * @param {VerifyMfaTitleProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The element type to render the title as.
+ * @param {MfaMethod} [props.method] - The MFA method to render the title for.
+ * @param {VerifyMfaState["step"]} [props.step] - The step of the verification flow.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaTitle: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaTitleProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/index.d.ts

@@ -11,10 +11,65 @@ import { VerifyMfaItem, VerifyMfaItemProps } from './VerifyMfaItem';
 import { VerifyMfaItems, VerifyMfaItemsProps } from './VerifyMfaItems';
 import { useVerifyMfaContext, VerifyMfaContextValue } from './VerifyMfaProvider';
 import { VerifyMfaTitle, VerifyMfaTitleProps } from './VerifyMfaTitle';
+/**
+ * Props for the VerifyMfa component.
+ */
 interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSubmit" | "onError"> {
+    /**
+     * The children of the component. Leave empty to use the default verification UI.
+     *
+     * If a function is provided, it will be called with the current state of the verification flow.
+     * The function should return a `ReactNode`.
+     *
+     * @example
+     * ```tsx
+     * <VerifyMfa>
+     *   {(state) => (
+     *     <>
+     *       <VerifyMfaTitle />
+     *       <VerifyMfaDescription />
+     *       <VerifyMfaFlow />
+     *     </>
+     *   )}
+     * </VerifyMfa>
+     * ```
+     */
     children?: ReactNode | ((state: VerifyMfaState) => ReactNode);
+    /** A function to call when the verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** A function to call when the verification errors. */
     onError?: (error: APIError | Error) => void;
 }
+/**
+ * A component for MFA verification. Prompts enrolled users to enter their
+ * authenticator code.
+ *
+ * @param {VerifyMfaProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @example
+ * ```tsx
+ * // Default usage
+ * <VerifyMfa onSuccess={(mfaCode) => console.log("Verified!", mfaCode)} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom UI
+ * <VerifyMfa onSuccess={handleSuccess}>
+ *   {(state) => (
+ *     <>
+ *       <h2>Enter your code</h2>
+ *       <VerifyMfaFlow />
+ *       {state.error && <p className="error">{state.error}</p>}
+ *     </>
+ *   )}
+ * </VerifyMfa>
+ * ```
+ */
 declare const VerifyMfa: ({ onSuccess, onError, ...props }: VerifyMfaProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfa, VerifyMfaDescription, VerifyMfaFlow, VerifyMfaFlowBackButton, VerifyMfaFooter, VerifyMfaImage, VerifyMfaItem, VerifyMfaItems, VerifyMfaTitle, useVerifyMfaContext, useVerifyMfaFlow, type VerifyMfaProps, type VerifyMfaContextValue, type VerifyMfaDescriptionProps, type VerifyMfaFlowBackButtonProps, type VerifyMfaFlowContextValue, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaItemProps, type VerifyMfaItemsProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaStep, };

package/dist/components/VerifyMfa/methods/sms.d.ts

@@ -1,6 +1,35 @@
 import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+/**
+ * Content component for SMS verification.
+ * Renders an OTP form for entering the SMS code.
+ *
+ * @param {MfaMethodContentProps} props - The props for the component.
+ * @param {boolean} [props.autoFocus] - Whether to auto-focus the input.
+ * @param {(error: Error) => void} [props.onError] - The callback to call when verification errors.
+ * @param {(mfaCode: string) => void} [props.onSuccess] - The callback to call when verification is successful.
+ * @param {(props: { step: VerifyMfaStep; Content: ReactNode }) => ReactNode} [props.children] - Optional render prop for custom rendering.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Image component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const smsMethodConfig: MfaMethodConfig;

package/dist/components/VerifyMfa/methods/totp.d.ts

@@ -1,6 +1,35 @@
 import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+/**
+ * Content component for TOTP verification.
+ * Renders an OTP form for entering the authenticator code.
+ *
+ * @param {MfaMethodContentProps} props - The props for the component.
+ * @param {boolean} [props.autoFocus] - Whether to auto-focus the input.
+ * @param {(error: Error) => void} [props.onError] - The callback to call when verification errors.
+ * @param {(mfaCode: string) => void} [props.onSuccess] - The callback to call when verification is successful.
+ * @param {(props: { step: VerifyMfaState["step"]; Content: ReactNode }) => ReactNode} [props.children] - Optional render prop for custom rendering.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Image component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const totpMethodConfig: MfaMethodConfig;

package/dist/components/VerifyMfa/types.d.ts

@@ -2,21 +2,43 @@ import { APIError } from '@coinbase/cdp-hooks';
 import { FC, ReactNode } from 'react';
 import { MfaMethod } from '../EnrollMfa/types';
 export { type MfaMethod };
+/**
+ * The steps in the MFA verification flow.
+ */
 export type VerifyMfaStep = "verification" | "list";
+/**
+ * Props for the VerifyMfaTitle and VerifyMfaDescription components.
+ */
 export interface VerifyMfaMethodComponentProps {
+    /** The MFA method to render the title/description for. */
     method?: MfaMethod;
+    /** If set, will render for this step regardless of context value. */
     step?: VerifyMfaStep;
 }
+/**
+ * The state of the VerifyMfa component.
+ */
 export interface VerifyMfaState {
+    /** The currently selected MFA method. */
     method: MfaMethod;
+    /** The available MFA methods for verification (from user's enrolled methods). */
     methods: MfaMethod[];
+    /** The current step of the verification flow. */
     step: VerifyMfaStep;
+    /** The direction of the flow transition. */
     flowDirection: "left" | "right";
+    /** The MFA code entered by the user. */
     mfaCode: string;
+    /** Error message or APIError object. */
     error: string | APIError | null;
+    /** Whether a verification request is pending. */
     isPending: boolean;
+    /** Whether the verification was successful. */
     isSuccess: boolean;
 }
+/**
+ * The actions that can be performed on the VerifyMfa state.
+ */
 export type VerifyMfaAction = {
     type: "SET_STEP";
     payload: {
@@ -61,6 +83,9 @@ export type VerifyMfaAction = {
 } | {
     type: "RESET_STATE";
 };
+/**
+ * Shared props for an MFA method content component.
+ */
 export interface MfaMethodContentProps {
     step: VerifyMfaState["step"];
     autoFocus?: boolean;
@@ -71,9 +96,17 @@ export interface MfaMethodContentProps {
         Content: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The configuration for an MFA verification method.
+ * Each method has its own title, description, and content components.
+ */
 export interface MfaMethodConfig {
+    /** The main content component for this method (e.g., OTPForm, PasskeyUI). */
     content: FC<MfaMethodContentProps>;
+    /** The description component for this method. */
     description: FC<VerifyMfaMethodComponentProps>;
+    /** The image component for this method. */
     image: FC<VerifyMfaMethodComponentProps>;
+    /** The title component for this method. */
     title: FC<VerifyMfaMethodComponentProps>;
 }

package/dist/components/VerifyMfa/useVerifyMfaReducer.d.ts

@@ -1,3 +1,10 @@
 import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
 export declare const STEPS: readonly VerifyMfaStep[];
+/**
+ * A reducer hook for the VerifyMfa component.
+ *
+ * @param initialState - The initial state of the component.
+ *
+ * @returns The current state and dispatcher to perform actions on the state.
+ */
 export declare const useVerifyMfaReducer: (initialState: VerifyMfaState) => [VerifyMfaState, import('react').ActionDispatch<[action: VerifyMfaAction]>];

package/dist/components/VerifyMfaInline/index.d.ts

@@ -1,40 +1,252 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { ButtonSize, ButtonVariant } from '../../theme/theme';
+/**
+ * The views of the inline MFA flow.
+ *
+ * @see {@link VerifyMfaInline}
+ */
 type VerifyMfaInlineView = "verify" | "content";
+/**
+ * The direction of the transition animation.
+ */
 type VerifyMfaInlineDirection = "left" | "right";
+/**
+ * The context value for the VerifyMfaInline component.
+ *
+ * @see {@link useVerifyMfaInlineContext}
+ */
 interface VerifyMfaInlineContextValue {
+    /** The current view of the inline MFA flow. */
     view: VerifyMfaInlineView;
+    /** A function to go to the verify view. */
     goToVerify: () => void;
+    /** A function to go to the content view. Optionally specify animation direction. */
     goToContent: (direction?: VerifyMfaInlineDirection) => void;
+    /** A function to go back to the previous view. */
     goBack: () => void;
 }
+/**
+ * A hook to get the VerifyMfaInline context value.
+ *
+ * @returns {VerifyMfaInlineContextValue} The link auth flow context value.
+ *
+ * @see {@link VerifyMfaInline}
+ *
+ * @group Hooks
+ */
 declare const useVerifyMfaInlineContext: () => VerifyMfaInlineContextValue;
+/**
+ * Props for the VerifyMfaInline component.
+ *
+ * @see {@link VerifyMfaInline}
+ */
 interface VerifyMfaInlineProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The component children. Should include VerifyMfaInlineFlow.
+     * Can optionally include VerifyMfaInlineBackButton outside the Flow.
+     */
     children: ReactNode;
+    /**
+     * If true, forces MFA verification before showing content.
+     * Use this when you want users to verify BEFORE seeing the content.
+     *
+     * If false (default), content is shown first and MFA is triggered
+     * automatically when a protected action is called.
+     *
+     * @default true
+     */
     verifyFirst?: boolean;
+    /**
+     * Called when MFA verification completes successfully.
+     */
     onVerified?: () => void;
+    /**
+     * Called when MFA verification is cancelled.
+     * If provided, a back/cancel action in the verify view will trigger this
+     * and transition back to content.
+     */
     onCancel?: () => void;
+    /**
+     * The delay in milliseconds before transitioning to content after successful verification.
+     * This allows users to see the success state before the transition.
+     *
+     * @default 500
+     */
     successDelay?: number;
+    /**
+     * Additional class name for the container.
+     */
     className?: string;
 }
+/**
+ * Props for VerifyMfaInlineFlow component.
+ *
+ * @see {@link VerifyMfaInlineFlow}
+ */
 interface VerifyMfaInlineFlowProps {
+    /**
+     * The content to display. Can be:
+     * - A ReactNode: Used as the protected content (shown after MFA verification)
+     * - A render function: Receives `{ view, Content }` for full control over rendering
+     *
+     * When using a render function:
+     * - `view` is the current view ("verify" or "content")
+     * - `Content` is the default UI for that view (MFA form for "verify", null for "content")
+     */
     children: ReactNode | ((props: {
+        /** The verify view. */
         view: "verify";
+        /** The default content for for the "verify" view (i.e. the default MFA verification UI). */
         Content: ReactNode;
     } | {
+        /** The content view. */
         view: "content";
+        /** There is no default content for the "content" view (consumer provides content). */
         Content: null;
     }) => ReactNode);
+    /**
+     * Additional class name for the transition container.
+     */
     className?: string;
+    /**
+     * Whether to animate the height during transitions.
+     *
+     * @default true
+     */
     animateHeight?: boolean;
+    /**
+     * Whether to auto focus forms.
+     *
+     * @default true
+     */
     autoFocus?: boolean;
+    /**
+     * The type of transition to use between views.
+     * - "slide": Slides content left/right (default)
+     * - "fade": Fades content in/out
+     *
+     * @default "slide"
+     */
     transition?: "slide" | "fade";
 }
+/**
+ * Props for VerifyMfaInlineBackButton component.
+ *
+ * @see {@link VerifyMfaInlineBackButton}
+ */
 interface VerifyMfaInlineBackButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The size of the button. */
     size?: ButtonSize;
+    /** The variant of the button. */
     variant?: ButtonVariant;
 }
+/**
+ * Back button for navigating within the MFA verification flow or back to content.
+ *
+ * In `verifyFirst` mode, it only renders when the inner MFA flow has back navigation.
+ *
+ * Otherwise, it renders on the verify view and navigates back to content when the
+ * inner MFA flow can't go back.
+ *
+ * @param {VerifyMfaInlineBackButtonProps} props - The props for the component.
+ * @returns The back button, or null when there is nothing to navigate back to.
+ *
+ * @group Components
+ */
 declare const VerifyMfaInlineBackButton: ({ children, onClick, size, variant, ["aria-label"]: ariaLabel, className, ...props }: VerifyMfaInlineBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The transition component for the inline MFA flow.
+ * Place this inside VerifyMfaInline, alongside VerifyMfaInlineBackButton if needed.
+ *
+ * @param props - The props for the VerifyMfaInlineFlow component.
+ * @param props.children - The protected content or a render function for full control.
+ * @param props.className - Additional class name.
+ * @param props.animateHeight - Whether to animate height during transitions.
+ * @param props.autoFocus - Whether to auto focus forms.
+ * @param props.transition - The type of transition animation ("slide" or "fade").
+ * @returns The rendered transition component.
+ *
+ * @group Components
+ *
+ * @see {@link VerifyMfaInline}
+ */
 declare const VerifyMfaInlineFlow: ({ children, className, animateHeight, autoFocus, transition, }: VerifyMfaInlineFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A wrapper component that provides context and coordination for inline MFA verification.
+ * Use with VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton.
+ *
+ * By default, shows content first and automatically transitions to MFA verification
+ * when a protected action (like signing or exporting) is called. After verification,
+ * the action completes automatically.
+ *
+ * Use `verifyFirst` prop to force MFA verification before showing content.
+ *
+ * @param props - The props for the VerifyMfaInline component.
+ * @param props.children - Should include VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton.
+ * @param props.verifyFirst - If true, forces MFA verification before showing content.
+ * @param props.onVerified - Called when MFA verification completes.
+ * @param props.onCancel - Called when MFA verification is cancelled.
+ * @param props.className - Additional class name for the container.
+ * @param props.successDelay - The delay in milliseconds before transitioning to content after successful verification.
+ * @returns The rendered component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @see {@link VerifyMfaInlineBackButton}
+ * @see {@link VerifyMfaInlineFlow}
+ * @see {@link useVerifyMfaInlineContext}
+ *
+ * @example
+ * ```tsx lines
+ * // Simple usage: Just the flow
+ * function ExportWalletModal({ address }) {
+ *   return (
+ *     <Modal>
+ *       <VerifyMfaInline verifyFirst>
+ *         <VerifyMfaInlineFlow>
+ *           <ExportWallet address={address} skipMfa />
+ *         </VerifyMfaInlineFlow>
+ *       </VerifyMfaInline>
+ *     </Modal>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // With back button outside the transition
+ * function CustomModal() {
+ *   return (
+ *     <Modal>
+ *       <VerifyMfaInline>
+ *         <VerifyMfaInlineBackButton />
+ *         <VerifyMfaInlineFlow transition="fade">
+ *           <MyProtectedContent />
+ *         </VerifyMfaInlineFlow>
+ *       </VerifyMfaInline>
+ *     </Modal>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // With render function for full control
+ * function AdvancedModal() {
+ *   return (
+ *     <VerifyMfaInline verifyFirst>
+ *       <VerifyMfaInlineBackButton />
+ *       <VerifyMfaInlineFlow>
+ *         {({ view, Content }) => (
+ *           view === "verify" ? <div>{Content}</div> : <MyProtectedContent />
+ *         )}
+ *       </VerifyMfaInlineFlow>
+ *     </VerifyMfaInline>
+ *   );
+ * }
+ * ```
+ */
 declare const VerifyMfaInline: ({ children, verifyFirst, onVerified, onCancel, successDelay, className, ...props }: VerifyMfaInlineProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaInline, VerifyMfaInlineBackButton, VerifyMfaInlineFlow, useVerifyMfaInlineContext, type VerifyMfaInlineBackButtonProps, type VerifyMfaInlineContextValue, type VerifyMfaInlineDirection, type VerifyMfaInlineFlowProps, type VerifyMfaInlineProps, type VerifyMfaInlineView, };