import { jsxs as r, jsx as t } from "react/jsx-runtime";
import { useContext as i, cloneElement as c } from "react";
import { IconSize as p } from "../../foundation/Icon/IconSize.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { ModalLayout as f } from "./context/ModalLayout.es.js";
import { ModalTitle as w } from "./context/ModalTitle.es.js";
import { modalHeaderVariants as x, ModalHeaderVariant as h } from "./types.es.js";
const u = ({
  title: d,
  leadText: e,
  decorator: a,
  variant: l = h.Default
}) => {
  const n = i(w), { padding: o, compact: s } = i(f);
  return /* @__PURE__ */ r("div", { "data-test-id": "modal-header", className: `${o.top} ${o.horizontal}`, children: [
    /* @__PURE__ */ r("div", { className: "tw-flex tw-items-center", children: [
      a && /* @__PURE__ */ t(
        "span",
        {
          "data-test-id": "modal-header-decorator-container",
          className: m(["tw-mr-2", x[l]]),
          children: c(a, { size: p.Size24 })
        }
      ),
      /* @__PURE__ */ t(
        "h3",
        {
          ...n,
          className: m([
            "tw-font-heading tw-font-medium tw-text-text",
            s ? "tw-text-lg" : "tw-text-xl"
          ]),
          children: d
        }
      )
    ] }),
    e && /* @__PURE__ */ t("p", { className: "tw-text-text-weak tw-mt-4", children: e })
  ] });
};
u.displayName = "FondueModalHeader";
export {
  u as ModalHeader
};
//# sourceMappingURL=ModalHeader.es.js.map
