/// <reference types="@emotion/styled/macro" />
import React from 'react';
import { FontGroup } from 'types/entities.types';
export declare const SYSTEM_FONT = "System font";
export declare const FontInputPlaceholderStyled: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    theme: {
        color: {
            placeholderBackground: string;
            imageBorder: string;
            imageSelectedBorder: string;
            primary: string;
            primaryLight: string;
            inputBorder: string;
            inputPlaceholder: string;
            fontColor: string;
            fontHighlightColor: string;
            pinkleBackgrondColor: string;
            fontColorInverted: string;
            separator: string;
            border: string;
            disabledBackground: string;
            menuColor: string;
            iconColor: string;
            menuActiveColor: string;
            fontDisabled: string;
            bannerIconBackground: string;
            emptyStateIconBackground: string;
            background: string;
            highlightBackground: string;
            lightBackground: string;
            lighterBackground: string;
            lightBackgroundHover: string;
            shadow: string;
            warning: string;
            starReview: string;
            starReviewEmpty: string;
            promotionHighlight: string;
            discountHighlight: string;
            previewTemplateBackground: string;
            black: {
                85: string;
            };
        };
        gradients: {
            lightLoadingPlaceholder: string;
            darkLoadingPlaceholder: string;
        };
        borderRadiuses: {
            round: import("../../../constants").BORDER_RADIUSES;
            rounder: import("../../../constants").BORDER_RADIUSES;
            rounderer: import("../../../constants").BORDER_RADIUSES;
        };
        opacity: {
            hover: number;
            disabled: number;
        };
        easing: {
            easeOut: import("../../../constants").EASING;
            easeInOut: import("../../../constants").EASING;
        };
        sizes: {
            topBarHeight: number;
            topBarMobileHeight: number;
        };
        shadow: {
            none: string;
            small: string;
            smallDark: string;
            large: string;
            largeDark: string;
        };
        zIndex: {
            modal: number;
            popup: number;
        };
    };
} & {
    theme: {
        color: {
            placeholderBackground: string;
            imageBorder: string;
            imageSelectedBorder: string;
            primary: string;
            primaryLight: string;
            inputBorder: string;
            inputPlaceholder: string;
            fontColor: string;
            fontHighlightColor: string;
            pinkleBackgrondColor: string;
            fontColorInverted: string;
            separator: string;
            border: string;
            disabledBackground: string;
            menuColor: string;
            iconColor: string;
            menuActiveColor: string;
            fontDisabled: string;
            bannerIconBackground: string;
            emptyStateIconBackground: string;
            background: string;
            highlightBackground: string;
            lightBackground: string;
            lighterBackground: string;
            lightBackgroundHover: string;
            shadow: string;
            warning: string;
            starReview: string;
            starReviewEmpty: string;
            promotionHighlight: string;
            discountHighlight: string;
            previewTemplateBackground: string;
            black: {
                85: string;
            };
        };
        gradients: {
            lightLoadingPlaceholder: string;
            darkLoadingPlaceholder: string;
        };
        borderRadiuses: {
            round: import("../../../constants").BORDER_RADIUSES;
            rounder: import("../../../constants").BORDER_RADIUSES;
            rounderer: import("../../../constants").BORDER_RADIUSES;
        };
        opacity: {
            hover: number;
            disabled: number;
        };
        easing: {
            easeOut: import("../../../constants").EASING;
            easeInOut: import("../../../constants").EASING;
        };
        sizes: {
            topBarHeight: number;
            topBarMobileHeight: number;
        };
        shadow: {
            none: string;
            small: string;
            smallDark: string;
            large: string;
            largeDark: string;
        };
        zIndex: {
            modal: number;
            popup: number;
        };
    };
}, {
    color: {
        placeholderBackground: string;
        imageBorder: string;
        imageSelectedBorder: string;
        primary: string;
        primaryLight: string;
        inputBorder: string;
        inputPlaceholder: string;
        fontColor: string;
        fontHighlightColor: string;
        pinkleBackgrondColor: string;
        fontColorInverted: string;
        separator: string;
        border: string;
        disabledBackground: string;
        menuColor: string;
        iconColor: string;
        menuActiveColor: string;
        fontDisabled: string;
        bannerIconBackground: string;
        emptyStateIconBackground: string;
        background: string;
        highlightBackground: string;
        lightBackground: string;
        lighterBackground: string;
        lightBackgroundHover: string;
        shadow: string;
        warning: string;
        starReview: string;
        starReviewEmpty: string;
        promotionHighlight: string;
        discountHighlight: string;
        previewTemplateBackground: string;
        black: {
            85: string;
        };
    };
    gradients: {
        lightLoadingPlaceholder: string;
        darkLoadingPlaceholder: string;
    };
    borderRadiuses: {
        round: import("../../../constants").BORDER_RADIUSES;
        rounder: import("../../../constants").BORDER_RADIUSES;
        rounderer: import("../../../constants").BORDER_RADIUSES;
    };
    opacity: {
        hover: number;
        disabled: number;
    };
    easing: {
        easeOut: import("../../../constants").EASING;
        easeInOut: import("../../../constants").EASING;
    };
    sizes: {
        topBarHeight: number;
        topBarMobileHeight: number;
    };
    shadow: {
        none: string;
        small: string;
        smallDark: string;
        large: string;
        largeDark: string;
    };
    zIndex: {
        modal: number;
        popup: number;
    };
}>;
interface Props {
    fontGroups: FontGroup[];
    sidePadding?: number;
    selectedFonts: string[];
    setFontSelection: (selectedFonts: string[]) => void;
}
declare const FontList: React.FC<Props>;
export default FontList;