import { T as c } from "./Select-2a6c2da9.mjs";
import { h as p, O as u } from "./FetchConfigsUtils-476a602b.mjs";
import { S as l } from "./SSRHelper-8eb361ff.mjs";
import n from "classnames";
import t from "react";
import E from "react-dom";
import { X as h } from "react-feather";
import { B as f, b as v, c as y } from "./Button-c97a7217.mjs";
function M() {
  return l.isSSR() ? null : document.createElement("div");
}
function r(a) {
  if (l.isSSR())
    return null;
  const e = a ? "editorModalWrapper" : "modal-root";
  let o = document.getElementById(e);
  return o || (o = document.createElement("div"), o.id = e, o.style.zIndex = "50", a ? R(o) : document.body.appendChild(o)), o;
}
function R(a) {
  const e = document.getElementById(p);
  e && e.appendChild(a);
}
class D extends t.Component {
  constructor(e) {
    super(e), this.modalRoot = r(this.props.isPreviewMode), this.containerElement = M();
  }
  componentDidMount() {
    this.modalRoot || (this.modalRoot = r()), this.modalRoot && this.containerElement && this.modalRoot.appendChild(this.containerElement);
  }
  componentWillUnmount() {
    this.modalRoot && this.containerElement && this.modalRoot.removeChild(this.containerElement);
  }
  renderModal() {
    const { overlayBackground: e, overlayClassName: o, children: i, className: d, dataQa: s } = this.props;
    return /* @__PURE__ */ t.createElement("div", { className: n("modalOverlay", o), style: e }, /* @__PURE__ */ t.createElement("section", { onClick: (m) => m.stopPropagation(), className: n("modalContainer", d), "data-qa-id": s }, i));
  }
  renderModalOverlay() {
    const { visible: e } = this.props;
    return e ? /* @__PURE__ */ t.createElement("div", { className: "modalOverlay editorModalOverlay" }, this.renderModal()) : /* @__PURE__ */ t.createElement("div", null);
  }
  render() {
    const { visible: e, isPreviewMode: o } = this.props;
    return o ? this.renderModalOverlay() : !e || !this.containerElement ? /* @__PURE__ */ t.createElement("div", null) : E.createPortal(this.renderModalOverlay(), this.containerElement);
  }
}
const _ = (a) => /* @__PURE__ */ t.createElement("div", { className: "header" }, /* @__PURE__ */ t.createElement("div", { className: "header-wrapper" }, /* @__PURE__ */ t.createElement(N, { ...a }))), k = (a) => /* @__PURE__ */ t.createElement("div", { className: n("body", a.className) }, a.children), N = ({ className: a, onClose: e, ...o }) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
  c,
  {
    ...o,
    className: n(a, u.TITLE_FONT),
    fontSize: e ? "md" : "3xl",
    isCentered: !0
  }
), e && /* @__PURE__ */ t.createElement(f, { buttonType: v.TEXT, className: "btnClose", onClick: e, buttonStyle: y.SECONDARY }, /* @__PURE__ */ t.createElement(h, { size: "24", strokeWidth: 1 })));
export {
  D as M,
  _ as a,
  k as b
};
