@mujo/box/dist/box.js

A React utility to add a style guide to primative components

import React from 'react';
import { propsToStyles, cssToStyle } from './lib/helpers';
import { omitKeys } from './lib/omit-keys';
import { flexStyles } from './styles/flex';
export function withBox(options) {
  var Box = React.forwardRef(function (props, ref) {
    var getStyles = propsToStyles(options.styleGuide);
    var css = props.css,
        Component = props.Component;
    var customStyles = cssToStyle(css);
    var results = getStyles(props);
    var args = [props, 'Component', 'css'].concat(results.used);
    var otherProps = omitKeys.apply(null, args);

    if (customStyles) {
      results.styles.push(customStyles);
    }

    var BoxComponent = Component || options.defaultComponent;
    return /*#__PURE__*/React.createElement(BoxComponent, Object.assign({
      ref: ref,
      css: results.styles
    }, otherProps));
  });
  Box.displayName = 'Box';
  return Box;
}
export var Box = withBox({
  defaultComponent: 'div',
  styleGuide: flexStyles
});