import { ContainerBase, StyledContainerConfig } from "../ui/Container";
import { RenderingContext } from "../ui/RenderingContext";
import { Instance } from "../ui/Instance";
export interface FlexBoxConfig extends StyledContainerConfig {
    /** Base CSS class. Default is `flexbox`. */
    baseClass?: string;
    /** Flex direction. Default is `row`.  */
    direction?: string;
    /**
     * Add spacing between items by applying a margin to children.
     * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
     * Value `true` is equivalent to `medium`.
     */
    spacing?: string | boolean;
    /**
     * Add horizontal spacing between items by applying a margin to children.
     * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
     * Value `true` is equivalent to `medium`.
     */
    hspacing?: boolean | string;
    /**
     * Add vertical spacing between items by applying a margin to children.
     * Allowed values are xsmall, small, medium, large and xlarge.
     * Value true is equivalent to medium.
     */
    vspacing?: boolean | string;
    /**
     * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
     *  Value `true` is equivalent to `medium`.
     */
    pad?: boolean | string;
    padding?: boolean | string;
    /**
     * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
     *  Value `true` is equivalent to `medium`.
     */
    hpad?: boolean | string;
    hpadding?: boolean | string;
    /**
     * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
     *  Value `true` is equivalent to `medium`.
     */
    vpad?: boolean | string;
    vpadding?: boolean | string;
    wrap?: boolean;
    align?: "start" | "center" | "end" | "baseline" | "stretch" | false;
    justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
    target?: string;
    /**
     * Set to true to add overflow styles required for deeply nested flexbox calculations.
     */
    nested?: boolean;
}
export declare class FlexBox extends ContainerBase<FlexBoxConfig, Instance> {
    padding?: boolean | string;
    hpadding?: boolean | string;
    vpadding?: boolean | string;
    spacing?: string | boolean;
    hspacing?: boolean | string;
    vspacing?: boolean | string;
    pad?: boolean | string;
    hpad?: boolean | string;
    vpad?: boolean | string;
    wrap?: boolean;
    align?: "start" | "center" | "end" | "baseline" | "stretch" | false;
    justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
    target?: string;
    nested?: boolean;
    direction?: string;
    constructor(config?: FlexBoxConfig);
    init(): void;
    initInstance(context: RenderingContext, instance: Instance): void;
    prepareCSS(context: RenderingContext, instance: Instance): void;
    render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
}
export declare class FlexRow extends FlexBox {
}
export declare class FlexCol extends FlexBox {
}
//# sourceMappingURL=FlexBox.d.ts.map