jobiqo-cl/lib/src/components/02-atoms/06-layout/04-grid/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$9 = require('../../../../../node_modules/@styled-system/space/dist/index.esm.js');
var index_esm$1 = require('../../../../../node_modules/styled-system/dist/index.esm.js');
var columns = require('./props/columns.js');

/**
 * @file index.tsx.
 *
 * @fileoverview Component that maps directly to CSS grid properties using styled-system. Based on grid-layout for
 * styled-system https://styled-system.com/api/#grid-layout
 */
const StyledGrid = styled__default.div `
  display: grid;
  ${index_esm$1.gridGap};
  ${index_esm$1.gridAutoFlow};
  ${index_esm$1.gridTemplateColumns};
  ${index_esm$1.gridTemplateRows};
  ${index_esm$1.gridTemplateAreas};
  ${index_esm$1.gridAutoColumns};
  ${index_esm$1.gridAutoRows};
  ${index_esm$1.alignItems};
  ${index_esm$1.justifyContent};
  ${index_esm$1.justifyItems};
  ${index_esm$1.width};
  ${index_esm$1.height};
  ${index_esm$9.space};
  ${index_esm$1.textAlign};
  ${columns.columnsProp};
`;
/**
 * A Grid allows for displaying information in columns and rows next to each other.
 * All properties can accept an array for responsive values. Inside Grids there should be "Cell" components which also have
 * specific properties for mapping to CSS Grid properties.
 */
const Grid = (_a) => {
    var { children, gridGap = 6 } = _a, props = tslib_es6.__rest(_a, ["children", "gridGap"]);
    return (React__default.createElement(StyledGrid, Object.assign({ gridGap: gridGap }, props), children));
};

exports.Grid = Grid;
exports.default = Grid;