import * as react from 'react';
import { FunctionComponent, LinkHTMLAttributes, ReactNode, ElementType, InputHTMLAttributes, HTMLAttributes, ComponentType, SVGProps, LabelHTMLAttributes } from 'react';
import { Menu as Menu$1 } from '@headlessui/react';
import { Id, UpdateOptions, ToastContainerProps, ToastOptions } from 'react-toastify';
import { UseFormReturn, UseFormRegisterReturn, Validate, FieldValues, ValidationRule } from 'react-hook-form';
import { DateRange } from 'react-day-picker';
export { DateRange } from 'react-day-picker';
import Skeleton$1, { SkeletonTheme } from 'react-loading-skeleton';
import BigNumber from 'big.js';

type Theme = (typeof themes)[keyof typeof themes];
type ThemeStyle = Exclude<Theme, 'system'>;
type ThemeContextProps = {
    theme: ThemeStyle;
    themeSetting: Theme;
    setTheme: (theme: Theme) => void;
};
type ThemeProviderProps = {
    children: React.ReactNode;
    forcedTheme?: Theme;
};
declare const themes: {
    readonly DARK: "dark";
    readonly LIGHT: "light";
    readonly SYSTEM: "system";
};
declare const ThemeProvider: FunctionComponent<ThemeProviderProps>;
declare const useTheme: () => ThemeContextProps;

type SupportedWallets = 'injected' | 'coinbase' | 'walletconnect' | 'ledger';
type WalletType = {
    id: string;
    text: string;
    icon: string;
    bgColor?: string;
};
declare const wallets: {
    [key in SupportedWallets]: WalletType;
};

type WalletOptionProps = {
    walletOption: SupportedWallets;
    activate: () => Promise<void> | void;
    href?: string | null;
    injectedWalletName?: string;
    injectedWalletIcon?: string;
};
declare const WalletOption: FunctionComponent<WalletOptionProps>;

type LinkComponentType = FunctionComponent<Omit<LinkHTMLAttributes<HTMLAnchorElement>, 'href'> & {
    href: string;
}>;
type NavLinkType = {
    href: string | URL;
    title: string;
    onClick?: () => void;
    mobileOnly?: boolean;
    external?: boolean;
};
type NavLinkProps = {
    link: NavLinkType;
    isMobile?: boolean;
    closeMenu?: () => void;
    classNameProp?: string;
    LinkComponent: LinkComponentType;
};
declare const NavLink: FunctionComponent<NavLinkProps>;

type NavbarProps = {
    children: ReactNode;
    Logo: ElementType;
    navLinks?: NavLinkType[];
    ThemeSwitcher?: React.ReactElement;
    className?: string;
    LinkComponent: LinkComponentType;
};
declare const Navbar: FunctionComponent<NavbarProps>;

type IconType = {
    src: string;
    alt: string;
};

type MenuLink = {
    href?: string | URL;
    title: ReactNode;
    onClick?: () => void;
    external?: boolean;
    preventCloseOnClick?: boolean;
};
type MenuProps = {
    icon?: IconType;
    links?: MenuLink[];
    children?: React.ReactNode;
    label: string;
    hideLabel?: boolean;
    LinkComponent: LinkComponentType;
};
type MenuComponentType = FunctionComponent<MenuProps> & {
    Link: typeof Menu$1.Item;
};
declare const Menu: MenuComponentType;

type InputProps = {
    id: string;
    isLoading?: boolean;
    className?: string;
    errorMessage?: string;
    label?: string;
    children?: ReactNode;
} & InputHTMLAttributes<HTMLInputElement>;
declare const Input: react.ForwardRefExoticComponent<{
    id: string;
    isLoading?: boolean | undefined;
    className?: string | undefined;
    errorMessage?: string | undefined;
    label?: string | undefined;
    children?: ReactNode;
} & InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;

type InputWithIconProps = {
    id: string;
    isLoading?: boolean;
    className?: string;
    Icon: React.ComponentType;
    errorMessage?: string;
    label?: string;
} & InputHTMLAttributes<HTMLInputElement>;
declare const InputWithIcon: FunctionComponent<InputWithIconProps>;

type InputWithButtonProps = {
    id: string;
    isLoading?: boolean;
    onClick: () => void;
    buttonLabel?: string;
    Icon: React.ElementType;
    errorMessage?: string;
    buttonDisabled?: boolean;
    label?: string;
} & InputHTMLAttributes<HTMLInputElement>;
declare const InputWithButton: react.ForwardRefExoticComponent<{
    id: string;
    isLoading?: boolean | undefined;
    onClick: () => void;
    buttonLabel?: string | undefined;
    Icon: React.ElementType;
    errorMessage?: string | undefined;
    buttonDisabled?: boolean | undefined;
    label?: string | undefined;
} & InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;

type ThemeSwitcherProps = {
    onThemeSwitch?: () => void;
};
declare const ThemeSwitcher: FunctionComponent<ThemeSwitcherProps>;

declare const Spinner: ({ size, id }: {
    size?: string | number | undefined;
    id?: string | undefined;
}) => JSX.Element;

type ToastType = 'success' | 'loading' | 'info' | 'error';
type ToastProps = {
    type: ToastType;
    text: string;
    hideCloseIcon?: boolean;
} & ({
    link?: {
        text: string;
        href: string;
    };
} | {
    action?: {
        text: string;
        onClick: () => void;
    };
});
declare const Toast: FunctionComponent<ToastProps>;

type ModifiedToastOptions = Omit<ToastOptions, 'type'>;
declare const showToast: ({ text, type, hideCloseIcon, ...restProps }: ToastProps & ModifiedToastOptions) => Id;
declare const updateToast: (toastId: Id, options?: UpdateOptions<unknown> | undefined) => void;
declare const toastContainerOptions: ToastContainerProps;
declare const CustomToastContainer: () => JSX.Element;

type HeroProps = {
    title: ReactNode;
    body: ReactNode;
    children: ReactNode;
    integrations?: IntegrationLogo[];
};
type IntegrationLogo = {
    name: string;
    Icon: React.ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
};
declare const Hero: FunctionComponent<HeroProps>;

type CardProps = {
    wide?: boolean;
    id?: string;
    children?: React.ReactNode;
} & React.HTMLAttributes<HTMLElement>;
declare const Card: FunctionComponent<CardProps>;

type Category = {
    id: string;
    name: string;
    priority: number;
};
type CoinSelectorOption = {
    /**
      Should be the token's address for FI and `MethodId` for AI
    */
    balance?: string;
    balanceInUsd?: string | null;
    id: string;
    networkDisplayName: string | null;
    networkLogoURI: string | null;
    logoURI?: string;
    name: string;
    symbol: string;
    categories?: Category[];
    paused?: boolean;
};
type PinnedCoinSelectorOption = Omit<CoinSelectorOption, 'categories' | 'balance'>;
type CoinSelectorProps = {
    isOpen: boolean;
    onClose: () => void;
    onSelect: (id: string) => void;
    onTokenAddressInput?: (address: `0x${string}`) => void;
    options: CoinSelectorOption[];
    pinnedOptions?: PinnedCoinSelectorOption[] | null;
    pinnedLabel?: string;
    selected?: string;
    title: string;
    isLoading?: boolean;
    isLoadingBalances?: boolean;
};
declare const CoinSelectorForm: FunctionComponent<CoinSelectorProps>;
declare const CoinSelector: FunctionComponent<CoinSelectorProps>;

type TestimonialItem = {
    headline: string;
    body: string;
    name: string;
    company: string;
    id: string;
    icon?: 'trophy' | 'trustpilot';
};
declare const Testimonial: FunctionComponent<TestimonialItem>;

type PercentageChangeProps = {
    change: number;
    className?: string;
};
declare const PercentageChange: FunctionComponent<PercentageChangeProps>;

type FeaturesProps = {
    features: FeatureType[];
    heading: string;
};
type FeatureType = {
    icon: string;
    title: string;
    description: string;
};
declare const Features: FunctionComponent<FeaturesProps>;

type TooltipProps = {
    content?: string;
    id: string;
    place: 'right' | 'top' | 'bottom' | 'left';
    forceOpen?: boolean;
    children?: ReactNode;
    Icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
    className?: string;
    iconSize?: string | number;
    onClick?: () => void;
    label?: string;
    width?: string | number;
    withIcon?: boolean;
    labelClassName?: string;
    afterShow?: () => void;
};
declare const Tooltip: FunctionComponent<TooltipProps>;

type StatsTileProps = {
    title: string;
    Tooltip?: React.ReactElement;
    value: number | string;
    percentageChange?: number;
    onClick?: () => void;
    align?: 'left' | 'center' | 'right';
    className?: string;
    size?: 'small' | 'normal';
};
declare const StatsTile: FunctionComponent<StatsTileProps>;

type StatsProps = {
    Chart: React.ComponentType;
    stats: StatsTileProps[];
};
declare const ChartWithStats: FunctionComponent<StatsProps>;

type Step = {
    title: string;
    description: ReactNode;
};
type HowToSectionProps = {
    title: string;
    steps: Step[];
};
declare const StepsSection: FunctionComponent<HowToSectionProps>;

type CallToActionProps = {
    title: string;
    onClick?: () => void;
    buttonTitle: string;
};
declare const CallToAction: FunctionComponent<CallToActionProps>;

type SocialNetwork = 'twitter' | 'telegram' | 'discord' | 'instagram';
declare const socialIcons: {
    [network in SocialNetwork]: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
};

type FooterLinkProps = {
    title: string;
    href: URL | string;
    external?: boolean;
    onClick?: () => void;
};
type FooterProps = {
    columnLinks: Array<FooterLinkProps[]>;
    Logo: React.ElementType;
    socialLinks: {
        [network in SocialNetwork]?: URL;
    };
    description: string;
    name: string;
    bottomLinks: FooterLinkProps[];
    LinkComponent: LinkComponentType;
};
declare const Footer: FunctionComponent<FooterProps>;

type AccordionItemProps = {
    title: string;
    body: ReactNode;
};
type AccordionProps = {
    title: string;
    icon?: string;
    items: AccordionItemProps[];
};
declare const Accordion: FunctionComponent<AccordionProps>;

type ShiftInputProps = {
    errorMessage?: string | null;
    decimals?: number;
    orderType?: 'fixed' | 'variable';
    balance?: string;
    usdValue?: string;
    disabled?: boolean;
    formMethods: UseFormReturn;
    min?: string;
    max?: string;
    id: string;
    validation?: {
        required?: UseFormRegisterReturn['required'];
        validate?: Validate<any, FieldValues> | Record<string, Validate<any, FieldValues>>;
        pattern?: ValidationRule<RegExp>;
    };
    hideIcon?: boolean;
    hideLabel?: boolean;
    isLoading?: boolean;
    label: string;
    isConnected?: boolean;
    selected?: {
        logoURI?: string;
        name: string;
        symbol: string;
        network?: {
            logoURI: string;
            name: string;
        } | null;
    };
    openSelector?: () => void;
    balanceLabel?: string;
    hideBalance?: boolean;
    flattenTop?: boolean;
    handleAmountChange?: (inputId: string, value: string) => void;
};
declare const ShiftInput: FunctionComponent<ShiftInputProps>;

declare enum OrderProgressStepStatus {
    COMPLETE = "COMPLETE",
    CURRENT = "CURRENT",
    PROCESSING = "PROCESSING",
    UNSTARTED = "UNSTARTED",
    FAILED = "FAILED"
}
type OrderProgressStepProps = {
    status: OrderProgressStepStatus;
    title: string;
    subtitle?: string;
};
declare const OrderProgressStep: FunctionComponent<OrderProgressStepProps>;

type TabSelectorOption = {
    ariaLabel: string;
    disabled?: boolean;
    label: string;
    onSelect: () => void;
    selected: boolean;
};
type TabSelectorProps = {
    options: TabSelectorOption[];
    tooltipContent?: string;
    tooltipChildren?: ReactNode;
};
declare const TabSelector: FunctionComponent<TabSelectorProps>;

type ModalProps = {
    isOpen: boolean;
    handleClose?: () => void;
    title: ReactNode;
    children: ReactNode;
    className?: string;
    height?: string | number;
    variant?: 'normal' | 'wide' | 'fullscreen';
    closeOnOutsideClick?: boolean;
};
declare const Modal: FunctionComponent<ModalProps>;

type DefaultButtonProps = {
    children: ReactNode;
    variant: 'primary' | 'secondary';
    isLoading?: boolean;
    icon?: IconType;
    className?: string;
    buttonSize?: 'small' | 'normal' | 'large' | 'dynamic';
    onClick?: () => void;
};
type ButtonButtonProps = {
    role: 'button';
    disabled?: boolean;
    type?: 'button' | 'submit' | 'reset';
    form?: string;
} & DefaultButtonProps;
type ButtonLinkProps = {
    role: 'link';
    href: string | URL;
    LinkComponent: LinkComponentType;
    external?: boolean;
} & DefaultButtonProps;
type ButtonProps = ButtonButtonProps | ButtonLinkProps;
declare const Button: FunctionComponent<ButtonProps>;

declare const LoadingIcon: FunctionComponent<SVGProps<SVGElement>>;

type DateSelectorProps = {
    alignment?: 'right' | 'left';
} & (DateSelectorRangeProps | DateSelectorSingleProps);
type DateSelectorRangeProps = {
    mode: 'range';
    selected: DateRange;
    setSelected: (value: DateRange) => void;
};
type DateSelectorSingleProps = {
    mode: 'single';
    selected: Date;
    setSelected: (value: Date) => void;
};
declare const DateSelector: FunctionComponent<DateSelectorProps>;

type PropsOf<E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;
type TableRowOwnProps<E extends React.ElementType = React.ElementType> = {
    as?: E;
    hoverable?: boolean;
    className?: string;
    children: ReactNode;
};
type TableRowProps<E extends React.ElementType> = TableRowOwnProps<E> & Omit<PropsOf<E>, keyof TableRowOwnProps>;
type TableProps = {
    children: ReactNode;
};
type TableChildComponentProps = {
    children: ReactNode;
    className?: string;
    width?: string | number;
};
type TableComponentType = FunctionComponent<TableProps> & {
    Row: <E extends React.ElementType = 'tr'>(props: TableRowProps<E>) => JSX.Element;
    Head: FunctionComponent<TableChildComponentProps>;
    Cell: FunctionComponent<TableChildComponentProps>;
    Heading: FunctionComponent<TableChildComponentProps>;
    Body: FunctionComponent<TableChildComponentProps>;
};
declare const Table: TableComponentType;

declare const DOTS = "...";

type PaginationProps = {
    currentPage: number;
    setCurrentPage: (newPage: number) => void;
    totalCount: number;
    pageSize: number;
    siblingCount?: number;
};
declare const Pagination: FunctionComponent<PaginationProps>;

type UsePaginationOptions = {
    totalCount: number;
    pageSize: number;
    siblingCount?: number;
    currentPage: number;
};
declare const usePagination: ({ totalCount, pageSize, siblingCount, currentPage, }: UsePaginationOptions) => (string | number)[];

declare const useLegacySkeleton: (kind?: 'default') => {
    SkeletonTheme: typeof SkeletonTheme | FunctionComponent;
    Skeleton: typeof Skeleton$1;
};

type HorizontalStepsSectionProps = {
    steps: (string | ReactNode)[];
    title: string | ReactNode;
};
declare const HorizontalStepsSection: FunctionComponent<HorizontalStepsSectionProps>;

type SkeletonProps = {
    className?: string;
};
declare const Skeleton: FunctionComponent<SkeletonProps>;

type RateProps = {
    depositAsset: string;
    settleAsset: string;
    rate: string;
    approximate?: boolean;
    Icon?: FunctionComponent<HTMLAttributes<HTMLOrSVGElement> | SVGProps<SVGSVGElement>> | null;
} | {
    isLoading: true;
} | {
    errorMessage: string;
};
declare const Rate: FunctionComponent<RateProps>;

type ApprovalModalProps = {
    isOpen: boolean;
    closeModal: () => void;
    tokenName: string;
    description: string;
};
declare const ApprovalModal: FunctionComponent<ApprovalModalProps>;

declare const Checkbox: react.ForwardRefExoticComponent<{
    label: string;
    id: string;
} & InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;

type SpanProps = {
    as?: 'span';
} & HTMLAttributes<HTMLSpanElement>;
type LabelProps = {
    as?: 'label';
} & LabelHTMLAttributes<HTMLLabelElement>;
type CommonLabelProps = {
    size?: 'normal' | 'large';
};
type LabelComponentProps = CommonLabelProps & (SpanProps | LabelProps);
declare const Label: FunctionComponent<LabelComponentProps>;

type SectionWithDividerProps = {
    title: ReactNode;
    icon: {
        src: string;
        alt: string;
    };
    children: ReactNode;
    hideBorder?: boolean;
} & HTMLAttributes<HTMLElement>;
declare const SectionWithDivider: FunctionComponent<SectionWithDividerProps>;

type BigNumberInput = BigNumber | string | number;

/**
 * Format token amount to at least 4 decimals.
 * @param amount amount to format.
 * @returns formatted amount.
 */
declare const formatTokenAmount: (amount?: string, decimals?: number) => string;
declare const formatAmount: (amount?: string, returnInitial?: boolean, decimals?: number, allowTrailingZeroes?: boolean) => string;
declare const formatAddress: (address: string) => string;
declare const formatEnsName: (name: string) => string;
declare const formatAmountAndRoundUp: (amount: string, decimals?: number) => string;
declare const numberWithCommas: (value: BigNumberInput) => string;
declare const firstAndLast: (value: string, first?: number, last?: number, middle?: string) => string;
declare function toDecimalPlaces(value: BigNumberInput, decimalPlaces: number): string;

declare const useWalletBranding: () => WalletType;

declare const useInjectedWalletName: () => {
    injectedWalletName: string;
    shouldShowInjectedWalletName: boolean;
};

declare const useInjectedWalletIcon: () => {
    injectedWalletIcon: string | null;
};

export { Accordion, ApprovalModal, Button, CallToAction, Card, ChartWithStats, Checkbox, CoinSelector, CoinSelectorForm, CustomToastContainer, DOTS, DateSelector, Features, Footer, Hero, HorizontalStepsSection, Input, InputProps, InputWithButton, InputWithButtonProps, InputWithIcon, InputWithIconProps, Label, LinkComponentType, LoadingIcon, Menu, Modal, NavLink, NavLinkType, Navbar, OrderProgressStep, OrderProgressStepStatus, Pagination, PercentageChange, Rate, RateProps, SectionWithDivider, ShiftInput, Skeleton, SocialNetwork, Spinner, StatsTile, StatsTileProps, StepsSection, SupportedWallets, TabSelector, TabSelectorOption, Table, Testimonial, TestimonialItem, ThemeProvider, ThemeSwitcher, Toast, ToastProps, Tooltip, WalletOption, WalletOptionProps, WalletType, firstAndLast, formatAddress, formatAmount, formatAmountAndRoundUp, formatEnsName, formatTokenAmount, numberWithCommas, showToast, socialIcons, themes, toDecimalPlaces, toastContainerOptions, updateToast, useInjectedWalletIcon, useInjectedWalletName, useLegacySkeleton, usePagination, useTheme, useWalletBranding, wallets };