import React, { CSSProperties } from 'react';
import { ExternalStyles, Theme } from '../../styles';
import { Omit } from '../../util';
import { GridProps, GridResponsiveGap } from './Grid';
export type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
export type CellSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export interface CellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
    style?: ExternalStyles;
    alignSelf?: AlignSelf;
    flexGrow?: CSSProperties['flexGrow'];
    flexShrink?: CSSProperties['flexShrink'];
    flexBasis?: CSSProperties['flexBasis'];
    /**
     * Width of the cell, defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    size?: CellSize;
    /**
     * Width to be used on extra-small (xs) or larger devices, based on breakpoints defined on theme.
     * The size is defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    xs?: CellSize;
    /**
     * Width to be used on small (sm) or larger devices, based on breakpoints defined on theme.
     * The size is defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    sm?: CellSize;
    /**
     * Width to be used on medium (md) or larger devices, based on breakpoints defined on theme.
     * The size is defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    md?: CellSize;
    /**
     * Width to be used on large (lg) or larger devices, based on breakpoints defined on theme.
     * The size is defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    lg?: CellSize;
    /**
     * Width to be used on extra-large (xl) or larger devices, based on breakpoints defined on theme.
     * The size is defined using a 12-column based grid (12 is 100%, 6 is 50%, 4 is 25%, etc.).
     */
    xl?: CellSize;
}
export declare function Cell(props: CellProps): JSX.Element;
export declare const createStyles: (theme: Theme, { alignSelf, flexBasis, flexGrow, flexShrink }: CellProps, { gap, gapVertical }: GridProps) => {
    cell: React.CSSProperties;
};
export declare const createSizeStyles: (theme: Theme, { size, xs, sm, md, lg, xl }: CellProps) => {
    xs: {
        width: string;
    };
    sm: {
        [x: string]: {
            width: string;
        };
    };
    md: {
        [x: string]: {
            width: string;
        };
    };
    lg: {
        [x: string]: {
            width: string;
        };
    };
    xl: {
        [x: string]: {
            width: string;
        };
    };
};
export declare const createGapStyles: (theme: Theme, { gap }: {
    gap: GridResponsiveGap;
}) => {
    xs: {
        paddingLeft: string;
        paddingRight: string;
    };
    sm: {
        [x: string]: {
            paddingLeft: string;
            paddingRight: string;
        };
    };
    md: {
        [x: string]: {
            paddingLeft: string;
            paddingRight: string;
        };
    };
    lg: {
        [x: string]: {
            paddingLeft: string;
            paddingRight: string;
        };
    };
    xl: {
        [x: string]: {
            paddingLeft: string;
            paddingRight: string;
        };
    };
};
export declare const createGapVerticalStyles: (theme: Theme, { gapVertical }: {
    gapVertical: GridResponsiveGap;
}) => {
    xs: {
        paddingTop: string;
        paddingBottom: string;
    };
    sm: {
        [x: string]: {
            paddingTop: string;
            paddingBottom: string;
        };
    };
    md: {
        [x: string]: {
            paddingTop: string;
            paddingBottom: string;
        };
    };
    lg: {
        [x: string]: {
            paddingTop: string;
            paddingBottom: string;
        };
    };
    xl: {
        [x: string]: {
            paddingTop: string;
            paddingBottom: string;
        };
    };
};