import React from 'react';
export declare const Box: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
    direction?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
    justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch" | undefined;
    align?: "start" | "end" | "center" | "stretch" | "baseline" | undefined;
    spacing?: "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "90" | undefined;
    wrap?: string | undefined;
    children?: React.ReactNode;
    as?: string | undefined;
    inline?: boolean | undefined;
    style?: Record<any, any> | undefined;
    attributes?: Record<string, any> | undefined;
    onMouseDown?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    width?: string | undefined;
    minWidth?: string | undefined;
    maxWidth?: string | undefined;
    height?: string | undefined;
    minHeight?: string | undefined;
    maxHeight?: string | undefined;
    className?: string | undefined;
    grow?: 0 | 1 | undefined;
    shrink?: 0 | 1 | undefined;
} & {
    as?: "div" | "span" | "header" | "footer" | "nav" | "section" | "ul" | "ol" | "li" | undefined;
    color?: "subtle" | "subtle-light" | "inverse" | "inverse-subtle" | "inverse-subtle-light" | "inverse-ghost" | "inverse-ghost-light" | "interactive" | "interactive-hover" | "interactive-active" | "interactive-inverse" | "interactive-inverse-hover" | "interactive-inverse-active" | "success" | "success-hover" | "success-active" | "success-strong" | "danger" | "danger-hover" | "danger-active" | "danger-strong" | "warning" | "warning-hover" | "warning-active" | "warning-strong" | "info" | "info-hover" | "info-active" | "info-strong" | undefined;
    backgroundColor?: "subtle" | "inverse" | "inverse-subtle" | "success" | "success-hover" | "success-active" | "danger" | "danger-hover" | "danger-active" | "warning" | "warning-hover" | "warning-active" | "info" | "info-hover" | "info-active" | "transparent" | "active" | "hover" | "subtle-strong" | "workspace" | "transparent-hover" | "transparent-active" | "transparent-subtle" | "inverse-hover" | "inverse-active" | "highlighted" | "primary" | "primary-hover" | "primary-active" | "primary-dark" | "primary-transparent" | "primary-transparent-hover" | "primary-transparent-active" | "success-subtle" | "success-subtle-hover" | "success-subtle-active" | "danger-subtle" | "danger-subtle-hover" | "danger-subtle-active" | "warning-subtle" | "warning-subtle-hover" | "warning-subtle-active" | "info-subtle" | "info-subtle-hover" | "info-subtle-active" | undefined;
    borderColor?: "subtle" | "inverse" | "inverse-subtle" | "success" | "danger" | "danger-hover" | "danger-active" | "danger-strong" | "info" | "strong" | "transparent" | "active" | "inverse-active" | "primary" | "primary-hover" | "extraStrong" | "inverse-strong" | "focus" | undefined;
    borderRadius?: "0" | "2" | "4" | "6" | "8" | "12" | "16" | "24" | "40" | "full" | Partial<Record<"b" | "br" | "s" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "e" | "ee" | "es" | "se" | "ss", "0" | "2" | "4" | "6" | "8" | "12" | "16" | "24" | "40" | "full">> | undefined;
    borderWidth?: "0" | "1" | "2" | "4" | "8" | Partial<Record<"b" | "x" | "y" | "t" | "r" | "l", "0" | "1" | "2" | "4" | "8">> | undefined;
    borderStyle?: "none" | "dashed" | "dotted" | "double" | "solid" | undefined;
    paddings?: Partial<import("../../typings/general").TPaddings> | undefined;
    shadow?: "s" | "m" | "l" | "xl" | "s-inverse" | "m-inverse" | "l-inverse" | undefined;
    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
    zIndex?: number | undefined;
} & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement | null>>;