@pantheon-systems/design-toolkit-react/dist/Containers/Container.js

Pantheon's React Design Toolkit

import PropTypes from 'prop-types';
import { jsx } from 'react/jsx-runtime';

var containerTypes = {
  header: {
    css: 'flex flex-row items-start justify-between heading-content-margin'
  },
  'max-3XL': {
    css: 'max-w-3xl px-4 md:px-8'
  },
  widest: {
    css: 'max-w-8xl px-4 md:px-8'
  }
};

/* Customize `max-w-8xl` as 95rem in tailwind.config.js. 
The largest in Tailwind defaults is `max-w-7xl` as 80rem. */
var Container = function Container(_ref) {
  var type = _ref.type,
    isCentered = _ref.isCentered,
    children = _ref.children;
  var contentPosition = isCentered ? 'mx-auto' : '';
  var containerClass = containerTypes[type].css;
  containerClass += " ".concat(contentPosition);
  return /*#__PURE__*/jsx("div", {
    className: containerClass,
    children: children
  });
};
Container.defaultProps = {
  isCentered: false,
  type: 'widest'
};
Container.propTypes = {
  children: PropTypes.node.isRequired,
  isCentered: PropTypes.bool,
  type: PropTypes.oneOf(['header', 'max-3XL', 'widest'])
};
var Container$1 = Container;

export { Container$1 as default };
//# sourceMappingURL=Container.js.map