/// <reference types="react" />
export declare const SIZE_MAP: {
    none: number;
    small: number;
    medium: number;
    large: number;
    xlarge: number;
};
export declare const BOX_SIZE_MAP: {
    xxsmall: number;
    xsmall: number;
    small: number;
    medium: number;
    large: number;
    xlarge: number;
    xxlarge: number;
};
export declare type Size = 'none' | 'small' | 'medium' | 'large' | 'xlarge';
export declare type Breakpoint = 'mobile' | 'tablet' | 'desktop';
export declare type BoxSize = 'auto' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full';
export declare type Full = boolean | FullObject;
export declare type WrapOption = 'wrap' | 'wrap-reverse' | 'nowrap';
export declare type Selectable = 'none' | 'auto';
export interface SizeObject {
    horizontal?: Size;
    vertical?: Size;
}
export interface ResponsiveSize {
    mobile?: Size | SizeObject;
    tablet?: Size | SizeObject;
    desktop?: Size | SizeObject;
}
export interface BoxSizeObject {
    horizontal?: BoxSize;
    vertical?: BoxSize;
}
export interface FullObject {
    horizontal?: boolean;
    vertical?: boolean;
}
export interface SizeStyle {
    height: string;
    width: string;
}
export interface UpBoxProps {
    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    alignContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'normal';
    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' | 'normal';
    flexWrap?: boolean;
    reverse?: boolean;
    boxSize?: BoxSize | BoxSizeObject;
    pad?: Size | SizeObject;
    margin?: Size | SizeObject;
    color?: string;
    backgroundColor?: string;
    backgroundImage?: string;
    full?: Full;
    selectable?: Selectable;
    style?: React.CSSProperties;
    className?: string;
    onClick?: (event: React.MouseEvent<any>) => void;
}