import { jsx as i } from "@emotion/react/jsx-runtime";
import { useMemo as s } from "react";
import { validateHexColor as a } from "../../helpers/validateHexColor.js";
import { TagStyled as c } from "../../slots/TagsFormatterSlots.js";
import { useComponentSize as u } from "../../../../../hooks/useComponentSize/index.js";
import d from "clsx";
import { TAGS_FORMATTER_CLASSES as p } from "../../constants.js";
const z = (e) => {
  const { label: t, backgroundColor: o, size: m, className: l } = e, { currentSize: r } = u(m), n = s(
    () => ({
      size: r,
      backgroundColor: o
    }),
    [r, o]
  );
  return a(o) ? /* @__PURE__ */ i(
    c,
    {
      ownerState: n,
      className: d(l, p.root),
      children: t
    }
  ) : (console.error(
    `backgroundColor no válido: "${o}". backgroundColor debe ser un color hexadecimal.`
  ), null);
};
export {
  z as Tag
};
