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

Pantheon's React Design Toolkit

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

var ContainerFlex = function ContainerFlex(_ref) {
  var centerText = _ref.centerText,
    children = _ref.children,
    className = _ref.className,
    itemsAlignment = _ref.itemsAlignment,
    itemsDirection = _ref.itemsDirection,
    itemsJustification = _ref.itemsJustification;
  var cssFlexDirection = {
    column: 'col',
    'column-reverse': 'col-reverse'
  };
  var alignItems = itemsAlignment ? "items-".concat(itemsAlignment) : '';
  var flexDirection = itemsDirection ? "flex-".concat(cssFlexDirection[itemsDirection] || itemsDirection) : '';
  var justifyContent = itemsJustification ? "justify-".concat(itemsJustification) : '';
  var cssTextCenter = centerText ? 'text-align-center' : '';
  return /*#__PURE__*/jsx("div", {
    className: "".concat(className, " flex flex-wrap ").concat(alignItems, " ").concat(flexDirection, " ").concat(justifyContent, " ").concat(cssTextCenter).trim(),
    children: children
  });
};
ContainerFlex.defaultProps = {
  centerText: false,
  className: '',
  itemsAlignment: 'start',
  itemsDirection: 'row',
  itemsJustification: 'start'
};
ContainerFlex.propTypes = {
  centerText: PropTypes.bool,
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  itemsAlignment: PropTypes.oneOf(['baseline', 'center', 'end', 'start', 'stretch']),
  itemsDirection: PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
  itemsJustification: PropTypes.oneOf(['around', 'between', 'center', 'end', 'evenly', 'start'])
};
var ContainerFlex$1 = ContainerFlex;

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