import { default as React } from 'react';
import { ResponsiveValue } from './useBreakpoint';
import { SpacingToken } from './responsive';
import { BoxProps } from './Box';
type SpacingInput = SpacingToken | string | number;
export interface FlexProps extends BoxProps {
    /** Flex direction */
    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
    /** Flex wrap */
    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
    /** Gap between children (spacing token, px number, or CSS string) */
    gap?: ResponsiveValue<SpacingInput>;
    /** Row gap (overrides gap for rows) */
    rowGap?: ResponsiveValue<SpacingInput>;
    /** Column gap (overrides gap for columns) */
    columnGap?: ResponsiveValue<SpacingInput>;
    /** Align items (cross-axis) */
    align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "baseline" | "stretch">;
    /** Justify content (main-axis) */
    justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
    /** Shorthand: set both direction="column" */
    column?: boolean;
    /** Shorthand: center both axes */
    center?: boolean;
    /** Make flex container inline */
    inline?: boolean;
}
export declare const Flex: React.MemoExoticComponent<React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>>;
export default Flex;