import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { HTMLAttributes } from 'react';
import { Props } from '../@types/Props.js';
import { Space } from '../@types/Space.js';
import { Breakpoint } from '../../foundations/__generated__/breakpoints.js';

type GridBreakpoint = Extract<Breakpoint, 'mobile' | 'tablet' | 'desktop' | 'leftCol' | 'wide'>;
type CollapseBreakpoint = Extract<GridBreakpoint, 'tablet' | 'desktop' | 'leftCol' | 'wide'>;
interface ColumnsProps extends HTMLAttributes<HTMLDivElement>, Props {
    /**
     * Child components will be stacked in a single column at viewport widths
     * narrower than the specified breakpoint (they will always be collapsed
     * into a single column if the viewport is narrower than `mobileLandscape`).
     */
    collapseUntil?: CollapseBreakpoint;
    /**
     * **Deprecated**
     *
     * Use `collapseUntil` instead.
     *
     * @deprecated Use `collapseUntil` instead.
     */
    collapseBelow?: CollapseBreakpoint;
    /**
     * Vertical [units of
     * space](https://www.theguardian.design/2a1e5182b/p/449bd5-space) between
     * between columns vertically when collapsed (one unit is 4px).
     */
    spaceY?: Space;
}
/**
 * [Storybook](https://guardian.github.io/storybooks/?path=/story/source_react-components-columns--with-container) •
 * [Design System](https://theguardian.design/2a1e5182b/p/41cd49-columns) •
 * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source/src/react-components/columns/Columns.tsx) •
 * [NPM](https://www.npmjs.com/package/@guardian/source)
 *
 * `Columns` arranges child `Column`s side by side on a single row, with the
 * specified width.
 *
 * They become really useful when used in conjunction with the [Container](https://guardian.github.io/storybooks/?path=/story/source_react-components-container--default)
 * component. This ensures the columns conform to the Guardian's grid layouts at
 * every breakpoint.
 */
declare const Columns: ({ collapseBelow, collapseUntil, cssOverrides, children, spaceY, ...props }: ColumnsProps) => _emotion_react_jsx_runtime.JSX.Element;

export { Columns };
export type { CollapseBreakpoint, ColumnsProps };