/** @jsx jsx */
import { Interpolation } from '@emotion/react';
import React from 'react';
import { ThemeUICSSProperties, ThemeUIStyleObject } from '@theme-ui/css';
import type { Assign } from './types';
declare const boxSystemProps: readonly ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "m", "mt", "mr", "mb", "ml", "mx", "my", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "p", "pt", "pr", "pb", "pl", "px", "py", "color", "backgroundColor", "bg", "opacity"];
declare type BoxSystemPropsKeys = typeof boxSystemProps[number];
declare type BoxSystemProps = Pick<ThemeUICSSProperties, BoxSystemPropsKeys>;
export interface BoxOwnProps extends BoxSystemProps {
    as?: React.ElementType;
    variant?: string;
    css?: Interpolation<any>;
    sx?: ThemeUIStyleObject;
}
export interface BoxProps extends Omit<Assign<React.ComponentPropsWithRef<'div'>, BoxOwnProps>, 'ref'> {
}
/**
 * @internal
 */
export declare const __isBoxStyledSystemProp: (prop: string) => boolean;
/**
 * Use the Box component as a layout primitive to add margin, padding, and colors to content.
 * @see https://theme-ui.com/components/box
 */
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<any>>;
export {};