import { jsx as p } from "@emotion/react/jsx-runtime";
import { useEnvironment as u, useModuleDictionary as _ } from "@m4l/core";
import { useMemo as E } from "react";
import { useComponentSize as I } from "../../hooks/useComponentSize/index.js";
import { clsx as L } from "clsx";
import { NO_ITEM_SELECTED_CLASSES as S } from "./constant.js";
import { DICTIONARY as t } from "./dictionary.js";
import { NoItemSelectedRootStyled as g } from "./slots/NoItemSelectedSlots.js";
function x(o) {
  const { image: s, title: m, message: r, size: i, className: n, dataTestId: a } = o, { host_static_assets: l, environment_assets: c } = u(), { currentSize: d } = I(i), { getLabel: e } = _(), f = E(() => `${l}/${c}/frontend/components/no_item_selected/assets/icons/no_selected.svg`, []);
  return /* @__PURE__ */ p(
    g,
    {
      imageUrl: s || f,
      title: m || e(t.LABEL_TITLE),
      message: r || e(t.LABEL_DETAIL),
      size: d,
      className: L(S.root, n),
      dataTestId: a,
      role: "alert",
      "aria-label": "NoItemSelected",
      imageAriaLabel: "illustration no item selected"
    }
  );
}
export {
  x as NoItemSelected
};
