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 { OverlayContainer as P, useOverlay as g, usePreventScroll as A, useModal as D } from "@react-aria/overlays";
import { AnimatePresence as b, motion as d } from "framer-motion";
import { memo as F, useRef as L, useMemo as O } from "react";
import { merge as S } from "../../utilities/merge.es.js";
import { ModalBody as C } from "./ModalBody.es.js";
import { ModalFooter as I } from "./ModalFooter.es.js";
import { ModalHeader as R } from "./ModalHeader.es.js";
import { ModalVisual as j } from "./ModalVisual.es.js";
import { ModalLayoutContext as T, MODAL_PADDING as s } from "./context/ModalLayout.es.js";
import { ModalTitleContext as V } from "./context/ModalTitle.es.js";
import { ModalWidth as r } from "./types.es.js";
const _ = {
  initial: {
    opacity: 0
  },
  show: {
    opacity: 1,
    transition: {
      duration: 0.15
    }
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.15
    }
  }
}, k = {
  initial: { y: -200 },
  show: { y: 0, transition: { duration: 0.3 } },
  exit: { y: 0 }
}, B = {
  [r.Default]: "tw-max-w-[800px]",
  [r.Small]: "tw-max-w-[600px]",
  [r.Large]: "tw-max-w-[1200px]"
}, m = F((e) => {
  const { visual: o, children: w, width: c = r.Default, zIndex: f, compact: a = !1 } = e, l = L(null), {
    overlayProps: p,
    underlayProps: { onPointerDown: u }
  } = g(e, l);
  A();
  const { modalProps: x } = D(), { dialogProps: h, titleProps: y } = M(e, l), n = a ? s.compact : s.default;
  return /* @__PURE__ */ t(
    d.div,
    {
      variants: _,
      initial: "initial",
      animate: "show",
      exit: "exit",
      style: {
        background: "rgba(0, 0, 0, .5)",
        zIndex: f
      },
      onPointerDown: u,
      "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(
        d.div,
        {
          variants: k,
          className: S([B[c], "tw-w-full tw-max-h-full tw-h-contents tw-flex tw-flex-col"]),
          children: /* @__PURE__ */ v(
            "div",
            {
              ...p,
              ...h,
              ...x,
              ref: l,
              "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 && o.pattern ? /* @__PURE__ */ t("div", { className: "tw-w-[260px] tw-relative tw-flex-shrink-0 tw-overflow-hidden", children: /* @__PURE__ */ t(j, { ...o }) }) : null,
                /* @__PURE__ */ t("div", { className: "tw-flex tw-flex-col tw-flex-1 tw-space-y-6 tw-overflow-hidden", children: /* @__PURE__ */ t(
                  T.Provider,
                  {
                    value: O(() => ({ compact: a, padding: n }), [a, n]),
                    children: /* @__PURE__ */ t(V.Provider, { value: y, children: w })
                  }
                ) })
              ]
            }
          )
        }
      ) })
    }
  );
});
m.displayName = "Modal";
const i = ({ isOpen: e, ...o }) => /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(b, { children: e && /* @__PURE__ */ t(m, { ...o, isOpen: !0 }) }) });
i.displayName = "FondueModal";
i.Header = R;
i.Body = C;
i.Footer = I;
export {
  i as Modal
};
//# sourceMappingURL=Modal.es.js.map
