import { ElementType, HTMLAttributes } from 'react';
import { ResponsiveStyleValue } from 'theme-ui';
export type FlexProps = {
    /** Element type to render. Defaults to `div`, or to `span` if `inline` is `true`. */
    as?: ElementType;
    /** Whether `display` should be `inline-flex` instead of `flex`. Defaults to `false`. */
    inline?: ResponsiveStyleValue<boolean>;
    /** Direction of the flex layout. Can either be `row`, `row-reverse`, `column`, or `column-reverse`. Defaults to `row`. */
    direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
    /** Whether flex items should wrap when there's not enough space on one line. Defaults to `false`. */
    wrap?: ResponsiveStyleValue<boolean>;
    /** Horizontal alignment if `direction` is `row`; vertical alignment if it's `column`. Defaults to `start`. */
    justify?: ResponsiveStyleValue<'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'>;
    /** Vertical alignment if `direction` is `row`; horizontal alignment if it's `column`. Defaults to `stretch`. */
    align?: ResponsiveStyleValue<'stretch' | 'start' | 'center' | 'end' | 'baseline'>;
    /** Size of the gap between flex items (both horizontal and vertical). */
    gap?: ResponsiveStyleValue<string | number>;
    /** Size of the horizontal gap between flex items. */
    gapX?: ResponsiveStyleValue<string | number>;
    /** Size of the vertical gap between flex items. */
    gapY?: ResponsiveStyleValue<string | number>;
} & HTMLAttributes<HTMLElement>;
/**
 * Base `Flex` component for laying out child elements/components either horizontally (row) or vertically (column),
 * with props to control their alignment, the gap between them, and whether they wrap.
 *
 * The following variants are available: `Flex.Row`, `Flex.Column`, and `Flex.Center`.
 */
export declare const Flex: import("react").ForwardRefExoticComponent<{
    /** Element type to render. Defaults to `div`, or to `span` if `inline` is `true`. */
    as?: ElementType<any> | undefined;
    /** Whether `display` should be `inline-flex` instead of `flex`. Defaults to `false`. */
    inline?: ResponsiveStyleValue<boolean>;
    /** Direction of the flex layout. Can either be `row`, `row-reverse`, `column`, or `column-reverse`. Defaults to `row`. */
    direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
    /** Whether flex items should wrap when there's not enough space on one line. Defaults to `false`. */
    wrap?: ResponsiveStyleValue<boolean>;
    /** Horizontal alignment if `direction` is `row`; vertical alignment if it's `column`. Defaults to `start`. */
    justify?: ResponsiveStyleValue<'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'>;
    /** Vertical alignment if `direction` is `row`; horizontal alignment if it's `column`. Defaults to `stretch`. */
    align?: ResponsiveStyleValue<'stretch' | 'start' | 'center' | 'end' | 'baseline'>;
    /** Size of the gap between flex items (both horizontal and vertical). */
    gap?: ResponsiveStyleValue<string | number>;
    /** Size of the horizontal gap between flex items. */
    gapX?: ResponsiveStyleValue<string | number>;
    /** Size of the vertical gap between flex items. */
    gapY?: ResponsiveStyleValue<string | number>;
} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
    /** Shorthand for `<Flex direction="row" />`. */
    Row: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction"> & {
        reverse?: ResponsiveStyleValue<boolean>;
    } & import("react").RefAttributes<HTMLElement>>;
    /** Shorthand for `<Flex direction="column" />`. */
    Column: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction"> & {
        reverse?: ResponsiveStyleValue<boolean>;
    } & import("react").RefAttributes<HTMLElement>>;
    /** Shorthand for `<Flex direction="column" justify="center" align="center" />`. */
    Center: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction" | "justify" | "align"> & import("react").RefAttributes<HTMLElement>>;
};
