import React from 'react';
import { FlintBox as FlintBoxElement } from '@getufy/flint-ui/box/flint-box';
export interface FlintBoxProps extends Omit<React.HTMLAttributes<FlintBoxElement>, 'color'> {
    /** The component tag to render */
    component?: string;
    /** Margin on all sides. Accepts CSS length values (e.g. '16px', '1rem'). Note: unlike FlintGrid/FlintStack, these do NOT use a spacing multiplier. */
    m?: string | undefined;
    /** Margin top. */
    mt?: string | undefined;
    /** Margin right. */
    mr?: string | undefined;
    /** Margin bottom. */
    mb?: string | undefined;
    /** Margin left. */
    ml?: string | undefined;
    /** Margin on the horizontal (left and right) axis. */
    mx?: string | undefined;
    /** Margin on the vertical (top and bottom) axis. */
    my?: string | undefined;
    /** Padding on all sides. Accepts CSS length values (e.g. '16px', '1rem'). Note: unlike FlintGrid/FlintStack, these do NOT use a spacing multiplier. */
    p?: string | undefined;
    /** Padding top. */
    pt?: string | undefined;
    /** Padding right. */
    pr?: string | undefined;
    /** Padding bottom. */
    pb?: string | undefined;
    /** Padding left. */
    pl?: string | undefined;
    /** Padding on the horizontal (left and right) axis. */
    px?: string | undefined;
    /** Padding on the vertical (top and bottom) axis. */
    py?: string | undefined;
    /** CSS display value. */
    display?: string | undefined;
    /** CSS flex-direction value. */
    flexDirection?: string | undefined;
    /** CSS align-items value. */
    alignItems?: string | undefined;
    /** CSS justify-content value. */
    justifyContent?: string | undefined;
    /** CSS flex-wrap value. */
    flexWrap?: string | undefined;
    /** CSS flex-basis value. */
    flexBasis?: string | undefined;
    /** CSS flex-grow value. */
    flexGrow?: string | undefined;
    /** CSS flex-shrink value. */
    flexShrink?: string | undefined;
    /** CSS gap between flex or grid items. */
    gap?: string | undefined;
    /** Background color. Supports theme tokens 'primary' and 'secondary'. */
    bgcolor?: string | undefined;
    /** Text color. Supports theme tokens 'primary' and 'secondary'. */
    color?: string | undefined;
    /** CSS border shorthand value. */
    border?: string | undefined;
    /** CSS border-radius value. */
    borderRadius?: string | undefined;
    /** CSS box-shadow value. */
    boxShadow?: string | undefined;
    /** CSS width value. */
    width?: string | undefined;
    /** CSS height value. */
    height?: string | undefined;
    /**
     * Dispatched when an unknown component tag is used and falls back to div.
     * DOM event: `flint-box-warning`
     */
    onFlintBoxWarning?: (event: CustomEvent) => void;
}
export declare const FlintBox: React.ForwardRefExoticComponent<FlintBoxProps & React.RefAttributes<FlintBoxElement>>;