function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import Box from "../box/box";
import { spacingStyleFunction } from "../../../theme";
import { useStyleProps } from "../../../hooks";
/**
 * Grid is a layout component that arranges its children into rows and columns.
 * Each child is given an equal amount of space.
 */
const Grid = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  numCols = 1,
  spacing = "3",
  spacingX,
  spacingY,
  ...props
}, ref) => {
  const computedSpacingStyle = useStyleProps({
    paddingHorizontal: spacingX ?? spacing,
    paddingVertical: spacingY ?? spacing
  }, spacingStyleFunction);
  const renderRows = () => {
    const rows = [];
    React.Children.forEach(children, (child, index) => {
      const rowIndex = Math.floor(index / numCols);
      if (!rows[rowIndex]) {
        rows[rowIndex] = [];
      }
      rows[rowIndex].push( /*#__PURE__*/React.createElement(Box, {
        key: index,
        width: `${100 / numCols}%`,
        style: {
          paddingLeft: index % numCols !== 0 ? computedSpacingStyle.style.paddingHorizontal / 2 : 0,
          paddingRight: index % numCols !== numCols - 1 ? computedSpacingStyle.style.paddingHorizontal / 2 : 0,
          paddingTop: rowIndex !== 0 ? computedSpacingStyle.style.paddingVertical / 2 : 0,
          paddingBottom: computedSpacingStyle.style.paddingVertical / 2
        }
      }, child));
    });
    return rows.map((row, index) => /*#__PURE__*/React.createElement(Box, {
      key: index,
      flexDirection: "row"
    }, row));
  };
  return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
    ref: ref
  }), renderRows());
}));
Grid.displayName = "Grid";
export default Grid;
//# sourceMappingURL=grid.js.map