import { PropType } from "vue";
import { CSSProperties } from "vue/types/jsx";
declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
declare const TYPE: readonly ["inline", "inline-flex", "inline-grid", "inline-block", "block", "flex", "grid"];
declare const BACKGROUND: readonly ["pop-over", "default", "element-light", "element", "element-dark", "font-dark", "font", "font-light", "icon-dark", "icon", "icon-light", "border-dark", "border", "border-light", "primary-dark", "primary", "primary-light", "secondary-dark", "secondary", "secondary-light", "error-dark", "error", "error-light", "warning-dark", "warning", "warning-light", "success-dark", "success", "success-light", "dashboard-background"];
type AlignTypeCommon = "start" | "center" | "space-between" | "stretch";
type AlignTypeX = AlignTypeCommon | ("left" | "right");
type AlignTypeY = AlignTypeCommon | ("top" | "bottom");
export type ContainerDirection = typeof DIRECTION[number];
export type ContainerType = typeof TYPE[number];
export type ContainerAlign = AlignTypeX | AlignTypeY | `${AlignTypeX} ${AlignTypeY}`;
export type ContainerOverflow = "hidden" | "auto" | "scroll" | "visible";
export type ContainerBackground = typeof BACKGROUND[number];
declare const _default: import("vue/types/v3-define-component").DefineComponent<{
    /**
     *
     * Direction of child elements  <br/>
     * 'row' | 'column' <br/><br/>
     * Note : Works only for type='flex' and 'flex' is default type
     */
    direction: {
        type: PropType<"row" | "row-reverse" | "column" | "column-reverse">;
        default: string;
        validator(value: ContainerDirection): boolean;
    };
    /**
     * 'inline' | 'inline-flex' | 'inline-grid' | 'inline-block' | 'block' | 'flex' | 'grid'
     */
    type: {
        type: PropType<"inline" | "inline-flex" | "inline-grid" | "inline-block" | "block" | "flex" | "grid">;
        default: string;
        validator(value: ContainerType): boolean;
    };
    /**
     *
     * 	We can specify 2 values separated by space for horizontal and vertical alignment.<br/> Single value applies to both <br/>
     *  'left' | 'right' | 'top' | 'bottom' | 'center' | 'left center' | 'center top' <br/><br/>
     *
     *  Note : Works only for type='flex' and 'flex' is default type
     */
    align: {
        type: PropType<ContainerAlign>;
        default: string;
    };
    /**
     * To override individual self alignment
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    alignSelf: {
        type: StringConstructor;
        default: null;
    };
    /**
     * To assign flex-wrap property
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    flexWrap: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * How content overflow should work? <br/>
     * 'hidden' | 'auto' | 'scroll' | 'visible'
     */
    overflow: {
        type: PropType<ContainerOverflow>;
        default: string;
    };
    /**
     * Gap between items
     */
    gap: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the ability for a flex item to shrink if necessary.
     *
     */
    shrink: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the ability for a flex item to grow if necessary.
     *
     */
    grow: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the initial size for a flex item.
     *
     */
    basis: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Padding to set in container
     */
    padding: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     *
     *  If single value specified then it is applied to for width and height. <br/>
     * 	E.g '450px 300px' , '500px' <br/><br/>
     * 	Note : Works only for type='grid'
     */
    itemSize: {
        type: StringConstructor;
        default: null;
    };
    /**
     * This will add hover effect and cursor-pointer
     */
    clickable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * 	Set background to wrapper <br/>
     * 'pop-over' | 'default' | 'element-light' | 'element' | 'element-dark' | 'font-dark' | 'font' | 'font-light' | 'icon-dark' | 'icon' | 'icon-light' | 'border-dark' | 'border' | 'border-light' | 'primary-dark' | 'primary' | 'primary-light' | 'secondary-dark' | 'secondary' | 'secondary-light' | 'error-dark' | 'error' | 'error-light' | 'warning-dark' | 'warning' | 'warning-light' | 'success-dark' | 'success' | 'success-light' | 'dashboard-background'
     */
    background: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "pop-over" | "element-light" | "element" | "element-dark" | "font-dark" | "font" | "font-light" | "icon-dark" | "icon" | "icon-light" | "border-dark" | "border" | "border-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary" | "secondary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dashboard-background">;
        default: string;
        validator(value: ContainerBackground): boolean;
    };
    /**
     * Display separator betwwen childs <br/><br/>
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    separator: {
        type: BooleanConstructor;
        default: boolean;
    };
}, import("vue").Data, import("vue").Data, {
    style(): CSSProperties;
}, {
    isOldSafari(): boolean;
}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
    /**
     *
     * Direction of child elements  <br/>
     * 'row' | 'column' <br/><br/>
     * Note : Works only for type='flex' and 'flex' is default type
     */
    direction: {
        type: PropType<"row" | "row-reverse" | "column" | "column-reverse">;
        default: string;
        validator(value: ContainerDirection): boolean;
    };
    /**
     * 'inline' | 'inline-flex' | 'inline-grid' | 'inline-block' | 'block' | 'flex' | 'grid'
     */
    type: {
        type: PropType<"inline" | "inline-flex" | "inline-grid" | "inline-block" | "block" | "flex" | "grid">;
        default: string;
        validator(value: ContainerType): boolean;
    };
    /**
     *
     * 	We can specify 2 values separated by space for horizontal and vertical alignment.<br/> Single value applies to both <br/>
     *  'left' | 'right' | 'top' | 'bottom' | 'center' | 'left center' | 'center top' <br/><br/>
     *
     *  Note : Works only for type='flex' and 'flex' is default type
     */
    align: {
        type: PropType<ContainerAlign>;
        default: string;
    };
    /**
     * To override individual self alignment
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    alignSelf: {
        type: StringConstructor;
        default: null;
    };
    /**
     * To assign flex-wrap property
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    flexWrap: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * How content overflow should work? <br/>
     * 'hidden' | 'auto' | 'scroll' | 'visible'
     */
    overflow: {
        type: PropType<ContainerOverflow>;
        default: string;
    };
    /**
     * Gap between items
     */
    gap: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the ability for a flex item to shrink if necessary.
     *
     */
    shrink: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the ability for a flex item to grow if necessary.
     *
     */
    grow: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * If Container is used inside flex container then This defines the initial size for a flex item.
     *
     */
    basis: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Padding to set in container
     */
    padding: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     *
     *  If single value specified then it is applied to for width and height. <br/>
     * 	E.g '450px 300px' , '500px' <br/><br/>
     * 	Note : Works only for type='grid'
     */
    itemSize: {
        type: StringConstructor;
        default: null;
    };
    /**
     * This will add hover effect and cursor-pointer
     */
    clickable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * 	Set background to wrapper <br/>
     * 'pop-over' | 'default' | 'element-light' | 'element' | 'element-dark' | 'font-dark' | 'font' | 'font-light' | 'icon-dark' | 'icon' | 'icon-light' | 'border-dark' | 'border' | 'border-light' | 'primary-dark' | 'primary' | 'primary-light' | 'secondary-dark' | 'secondary' | 'secondary-light' | 'error-dark' | 'error' | 'error-light' | 'warning-dark' | 'warning' | 'warning-light' | 'success-dark' | 'success' | 'success-light' | 'dashboard-background'
     */
    background: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "pop-over" | "element-light" | "element" | "element-dark" | "font-dark" | "font" | "font-light" | "icon-dark" | "icon" | "icon-light" | "border-dark" | "border" | "border-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary" | "secondary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dashboard-background">;
        default: string;
        validator(value: ContainerBackground): boolean;
    };
    /**
     * Display separator betwwen childs <br/><br/>
     *
     * Note : Works only for type='flex' and 'flex' is default type
     */
    separator: {
        type: BooleanConstructor;
        default: boolean;
    };
}>>, {
    type: "inline" | "inline-flex" | "inline-grid" | "inline-block" | "block" | "flex" | "grid";
    background: "default" | "success" | "error" | "warning" | "primary" | "pop-over" | "element-light" | "element" | "element-dark" | "font-dark" | "font" | "font-light" | "icon-dark" | "icon" | "icon-light" | "border-dark" | "border" | "border-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary" | "secondary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dashboard-background";
    direction: "row" | "row-reverse" | "column" | "column-reverse";
    align: ContainerAlign;
    alignSelf: string;
    flexWrap: boolean;
    overflow: ContainerOverflow;
    gap: number;
    shrink: number;
    grow: number;
    basis: string;
    padding: string | number;
    itemSize: string;
    clickable: boolean;
    separator: boolean;
}>;
export default _default;