import { FC, ReactNode, CSSProperties } from 'react';
import * as CSS from 'csstype';
import { BackgroundColor, BaseSpacing, BorderColor, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize } from '../../types';
import { KnownKeys } from '../../types/lib.types';
export declare type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
export interface BoxProps {
    /**
     * The element type to be rendered.
     */
    as?: string;
    /**
     * How to align the contents along the cross axis.
     */
    alignItems?: CssAlignItemsValue | ResponsiveProp<CssAlignItemsValue>;
    /**
     * How to align the contents when there is extra space in the cross axis.
     * This property has no effect when there is only one line of flex items.
     */
    alignContent?: CssAlignContentValue | ResponsiveProp<CssAlignContentValue>;
    /**
     * How to align along the cross axis when contained in a Box.
     * This allows the default alignment (or the one specified by `align`) to be overridden for the individual Box.
     */
    alignSelf?: CssAlignItemsValue | ResponsiveProp<CssAlignItemsValue>;
    /**
     * Any valid background color, or a `url()` for an image
     */
    background?: BackgroundColor;
    /**
     * Any valid border color
     */
    borderColor?: BorderColor;
    /**
     * Width of the Box's border
     * Can be a single [border width token](/?path=/story/design-tokens-design-tokens--page#border-width).
     * Can also be a string of [border width tokens](/?path=/story/design-tokens-design-tokens--page#border-width)
     * that models itself after the css shorthand property,
     * where you can set the border width on all four sides of an element.
     * e.g: "0 sm xs 0" --> top: 0, right: sm, bottom: xs, left: 0;
     */
    borderWidth?: BorderSize | string | ResponsiveProp<BorderSize | string>;
    /**
     * Additional class names to add
     */
    className?: string;
    /**
     * The amount of spacing (implemented as margin) between child elements.
     * Can be a single [spacing value](/?path=/story/design-tokens-design-tokens--page#spacing).
     * NOTE: this prop is incompatible with reverse flex direction values (row-reverse, column-reverse).
     * For grid and flex layouts, use 'gap' instead.
     */
    childGap?: SpacingSize | ResponsiveProp<SpacingSize>;
    /**
     * The box's contents
     */
    children?: ReactNode;
    /**
     * A color token identifier to use for the text color.
     */
    color?: FontColor;
    /**
     * Sets the gaps (gutters) between columns.
     */
    columnGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
    /**
     * Cursor style. Use any standard CSS value.
     */
    cursor?: CSS.Property.Cursor;
    /**
     * Sets how flex items are placed inside the Box, defining the main axis and the direction
     * NOTE: reverse directions are incompatible with the `childGap` prop.
     */
    direction?: CssFlexDirectionValue | ResponsiveProp<CssFlexDirectionValue>;
    /**
     * Display property. Only select values supported.
     */
    display?: CssDisplayValue | ResponsiveProp<CssDisplayValue>;
    /**
     * Can be used as shorthand for the flexbox css properties `flex-grow`, `flex-shrink`, `flex-basis`
     */
    flex?: CssFlexValue | ResponsiveProp<CssFlexValue>;
    /**
     * Pass style modifiers for focus states. The following properties can be modified on focus.
     * `* background`
     * `* borderColor`
     * `* borderWidth`
     * `* color`
     * `* shadow`
     */
    focus?: {
        background?: BoxProps['background'];
        borderColor?: BoxProps['borderColor'];
        borderWidth?: BoxProps['borderWidth'];
        color?: BoxProps['color'];
        shadow?: BoxProps['shadow'];
    };
    /**
     * The [font family token](/?path=/story/design-tokens-design-tokens--page#font-family) identifier for the Box's text
     */
    fontFamily?: FontFamily | ResponsiveProp<FontFamily>;
    /**
     * The [font size token](/?path=/story/design-tokens-design-tokens--page#font-size) identifier for the Box's text
     */
    fontSize?: FontSize | ResponsiveProp<FontSize>;
    /**
     * The [font weight token](/?path=/docs/design-tokens-design-tokens--page#font-weight) identifier for the Box's text
     */
    fontWeight?: FontWeight | ResponsiveProp<FontWeight>;
    /**
     * The height of the element. Can be given a standard css value (px, rem, em, %),
     * or a [height token](/?path=/story/design-tokens-design-tokens--page#height)
     */
    height?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * Pass style modifiers for hover states. The following properties can be modified on hover:
     * `* background`
     * `* borderColor`
     * `* borderWidth`
     * `* color`
     * `* fontSize`
     * `* shadow`
     */
    hover?: {
        background?: BoxProps['background'];
        borderColor?: BoxProps['borderColor'];
        borderWidth?: BoxProps['borderWidth'];
        color?: BoxProps['color'];
        fontSize?: BoxProps['fontSize'];
        shadow?: BoxProps['shadow'];
    };
    /**
     * Sets the gaps (gutters) between rows and columns.
     */
    gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
    /**
     * How space between and around content items is distributed along the main-axis a flex Box
     */
    justifyContent?: CssJustifyContentValue | ResponsiveProp<CssJustifyContentValue>;
    /**
     * Amount of space around the element.
     * Can be a single [spacing value](/?path=/story/design-tokens-design-tokens--page#spacing).
     * Can also be a string of [spacing value](/?path=/story/design-tokens-design-tokens--page#spacing)
     * that models itself after the css shorthand property,
     * where you can set the margin area on all four sides of an element. It is shorthand for top, right, bottom, left.
     */
    margin?: BaseSpacing | ResponsiveProp<BaseSpacing>;
    /**
     * The maximum height of the element. Can be given a standard css value (px, rem, em, %),
     * or a [height token](/?path=/story/design-tokens-design-tokens--page#height)
     */
    maxHeight?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * The minimum height of the element. Can be given a standard css value (px, rem, em, %),
     * or a [height token](/?path=/story/design-tokens-design-tokens--page#height)
     */
    minHeight?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * The maximum width of the element. Can be given a standard css value (px, rem, em, %),
     * or a [width token](/?path=/story/design-tokens-design-tokens--page#width)
     */
    maxWidth?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * The minimum width of the element. Can be given a standard css value (px, rem, em, %),
     * or a [width token](/?path=/story/design-tokens-design-tokens--page#width)
     */
    minWidth?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * The css overflow behavior of the Box
     */
    overflow?: CssOverflowValue | ResponsiveProp<CssOverflowValue>;
    /**
     * Amount of space within the element around the Box contents.
     * Can be a single [spacing value](/?path=/story/design-tokens-design-tokens--page#spacing).
     * Can also be a string of [spacing value](/?path=/story/design-tokens-design-tokens--page#spacing)
     * that models itself after the css shorthand property,
     * where you can set the margin area on all four sides of an element. It is shorthand for top, right, bottom, left.
     */
    padding?: BaseSpacing | ResponsiveProp<BaseSpacing>;
    /**
     * CSS position property.
     */
    position?: CSS.Property.Position | ResponsiveProp<CSS.Property.Position>;
    /**
     * Set the radius of all corners
     */
    radius?: BorderRadiusSize | ResponsiveProp<BorderRadiusSize>;
    /**
     * Sets the gaps (gutters) between rows.
     */
    rowGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
    /**
     * The size of the drop shadow applied to the Box
     */
    shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
    /**
     * CSS Style object
     */
    style?: CSSProperties;
    /**
     * the alignment of the text
     */
    textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
    /**
     * By default, a Box's items will all try to fit onto one line.
     * Change that and allow the items to wrap as needed wrap
     */
    wrap?: boolean | ResponsiveProp<boolean>;
    /**
     * The width of the element. Can be given a standard css value (px, rem, em, %),
     * or a [width token](/?path=/story/design-tokens-design-tokens--page#width)
     */
    width?: DimensionSize | ResponsiveProp<DimensionSize> | string;
    /**
     * ZIndex value for the element. Can be one of the predetermined token values.
     * Can be responsive.
     */
    zIndex?: ZIndexSize | ResponsiveProp<ZIndexSize>;
    /**
     * Additional props to be spread to rendered element
     */
    [x: string]: any;
}
/**
 * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
 * elements.
 */
export declare const Box: FC<BoxProps>;
export declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];