import { SyntheticEvent } from 'react';
import { View } from '@instructure/ui-view';
/**
---
category: components
---
**/
declare const Avatar: import("react").ForwardRefExoticComponent<{
    name: string;
    src?: string;
    alt?: string;
    size?: "auto" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
    color?: "default" | "shamrock" | "barney" | "crimson" | "fire" | "licorice" | "ash" | "ai";
    hasInverseColor?: boolean;
    showBorder?: "auto" | "always" | "never";
    shape?: "circle" | "rectangle";
    display?: "inline-block" | "block";
    margin?: import("@instructure/emotion").Spacing;
    onImageLoaded?: (event?: SyntheticEvent) => void;
    as?: import("@instructure/shared-types").AsElementType;
    elementRef?: (element: Element | null) => void;
    renderIcon?: import("@instructure/shared-types").Renderable;
} & {
    styles?: import("./props").AvatarStyle | undefined;
    makeStyles?: (extraArgs?: Record<string, unknown>) => void;
} & {
    themeOverride?: Partial<import("@instructure/shared-types").AvatarTheme> | ((componentTheme: import("@instructure/shared-types").AvatarTheme, currentTheme: import("@instructure/shared-types").BaseTheme) => Partial<import("@instructure/shared-types").AvatarTheme>) | undefined;
} & Omit<import("react").AllHTMLAttributes<{
    name: string;
    src?: string;
    alt?: string;
    size?: "auto" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
    color?: "default" | "shamrock" | "barney" | "crimson" | "fire" | "licorice" | "ash" | "ai";
    hasInverseColor?: boolean;
    showBorder?: "auto" | "always" | "never";
    shape?: "circle" | "rectangle";
    display?: "inline-block" | "block";
    margin?: import("@instructure/emotion").Spacing;
    onImageLoaded?: (event?: SyntheticEvent) => void;
    as?: import("@instructure/shared-types").AsElementType;
    elementRef?: (element: Element | null) => void;
    renderIcon?: import("@instructure/shared-types").Renderable;
} & Element>, keyof {
    name: string;
    src?: string;
    alt?: string;
    size?: "auto" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
    color?: "default" | "shamrock" | "barney" | "crimson" | "fire" | "licorice" | "ash" | "ai";
    hasInverseColor?: boolean;
    showBorder?: "auto" | "always" | "never";
    shape?: "circle" | "rectangle";
    display?: "inline-block" | "block";
    margin?: import("@instructure/emotion").Spacing;
    onImageLoaded?: (event?: SyntheticEvent) => void;
    as?: import("@instructure/shared-types").AsElementType;
    elementRef?: (element: Element | null) => void;
    renderIcon?: import("@instructure/shared-types").Renderable;
} | "dir"> & {
    dir?: "ltr" | "rtl";
} & import("react").RefAttributes<View>>;
export default Avatar;
export { Avatar };
//# sourceMappingURL=index.d.ts.map