import { HTMLAttributes } from 'react';
import { UnitPxType } from '../../system/ThemeProvider/lib/types';
import * as BoxTypes from './types';
export type BoxProps = HTMLAttributes<HTMLDivElement> & {
    alignItems?: BoxTypes.AlignItems;
    display?: BoxTypes.Display;
    flexDirection?: BoxTypes.FlexDirection;
    flexWrap?: BoxTypes.FlexWrap;
    justifyContent?: BoxTypes.JustifyContent;
    gap?: UnitPxType;
    alignSelf?: BoxTypes.AlignSelf;
    flexBasis?: string;
    flexGrow?: 1 | 0;
    flexShrink?: 1 | 0;
    order?: number;
    background?: BoxTypes.BackgroundLevel;
    padding?: UnitPxType;
};
/**
 * ## Box
 *
 * Div with flexbox properties applied to their CSS default values.
 *
 * - Box can be both the flex parent and the flex child.
 * - None of the child properties should be applied unless specified.
 */
export declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HTMLAttributes<HTMLDivElement> & {
    alignItems?: BoxTypes.AlignItems | undefined;
    display?: BoxTypes.Display | undefined;
    flexDirection?: BoxTypes.FlexDirection | undefined;
    flexWrap?: BoxTypes.FlexWrap | undefined;
    justifyContent?: BoxTypes.JustifyContent | undefined;
    gap?: "base" | "small" | "xsmall" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
    alignSelf?: BoxTypes.AlignSelf | undefined;
    flexBasis?: string | undefined;
    flexGrow?: 0 | 1 | undefined;
    flexShrink?: 0 | 1 | undefined;
    order?: number | undefined;
    background?: BoxTypes.BackgroundLevel | undefined;
    padding?: "base" | "small" | "xsmall" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
}, never>;