import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default from 'react';
import PropTypes from 'prop-types';

var _excluded = ["children", "as", "autoFlow", "autoColumns", "autoRows", "areas", "columns", "rows", "gap", "rowGap", "columnGap", "justifyItems", "justifyContent", "alignItems", "alignContent"];

var filterEmpty = function filterEmpty(obj) {
  var result = {};

  for (var key in obj) {
    if (obj[key] == null) continue;
    result[key] = obj[key];
  }

  return result;
};

function Grid(_ref) {
  var children = _ref.children,
      _ref$as = _ref.as,
      Component = _ref$as === void 0 ? "div" : _ref$as,
      autoFlow = _ref.autoFlow,
      autoColumns = _ref.autoColumns,
      autoRows = _ref.autoRows,
      areas = _ref.areas,
      columns = _ref.columns,
      rows = _ref.rows,
      gap = _ref.gap,
      rowGap = _ref.rowGap,
      columnGap = _ref.columnGap,
      justifyItems = _ref.justifyItems,
      justifyContent = _ref.justifyContent,
      alignItems = _ref.alignItems,
      alignContent = _ref.alignContent,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React__default.createElement(Component, _extends({
    style: filterEmpty({
      gridAutoFlow: autoFlow,
      gridAutoColumns: autoColumns,
      gridAutoRows: autoRows,
      grisTemplateAreas: areas,
      gridTemplateRows: rows,
      gridTemplateColumns: columns,
      gap: gap,
      rowGap: rowGap,
      columnGap: columnGap,
      justifyContent: justifyContent,
      justifyItems: justifyItems,
      alignContent: alignContent,
      alignItems: alignItems,
      display: "grid"
    })
  }, props), children);
}

Grid.propTypes = {
  children: PropTypes.node.isRequired,
  as: PropTypes.string,
  autoFlow: PropTypes.string,
  autoColumns: PropTypes.string,
  autoRows: PropTypes.string,
  areas: PropTypes.string,
  columns: PropTypes.string,
  rows: PropTypes.string,
  gap: PropTypes.string,
  rowGap: PropTypes.string,
  columnGap: PropTypes.string,
  justifyItems: PropTypes.string,
  justifyContent: PropTypes.string,
  alignItems: PropTypes.string,
  alignContent: PropTypes.string
};

export { Grid as default };
