import { HTMLAttributes, Ref } from "react";
import { BackgroundProps, BorderProps, ColorProps, CursorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from "./system";
import { SystemElements } from "./system/types";
export declare type BoxProps = {
    as?: SystemElements;
    id?: string;
    role?: string;
    href?: string;
    className?: string;
    tabIndex?: number;
    ref?: Ref<HTMLDivElement>;
} & ColorProps & CursorProps & SpaceProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps & HTMLAttributes<HTMLDivElement>;
/**
 * ‘Box’ is the most low-level layout component provided by Braid. Its job is to render an individual element on the screen.
 * In terms of page layout, ‘Box’ most notably provides a set of padding options which can be used to create container elements with internal spacing.
 *
 * p
 * pX
 * pY
 * pt
 * pb
 * pl
 * pr
 *
 * These options accept a value from our space scale.
 *
 * The Box implements all styled-system apis. (see https://styled-system.com/api)
 *
 */
export declare const Box: import("@emotion/styled").StyledComponent<{
    theme?: import("@emotion/react").Theme | undefined;
    as?: import("react").ElementType<any> | undefined;
} & {
    as?: SystemElements | undefined;
    id?: string | undefined;
    role?: string | undefined;
    href?: string | undefined;
    className?: string | undefined;
    tabIndex?: number | undefined;
    ref?: Ref<HTMLDivElement> | undefined;
} & ColorProps & CursorProps & SpaceProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps & HTMLAttributes<HTMLDivElement>, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;