import { PropType } from "vue";
declare const SIZE: readonly ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "s", "m", "l", "xl"];
declare const STATE: readonly ["default", "primary", "primary-light", "primary-dark", "success", "error", "error-light", "error-dark", "warning", "warning-light", "warning-dark", "success-light", "success-dark", "light", "dark", "border", "element", "avatar"];
declare const BORDER_STATE: readonly ["default", "primary", "success", "error", "warning", "secondary"];
declare const TYPE: readonly ["solid", "transparent"];
declare const SHAPE: readonly ["hexagon", "default", "squircle", "circle"];
export type PictogramType = typeof TYPE[number];
export type PictogramState = typeof STATE[number];
export type PictogramBorderState = typeof BORDER_STATE[number];
export type PictogramSize = typeof SIZE[number];
export type PictogramShape = typeof SHAPE[number];
/**
 * Pictogram is a visual representation of a content like label, header or objects.
 * Pictograms are illustrative and expressive. They simply complex ideas and aid to clearly communicate the content. Emoticons, icons, logos, illustrations can be represented using pictograms.
 */
declare const _default: import("vue/types/v3-define-component").DefineComponent<{
    /**
     * 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 's' | 'm' | 'l' | 'xl'
     */
    size: {
        type: PropType<"small" | "s" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "m" | "l" | "xl">;
        default: string;
    };
    /**
     * 	'default' | 'primary' | 'primary-light' | 'primary-dark' |'success' | 'error' | 'error-light' | 'error-dark' | 'warning' | 'warning-light' | 'warning-dark' | 'success-light' | 'success-dark' | 'light' | 'dark' | 'border' | 'element' | 'avatar'
     */
    state: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "light" | "element" | "border" | "primary-dark" | "primary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dark" | "avatar">;
        default: string;
    };
    /**
     * 	'default' | 'primary' | 'success' | 'error' |'warning' | 'secondary'
     */
    borderState: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "secondary">;
        default: string;
    };
    /**
     * 'solid' | 'transparent'
     */
    type: {
        type: PropType<"transparent" | "solid">;
        default: string;
    };
    /**
     * true | false <br/> Used to enable/disable :hover, :active, :focus effects <br/> Default : true
     */
    effects: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * 'hexagon' | 'default' |  'squircle' | 'circle'
     */
    shape: {
        type: PropType<"default" | "circle" | "hexagon" | "squircle">;
        default: string;
    };
    /**
     * label display in Pictogram if state==='avatar' it should be max 2 characters
     */
    label: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Used while border state is used
     */
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Used for user attention to click or indicating some info
     */
    animate: {
        type: BooleanConstructor;
        default: boolean;
    };
}, import("vue").Data, {
    colors: string[];
    sizes: {
        "xx-small": number;
        "x-small": number;
        small: number;
        medium: number;
        large: number;
        "x-large": number;
        "xx-large": number;
        s: number;
        m: number;
        l: number;
        xl: number;
    };
}, {
    computedLabel(): string;
    background(): string;
    styleObj(): {
        backgroundColor: string;
        fontSize: string;
        lineHeight: string;
        fontWeight: string;
        color: string;
    } | {
        backgroundColor?: undefined;
        fontSize?: undefined;
        lineHeight?: undefined;
        fontWeight?: undefined;
        color?: undefined;
    };
}, {
    handleClick(e: MouseEvent): void;
    hashCode(str: string | null): string;
    generateHslaColors(saturation: number, lightness: number, alpha: number, amount: number): string[];
}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
    /**
     * 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 's' | 'm' | 'l' | 'xl'
     */
    size: {
        type: PropType<"small" | "s" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "m" | "l" | "xl">;
        default: string;
    };
    /**
     * 	'default' | 'primary' | 'primary-light' | 'primary-dark' |'success' | 'error' | 'error-light' | 'error-dark' | 'warning' | 'warning-light' | 'warning-dark' | 'success-light' | 'success-dark' | 'light' | 'dark' | 'border' | 'element' | 'avatar'
     */
    state: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "light" | "element" | "border" | "primary-dark" | "primary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dark" | "avatar">;
        default: string;
    };
    /**
     * 	'default' | 'primary' | 'success' | 'error' |'warning' | 'secondary'
     */
    borderState: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "secondary">;
        default: string;
    };
    /**
     * 'solid' | 'transparent'
     */
    type: {
        type: PropType<"transparent" | "solid">;
        default: string;
    };
    /**
     * true | false <br/> Used to enable/disable :hover, :active, :focus effects <br/> Default : true
     */
    effects: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * 'hexagon' | 'default' |  'squircle' | 'circle'
     */
    shape: {
        type: PropType<"default" | "circle" | "hexagon" | "squircle">;
        default: string;
    };
    /**
     * label display in Pictogram if state==='avatar' it should be max 2 characters
     */
    label: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Used while border state is used
     */
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Used for user attention to click or indicating some info
     */
    animate: {
        type: BooleanConstructor;
        default: boolean;
    };
}>>, {
    type: "transparent" | "solid";
    label: string;
    animate: boolean;
    state: "default" | "success" | "error" | "warning" | "primary" | "light" | "element" | "border" | "primary-dark" | "primary-light" | "error-dark" | "error-light" | "warning-dark" | "warning-light" | "success-dark" | "success-light" | "dark" | "avatar";
    size: "small" | "s" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "m" | "l" | "xl";
    effects: boolean;
    shape: "default" | "circle" | "hexagon" | "squircle";
    borderState: "default" | "success" | "error" | "warning" | "primary" | "secondary";
    loading: boolean;
}>;
export default _default;