import { ComponentPropsWithoutRef } from 'react';
/**
 * Props for the Layout component.
 */
export type LayoutProps = ComponentPropsWithoutRef<"div"> & {
    /** Whether the layout should be fluid (full width) instead of constrained */
    fluid?: boolean;
    /** The spacing variant for the layout grid */
    variant?: "default" | "wide" | "narrow";
};
/**
 * Props for the Layout.Item component.
 */
export type LayoutItemProps = ComponentPropsWithoutRef<"div"> & {
    /** Default span across all breakpoints (1-12) */
    span?: number;
    /** Extra small breakpoint span (1-12) */
    xs?: number;
    /** Small breakpoint span (1-12) */
    sm?: number;
    /** Medium breakpoint span (1-12) */
    md?: number;
    /** Large breakpoint span (1-12) */
    lg?: number;
    /** Extra large breakpoint span (1-12) */
    xl?: number;
    /** Extra extra large breakpoint span (1-12) */
    xxl?: number;
};
/**
 * Layout item component that defines grid columns within a Layout container.
 *
 * Features:
 * - Responsive grid columns with breakpoint-specific spans
 * - 12-column grid system for flexible layouts
 * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)
 * - Default span fallback for all breakpoints
 * - Automatic responsive behavior using container queries
 * - Semantic HTML structure with proper accessibility
 * - Flexible content area for any child components
 * - Consistent spacing and alignment with parent Layout
 * - Automatic tracking ID generation for analytics
 *
 * Breakpoints:
 * - xs: Extra small (mobile)
 * - sm: Small (tablet portrait)
 * - md: Medium (tablet landscape)
 * - lg: Large (desktop)
 * - xl: Extra large (large desktop)
 * - xxl: Extra extra large (ultra-wide)
 *
 * @example
 * <Layout>
 *   <Layout.Item span={6} md={4} lg={3}>
 *     <Card>Responsive Card</Card>
 *   </Layout.Item>
 *   <Layout.Item span={6} md={8} lg={9}>
 *     <Card>Main Content</Card>
 *   </Layout.Item>
 * </Layout>
 *
 * @example
 * <Layout>
 *   <Layout.Item span={12} md={6}>
 *     <h2>Left Column</h2>
 *     <p>This takes full width on mobile, half width on medium+ screens.</p>
 *   </Layout.Item>
 *   <Layout.Item span={12} md={6}>
 *     <h2>Right Column</h2>
 *     <p>This also takes full width on mobile, half width on medium+ screens.</p>
 *   </Layout.Item>
 * </Layout>
 *
 * @example
 * <Layout variant="wide">
 *   <Layout.Item span={1} sm={2} md={3} lg={4}>
 *     <Button>Small Button</Button>
 *   </Layout.Item>
 *   <Layout.Item span={11} sm={10} md={9} lg={8}>
 *     <TextField placeholder="Search..." />
 *   </Layout.Item>
 * </Layout>
 */
export declare const LayoutItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /** Default span across all breakpoints (1-12) */
    span?: number;
    /** Extra small breakpoint span (1-12) */
    xs?: number;
    /** Small breakpoint span (1-12) */
    sm?: number;
    /** Medium breakpoint span (1-12) */
    md?: number;
    /** Large breakpoint span (1-12) */
    lg?: number;
    /** Extra large breakpoint span (1-12) */
    xl?: number;
    /** Extra extra large breakpoint span (1-12) */
    xxl?: number;
} & import('react').RefAttributes<HTMLDivElement>>;
/**
 * Layout container component that provides a responsive grid system.
 *
 * Features:
 * - CSS Grid-based responsive layout system
 * - Container with max-width constraint (1280px) by default
 * - Fluid option for full-width layouts
 * - Three spacing variants: default, wide, and narrow
 * - Container queries for responsive behavior
 * - Automatic tracking ID generation for analytics
 * - Semantic HTML structure with proper accessibility
 * - Flexible content area for child Layout.Item components
 * - Consistent spacing and alignment across breakpoints
 *
 * @example
 * <Layout>
 *   <Layout.Item span={6}>Left Column</Layout.Item>
 *   <Layout.Item span={6}>Right Column</Layout.Item>
 * </Layout>
 *
 * @example
 * <Layout fluid variant="wide">
 *   <Layout.Item span={4}>Column 1</Layout.Item>
 *   <Layout.Item span={4}>Column 2</Layout.Item>
 *   <Layout.Item span={4}>Column 3</Layout.Item>
 * </Layout>
 *
 * @example
 * <Layout variant="narrow">
 *   <Layout.Item span={12}>
 *     <h1>Full Width Content</h1>
 *     <p>This content spans the full width of the layout.</p>
 *   </Layout.Item>
 * </Layout>
 */
export declare const Layout: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /** Whether the layout should be fluid (full width) instead of constrained */
    fluid?: boolean;
    /** The spacing variant for the layout grid */
    variant?: "default" | "wide" | "narrow";
} & import('react').RefAttributes<HTMLDivElement>> & {
    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        /** Default span across all breakpoints (1-12) */
        span?: number;
        /** Extra small breakpoint span (1-12) */
        xs?: number;
        /** Small breakpoint span (1-12) */
        sm?: number;
        /** Medium breakpoint span (1-12) */
        md?: number;
        /** Large breakpoint span (1-12) */
        lg?: number;
        /** Extra large breakpoint span (1-12) */
        xl?: number;
        /** Extra extra large breakpoint span (1-12) */
        xxl?: number;
    } & import('react').RefAttributes<HTMLDivElement>>;
};
export declare const LayoutElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /** Whether the layout should be fluid (full width) instead of constrained */
    fluid?: boolean;
    /** The spacing variant for the layout grid */
    variant?: "default" | "wide" | "narrow";
} & import('react').RefAttributes<HTMLDivElement>> & {
    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        /** Default span across all breakpoints (1-12) */
        span?: number;
        /** Extra small breakpoint span (1-12) */
        xs?: number;
        /** Small breakpoint span (1-12) */
        sm?: number;
        /** Medium breakpoint span (1-12) */
        md?: number;
        /** Large breakpoint span (1-12) */
        lg?: number;
        /** Extra large breakpoint span (1-12) */
        xl?: number;
        /** Extra extra large breakpoint span (1-12) */
        xxl?: number;
    } & import('react').RefAttributes<HTMLDivElement>>;
};