pouncejs/dist/esm/components/Grid/Grid.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';

/**
 * Extends <a href="/#/Box">Box</a>
 *
 * Grid layout component. You should use this anytime you want to create a container for columns
 * within the design
 */
export var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
  var gap = props.gap,
      rowGap = props.rowGap,
      columnGap = props.columnGap,
      autoFlow = props.autoFlow,
      autoRows = props.autoRows,
      autoColumns = props.autoColumns,
      templateRows = props.templateRows,
      templateColumns = props.templateColumns,
      templateAreas = props.templateAreas,
      area = props.area,
      column = props.column,
      row = props.row,
      inline = props.inline,
      rest = _objectWithoutPropertiesLoose(props, ["gap", "rowGap", "columnGap", "autoFlow", "autoRows", "autoColumns", "templateRows", "templateColumns", "templateAreas", "area", "column", "row", "inline"]);

  return /*#__PURE__*/React.createElement(Box, _extends({
    display: inline ? 'inline-grid' : 'grid',
    ref: ref,
    gridArea: area,
    gridTemplateAreas: templateAreas,
    gridGap: gap,
    gridRowGap: rowGap,
    gridColumnGap: columnGap,
    gridAutoColumns: autoColumns,
    gridColumn: column,
    gridRow: row,
    gridAutoFlow: autoFlow,
    gridAutoRows: autoRows,
    gridTemplateRows: templateRows,
    gridTemplateColumns: templateColumns
  }, rest));
});
export default Grid;