import React from 'react';
import styled, { css } from 'styled-components';
var getBreakpointStyles = function getBreakpointStyles(size) {
  return css(["", "{max-width:", "px;padding:0 ", "px;}"], function (p) {
    return p.theme.media.greaterThan(p.theme.breakpoints[size]);
  }, function (p) {
    return p.theme.breakpoints[size].size;
  }, function (p) {
    return p.theme.spacing.unit(p.theme.breakpoints[size].offset);
  });
};
var Outer = styled.div.withConfig({
  displayName: "PageWrapper__Outer",
  componentId: "sc-1ur2ylx-0"
})(["", ""], function (p) {
  return p.background ? "background-color: ".concat(p.background(p.theme)) : '';
});
var Inner = styled.div.withConfig({
  displayName: "PageWrapper__Inner",
  componentId: "sc-1ur2ylx-1"
})(["box-sizing:border-box;margin:0 auto;", ";", ";", ";", ";", " @media print{max-width:none;}"], getBreakpointStyles('sm'), getBreakpointStyles('md'), getBreakpointStyles('lg'), getBreakpointStyles('xl'), function (_ref) {
  var theme = _ref.theme;
  return theme.isFeatureEnabled('shadows') && "\n      ".concat(theme.media.lessThan(theme.breakpoints.sm), " {\n        margin: 0px ").concat(theme.spacing.unit(4), "px;\n      }\n  ");
});
var components = {
  Inner: Inner
};
export var PageWrapper = function PageWrapper(_ref2) {
  var children = _ref2.children,
    background = _ref2.background,
    className = _ref2.className;
  return React.createElement(Outer, {
    background: background,
    className: className
  }, React.createElement(Inner, null, children));
};
PageWrapper.components = components;
PageWrapper.displayName = 'PageWrapper';