import { jsx as i, jsxs as m } from "react/jsx-runtime";
import { u, E as g } from "./use-device-info.owyffR9m.js";
import { _ as l } from "./twind.D7be0E5m.js";
import { C as h } from "./dnd.esm.ByOls-Fs.js";
import { n as v, a as x } from "./use-editor.BDXlYRYz.js";
import { b as D } from "./use-section-style.CihCUEtb.js";
function O({
  brick: s
}) {
  const o = s.props.$children, a = D(s), c = Object.values(a), { isDesktop: p } = u(), d = v(), f = x();
  return /* @__PURE__ */ i(
    h,
    {
      droppableId: s.id,
      type: "brick",
      isDropDisabled: !p,
      direction: "vertical",
      mode: "virtual",
      renderClone: () => null,
      children: (t, n) => /* @__PURE__ */ i(
        "div",
        {
          ...t.droppableProps,
          ref: t.innerRef,
          className: l(
            "flex-1 flex @mobile:flex-wrap",
            n.isDraggingOver && "!outline !outline-2 !outline-orange-300",
            (n.isDraggingOver || d) && "!overflow-y-hidden",
            n.isDraggingOver && "[&>*]:(!transform-none)",
            ...c
          ),
          children: o && o.length > 0 ? o.filter((e) => {
            var r;
            return !((r = e.props.hidden) != null && r[f]);
          }).map((e, r) => /* @__PURE__ */ i(g, { brick: e, isContainerChild: !0, index: r }, `${e.id}`)) : /* @__PURE__ */ m(
            "div",
            {
              className: l(
                "w-full h-full text-center p-4 rounded flex justify-center items-center text-base font-medium"
              ),
              children: [
                "This is a box.",
                /* @__PURE__ */ i("br", {}),
                "Drag bricks here to stack them inside."
              ]
            }
          )
        }
      )
    }
  );
}
export {
  O as default
};
//# sourceMappingURL=DroppableBox.D5VkGynx.js.map
