import { jsx as t } from "@emotion/react/jsx-runtime";
import { useMemo as n } from "react";
import p from "clsx";
import { ColorFormatterRootStyled as f } from "./slots/ColorFormatterSlots.js";
import { ColorFormatterSlots as c } from "./slots/ColorFormatterEnum.js";
import { getComponentSlotRoot as C } from "../../../utils/getComponentSlotRoot.js";
import { COLOR_FORMATTER_KEY_COMPONENT as m } from "./constants.js";
import { getPropDataTestId as d } from "../../../test/getNameDataTestId.js";
import { Color as u } from "../../Color/Color.js";
function _(e) {
  const { value: o, dataTestId: s, className: a, size: r = "medium" } = e, i = { value: o }, l = n(() => /* @__PURE__ */ t(u, { value: o, size: r }), [o, r]);
  return /* @__PURE__ */ t(
    f,
    {
      className: p(
        C(m),
        a
      ),
      ...d(
        m,
        c.root,
        s
      ),
      ownerState: i,
      children: l
    }
  );
}
export {
  _ as ColorFormatter
};
