import { CSSProperties, ElementType, ReactNode } from 'react';
export interface BoxProps {
    children?: ReactNode;
    /** Override the root element (default: "div") */
    component?: ElementType;
    display?: CSSProperties["display"];
    overflow?: CSSProperties["overflow"];
    overflowX?: CSSProperties["overflowX"];
    overflowY?: CSSProperties["overflowY"];
    position?: CSSProperties["position"];
    top?: number | string;
    right?: number | string;
    bottom?: number | string;
    left?: number | string;
    zIndex?: number | string;
    width?: number | string;
    height?: number | string;
    minWidth?: number | string;
    minHeight?: number | string;
    maxWidth?: number | string;
    maxHeight?: number | string;
    flexDirection?: CSSProperties["flexDirection"];
    flexWrap?: CSSProperties["flexWrap"];
    flex?: CSSProperties["flex"];
    flexGrow?: number | string;
    flexShrink?: number | string;
    flexBasis?: number | string;
    alignItems?: CSSProperties["alignItems"];
    alignContent?: CSSProperties["alignContent"];
    alignSelf?: CSSProperties["alignSelf"];
    justifyContent?: CSSProperties["justifyContent"];
    justifyItems?: CSSProperties["justifyItems"];
    justifySelf?: CSSProperties["justifySelf"];
    gap?: number | string;
    rowGap?: number | string;
    columnGap?: number | string;
    gridTemplateColumns?: CSSProperties["gridTemplateColumns"];
    gridTemplateRows?: CSSProperties["gridTemplateRows"];
    gridColumn?: CSSProperties["gridColumn"];
    gridRow?: CSSProperties["gridRow"];
    gridArea?: CSSProperties["gridArea"];
    /** padding all sides */
    p?: number | string;
    /** padding-top */
    pt?: number | string;
    /** padding-right */
    pr?: number | string;
    /** padding-bottom */
    pb?: number | string;
    /** padding-left */
    pl?: number | string;
    /** padding left + right */
    px?: number | string;
    /** padding top + bottom */
    py?: number | string;
    /** margin all sides */
    m?: number | string;
    /** margin-top */
    mt?: number | string;
    /** margin-right */
    mr?: number | string;
    /** margin-bottom */
    mb?: number | string;
    /** margin-left */
    ml?: number | string;
    /** margin left + right (supports "auto") */
    mx?: number | string;
    /** margin top + bottom */
    my?: number | string;
    /** background-color shorthand */
    bgcolor?: CSSProperties["backgroundColor"];
    color?: CSSProperties["color"];
    opacity?: number | string;
    border?: CSSProperties["border"];
    borderTop?: CSSProperties["borderTop"];
    borderRight?: CSSProperties["borderRight"];
    borderBottom?: CSSProperties["borderBottom"];
    borderLeft?: CSSProperties["borderLeft"];
    borderColor?: CSSProperties["borderColor"];
    borderRadius?: CSSProperties["borderRadius"];
    boxShadow?: CSSProperties["boxShadow"];
    outline?: CSSProperties["outline"];
    fontSize?: CSSProperties["fontSize"];
    fontWeight?: CSSProperties["fontWeight"];
    fontFamily?: CSSProperties["fontFamily"];
    fontStyle?: CSSProperties["fontStyle"];
    lineHeight?: CSSProperties["lineHeight"];
    letterSpacing?: CSSProperties["letterSpacing"];
    textAlign?: CSSProperties["textAlign"];
    textDecoration?: CSSProperties["textDecoration"];
    textTransform?: CSSProperties["textTransform"];
    whiteSpace?: CSSProperties["whiteSpace"];
    cursor?: CSSProperties["cursor"];
    userSelect?: CSSProperties["userSelect"];
    pointerEvents?: CSSProperties["pointerEvents"];
    visibility?: CSSProperties["visibility"];
    style?: CSSProperties;
    className?: string;
    id?: string;
    onClick?: React.MouseEventHandler<HTMLElement>;
    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
    [key: string]: any;
}
declare const Box: import('react').ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
export default Box;