import { jsx as e } from "@emotion/react/jsx-runtime";
import { clsx as _ } from "clsx";
import { useMemo as m } from "react";
import { useEnvironment as f, useModuleSkeleton as O } from "@m4l/core";
import { useComponentSize as v } from "../../hooks/useComponentSize/index.js";
import { getComponentClasses as z } from "../../utils/getComponentSlotRoot.js";
import { COLOR_KEY_COMPONENT as T, COLOR_SWATCH_VIEW_BOX as h, COLOR_SWATCH_PATH as x } from "./constants.js";
import { ColorSlots as y } from "./slots/ColorEnum.js";
import { ColorStyled as E, IconStyled as I, RootStyled as N } from "./slots/ColorSlots.js";
const k = (i) => {
  const { size: l, className: c, value: o, dataTestId: a = "m4l_color_test" } = i, { host_static_assets: d, environment_assets: u } = f(), p = z(T, y), n = `${d}/${u}/frontend/commons/assets/icons/out_of.svg`, { currentSize: s } = v(l), t = s === "small" || s === "medium" ? s : "medium", C = O(), r = m(
    () => ({
      size: t,
      value: o
    }),
    [t, o]
  ), S = m(
    () => o ? /* @__PURE__ */ e(
      E,
      {
        role: "status",
        "aria-live": "polite",
        ownerState: { ...r },
        viewBox: h,
        children: /* @__PURE__ */ e("path", { d: x, fill: "currentColor" })
      }
    ) : /* @__PURE__ */ e(I, { src: n, size: t }),
    [o, r, t, n]
  );
  return /* @__PURE__ */ e(
    N,
    {
      className: _(c, p.root),
      "aria-busy": C,
      "data-testid": a,
      ownerState: r,
      children: S
    }
  );
};
export {
  k as Color
};
