import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import * as css from '../theme/default/avatar.m.css';
const factory = create({ theme }).properties();
export const Avatar = factory(function Avatar({ middleware: { theme }, properties, children }) {
    const themeCss = theme.classes(css);
    const { secondary, outline, src, alt, type = 'circle', size = 'medium' } = properties();
    return (tsx("div", { key: "root", role: src && 'image', "aria-label": alt, classes: [
            theme.variant(),
            themeCss.root,
            secondary ? themeCss.avatarColorSecondary : themeCss.avatarColor,
            outline && themeCss.avatarOutline,
            themeCss[size],
            themeCss[type]
        ], styles: src
            ? {
                backgroundImage: `url(${src})`
            }
            : {} }, children()));
});
export default Avatar;

/*# sourceMappingURL=index.mjs.map*/