@frontify/fondue
Version:
Design system of Frontify
45 lines (44 loc) • 1.49 kB
JavaScript
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