import * as React from 'react';
interface LogoItem {
    /**
     * Specify the width of the logo from Desktop view
     * @desc This is important. You should insert the initial width from the desktop design file you are following, without white space.
     * @type number
     * @example
     * import LogoGrid from 'logo-grid'
     * import { Stripe } from 'my-awesome-svgs'
     *
     * export const logoList = [
     *   { logo: Stripe, initialWidth: 108 },
     * ]
     *
     * <LogoGrid logos={logoList} />
     */
    initialWidth?: number;
    /**
     * Specify the logo which should be rendered. Can also be an image src.
     * @type number
     * @example
     * import LogoGrid from 'logo-grid'
     * import { Stripe } from 'my-awesome-svgs'
     *
     * export const logoList = [
     *   { logo: Stripe, initialWidth: 108 },
     *   { logo: 'https://placeimg.com/640/480/nature', initialWidth: 85 },
     * ]
     *
     * <LogoGrid logos={logoList} />
     */
    logo?: React.ReactNode | string | any;
}
export interface LogoGridProps {
    /**
     * The className of the LogoGrid component.
     * @type string
     */
    className?: string;
    /**
     * Specify the number of columns for the logos/images on Desktop only
     * @type number
     * @defaultValue 5
     * @example columns={5}
     */
    columns?: number;
    /**
     * Specify the alignment of the logos on Desktop only
     * @type 'center' | 'left'
     * @defaultValue 'center'
     * @example desktopAlign="center"
     */
    desktopAlign?: 'center' | 'left';
    /**
     * Change the scale of the padding on Desktop between the logos
     * @type number
     * @defaultValue 1
     * @example
     * desktopPaddingScale={1.2}
     * desktopPaddingScale={0.8}
     */
    desktopPaddingScale?: number;
    /**
     * Add a fill color to all the svg path of the provided logos
     * @type string
     * @example
     * fillColor='red'
     * fillColor='blue'
     */
    fillColor?: string;
    /**
     * Add an array of logos
     * @type LogoItem[]
     * @defaultValue [{ logo: 'https://placeimg.com/640/480/nature', initialWidth: 100 }]
     * @example
     * import LogoGrid from 'logo-grid'
     * import { Stripe, AirBnbIcon, Amazon } from 'my-awesome-svgs'
     *
     * export const logoList = [
     *   { logo: Stripe, initialWidth: 108 },
     *   { logo: 'https://placeimg.com/640/480/nature', initialWidth: 85 },
     *   { logo: AirBnbIcon, initialWidth: 52 },
     *   { logo: Amazon, initialWidth: 136 },
     *   { logo: 'https://placeimg.com/640/480/nature', initialWidth: 75 },
     * ]
     *
     * <LogoGrid logos={logoList} />
     */
    logos?: LogoItem[];
    /**
     * Specify the alignment of the logos on Mobile only
     * @type 'center' | 'left'
     * @defaultValue 'left'
     * @example mobileAlign="left"
     */
    mobileAlign?: 'center' | 'left';
    /**
     * Specify the breakpoint px value at which to switch from mobile to desktop layouts
     * @type number
     * @defaultValue 767
     * @example mobileBreakpoint={600}
     */
    mobileBreakpoint?: number;
    /**
     * Change the scale of the padding on Mobile between the logos
     * @type number
     * @defaultValue 1
     * @example
     * mobilePaddingScale={1.2}
     * mobilePaddingScale={0.8}
     */
    mobilePaddingScale?: number;
    /**
     * Change the scale of the padding on Mobile between the logos
     * @desc Will scale the logos proportionally down on mobile. You can guage this with your eye. 0 to 2 usually with do it, since this is a percentage value. so 1.1 would be 110% of the original.
     * @type number
     * @defaultValue 1
     * @example
     * mobileScale={1.2}
     * mobileScale={0.8}
     */
    mobileScale?: number;
    /**
     * Specify the width of all logos as a group.
     * @desc This is important. Similar to initialWidth on the logos, you should insert the initial parentWidth from the desktop design file you are following, without white space.
     * @type number
     * @defaultValue 1000
     * @example
     * parentWidth={900}
     * parentWidth={976}
     */
    parentWidth?: number;
    /**
     * Specify whether the logos should shift to the left or not.
     * @desc This is make the left side flush with content above or below it. Helpful on left aligned layouts.
     * @type boolean
     * @defaultValue false
     * @example withOffset={true}
     */
    withOffset?: boolean;
}
export interface LogoGridNewProps {
    centeredOffset?: string;
    firstLogoOffset?: number;
    flushLeft?: string;
    initialLogoWrapperWidth?: number;
    initialPxOffset?: number;
    lastLogoOffset?: number;
    numOfColumns?: number;
    offset?: string;
    singleRow?: boolean;
}
declare const LogoGrid: React.FunctionComponent<LogoGridProps> & {
    defaultProps: Partial<LogoGridProps>;
};
export { LogoGrid };