import { jsx as c } from "react/jsx-runtime";
import { useDrop as w } from "react-dnd";
import { merge as m } from "../../utilities/merge.es.js";
const u = ({
  data: t,
  onDrop: o,
  accept: i,
  children: s,
  "data-test-id": n = "drop-zone"
}) => {
  const [{ isOver: a, canDrop: p }, l] = w({
    accept: i || "",
    drop: (e) => {
      o == null || o(t.targetItem, e, t.position);
    },
    canDrop: (e) => e.id !== t.targetItem.id,
    collect: (e) => ({
      isOver: e.isOver(),
      canDrop: e.canDrop()
    })
  }), r = a && p;
  return /* @__PURE__ */ c(
    "div",
    {
      role: "row",
      "aria-hidden": !r,
      "data-test-id": n,
      className: m([
        "tw-w-full tw-transition-height",
        t.position !== "within" ? "tw-my-[-4px] tw-h-[10px] tw-py-1 tw-outline-none tw-relative tw-z-20" : "tw-h-auto",
        r && t.position !== "within" ? "tw-border-violet-60 tw-border-2 tw-h-7 tw-bg-clip-content" : "",
        r && t.position === "within" ? "tw-bg-violet-20" : ""
      ]),
      ref: l,
      children: s
    }
  );
};
u.displayName = "FondueDropZone";
export {
  u as DropZone
};
//# sourceMappingURL=DropZone.es.js.map
