import { jsx as t } from "@emotion/react/jsx-runtime";
import { forwardRef as d } from "react";
import { useModuleSkeleton as l } from "@m4l/core";
import { SkeletonAvatar as S } from "./subcomponents/SkeletonAvatar/index.js";
import { TEST_PROP_ID as u } from "../../../../test/constants_no_mock.js";
import { getNameDataTestId as A } from "../../../../test/getNameDataTestId.js";
import { AvatarRootStyled as v } from "./slots/AvatarSlots.js";
import { AVATAR_KEY as r } from "./constants.js";
import { getComponentSlotRoot as N } from "../../../../utils/getComponentSlotRoot.js";
import { useComponentSize as R } from "../../../../hooks/useComponentSize/index.js";
import z from "clsx";
const T = d(
  (e, m) => {
    const { size: o, dataTestid: s, className: a, ...i } = e, n = l(), { currentSize: p } = R(o), c = N(r), f = { size: p };
    return n ? /* @__PURE__ */ t(S, { width: 32, height: 32 }) : /* @__PURE__ */ t(
      v,
      {
        className: z(c, a),
        ref: m,
        sizes: o,
        variant: "rounded",
        ownerState: f,
        ...i,
        ...process.env.NODE_ENV !== "production" ? { [u]: A(r, "root", s) } : {}
      }
    );
  }
);
T.displayName = "Avatar";
export {
  T as Avatar
};
