import { jsx, jsxs } from "react/jsx-runtime";
import { Children } from "react";
import { flattenChildren } from "../Accordion/AccordionItem.mjs";
import { Box } from "../Box/Box.mjs";
import { Divider } from "../Divider/Divider.mjs";
import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
import { resolveResponsiveProp } from "../../utils/resolveResponsiveProp.mjs";
import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./Tiles.css.mjs";
import { mapResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
const Tiles = ({
  children,
  space = "none",
  columns = 1,
  dividers = false,
  data,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Box,
  {
    className: negativeMargin("top", space),
    ...buildDataAttributes({ data, validateRestProps: restProps }),
    children: /* @__PURE__ */ jsx(
      Box,
      {
        display: "flex",
        flexWrap: "wrap",
        className: negativeMargin("left", space),
        children: Children.map(flattenChildren(children), (child, i) => /* @__PURE__ */ jsx(
          Box,
          {
            minWidth: 0,
            className: resolveResponsiveProp(
              columns,
              columnsMobile,
              columnsTablet,
              columnsDesktop,
              columnsWide
            ),
            children: /* @__PURE__ */ jsxs(
              Box,
              {
                height: "full",
                paddingTop: space,
                paddingLeft: space,
                children: [
                  dividers && i > 0 ? /* @__PURE__ */ jsx(
                    Box,
                    {
                      paddingBottom: space,
                      display: mapResponsiveValue(
                        columns,
                        (column) => column === 1 ? "block" : "none"
                      ),
                      children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
                    }
                  ) : null,
                  child
                ]
              }
            )
          }
        ))
      }
    )
  }
);
export {
  Tiles
};
