import { ReactElement } from 'react';
import { default as Color } from 'color';
import { ClientAnalytics, PaymentActivityEventSourceType, ProductType, ReferrerType } from '@zeniai/client-analytics';
import { ResponsiveSized } from '../../../../context/windowSizeProvider';
/**
 * Dimensions
 */
export declare const D: {
    labelWidth: ResponsiveSized;
    sectionWidth: ResponsiveSized;
    descriptionMarginBottom: ResponsiveSized;
    iconContainerMaxWidthHeight: ResponsiveSized;
    iconContainerMarginRight: ResponsiveSized;
    iconPadding: ResponsiveSized;
    rowGap: ResponsiveSized;
    containerPadding: ResponsiveSized;
    navIconLeftMargin: ResponsiveSized;
    tagIconContainerDivMarginTop: ResponsiveSized;
};
/**
 * Component & its Props
 */
export interface Props {
    header: string;
    subTitle: string;
    title: string;
    additionalInfo?: string;
    analytics?: ClientAnalytics;
    cardSetupInProgress?: boolean;
    /** When set, the trailing `>` arrow is replaced with a primary Button labelled with this string. */
    connectButtonLabel?: string;
    /** When true, the connect Button shows its loading spinner (e.g. while a Plaid link token is being fetched). */
    connectButtonLoading?: boolean;
    footNote?: string | ReactElement;
    hasError?: boolean;
    icon?: {
        color: Color;
        element: ReactElement;
    };
    isActive?: boolean;
    isActiveWhileLoading?: boolean;
    isCardPaymentMethod?: boolean;
    isClickable?: boolean;
    isCompleted?: boolean;
    isDisabled?: boolean;
    isError?: boolean;
    isLoading?: boolean;
    isTagLoading?: boolean;
    productType?: ProductType;
    referrer?: ReferrerType;
    shouldHover?: boolean;
    showAddPaymentMethodDropDown?: boolean;
    showCompletedIcon?: boolean;
    showRightArrow?: boolean;
    status?: {
        code: string;
        name: string;
    };
    statusInfoIcon?: ReactElement;
    style?: React.CSSProperties;
    subHeader?: string;
    subTitleIcon?: {
        element: ReactElement;
    };
    /**
     * Optional 16x16 icon rendered immediately to the left of the title text,
     * with a 16px gap. When omitted, no inline title icon is rendered.
     */
    titleIcon?: {
        element: ReactElement;
    };
    onClick?: (e?: React.MouseEvent) => void;
    openPlaidDialog?: (e: React.MouseEvent, eventSource: PaymentActivityEventSourceType) => void;
    setEventSourceType?: (eventSource: PaymentActivityEventSourceType) => void;
    updateCardPaymentModalState?: (state: boolean) => void;
}
export declare const AddPaymentMethodWithTitle: ({ title, isError, isCardPaymentMethod, showAddPaymentMethodDropDown, addPaymentMethodDropdownOpen, isDisabled, updateCardPaymentModalState, setAddPaymentMethodDropdownOpen, openPlaidDialog, productType, setEventSourceType, referrer, analytics, }: {
    isCardPaymentMethod: boolean;
    showAddPaymentMethodDropDown: boolean;
    title: string;
    addPaymentMethodDropdownOpen?: boolean;
    analytics?: ClientAnalytics;
    isDisabled?: boolean;
    isError?: boolean;
    productType?: ProductType;
    referrer?: ReferrerType;
    openPlaidDialog?: (e: React.MouseEvent, eventSource: PaymentActivityEventSourceType) => void;
    setAddPaymentMethodDropdownOpen?: (state: boolean) => void;
    setEventSourceType?: (eventSource: PaymentActivityEventSourceType) => void;
    updateCardPaymentModalState?: (state: boolean) => void;
}) => import("react/jsx-runtime").JSX.Element;
export declare function SetUpDefaultSection({ style, header, subHeader, footNote, title, subTitle, status, statusInfoIcon, icon: _icon, isActive, isDisabled, isClickable, isCompleted, showCompletedIcon, isError, hasError, subTitleIcon, isLoading, isTagLoading, isActiveWhileLoading, shouldHover, showRightArrow, connectButtonLabel, connectButtonLoading, onClick, showAddPaymentMethodDropDown, updateCardPaymentModalState, openPlaidDialog, isCardPaymentMethod, analytics, productType, referrer, setEventSourceType, additionalInfo, titleIcon, }: Readonly<Props>): import("react/jsx-runtime").JSX.Element;
export declare const FootNote: import('@emotion/styled').StyledComponent<{
    theme?: import('@emotion/react').Theme;
    as?: React.ElementType;
} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
    theme?: import('@emotion/react').Theme;
}, {}, {}>;