import React from 'react';
import { Breakpoint, ExternalStyles, Theme } from '../../styles';
import { Omit } from '../../util';
export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
export type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
export type GridResponsiveGap = {
    [key in Breakpoint]?: number;
};
export type GridGap = number | GridResponsiveGap;
export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
    wrap?: boolean;
    alignItems?: AlignItems;
    justifyContent?: JustifyContent;
    direction?: Direction;
    style?: ExternalStyles;
    /**
     * Spacing (in `rem`) between grid items on the horizontal axis.
     */
    gap?: GridGap;
    /**
     * Spacing (in `rem`) between grid items on the vertical axis.
     */
    gapVertical?: GridGap;
}
export declare const GridContext: React.Context<GridProps>;
export declare function Grid(props: GridProps): JSX.Element;
export declare namespace Grid {
    var defaultProps: Partial<GridProps>;
}
export declare const createStyles: (theme: Theme, { direction, alignItems, justifyContent, gap, gapVertical }: GridProps) => {
    grid: React.CSSProperties;
    wrap: React.CSSProperties;
};
export declare const createGapStyles: (theme: Theme, { gap }: {
    gap: GridResponsiveGap;
}) => {
    xs: {
        marginLeft: string;
        marginRight: string;
    };
    sm: {
        [x: string]: {
            marginLeft: string;
            marginRight: string;
        };
    };
    md: {
        [x: string]: {
            marginLeft: string;
            marginRight: string;
        };
    };
    lg: {
        [x: string]: {
            marginLeft: string;
            marginRight: string;
        };
    };
    xl: {
        [x: string]: {
            marginLeft: string;
            marginRight: string;
        };
    };
};
export declare const createGapVerticalStyles: (theme: Theme, { gapVertical }: {
    gapVertical: GridResponsiveGap;
}) => {
    xs: {
        marginTop: string;
        marginBottom: string;
    };
    sm: {
        [x: string]: {
            marginTop: string;
            marginBottom: string;
        };
    };
    md: {
        [x: string]: {
            marginTop: string;
            marginBottom: string;
        };
    };
    lg: {
        [x: string]: {
            marginTop: string;
            marginBottom: string;
        };
    };
    xl: {
        [x: string]: {
            marginTop: string;
            marginBottom: string;
        };
    };
};