import type { PropsWithChildren } from "react";
import React from "react";
import type { MQ, HorizontalAlignment, SpaceSizes, VerticalAlignment, ColumnSizes, ColumnAlignment, Order } from "../../types";
export type ColumnsProps = PropsWithChildren<{
    /** represents the size of both horizontal and vertical gap between children, can be a single string or an array of 3 strings
     * specify [small screen gap size, medium screen gap size, large screen gap size] to apply different gap sizes for different screen sizes
     */
    gap?: SpaceSizes | MQ<SpaceSizes>;
    /** set to true if you want the last element to fill the space
     */
    alwaysFillSpace?: boolean;
    /** specify horizontal alignment
     * specify [small screen alignItems, medium screen alignItems, large screen alignItems] to apply different alignItems for different screen sizes
     */
    alignItems?: HorizontalAlignment | MQ<HorizontalAlignment>;
    /** specify vertical alignment
     * specify [small screen vAlignItems, medium screen vAlignItems, large screen vAlignItems] to apply different vAlignItems for different screen sizes
     */
    vAlignItems?: VerticalAlignment | MQ<VerticalAlignment>;
    "data-e2e-test-id"?: string;
    /** @ignore */
    "data-ds-id"?: string;
}> & React.HTMLAttributes<HTMLDivElement>;
export type ColumnProps = PropsWithChildren<{
    /** represents the size of the column, can be a single number or an array of 3 numbers with a value ranging from 1 to 12
     * specify [small screen column size, medium screen column size, large screen column size] to apply different values for different screen sizes
     */
    size?: ColumnSizes | MQ<ColumnSizes>;
    /** specify the visual positioning of the column. [small screen column order, medium screen column order, large screen column order] to apply different order for different screen sizes
     */
    order?: Order | MQ<Order>;
    alignSelf?: ColumnAlignment | MQ<ColumnAlignment>;
    /** display column at given breakpoint */
    show?: boolean | MQ<boolean>;
    "data-e2e-test-id"?: string;
    /** @ignore */
    "data-ds-id"?: string;
}> & React.HTMLAttributes<HTMLDivElement>;
export declare const Column: ({ children, size, order, alignSelf, show, "data-e2e-test-id": dataE2eTestId, "data-ds-id": dataDsId, ...rest }: ColumnProps) => React.ReactElement;
export declare const Columns: ({ children, gap, alwaysFillSpace, alignItems, vAlignItems, "data-e2e-test-id": dataE2eTestId, "data-ds-id": dataDsId, ...rest }: ColumnsProps) => React.ReactElement;