smart-react-components/grid/Container.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

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

var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index$1 = require('../index-56ba89df.js');
var Div = require('../element/Div.js');

const BREAKPOINTS = ["small", "medium", "large", "xlarge"];
var Container = styled__default(Div).attrs(({ theme, px, mx = "auto" }) => ({
    px: typeof px === "undefined" ? theme.src.grid.columnGap : px,
    mx
})) `
    max-width: 100%;
    box-sizing: border-box;
    
    ${({ theme }) => BREAKPOINTS.map(i => index$1.CSSHelper.addMedia(theme.src, i, `max-width:${theme.src.grid.containerWidth[i]}px;`)).join(" ")}
`;

module.exports = Container;