"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import {
  Children,
  forwardRef
} from "react";
import { useStyle } from "../../../runtimes/react/use-style";
import { useBackgrounds } from "../../hooks";
import Backgrounds from "./components/Backgrounds";
var BackgroundsContainer_default = forwardRef(function BackgroundsContainer({ backgrounds, children, className, ...restOfProps }, ref) {
  const widthAndMarginStyle = useStyle({
    width: "100%",
    margin: "0 auto"
  });
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({
          position: "relative",
          "> *": {
            borderRadius: "inherit",
            height: "inherit"
          },
          "> :last-child": {
            position: "relative"
          }
        }),
        className ? className : widthAndMarginStyle
      ),
      children: [
        /* @__PURE__ */ jsx(Backgrounds, { backgrounds: useBackgrounds(backgrounds) }),
        Children.only(children)
      ]
    }
  );
});
export {
  BackgroundsContainer_default as default
};
//# sourceMappingURL=index.js.map