import { jsx as t, jsxs as v } from "react/jsx-runtime";
import { useDialog as M } from "@react-aria/dialog";
import { FocusScope as N } from "@react-aria/focus";
import { useOverlay as D, usePreventScroll as P, useModal as g, OverlayContainer as A } from "@react-aria/overlays";
import { motion as n, AnimatePresence as b } from "framer-motion";
import { memo as F, useRef as L } from "react";
import { merge as I } from "../../utilities/merge.es.js";
import { ModalBody as O } from "./ModalBody.es.js";
import { ModalFooter as S } from "./ModalFooter.es.js";
import { ModalHeader as R } from "./ModalHeader.es.js";
import { ModalVisual as T } from "./ModalVisual.es.js";
import { ModalLayout as _, MODAL_PADDING as d } from "./context/ModalLayout.es.js";
import { ModalTitle as j } from "./context/ModalTitle.es.js";
import { ModalWidth as r } from "./types.es.js";
const E = {
  initial: {
    opacity: 0
  },
  show: {
    opacity: 1,
    transition: {
      duration: 0.15
    }
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.15
    }
  }
}, V = {
  initial: { y: -200 },
  show: { y: 0, transition: { duration: 0.3 } },
  exit: { y: 0 }
}, k = {
  [r.Default]: "tw-max-w-[800px]",
  [r.Small]: "tw-max-w-[600px]",
  [r.Large]: "tw-max-w-[1200px]"
}, B = 50, s = F((e) => {
  const { visual: o, children: m, width: w = r.Default, zIndex: c = B, compact: l = !1 } = e, a = L(null), {
    overlayProps: f,
    underlayProps: { onPointerDown: p }
  } = D(e, a);
  P();
  const { modalProps: u } = g(), { dialogProps: x, titleProps: h } = M(e, a), y = l ? d.compact : d.default;
  return /* @__PURE__ */ t(
    n.div,
    {
      variants: E,
      initial: "initial",
      animate: "show",
      exit: "exit",
      style: {
        background: "rgba(0, 0, 0, .5)",
        zIndex: c
      },
      onPointerDown: p,
      "data-is-underlay": !0,
      className: "tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-flex tw-justify-center tw-items-center tw-p-4",
      children: /* @__PURE__ */ t(N, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t(
        n.div,
        {
          variants: V,
          className: I([k[w], "tw-w-full tw-max-h-full tw-h-contents tw-flex tw-flex-col"]),
          children: /* @__PURE__ */ v(
            "div",
            {
              ...f,
              ...x,
              ...u,
              ref: a,
              "data-test-id": "modal-container",
              className: "tw-flex-initial tw-min-h-0 tw-w-full tw-flex tw-bg-white tw-overflow-hidden tw-border tw-border-solid tw-border-line-strong tw-rounded tw-shadow-2xl",
              children: [
                (o == null ? void 0 : o.pattern) && /* @__PURE__ */ t("div", { className: "tw-w-[260px] tw-relative tw-flex-shrink-0 tw-overflow-hidden", children: /* @__PURE__ */ t(T, { ...o }) }),
                /* @__PURE__ */ t("div", { className: "tw-flex tw-flex-col tw-flex-1 tw-space-y-6 tw-overflow-hidden", children: /* @__PURE__ */ t(_.Provider, { value: { compact: l, padding: y }, children: /* @__PURE__ */ t(j.Provider, { value: h, children: m }) }) })
              ]
            }
          )
        }
      ) })
    }
  );
});
s.displayName = "Modal";
const i = ({ isOpen: e, ...o }) => /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(b, { children: e && /* @__PURE__ */ t(s, { ...o, isOpen: !0 }) }) });
i.displayName = "FondueModal";
i.Header = R;
i.Body = O;
i.Footer = S;
export {
  i as Modal
};
//# sourceMappingURL=Modal.es.js.map
