import { jsx } from "react/jsx-runtime";
import { normalize } from "polished";
import { forwardRef } from "react";
import { Element } from "../../../runtimes/react/components/Element";
import { useGlobalStyle } from "../../../runtimes/react/use-global-style";
import { useStyle } from "../../../runtimes/react/use-style";
import { useCSSResetEnabled } from "../../../runtimes/react/root-style-registry";
import { GridItem } from "../../shared/grid-item";
import BackgroundsContainer from "../../shared/BackgroundsContainer";
import Placeholder from "./components/Placeholder";
const Root = forwardRef(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
  const cssResetEnabled = useCSSResetEnabled();
  useGlobalStyle(
    cssResetEnabled ? [
      { html: { boxSizing: "border-box" }, "*, *::before, *::after": { boxSizing: "inherit" } },
      normalize()
    ] : []
  );
  return /* @__PURE__ */ jsx(BackgroundsContainer, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ jsx("div", { className: useStyle({ display: "flex", flexWrap: "wrap", width: "100%" }), children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(
    GridItem,
    {
      grid: children.columns,
      index,
      columnGap,
      rowGap,
      children: /* @__PURE__ */ jsx(Element, { element: child })
    },
    child.key
  )) : /* @__PURE__ */ jsx(Placeholder, {}) }) });
});
var Root_default = Root;
export {
  Root_default as default
};
//# sourceMappingURL=Root.js.map