import type { Ref, ReactNode } from 'react';
import type { ForwardRefForwardPropsComponent, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
type PaddingValue = number | undefined;
export interface FlexContainerProps {
    /** Display as inline-flex. */
    inline?: boolean;
    /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */
    pad?: number | [blockInline: PaddingValue] | [block: PaddingValue, inline: PaddingValue] | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue] | [
        blockStart: PaddingValue,
        inlineEnd: PaddingValue,
        inlineStart: PaddingValue,
        blockEnd: PaddingValue
    ];
    /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */
    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
    /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */
    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
    /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */
    alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';
    /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
    /**
     * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.
     * @deprecated
     */
    itemGap?: number;
    /**
     * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.
     * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)
     */
    colGap?: number;
    /**
     * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.
     * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)
     */
    rowGap?: number;
    /**
     * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.
     * [gap](https://css-tricks.com/almanac/properties/g/gap/)
     */
    gap?: number;
}
export interface FlexItemProps {
    /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */
    alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';
    /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */
    grow?: number;
    /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */
    shrink?: number;
    /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */
    basis?: string;
}
export interface BaseFlexProps {
    container?: FlexContainerProps | true;
    item?: FlexItemProps;
}
type BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;
export type FlexProps = RequireAtLeastOne<BaseFlexProps & BaseProps & AsProp & {
    /** Content for either a container or item. */
    children?: ReactNode;
    /** Ref for the flex element. */
    ref?: Ref<Element>;
    /** Override props at extra small screen sizes and above. */
    xs?: BreakpointFlexProps;
    /** Override props at small screen sizes and above. */
    sm?: BreakpointFlexProps;
    /** Override props at medium screen sizes and above. */
    md?: BreakpointFlexProps;
    /** Override props at large screen sizes and above. */
    lg?: BreakpointFlexProps;
    /** Override props at extra large screen sizes and above. */
    xl?: BreakpointFlexProps;
}, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
export declare const StyledFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexProps>> & string;
declare const Flex: ForwardRefForwardPropsComponent<FlexProps>;
export default Flex;
//# sourceMappingURL=Flex.d.ts.map