import { ComponentChildren } from 'preact';
import { CountryCode } from 'libphonenumber-js';
import { CSSProperties } from 'preact';
import { FC } from 'preact/compat';
import { FunctionalComponent } from 'preact';
import { FunctionComponent } from 'preact';
import { HTMLAttributes } from 'preact';
import { HTMLAttributes as HTMLAttributes_2 } from 'preact/compat';
import { i18n } from 'i18next';
import { IdCaptureManager } from '@incodetech/core/id';
import { IdCaptureState } from '@incodetech/core/id';
import { InputHTMLAttributes } from 'preact';
import { JSX } from 'preact';
import { default as LightningIcon } from './lightningIcon.svg?react';
import { PermissionStatus as PermissionStatus_2 } from '@incodetech/core/camera';
import { PropsWithoutRef } from 'preact/compat';
import { Ref } from 'preact';
import { RefObject } from 'preact';
import { RefObject as RefObject_2 } from 'preact/compat';
import { SelfieManager } from '@incodetech/core/selfie';
import { SelfieState } from '@incodetech/core/selfie';
import { SVGProps } from 'preact/compat';
import { TargetedEvent } from 'preact';
import { TFunction } from 'i18next';
import { VNode } from 'preact';

/**
 * Allowlisted keys for overridable Lottie animations
 */
export declare type AnimationKey = 'id.tutorial.front' | 'id.tutorial.back' | 'id.tutorial.passport' | 'id.flip' | 'id.processing' | 'selfie.tutorial' | 'loader.spinner';

/**
 * A customer-supplied replacement for a built-in Lottie animation.
 *
 * - `LottieAnimationData` — a parsed Lottie JSON object.
 * - `{ url }` — fetched and cached at runtime.
 * - `{ animationData }` — explicit object form.
 */
export declare type AnimationOverride = LottieAnimationData | {
    url: string;
} | {
    animationData: LottieAnimationData;
};

export declare type AnimationOverrides = Partial<Record<AnimationKey, AnimationOverride>>;

/**
 * Allowlisted keys for overridable branded SVG illustrations
 */
export declare type AssetKey = 'faceMatch.success' | 'faceMatch.fail' | 'documentCapture.tutorial' | 'id.uploadScreen' | 'id.ageVerification.dob' | 'id.ageVerification.scan' | 'id.ageVerification.privacy' | 'videoSelfie.success' | 'videoSelfie.fail' | 'videoSelfie.tutorial.permission' | 'videoSelfie.tutorial.selfie' | 'videoSelfie.tutorial.frontId' | 'videoSelfie.tutorial.backId' | 'videoSelfie.tutorial.poa' | 'videoSelfie.tutorial.questions' | 'videoSelfie.tutorial.speech' | 'loader.spinner';

/**
 * A customer-supplied replacement for a built-in SVG illustration.
 *
 * - `string` — a URL, or raw `<svg …>` markup (detected by a leading `<`).
 * - `{ url }` — fetched and rendered via `<img>`; no script execution.
 * - `{ raw }` — inline markup; sanitized before injection.
 * - `{ svg }` — a precompiled component, for build-time integrations.
 */
export declare type AssetOverride = string | {
    url: string;
} | {
    raw: string;
} | {
    svg: SvgComponent;
};

export declare type AssetOverrides = Partial<Record<AssetKey, AssetOverride>>;

export declare const BaseTutorial: ({ className, animationData, title, titleId, subtitle, onContinue, buttonText, disclaimerText, isLoading, stopFramePosition, recolor, }: BaseTutorialProps) => JSX.Element;

declare type BaseTutorialProps = {
    className?: string;
    animationData: LottieAnimationData | null;
    title: string;
    titleId?: string;
    subtitle: string;
    onContinue: () => void;
    buttonText: string;
    disclaimerText: string;
    isLoading?: boolean;
    stopFramePosition?: 'first' | 'middle' | 'last';
    /**
     * Re-tint the animation's brand-colored elements to the active branding
     * color. On for built-in animations; pass `false` for customer overrides so
     * their artwork is rendered as-authored (no recoloring).
     */
    recolor?: boolean;
};

export declare const BottomSheet: FC<BottomSheetProps>;

declare type BottomSheetProps = {
    isOpen?: boolean;
    onClose?: () => void;
    labelledById: string;
    children: ComponentChildren;
    returnFocusRef?: RefObject<HTMLElement | null>;
};

export declare const Button: FunctionalComponent<PropsWithoutRef<ButtonProps> & {
ref?: Ref<HTMLButtonElement> | undefined;
}>;

declare type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'class' | 'type' | 'icon'> & {
    isLoading?: boolean;
    children?: ComponentChildren;
    class?: string;
    type?: 'button' | 'submit' | 'reset';
    variant?: 'primary' | 'secondary' | 'link';
    size?: ButtonSize;
    icon?: ComponentChildren;
    disabled?: boolean;
};

declare type ButtonSize = 'L' | 'M' | 'S' | 'inline';

export declare const CalendarIcon: FC<CalendarIconProps>;

declare type CalendarIconProps = {
    class?: string;
};

export declare const CameraFrame: FunctionalComponent<PropsWithoutRef<CameraFrameProps> & {
ref?: Ref<HTMLDivElement> | undefined;
}>;

declare type CameraFrameProps = {
    variant: CameraFrameVariant;
    aspectRatio?: string;
    orientation?: 'horizontal' | 'vertical';
    frameState?: CameraFrameState;
    className?: string;
    children?: ComponentChildren;
};

declare type CameraFrameState = 'idle' | 'capturing' | 'error' | 'focus' | 'success' | 'analyzing';

declare type CameraFrameVariant = 'fill' | 'locked';

export declare const CameraIcon: FC<CameraIconProps>;

declare type CameraIconProps = {
    size?: number | string;
};

/**
 * Absolute-positioned flex-column overlay that sits on top of the camera video.
 *
 * Expected child order:
 *  1. (optional) Module-specific header extras (e.g. CaptureNotification)
 *  2. CameraOverlayHeader
 *  3. CameraFrame
 *  4. CaptureFooter
 */
export declare const CameraOverlay: FC<CameraOverlayProps>;

export declare const CameraOverlayHeader: FC<CameraOverlayHeaderProps>;

declare type CameraOverlayHeaderProps = {
    title: string;
    subtitle?: string;
    visible?: boolean;
    className?: string;
    titleId?: string;
    titleRef?: RefObject_2<HTMLHeadingElement>;
};

declare type CameraOverlayProps = {
    children: ComponentChildren;
    className?: string;
};

export declare const CameraView: FC<CameraViewProps>;

declare type CameraViewProps = {
    stream: MediaStream | undefined;
    children: ComponentChildren;
    videoRef?: Ref<HTMLVideoElement>;
    onPlaying?: () => void;
    className?: string;
    mirrored?: boolean;
    'data-testid'?: string;
};

export declare const CaptureButtonIcon: FC<CaptureButtonIconProps>;

declare type CaptureButtonIconProps = {
    className?: string;
};

export declare const CaptureFooter: FC<CaptureFooterProps>;

declare type CaptureFooterProps = {
    onOpenHelp: () => void;
    onCapture?: () => void;
    isManualCapture?: boolean;
    captureAriaLabel?: string;
    captureAriaDescribedBy?: string;
    helpAriaLabel?: string;
    helpButtonRef?: Ref<HTMLButtonElement>;
    captureButtonRef?: Ref<HTMLButtonElement>;
    encryptionLabel?: string;
    children?: ComponentChildren;
    hideActions?: boolean;
};

declare type CaptureProps = {
    manager: SelfieManager;
    state: CaptureState;
};

declare type CaptureProps_2 = {
    manager: IdCaptureManager;
    state: CaptureState_2;
};

declare type CaptureState = Extract<SelfieState, {
    status: 'capture';
}>;

declare type CaptureState_2 = Extract<IdCaptureState, {
    status: 'capture';
}>;

export declare const Checkbox: FunctionalComponent<PropsWithoutRef<CheckboxProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

declare type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'class' | 'type' | 'size'> & {
    id: string;
    label?: string | ComponentChildren;
    labelHint?: string;
    size?: 's' | 'm';
    error?: string;
    helper?: string;
    showErrorIcon?: boolean;
    class?: string;
};

export declare const CheckmarkCompactIcon: FC<CheckmarkCompactIconProps>;

declare type CheckmarkCompactIconProps = {
    size?: number | string;
    fillColor?: string;
};

export declare const CheckmarkIcon: FC<CheckmarkIconProps>;

declare type CheckmarkIconProps = {
    size?: number | string;
    fillColor?: string;
};

export declare const ChevronDown: FC<ChevronDownProps>;

declare type ChevronDownProps = {
    class?: string;
};

/**
 * ChevronLeftIcon component - mirror of ChevronRightIcon. Two different SVGs
 * for three variants. For "xs" variant - icon is bolder; for "s" and "m"
 * variants - icon is thinner.
 */
export declare const ChevronLeftIcon: ({ size, class: className, variant, }: ChevronLeftIconProps) => JSX.Element;

declare type ChevronLeftIconProps = {
    size?: number;
    class?: string;
    variant?: 'xs' | 's' | 'm';
};

/**
 * ChevronRightIcon component - there are two different SVGs for three variants. For "xs" variant - icon is bolder, and for "s" and "m" variants - icon is thinner.
 */
export declare const ChevronRightIcon: ({ size, class: className, variant, }: ChevronRightIconProps) => JSX.Element;

declare type ChevronRightIconProps = {
    size?: number;
    class?: string;
    variant?: 'xs' | 's' | 'm';
};

declare type ChooserProps = {
    manager: IdCaptureManager;
    state: Extract<IdCaptureState, {
        status: 'chooser';
    }>;
};

declare type CloseButtonOptions = {
    show?: boolean;
    onClose?: () => void;
    position?: 'left' | 'right';
    offset?: string;
    onCancel?: () => void;
    color?: string;
};

declare type CloseButtonOptions_2 = {
    show?: boolean;
    onClose?: () => void;
};

export declare const CloseIcon: FC<CloseIconProps>;

declare type CloseIconProps = {
    width?: number | string;
    height?: number | string;
    class?: string;
    fillColor?: string;
};

/**
 * A module `config` intersected with the per-instance override maps. Typed at
 * the UI boundary so core config types (e.g. `IdCaptureConfig`) stay untouched;
 * `FlowConfig` also declares the maps directly.
 */
declare type ConfigWithOverrides<TConfig> = TConfig & InstanceOverrides;

/**
 * Full-screen "no internet connection" state, shown whenever a backend request
 * fails due to lost connectivity. Flow-agnostic and cross-cutting — any module
 * can render it on a connectivity failure — so it lives in `shared/` rather
 * than inside a single module. Composes the shared `StatusPage` primitive
 * (icon + title + subtitle + actions) so it stays visually consistent with the
 * rest of the status/result screens. Copy defaults to the shared
 * `connectionError.*` namespace and can be overridden per caller.
 */
export declare const ConnectionError: FC<ConnectionErrorProps>;

declare type ConnectionErrorProps = {
    /** Invoked by the primary action. Typically `() => window.location.reload()`. */
    onRefresh: () => void;
    /** Overrides the default connectivity title copy. */
    title?: string;
    /** Overrides the default connectivity subtitle copy. */
    subtitle?: string;
    /** Overrides the default refresh button label. */
    refreshLabel?: string;
};

export declare const countries: CountryData[];

declare type CountryData = {
    code: CountryCode;
    emoji: string;
    name: string;
    callingCode: string;
};

export declare const DateInputComposed: FunctionalComponent<PropsWithoutRef<DateInputComposedProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

declare type DateInputComposedProps = Omit<InputComposedProps, 'type' | 'closeButton' | 'rightIcon'> & {
    value: string;
    onInput: (e: Event) => void;
    onBlur?: (e: FocusEvent) => void;
};

export declare const DropdownComposed: FC<DropdownComposedProps>;

declare type DropdownComposedProps = {
    id: string;
    label?: string;
    labelHint?: string;
    placeholder?: string;
    value: string;
    options: DropdownOption[];
    onChange: (value: string) => void;
    error?: string;
    helper?: string;
    showErrorIcon?: boolean;
    showHelperIcon?: boolean;
    suppressMessages?: boolean;
    disabled?: boolean;
    required?: boolean;
    searchable?: boolean;
    searchPlaceholder?: string;
    noResultsText?: string;
    name?: string;
    tabIndex?: number;
    onKeyDown?: (e: KeyboardEvent) => void;
    onBlur?: () => void;
    renderSelectedLabel?: (option: DropdownOption) => string;
    siblingElement?: ComponentChildren;
    class?: string;
    'aria-label'?: string;
    'data-testid'?: string;
};

declare type DropdownOption = {
    value: string;
    label: string;
    ariaLabel?: string;
};

export declare const EllipseIcon: FC<EllipseIconProps>;

declare type EllipseIconProps = {
    size?: number | string;
};

export declare const ErrorContent: ({ title, description, attemptsRemaining, onButtonClick, "data-testid": testId, }: ErrorContentProps) => JSX.Element;

declare type ErrorContentProps = {
    title: string;
    description: string;
    attemptsRemaining: number;
    onButtonClick: () => void;
    'data-testid'?: string;
};

export declare const ErrorIcon: FC<ErrorIconProps>;

declare type ErrorIconProps = {
    size?: number | string;
};

export declare const EyeIcon: FC<EyeIconProps>;

declare type EyeIconProps = {
    size?: number | string;
};

export declare const EyeOffIcon: FC<EyeOffIconProps>;

declare type EyeOffIconProps = {
    size?: number | string;
};

export declare const FileIcon: FC<FileIconProps>;

declare type FileIconProps = {
    size?: number | string;
};

declare type FlipAnimationProps = {
    manager: IdCaptureManager;
    direction: 'toBack' | 'toFront';
};

export declare const FormField: FC<FormFieldProps>;

declare type FormFieldProps = {
    name: string;
    label: string;
    displayLabel?: string;
    value?: string;
    error?: string;
    errorParams?: Record<string, string | number>;
    type?: string;
    placeholder?: string;
    placeholderParams?: Record<string, string>;
    required?: boolean;
    readonly?: boolean;
    maxLength?: number;
    disabled?: boolean;
    autoComplete?: string;
    /**
     * Pre-translated text rendered next to the label (e.g. "(optional)").
     * Forms derive this via the majority rule (`getRequiredHintMode` +
     * `getFieldHint`).
     */
    labelHint?: string;
    onChange: (name: string, value: string) => void;
    onBlur?: (name: string) => void;
};

export declare function getCountryByCallingCode(callingCode: string): CountryData | undefined;

export declare function getCountryByCode(code: string | undefined): CountryData | undefined;

export declare const HelpIcon: FC<HelpIconProps>;

declare type HelpIconProps = {
    className?: string;
};

export declare const IdCapture: FC<CaptureProps_2>;

export declare const IdChooser: FC<ChooserProps>;

export declare const IdError: FC<IdErrorProps>;

declare type IdErrorProps = {
    manager: IdCaptureManager;
    state: Extract<IdCaptureState, {
        status: 'error';
    }>;
    onError?: (error: string | undefined) => void;
    blurImage?: boolean;
} | {
    manager: IdCaptureManager;
    state: Extract<IdCaptureState, {
        status: 'capture';
    }>;
    blurImage?: boolean;
};

/**
 * Flow / SDK 1 UXv2 capture-side expired-document screen — thin wrapper that
 * wires `idCaptureManager.retryCapture()` and forwards the
 * `attemptsRemaining` counter into the shared `<ExpiredId>` primitive.
 *
 * `isBackSide` triggers the Figma `1-9-11-id-documenterror` subtitle
 * ("Use a different ID from the accepted list") when the back side expired.
 *
 * Workflow's verify-side node uses its own wrapper in the `id-verification`
 * module that passes only `onContinue` (no attempts concept), matching the
 * legacy SDK 1 `Workflow.tsx → ProcessId.jsx → ExpiredId` one-shot Continue
 * behavior.
 */
export declare const IdExpired: FC<IdExpiredProps>;

declare type IdExpiredProps = {
    manager: IdCaptureManager;
    attemptsRemaining: number;
    isBackSide?: boolean;
};

export declare const IdFlipAnimation: FC<FlipAnimationProps>;

export declare const IdTutorial: FC<TutorialProps_2>;

/**
 * Wraps UI modules with the standard container.
 * Shows a landscape blocker overlay on mobile (excluding iPad) when device is rotated to landscape.
 */
export declare function IncodeComponent({ children }: IncodeComponentProps): VNode;

declare type IncodeComponentProps = {
    children?: ComponentChildren;
};

/**
 * Extra context passed to `onFinish` alongside the result. Lets a host decide
 * how to react to the terminal state without inspecting the DOM. Only the
 * workflow module sets these fields today.
 */
declare type IncodeFinishMeta = {
    /**
     * True when the SDK owns the terminal screen — it has already rendered its
     * own finish UI (today, the workflow's `showFinishScreenBySessionStatus`
     * screen), so the host should not render its own completion screen on top.
     * `onFinish` still fires so the host can run side effects (e.g. notify an
     * OAuth parent).
     *
     * Advisory only: the SDK cannot stop a host from rendering. This works solely
     * because the host reads this flag — a host that ignores it will still
     * replace the SDK screen. Not a guarantee.
     */
    sdkOwnsTerminalScreen?: boolean;
};

export declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown, TConfigInput = ConfigWithOverrides<TConfig>> = {
    /**
     * Module configuration required to render the flow.
     * For Web Components, this is typically assigned via `element.config = ...`.
     *
     * Also carries optional per-instance `assets`/`animations` override maps;
     * they override the global `setup({ uiConfig })` values for this
     * element only and are ignored by the core manager.
     */
    config?: TConfigInput;
    /**
     * Optional pre-built manager. When provided, the module does not create or manage the manager lifecycle.
     */
    manager?: TManager;
    /**
     * Callback invoked when the module completes successfully.
     * @param result - Optional result data from the module completion
     * @param meta - Optional context about how the module resolved (e.g. whether
     *   the SDK rendered its own terminal finish screen). See {@link IncodeFinishMeta}.
     */
    onFinish?: (result?: TResult, meta?: IncodeFinishMeta) => void;
    /**
     * Callback invoked when a fatal module error occurs.
     *
     * @param error - Human-readable error message.
     * @param errorCode - Optional numeric code (e.g. HTTP status). Populated by
     *   the workflow and flow modules on QR validation failures —
     *   `4026` (`expiredUUID`), `4081` (`invalidQRuuid`) or `4083` (`onboardingUrlAlreadyUsed`).
     * @param moduleErrorCode - Optional machine-readable error code (e.g. a
     *   `FaceErrorCode` such as `NONEXISTENT_CUSTOMER`). Lets an orchestrator
     *   branch on the specific terminal error without parsing the message string.
     */
    onError?: (error: string | undefined, errorCode?: number, moduleErrorCode?: string) => void;
};

declare type InferState<T> = T extends {
    getState: () => infer S;
} ? S : never;

export declare const Input: FunctionalComponent<PropsWithoutRef<InputProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

export declare const InputComposed: FunctionalComponent<PropsWithoutRef<InputComposedProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

declare type InputComposedProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'class'> & {
    id: string;
    label?: string;
    labelHint?: string;
    error?: string;
    invalid?: boolean;
    helper?: string;
    showErrorIcon?: boolean;
    showHelperIcon?: boolean;
    closeButton?: CloseButtonOptions_2;
    rightIcon?: ComponentChildren;
    suppressMessages?: boolean;
    class?: string;
};

declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'class' | 'type'> & {
    class?: string;
    type?: string;
    'data-has-value'?: boolean;
};

/**
 * Per-instance overrides for a single mounted SDK module.
 *
 * These ride on the module's `config` prop and are published once at the
 * module root by `registerIncodeModuleElement`, so a deep `<Asset>`/`<AnimatedAsset>`
 * or `<TransitionSpinner>` reads them via {@link useInstanceOverrides} without
 * any prop drilling.
 */
declare type InstanceOverrides = {
    assets?: AssetOverrides;
    animations?: AnimationOverrides;
    spinner?: SpinnerPresentation;
};

export declare function LandscapeBlocker(): VNode | null;

export { LightningIcon }

export declare const LockIcon: FC<LockIconProps>;

declare type LockIconProps = {
    className?: string;
};

export declare function Lottie({ animationData, loop, autoplay, reverse, style, className, onComplete, autoStop, stopFramePosition, }: LottieProps): JSX.Element;

declare type LottieAnimationData = {
    fr: number;
    v: string;
    ip: number;
    op: number;
    w: number;
    h: number;
};

declare type LottieProps = {
    animationData: LottieAnimationData;
    loop?: boolean;
    autoplay?: boolean;
    reverse?: boolean;
    style?: CSSProperties;
    className?: string;
    onComplete?: () => void;
    /** Auto-stop the animation after 5s (WCAG 2.2 AA 2.2.2). */
    autoStop?: boolean;
    /**
     * Where to freeze the animation when `autoStop` fires. When omitted the
     * animation is paused at its current frame; otherwise it jumps to and stops
     * at the resolved frame (falling back to a full stop when the frame count is
     * unknown).
     */
    stopFramePosition?: LottieStopFramePosition;
};

declare type LottieStopFramePosition = 'first' | 'middle' | 'last';

export declare const ManualCapture: FC<ManualCaptureProps>;

declare type ManualCaptureProps = {
    stream: MediaStream;
    onCapture: (imageBase64: string) => void;
    disabled?: boolean;
};

export declare const Modal: {
    Root: typeof ModalRoot;
    Content: typeof ModalContent;
    Close: typeof ModalClose;
    Icon: typeof ModalIcon;
    TitleSection: typeof ModalTitleSection;
    Title: typeof ModalTitle;
    Subtitle: typeof ModalSubtitle;
    Actions: typeof ModalActions;
};

declare function ModalActions({ children, class: className, orientation, }: ModalActionsProps): JSX.Element;

declare type ModalActionsProps = {
    children: ComponentChildren;
    class?: string;
    orientation?: 'vertical' | 'horizontal';
};

declare function ModalClose({ 'aria-label': ariaLabel, title: titleAttr, class: className, onClick, }: ModalCloseProps): JSX.Element | null;

declare type ModalCloseProps = {
    'aria-label'?: string;
    title?: string;
    class?: string;
    onClick?: () => Promise<void> | void;
};

declare function ModalContent({ children, class: className }: ModalContentProps): JSX.Element;

declare type ModalContentProps = {
    children: ComponentChildren;
    class?: string;
};

declare function ModalIcon({ children, class: className }: ModalIconProps): JSX.Element;

declare type ModalIconProps = {
    children: ComponentChildren;
    class?: string;
};

declare function ModalRoot({ open, children, onOpenChange, dismissible, portalContainer, class: className, hasBackdrop, manageInitialFocus, returnFocusRef, }: ModalRootProps): VNode<any> | null;

declare type ModalRootProps = {
    open: boolean;
    children: ComponentChildren;
    onOpenChange?: (open: boolean) => void;
    /** When false, Escape, overlay click, and Close do not dismiss. */
    dismissible?: boolean;
    /** Mount portal here instead of a dedicated node under document.body. */
    portalContainer?: HTMLElement | null;
    class?: string;
    hasBackdrop?: boolean;
    /** When false, Modal won't move focus to the title (or dialog) on open. Defaults to true. */
    manageInitialFocus?: boolean;
    returnFocusRef?: RefObject<HTMLElement | null>;
};

declare function ModalSubtitle({ children, class: className }: ModalSubtitleProps): JSX.Element;

declare type ModalSubtitleProps = {
    children: ComponentChildren;
    class?: string;
};

declare function ModalTitle({ children, ref, class: className }: ModalTitleProps): JSX.Element;

declare type ModalTitleProps = {
    children: ComponentChildren;
    class?: string;
    ref?: Ref<HTMLHeadingElement>;
};

declare function ModalTitleSection({ children, align, }: ModalTitleSectionProps): JSX.Element;

/** Wrap Modal.Title and Modal.Subtitle for 12px between them and 24px above actions. */
declare type ModalTitleSectionProps = {
    children: ComponentChildren;
    align?: 'center' | 'left';
};

export declare const OtpInput: FC<OtpInputProps>;

declare type OtpInputProps = {
    value: string;
    otpLength: number;
    resendTimer: number;
    canResend: boolean;
    error?: string;
    validationError?: string;
    isValid?: boolean;
    onSubmit: (code: string) => void;
    onChange: (code: string) => void;
    onValidate?: () => void;
    onResend: () => void;
    onBack: () => void;
    /**
     * Custom text for the back link (e.g., "change email address").
     * Defaults to "change phone number" if not provided.
     */
    backLinkText?: string;
    /** Whether the inputs and buttons should be disabled */
    disabled?: boolean;
    /** Whether the submit button should show loading state */
    isLoading?: boolean;
};

export declare const Overlay: FC<OverlayProps>;

declare type OverlayProps = {
    children: ComponentChildren;
    'aria-labelledby'?: string;
    class?: string;
};

export declare const Page: ({ title, titleId, subtitle, titleTopSlot, className, logo, children, hideHeader, hideFooterBranding, footerBrandingSlot, "data-testid": dataTestId, "data-permission-status": dataPermissionStatus, }: PageProps) => JSX.Element;

declare type PageProps = {
    children?: ComponentChildren;
    title?: string;
    titleId?: string;
    subtitle?: string;
    /** Optional content rendered above the title (e.g. a status icon). */
    titleTopSlot?: ComponentChildren;
    className?: string;
    logo?: {
        src?: string;
        height?: string;
    };
    hideFooterBranding?: boolean;
    hideHeader?: boolean;
    closeButton?: CloseButtonOptions;
    footerBrandingSlot?: ComponentChildren;
    'data-testid'?: string;
    'data-permission-status'?: string;
};

export declare const PasswordInputComposed: FunctionalComponent<PropsWithoutRef<PasswordInputComposedProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

export declare type PasswordInputComposedProps = Omit<InputComposedProps, 'type' | 'closeButton' | 'rightIcon'> & {
    showPasswordAriaLabel: string;
    hidePasswordAriaLabel: string;
    defaultVisible?: boolean;
    requirementsHeading?: string;
    requirements?: PasswordRequirement[];
    requirementMetLabel?: string;
    requirementUnmetLabel?: string;
};

export declare type PasswordRequirement = {
    key: string;
    label: string;
    met: boolean;
};

declare const Permissions_2: FC<PermissionsProps>;
export { Permissions_2 as Permissions }

declare type PermissionsManager = {
    requestPermission: () => void;
    goToLearnMore: () => void;
    close: () => void;
};

declare type PermissionsProps = {
    manager: PermissionsManager;
    permissionStatus: PermissionStatus_2;
};

export declare const PhoneInputComposed: FunctionalComponent<PropsWithoutRef<PhoneInputComposedProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

declare type PhoneInputComposedProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange' | 'class'> & PhoneInputOwnProps;

declare type PhoneInputOwnProps = {
    id: string;
    label?: string;
    labelHint?: string;
    countryCode?: string;
    value?: string;
    placeholder?: string;
    error?: string;
    /**
     * When `true` and an `error` is present, the country-specific format example
     * is appended to the error (unspaced for sighted users, digit-spaced for
     * screen readers) so the `role="alert"` suggests the expected format
     * (WCAG 2.2 SC 3.3.3). Requires `formatHintBuilder` to be set.
     */
    showFormatHintInError?: boolean;
    helper?: string;
    showErrorIcon?: boolean;
    showHelperIcon?: boolean;
    disabled?: boolean;
    disableCountrySelector?: boolean;
    required?: boolean;
    onChange?: (fullNumber: string, isValid: boolean) => void;
    formatHintBuilder?: (example: string) => string | undefined;
    countryAriaLabelBuilder?: (args: {
        callingCode: string;
        countryName: string;
    }) => string | undefined;
    'aria-labelledby'?: string;
    'data-testid'?: string;
};

export declare const Processing: FC;

export declare const ProgressBar: FC<ProgressBarProps>;

declare type ProgressBarProps = {
    progress: number;
    label?: string;
    className?: string;
    labelledById?: string;
};

export declare const RadioButtonComposed: FunctionalComponent<PropsWithoutRef<RadioButtonComposedProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

declare type RadioButtonComposedProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'class' | 'type' | 'size'> & {
    id: string;
    label?: string;
    labelHint?: string;
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    required?: boolean;
    name?: string;
    value?: string;
    onChange?: (event: TargetedEvent<HTMLInputElement, Event>) => void;
    error?: string;
    helper?: string;
    showErrorIcon?: boolean;
    class?: string;
    textSize?: TextSize;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
};

export declare const RadioGroupComposed: FunctionalComponent<PropsWithoutRef<RadioGroupComposedProps> & {
ref?: Ref<HTMLDivElement> | undefined;
}>;

declare type RadioGroupComposedProps = {
    id: string;
    label: string;
    labelHint?: string;
    options: RadioGroupOption[];
    value?: string;
    defaultValue?: string;
    error?: string;
    helper?: string;
    required?: boolean;
    disabled?: boolean;
    name?: string;
    orientation?: 'row' | 'column';
    onChange?: (value: string, event: TargetedEvent<HTMLInputElement, Event>) => void;
    onBlur?: (event: FocusEvent) => void;
    class?: string;
    'data-testid'?: string;
};

declare type RadioGroupOption = {
    value: string;
    label: string;
    disabled?: boolean;
};

export declare const SearchIcon: FC<SearchIconProps>;

declare type SearchIconProps = {
    size?: number | string;
};

/**
 * ⚠️ Experimental — do not use in forms.
 *
 * Use `DateInputComposed` instead. See the file-level note at the top of this
 * module for context.
 *
 * @experimental
 */
export declare const SegmentedDateInput: FunctionalComponent<PropsWithoutRef<SegmentedDateInputProps> & {
ref?: Ref<HTMLInputElement> | undefined;
}>;

export declare type SegmentedDateInputProps = Omit<InputComposedProps, 'type' | 'closeButton' | 'rightIcon'> & {
    value: string;
    onInput: (e: Event) => void;
};

export declare const SelfieCapture: FC<CaptureProps>;

export declare const SelfieTutorial: ({ manager, ageAssurance }: TutorialProps) => JSX.Element;

/**
 * Sets global UI configuration defaults for `@incodetech/ui`.
 *
 * Replaces (does not merge with) the previous host-supplied config, so omitting
 * a field clears it. The dashboard theme is held separately and is unaffected.
 */
export declare function setUiConfig(next: UiConfig): void;

export declare const Spacer: ({ size, className, direction, }: SpacerProps) => JSX.Element;

declare type SpacerProps = {
    size?: number | string;
    direction?: 'horizontal' | 'vertical';
    className?: string;
};

export declare const Spinner: FC<SpinnerProps>;

/**
 * The presentation fields plus the legacy inline copy accepted by
 * `<incode-flow>` / `<incode-workflow>`.
 */
export declare type SpinnerConfig = SpinnerPresentation & {
    /**
     * @deprecated Set loader copy via i18n translations (`loadingCircle.holdOn`).
     * TODO(2.3.0): remove.
     */
    title?: string;
    /**
     * @deprecated Set loader copy via i18n translations (`loadingCircle.validating`).
     * TODO(2.3.0): remove.
     */
    subtitle?: string;
};

/**
 * Host-facing loader presentation, settable globally via
 * `setup({ uiConfig: { spinner } })` or per element via `config.spinner`.
 *
 * Copy is deliberately absent. Loader text comes from i18n (`loadingCircle.*`),
 * which keeps it localizable — a literal string here would freeze in whatever
 * language the host typed it in when the user switches language mid-flow — and
 * leaves one source of truth for user-facing strings.
 */
export declare type SpinnerPresentation = {
    renderMode?: SpinnerRenderMode;
    size?: SpinnerSize;
};

declare type SpinnerProps = {
    /** Title text to display below the spinner */
    title?: string;
    /** Subtitle text to display below the title */
    subtitle?: string;
    ariaLabel?: string;
    /** Size of the spinner icon */
    size?: SpinnerSize;
    /** Whether to fill the SDK container */
    fullScreen?: boolean;
    /** Additional CSS class name */
    className?: string;
    /**
     * Render the spinner purely visually and hide it from assistive tech:
     * no `role="status"`, no live region, no `aria-label`, no focus-on-mount,
     * and `aria-hidden` on the container. The title/subtitle stay visible.
     *
     * Use when the spinner may sit behind a native OS surface (e.g. the camera
     * permission prompt) where an announced/focusable status would leak — a
     * screen reader must not be able to swipe into or hear it behind that prompt.
     */
    presentational?: boolean;
    /**
     * Render the title/subtitle without the spinning icon.
     *
     * Backs `renderMode: 'textOnly'`, for hosts that animate their own copy and
     * want no icon competing with it.
     */
    hideIcon?: boolean;
};

/**
 * Which parts of a loader render.
 *
 * An enum rather than a pair of booleans so the meaningless fourth state —
 * neither icon nor text, i.e. a blank screen — is unrepresentable.
 */
export declare type SpinnerRenderMode = 'spinnerAndText' | 'spinnerOnly' | 'textOnly';

export declare type SpinnerSize = 'small' | 'medium' | 'large';

export declare const SuccessIcon: FC<SuccessIconProps>;

declare type SuccessIconProps = {
    size?: number | string;
};

/** An SVG imported as a Preact component (the `?react` import shape). */
export declare type SvgComponent = FunctionComponent<SVGProps<SVGSVGElement>>;

export declare const TextArea: FunctionalComponent<PropsWithoutRef<TextAreaProps> & {
ref?: Ref<HTMLTextAreaElement> | undefined;
}>;

export declare const TextAreaComposed: FunctionalComponent<PropsWithoutRef<TextAreaComposedProps> & {
ref?: Ref<HTMLTextAreaElement> | undefined;
}>;

declare type TextAreaComposedProps = Omit<JSX.IntrinsicElements['textarea'], 'id' | 'class'> & {
    id: string;
    label?: string;
    labelHint?: string;
    error?: string;
    helper?: string;
    showErrorIcon?: boolean;
    showHelperIcon?: boolean;
    rows?: number;
    class?: string;
};

declare type TextAreaProps = Omit<JSX.IntrinsicElements['textarea'], 'class'> & {
    class?: string;
};

declare type TextSize = 'M' | 'S';

export declare const Title: FunctionalComponent<PropsWithoutRef<TitleProps> & {
ref?: Ref<HTMLHeadingElement> | undefined;
}>;

declare type TitleProps = HTMLAttributes_2<HTMLHeadingElement> & {
    children: ComponentChildren;
    className?: string;
};

declare type TutorialProps = {
    manager: SelfieManager;
    ageAssurance?: boolean;
};

/**
 * ID capture tutorial (front, back, or passport).
 * Translation keys used: idv2.capture.passport.*, idv2.tutorial.*, idv2.tutorial.v2.*,
 * and for back-only / US Smart ID: idv2.backTutorial.title, idv2.backTutorial.subtitle, idv2.backTutorial.disclaimer.
 */
declare type TutorialProps_2 = {
    manager: IdCaptureManager;
    state: Extract<IdCaptureState, {
        status: 'tutorial';
    }>;
};

export declare const TypographyH1: FunctionalComponent<PropsWithoutRef<TitleProps> & {
ref?: Ref<HTMLHeadingElement> | undefined;
}>;

export declare const TypographyH3: FC<TitleProps>;

export declare const TypographyH4: FC<TitleProps>;

export declare const TypographyH5: FC<TitleProps>;

export declare const TypographyP: FC<TitleProps>;

export declare type UiConfig = {
    logoSrc?: string;
    logoHeight?: string;
    subtitle?: string;
    hideHeader?: boolean;
    hideFooterBranding?: boolean;
    assets?: AssetOverrides;
    animations?: AnimationOverrides;
    /**
     * Global loader presentation. Copy stays in i18n — see
     * {@link SpinnerPresentation}.
     */
    spinner?: SpinnerPresentation;
};

/**
 * Hook for subscribing to manager state updates
 * @param factory - Factory function that creates the manager instance
 * @param options - Configuration options
 * @returns Tuple of [state, manager]
 */
export declare function useManager<TManager extends {
    getState: () => TState;
    subscribe: (listener: (state: TState) => void) => () => void;
    load?: () => void;
    stop?: () => void;
}, TState = InferState<TManager>>(factory: () => TManager, options?: UseManagerOptions): [TState, TManager];

declare type UseManagerOptions = {
    autoLoad?: boolean;
    manageLifecycle?: boolean;
};

/**
 * Hook that returns whether the device is in landscape mode on mobile (excluding iPad and desktop).
 * Use this to show a landscape blocker overlay when true.
 */
export declare function useScreenOrientation(): {
    isLandscapeMobile: boolean;
};

export declare function useTranslation(): UseTranslationReturn;

declare type UseTranslationReturn = {
    t: TFunction;
    ready: boolean;
    i18n: i18n;
};

export declare function VerificationOptionCard({ icon: Icon, title, testId, onClick, tag, }: Readonly<VerificationOptionCardProps>): JSX.Element;

export declare function VerificationOptionCardList({ children, }: Readonly<VerificationOptionCardListProps>): JSX.Element;

declare type VerificationOptionCardListProps = {
    children: ComponentChildren;
};

declare type VerificationOptionCardProps = {
    icon: FC<{
        className?: string;
    }>;
    title: string;
    testId: string;
    onClick: () => void;
    tag?: string;
};

export declare const VerificationResult: FC<VerificationResultProps>;

declare type VerificationResultProps = {
    status: 'submitting' | 'success' | 'failure' | 'warning';
    submittingTitle?: string;
    submittingSubtitle?: string;
    successTitle?: string;
    failureTitle?: string;
    warningTitle?: string;
    errorMessage?: string;
    onRetry?: () => void;
    onSkip?: () => void;
    retryLabel?: string;
    skipLabel?: string;
    hideFooterBranding?: boolean;
    footerBrandingSlot?: ComponentChildren;
};

export declare const WarningIcon: FC<WarningIconProps>;

declare type WarningIconProps = {
    size?: number | string;
};

export { }