import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["sx", "inline", "templateColumns", "gridTemplateColumns", "templateRows", "gridTemplateRows", "templateAreas", "gridTemplateAreas", "template", "gridTemplate", "justifyItems", "alignItems", "placeItems", "justifyContent", "placeContent", "autoColumns", "gridAutoColumns", "autoRows", "gridAutoRows", "autoFlow", "gridAutoFlow", "gap", "rowGap", "columnGap"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

/* eslint-disable react/forbid-prop-types */
import React from "react";
import PropTypes from "prop-types";
import Box from "../Box";
import Item from "./Item";
var CssGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var sx = props.sx,
      inline = props.inline,
      templateColumns = props.templateColumns,
      gridTemplateColumns = props.gridTemplateColumns,
      templateRows = props.templateRows,
      gridTemplateRows = props.gridTemplateRows,
      templateAreas = props.templateAreas,
      gridTemplateAreas = props.gridTemplateAreas,
      template = props.template,
      gridTemplate = props.gridTemplate,
      justifyItems = props.justifyItems,
      alignItems = props.alignItems,
      placeItems = props.placeItems,
      justifyContent = props.justifyContent,
      placeContent = props.placeContent,
      autoColumns = props.autoColumns,
      gridAutoColumns = props.gridAutoColumns,
      autoRows = props.autoRows,
      gridAutoRows = props.gridAutoRows,
      autoFlow = props.autoFlow,
      gridAutoFlow = props.gridAutoFlow,
      gap = props.gap,
      rowGap = props.rowGap,
      columnGap = props.columnGap,
      boxProps = _objectWithoutProperties(props, _excluded);

  var styles = _objectSpread({
    display: inline ? "inline-grid" : "grid",
    gridTemplateRows: templateRows !== null && templateRows !== void 0 ? templateRows : gridTemplateRows,
    gridTemplateColumns: templateColumns !== null && templateColumns !== void 0 ? templateColumns : gridTemplateColumns,
    gridTemplateAreas: templateAreas !== null && templateAreas !== void 0 ? templateAreas : gridTemplateAreas,
    gridTemplate: template !== null && template !== void 0 ? template : gridTemplate,
    gridAutoColumns: autoColumns !== null && autoColumns !== void 0 ? autoColumns : gridAutoColumns,
    gridAutoRows: autoRows !== null && autoRows !== void 0 ? autoRows : gridAutoRows,
    gridAutoFlow: autoFlow !== null && autoFlow !== void 0 ? autoFlow : gridAutoFlow,
    justifyItems: justifyItems,
    alignItems: alignItems,
    placeItems: placeItems,
    justifyContent: justifyContent,
    placeContent: placeContent,
    gap: gap,
    rowGap: rowGap,
    columnGap: columnGap
  }, sx);

  return /*#__PURE__*/React.createElement(Box, _extends({
    sx: styles,
    ref: ref
  }, boxProps));
});
CssGrid.propTypes = {
  templateColumns: PropTypes.any,
  gridTemplateColumns: PropTypes.any,
  templateRows: PropTypes.any,
  gridTemplateRows: PropTypes.any,
  templateAreas: PropTypes.any,
  gridTemplateAreas: PropTypes.any,
  template: PropTypes.any,
  gridTemplate: PropTypes.any,
  justifyItems: PropTypes.any,
  alignItems: PropTypes.any,
  placeItems: PropTypes.any,
  justifyContent: PropTypes.any,
  placeContent: PropTypes.any,
  autoColumns: PropTypes.any,
  gridAutoColumns: PropTypes.any,
  autoRows: PropTypes.any,
  gridAutoRows: PropTypes.any,
  autoFlow: PropTypes.any,
  gridAutoFlow: PropTypes.any,
  gap: PropTypes.any,
  rowGap: PropTypes.any,
  columnGap: PropTypes.any,
  sx: PropTypes.object,
  inline: PropTypes.bool,
  component: PropTypes.elementType
};

if (process.env.NODE_ENV !== "production") {
  CssGrid.displayName = "CssGrid";
}

CssGrid.Item = Item;
export default CssGrid;