import { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
import { CellSize, Spacing } from '../shared/types';
type HTMLDivProps = ComponentPropsWithRef<'div'>;
type ItemAlign = 'start' | 'center' | 'end';
type Breakpoint = Readonly<{
    cols: readonly CellSize[];
    minWidth?: number;
    maxWidth?: number;
    colAlign?: ItemAlign;
    colGap?: Spacing;
    rowAlign?: ItemAlign;
    rowGap?: Spacing;
    rows?: readonly CellSize[];
    areas?: readonly string[];
}>;
export type GridProps = HTMLDivProps & {
    children: ReactNode;
    id: string;
    breakpoints: readonly Breakpoint[];
    debug?: boolean;
    gridContainerStyle?: Readonly<CSSProperties>;
    gridItemStyle?: Readonly<CSSProperties>;
};
/**
- Uses CSS [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) to change layouts based on the **width of the grid's container**
- `id` is required to prevent grid name collisions if the component is used multiple times on the same page

> This component is designed to address common use cases for grid layouts. It won't solve every problem. Hit up the `#design-system` channel if you need help with a layout!
*/
export declare function Grid({ children, debug, id, breakpoints, gridContainerStyle, gridItemStyle, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
export default Grid;