import { default as React } from 'react';
import { ResponsiveValue } from './useBreakpoint';
import { SpacingToken } from './responsive';
type SpacingInput = SpacingToken | string | number;
export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Element type to render */
    as?: React.ElementType;
    /** Padding (all sides) */
    padding?: ResponsiveValue<SpacingInput>;
    /** Shorthand alias for padding */
    p?: ResponsiveValue<SpacingInput>;
    /** Padding horizontal (left + right) */
    px?: ResponsiveValue<SpacingInput>;
    /** Padding vertical (top + bottom) */
    py?: ResponsiveValue<SpacingInput>;
    /** Padding top */
    pt?: ResponsiveValue<SpacingInput>;
    /** Padding right */
    pr?: ResponsiveValue<SpacingInput>;
    /** Padding bottom */
    pb?: ResponsiveValue<SpacingInput>;
    /** Padding left */
    pl?: ResponsiveValue<SpacingInput>;
    /** Margin (all sides) */
    margin?: ResponsiveValue<SpacingInput>;
    /** Shorthand alias for margin */
    m?: ResponsiveValue<SpacingInput>;
    /** Margin horizontal (left + right) */
    mx?: ResponsiveValue<SpacingInput>;
    /** Margin vertical (top + bottom) */
    my?: ResponsiveValue<SpacingInput>;
    /** Margin top */
    mt?: ResponsiveValue<SpacingInput>;
    /** Margin right */
    mr?: ResponsiveValue<SpacingInput>;
    /** Margin bottom */
    mb?: ResponsiveValue<SpacingInput>;
    /** Margin left */
    ml?: ResponsiveValue<SpacingInput>;
    /** Background color: 'base' | 'surface' | 'elevated' | 'overlay' | custom CSS color */
    background?: string;
    /** Border: true for default border, or custom CSS border */
    border?: boolean | string;
    /** Border radius token or CSS value */
    borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | string;
    /** Box shadow token or CSS value */
    shadow?: "none" | "sm" | "md" | "lg" | "xl" | string;
    /** CSS display property */
    display?: ResponsiveValue<string>;
    /** CSS width */
    width?: ResponsiveValue<string | number>;
    /** CSS height */
    height?: ResponsiveValue<string | number>;
    /** CSS min-width */
    minWidth?: string | number;
    /** CSS min-height */
    minHeight?: string | number;
    /** CSS max-width */
    maxWidth?: string | number;
    /** CSS max-height */
    maxHeight?: string | number;
    /** CSS overflow */
    overflow?: string;
    /** CSS position */
    position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
    /** CSS flex property */
    flex?: string | number;
    /** CSS flex-grow */
    flexGrow?: number;
    /** CSS flex-shrink */
    flexShrink?: number;
    /** Children */
    children?: React.ReactNode;
}
export declare const Box: React.MemoExoticComponent<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>>;
export default Box;