import { default as React } from 'react';

export type GridColumns = 1 | 2 | 3 | 4 | 6 | 8 | 12;
export type GridGap = 'none' | '3xs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
/**
 * Pass a 2-tuple [mobile, desktop] or a 3-tuple [mobile, tablet, desktop]
 * to apply different values per breakpoint.
 */
export type ResponsiveGridColumns = GridColumns | readonly [GridColumns, GridColumns] | readonly [GridColumns, GridColumns, GridColumns];
export type ResponsiveGridGap = GridGap | readonly [GridGap, GridGap] | readonly [GridGap, GridGap, GridGap];
export interface GridProps {
    children?: React.ReactNode;
    columns?: ResponsiveGridColumns;
    gap?: ResponsiveGridGap;
    rowGap?: ResponsiveGridGap;
    align?: GridAlign;
    /**
     * Fill the containing block instead of capping at the layout content max-width
     * and auto-centering on desktop. Use when the Grid is nested inside a flex/grid
     * parent (or any container narrower than the cap), where the default centering
     * would otherwise add unwanted side margins. Defaults to `false`.
     */
    fluid?: boolean;
    as?: React.ElementType;
    className?: string;
    style?: React.CSSProperties;
}
export declare function Grid({ children, columns, gap, rowGap, align, fluid, as: Tag, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Grid.d.ts.map