@blend-ui/core/dist/esm/Box.js

Blend core cmponents

import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { compose, layout, color, space, background, border, grid, position, shadow, typography, flexbox } from 'styled-system';
var systemProps = compose(layout, color, space, background, border, grid, position, shadow, typography, flexbox
/*colorStyles,*/
);

var themeColorStyles = function themeColorStyles(props) {
  //console.log("custom ", props);
  return props.colorStyle ? props.theme.colorStyles[props.colorStyle] : null;
};
/*
.withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !["color", "m", "bg", "size", "width", "height", "flexDirection", "mb"].includes(prop),
})
*/


var BoxElement = styled("div").withConfig({
  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
    //console.log("BOX PROP ", prop);
    var propsList = Object.keys(systemProps);
    propsList.push("colorStyle");
    return !propsList.includes(prop);
  }
}).withConfig({
  displayName: "Box__BoxElement",
  componentId: "sc-12sd5m8-0"
})(["", " ", ""], systemProps, themeColorStyles); // https://reactjs.org/docs/forwarding-refs.html

var Box = /*#__PURE__*/forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(BoxElement, _extends({}, props, {
    ref: ref
  }));
});
Box.displayName = "Box";
Box.propTypes = {
  colorStyle: PropTypes.string
};
Box.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Box",
  "props": {
    "colorStyle": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    }
  }
};
export { Box as default };