import { Interpolation } from '@emotion/react';
import React from 'react';
import { ThemeUICSSProperties, ThemeUIStyleObject } from '@theme-ui/css';
import { Theme } from '@theme-ui/core';
import type { Assign, ForwardRef } from "./types.js";
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"];
type BoxSystemPropsKeys = (typeof boxSystemProps)[number];
type BoxSystemProps = Pick<ThemeUICSSProperties, BoxSystemPropsKeys>;
export interface BoxOwnProps extends BoxSystemProps {
    as?: React.ElementType;
    variant?: string;
    css?: Interpolation<any>;
    sx?: ThemeUIStyleObject<Theme>;
}
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: ForwardRef<any, BoxProps>;
export {};