import { ComponentPropsWithoutRef } from 'react';
import { FlexSpecificProps } from './internal/FlexSpecificProps';
/**
 * Props for the Flex component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends FlexSpecificProps
 */
export type FlexProps = ComponentPropsWithoutRef<"div"> & FlexSpecificProps & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: FlexSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: FlexSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: FlexSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: FlexSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: FlexSpecificProps;
};
/**
 * Flex component for creating flexible layouts using CSS Flexbox.
 *
 * Features:
 * - CSS Flexbox layout with full control over flex properties
 * - Support for both flex and inline-flex display modes
 * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)
 * - Comprehensive layout utilities for spacing, alignment, and positioning
 * - Automatic style generation and class management
 * - Support for all standard div element props
 * - Flexible direction, grow, shrink, basis, and wrap controls
 *
 * @example
 * <Flex direction="row" gap="4" alignItems="center">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </Flex>
 *
 * @example
 * <Flex
 *   direction="column"
 *   gap="2"
 *   md={{ direction: "row", gap: "4" }}
 * >
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </Flex>
 */
export declare const Flex: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Omit<import('..').LayoutUtilProps, "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "flexWrap"> & {
    inline?: boolean;
    direction?: import('react').CSSProperties["flexDirection"];
    grow?: import('react').CSSProperties["flexGrow"];
    shrink?: import('react').CSSProperties["flexShrink"];
    basis?: import('react').CSSProperties["flexBasis"];
    wrap?: import('react').CSSProperties["flexWrap"];
} & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: FlexSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: FlexSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: FlexSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: FlexSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: FlexSpecificProps;
} & import('react').RefAttributes<HTMLDivElement>>;