import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { avatar, avatarImage } from "./styles.js";
/**
 * **Server Component**
 *
 * An `Avatar` is generally used to represent objects or people within your app.
 * The avatar can consist of an image, an icon, or some text to display. When
 * the avatar is not an image, different themes can be applied to make the
 * avatar more unique.
 *
 * @example Simple Example
 * ```tsx
 * import { Avatar } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * export function Example(): ReactElement {
 *   return <Avatar src="/path-to-img.png" />;
 * }
 * ```
 *
 * @since 6.0.0 `aria-hidden` is set to `true` by default.
 */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
    const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
    let img;
    if (src || imgProps) {
        img = /*#__PURE__*/ _jsx("img", {
            src: src,
            alt: alt,
            referrerPolicy: referrerPolicy,
            ...imgProps,
            className: avatarImage({
                className: imgProps?.className
            })
        });
    }
    return /*#__PURE__*/ _jsxs("span", {
        ...remaining,
        "aria-hidden": ariaHidden,
        ref: ref,
        className: avatar({
            size,
            color,
            theme,
            className
        }),
        children: [
            img,
            children
        ]
    });
});

//# sourceMappingURL=Avatar.js.map