@carton-org/react-neumorphism/dist/components/Modal/Modal.js

A React component library implementing the neumorphism design style

import { jsxs as o, jsx as t } from "@emotion/react/jsx-runtime";
import { withTheme as w } from "@emotion/react";
import y from "react-dom";
import { forwardRef as g, useRef as H } from "react";
import M from "../Button/Button.js";
import R from "../Badge/Badge.js";
import { useClickOutside as v } from "../../hooks/useClickOutside.js";
import { StyledOverlay as x, StyledModal as O, StyledHeader as $ } from "./modal.styles.js";
import { CrossIcon as j } from "../../icons/CrossIcon.js";
const k = g(({
  isOpen: m,
  onClose: r,
  title: e,
  children: n,
  width: f,
  height: c,
  headerSize: i = "sm",
  theme: l,
  ...a
}, s) => {
  const d = H(null);
  if (v(d, () => r == null ? void 0 : r()), !m)
    return null;
  const h = f ?? window.innerWidth / 2, u = c ?? window.innerHeight / 2, p = e !== void 0;
  return y.createPortal(/* @__PURE__ */ o("div", { ref: s, ...a, children: [
    /* @__PURE__ */ t(x, {}),
    /* @__PURE__ */ o(O, { ref: d, $width: h, $height: u, children: [
      p && /* @__PURE__ */ o($, { children: [
        /* @__PURE__ */ t(R, { size: i, children: e }),
        /* @__PURE__ */ t(M, { iconLeft: /* @__PURE__ */ t(j, { color: l.fontColor }), size: i, onClick: r })
      ] }),
      n
    ] })
  ] }), document.body);
}), T = w(k);
export {
  T as default
};