"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Box = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledSystem = require("styled-system");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const variants = (0, _styledSystem.variant)({
  variants: {
    grey: {
      flexGrow: 1,
      bg: 'greyPale',
      p: 'xl'
    },
    white: {
      p: 'xxl',
      bg: 'white'
    }
  }
});
/**
 * Prop Types of an Button component.
 * Apart from those defined below it extends all {@link SpaceProps}, {@link ColorProps}
 * {@link SizeProps}, {@link LayoutProps}, {@link FlexboxProps}, {@link PositionProps}
 * and {@link BorderProps}
 *
 * @memberof Box
 * @alias BoxProps
 * @property {string} [...] Other props from {@link SpaceProps}, {@link ColorProps}
 *                          {@link SizeProps}, {@link LayoutProps}, {@link FlexboxProps},
 *                          {@link PositionProps} and {@link BorderProps}
 */

/**
 * Main component which allows you to define entire layout of the application
 *
 * @component
 * @subcategory Atoms
 * @example <caption>Simple White/Gray wrapper</caption>
 * return (
 * <Box variant="grey">
 *   <Box variant="white">
 *     <Text>This is the default wrapper in the application</Text>
 *   </Box>
 * </Box>
 * )
 * @example <caption>Positioning buttons</caption>
 * return (
 * <Box variant="grey">
 *   <Box variant="white" flex flexDirection="row">
 *     <Box flexGrow={1}>
 *       <Header.H3>Some header</Header.H3>
 *     </Box>
 *     <Box flexShrink={0}>
 *       <Button>Example Button On The Right</Button>
 *     </Box>
 *   </Box>
 * </Box>
 * )
 */
const Box = _styledComponents.default.section.withConfig({
  displayName: "box__Box",
  componentId: "sc-2cgj74-0"
})(["box-sizing:border-box;min-width:0;", " font-family:", ";line-height:", ";font-size:", ";font-weight:normal;", ";", ";", ";", ";", ";", ";", ";", ";"], ({
  flex
}) => flex ? 'display: flex;' : '', ({
  theme
}) => theme.font, ({
  theme
}) => theme.lineHeights.default, ({
  theme
}) => theme.fontSizes.default, _styledSystem.space, _styledSystem.color, _styledSystem.size, _styledSystem.layout, _styledSystem.flexbox, _styledSystem.border, _styledSystem.position, variants);

exports.Box = Box;
var _default = Box;
exports.default = _default;