@cloudflare/component-box 2.3.2-beta → 2.3.6

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.6](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.3.2...@cloudflare/component-box@2.3.6) (2021-10-28)
+
+
+### Bug Fixes
+
+* **component-box:** UI-4651: bump package version ([97d767b](http://stash.cfops.it:7999/fe/stratus/commits/97d767b))
+* **stratus:** UI-000: Ran yarn run v1.18.0 ([54f1c7e](http://stash.cfops.it:7999/fe/stratus/commits/54f1c7e))
+
+
+
+
+
 ## [2.3.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.3.1...@cloudflare/component-box@2.3.2) (2021-10-01)
 
 **Note:** Version bump only for package @cloudflare/component-box

package/es/Box.js

@@ -0,0 +1,129 @@
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import PropTypes from 'prop-types';
+import { createStyledComponent } from '@cloudflare/style-container';
+import propertiesSpec from './propertiesSpec';
+const propertyNames = Object.keys(propertiesSpec); // Generates styles given the provided props.
+//
+// This is driven by the metadata provided in propertiesSpec
+// and produces a data structure like this:
+//
+// {
+//   margin: props.margin || props.theme['margin']
+//   width: props.width || props.theme['width']
+//   ...
+// }
+//
+// See propertySpec.js for more detail
+//
+
+const styles = props => {
+  let styles = {};
+  const propKeys = Object.keys(props);
+  propKeys.forEach(name => {
+    // Lookup the spec for the property
+    const spec = propertiesSpec[name]; // Ignore non-style props
+
+    if (spec === undefined) {
+      return;
+    } // Get the style value from props
+
+
+    let value = props[name]; // pre-process the value with all pre-processors
+
+    if (spec.preprocessWith) {
+      spec.preprocessWith.forEach(fn => {
+        value = fn(value);
+      });
+    }
+
+    styles[name] = value;
+  }); // Only do checks in dev mode
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkForViolations(styles);
+  }
+
+  return styles;
+};
+
+const Box = createStyledComponent(styles, 'div');
+
+const checkForViolations = props => {
+  // Check for conflicts given the spec's conflictsWith property
+  // See propertySpec.js for more detail
+  propertyNames.forEach(propName => {
+    const spec = propertiesSpec[propName];
+    if (!props[propName] || !spec.conflictsWith) return;
+    spec.conflictsWith.forEach(otherPropName => {
+      if (props[propName] && props[otherPropName]) {
+        const msg = `${propName} cannot be set in conjunction with ${otherPropName}`;
+        console.error(msg);
+      }
+    });
+  }); // TODO: To pull this check off, we'll need re-evaluate our baseline.
+  // current is 22.5px
+  // checkLineHeightViolations(props);
+};
+/*
+const checkLineHeightViolations = props => {
+  const rem2px = rem => {
+    return parseFloat(rem) * props.fontSize;
+  };
+
+  const baseline = props.lineHeight * props.fontSize;
+
+  // Calculate total margin, padding, and border
+  let totalMargin = 0;
+  if (props.margin) {
+    totalMargin = rem2px(props.margin);
+  } else {
+    totalMargin += rem2px(props.marginTop) || 0;
+    totalMargin += rem2px(props.marginBottom) || 0;
+  }
+
+  let totalPadding = 0;
+  if (props.padding) {
+    totalPadding = rem2px(props.padding);
+  } else {
+    totalPadding += rem2px(props.paddingTop) || 0;
+    totalPadding += rem2px(props.paddingBottom) || 0;
+  }
+
+  let totalBorder = 0;
+  if (props.borderHeight) {
+    totalBorder = rem2px(props.borderHeight);
+  } else {
+    totalBorder += rem2px(props.borderTopHeight) || 0;
+    totalBorder += rem2px(props.borderBottomHeight) || 0;
+  }
+
+  // Warn the user if the total spacing isn't a multiple of the baseline
+  const spacing = totalMargin + totalBorder + totalPadding;
+  if (spacing && baseline % spacing !== 0) {
+    console.warn(
+      `Spacing from padding, border, and margin surrounding element should be a multiple of baseline ${baseline}.`
+    );
+  }
+};
+*/
+// Extract proptypes from the propertiesSpec
+
+
+const extractPropTypes = () => {
+  let propTypes = {}; // Loop through all property specs and pluck the prop type
+
+  propertyNames.forEach(name => {
+    propTypes[name] = propertiesSpec[name].propType;
+  });
+  return propTypes;
+};
+
+Box.propTypes = _objectSpread({
+  className: PropTypes.string,
+  children: PropTypes.node
+}, extractPropTypes());
+Box.displayName = 'Box';
+export default Box;

package/es/BoxTheme.js

@@ -0,0 +1 @@
+export default (({}) => ({}));

package/es/index.js

@@ -0,0 +1,5 @@
+import { applyTheme } from '@cloudflare/style-container';
+import BoxUnstyled from './Box';
+import BoxTheme from './BoxTheme';
+const Box = applyTheme(BoxUnstyled, BoxTheme);
+export { BoxUnstyled, Box, BoxTheme };

package/es/propertiesSpec.js

@@ -0,0 +1,347 @@
+import PropTypes from 'prop-types';
+import { variables } from '@cloudflare/style-const'; // eslint-disable-line behance/no-deprecated
+
+import { rem } from 'polished';
+var numberOrString = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
+const pxToRem = value => {
+  if (typeof value === 'number' || /\d+px/.test(value)) {
+    return rem(value, variables.fontSize);
+  }
+
+  return value;
+}; // The export of this module is a datastructuer containing metadata
+// which powers:
+//  - the creation of fela style rules
+//  - the creation of the theme in BoxTheme
+//  - a number of safety checks
+//
+// At a bare minimum, the propType must be specified to support a
+// new style property
+//
+// In addition, several other properties can be specified in the spec.
+//
+// Conflicts with shows an error if the developer tries to use both props.
+//
+// For example, given the following spec:
+//
+//    foo: {
+//      propType: numberOrString,
+//      conflictsWith: [
+//        'bar',
+//      ]
+//    },
+//
+//  passing the foo and bar props to the component will cause a warning.
+//
+//  Providing 'preprocessWith' will cause all the provided callbacks
+//  to be invoked on the passed prop when building the components styles
+//
+//  For example, given the following spec:
+//    foo: {
+//      propType: number,
+//      preprocessWith: [ 'pxToRem' ]
+//   },
+//
+//  The value of the 'foo' prop will be transformed with pxToRem.
+//
+//  The default property is currently un-used. They're left in place
+//  in case we arrive upon a performant solution to using them (like
+//  generating the code for the Box component).
+//
+
+
+export default {
+  margin: {
+    propType: numberOrString,
+    conflictsWith: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']
+  },
+  marginTop: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginBottom: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginLeft: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginRight: {
+    propType: numberOrString,
+    default: 0
+  },
+  padding: {
+    propType: numberOrString,
+    conflictsWith: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
+  },
+  paddingTop: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingBottom: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingLeft: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingRight: {
+    propType: numberOrString,
+    default: 0
+  },
+  overflow: {
+    propType: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
+  },
+  overflowX: {
+    propType: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
+  },
+  border: {
+    propType: PropTypes.string,
+    conflictsWith: ['borderStyle', 'borderColor', 'borderWidth', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
+  },
+  borderLeft: {
+    propType: PropTypes.string,
+    conflictsWith: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth']
+  },
+  borderBottom: {
+    propType: PropTypes.string,
+    conflictsWith: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth']
+  },
+  borderColor: {
+    propType: PropTypes.string,
+    conflictsWith: ['borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor']
+  },
+  borderTopColor: {
+    propType: PropTypes.string
+  },
+  borderBottomColor: {
+    propType: PropTypes.string
+  },
+  borderLeftColor: {
+    propType: PropTypes.string
+  },
+  borderRightColor: {
+    propType: PropTypes.string
+  },
+  borderStyle: {
+    propType: PropTypes.string,
+    conflictsWith: ['borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle']
+  },
+  borderTopStyle: {
+    propType: PropTypes.string
+  },
+  borderBottomStyle: {
+    propType: PropTypes.string
+  },
+  borderLeftStyle: {
+    propType: PropTypes.string
+  },
+  borderRightStyle: {
+    propType: PropTypes.string
+  },
+  borderWidth: {
+    propType: PropTypes.number,
+    conflictsWith: ['borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
+  },
+  borderTopWidth: {
+    propType: PropTypes.number
+  },
+  borderBottomWidth: {
+    propType: PropTypes.number
+  },
+  borderLeftWidth: {
+    propType: PropTypes.number
+  },
+  borderRightWidth: {
+    propType: PropTypes.number
+  },
+  lineHeight: {
+    propType: PropTypes.number,
+    default: variables.lineHeight
+  },
+  fontSize: {
+    propType: numberOrString,
+    default: variables.fontSize
+  },
+  fontWeight: {
+    propType: numberOrString,
+    default: variables.fontWeight
+  },
+  fontFamily: {
+    propType: PropTypes.string,
+    default: variables.fontFamily
+  },
+  color: {
+    propType: PropTypes.string,
+    default: variables.colors.gray[1]
+  },
+  backgroundColor: {
+    propType: PropTypes.string,
+    default: 'transparent'
+  },
+  backgroundImage: {
+    propType: PropTypes.string
+  },
+  backgroundPosition: {
+    propType: PropTypes.string
+  },
+  backgroundPositionX: {
+    propType: PropTypes.string
+  },
+  backgroundPositionY: {
+    propType: PropTypes.string
+  },
+  display: {
+    propType: PropTypes.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']),
+    default: 'block'
+  },
+  position: {
+    propType: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed']),
+    default: 'static'
+  },
+  float: {
+    propType: PropTypes.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end'])
+  },
+  top: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  bottom: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  left: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  right: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  width: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  height: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  minWidth: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  minHeight: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  maxWidth: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  maxHeight: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  verticalAlign: {
+    propType: numberOrString,
+    default: 'baseline'
+  },
+  transform: {
+    propType: PropTypes.string
+  },
+  flexDirection: {
+    propType: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+    default: 'row'
+  },
+  flexWrap: {
+    propType: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+    default: 'nowrap'
+  },
+  justifyContent: {
+    propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),
+    default: 'flex-start'
+  },
+  alignItems: {
+    propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+    default: 'stretch'
+  },
+  alignContent: {
+    propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']),
+    default: 'stretch'
+  },
+  order: {
+    propType: PropTypes.number,
+    default: 0
+  },
+  flexGrow: {
+    propType: PropTypes.number,
+    default: 0
+  },
+  flexShrink: {
+    propType: PropTypes.number,
+    default: 1
+  },
+  flexBasis: {
+    propType: numberOrString,
+    default: 'auto'
+  },
+  flex: {
+    propType: PropTypes.string
+  },
+  alignSelf: {
+    propType: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+    default: 'auto'
+  },
+  zIndex: {
+    propType: numberOrString,
+    default: 'auto'
+  },
+  textAlign: {
+    propType: PropTypes.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']),
+    default: 'start'
+  },
+  textDecoration: {
+    propType: PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']),
+    default: 'initial'
+  },
+  textTransform: {
+    propType: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']),
+    default: 'none'
+  },
+  opacity: {
+    propType: numberOrString,
+    default: 1.0
+  },
+  userSelect: {
+    propType: PropTypes.oneOf(['none', 'auto', 'text', 'container', 'all']),
+    default: 'auto'
+  },
+  wordWrap: {
+    propType: PropTypes.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']),
+    default: 'normal'
+  },
+  clear: {
+    propType: PropTypes.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']),
+    default: 'none'
+  }
+};
+/*
+ * Need support for:
+   content
+   outline
+   border-radius
+   box-shadow
+*/

package/lib/Box.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styleContainer = require("@cloudflare/style-container");
+
+var _propertiesSpec = _interopRequireDefault(require("./propertiesSpec"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var propertyNames = Object.keys(_propertiesSpec.default); // Generates styles given the provided props.
+//
+// This is driven by the metadata provided in propertiesSpec
+// and produces a data structure like this:
+//
+// {
+//   margin: props.margin || props.theme['margin']
+//   width: props.width || props.theme['width']
+//   ...
+// }
+//
+// See propertySpec.js for more detail
+//
+
+var styles = function styles(props) {
+  var styles = {};
+  var propKeys = Object.keys(props);
+  propKeys.forEach(function (name) {
+    // Lookup the spec for the property
+    var spec = _propertiesSpec.default[name]; // Ignore non-style props
+
+    if (spec === undefined) {
+      return;
+    } // Get the style value from props
+
+
+    var value = props[name]; // pre-process the value with all pre-processors
+
+    if (spec.preprocessWith) {
+      spec.preprocessWith.forEach(function (fn) {
+        value = fn(value);
+      });
+    }
+
+    styles[name] = value;
+  }); // Only do checks in dev mode
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkForViolations(styles);
+  }
+
+  return styles;
+};
+
+var Box = (0, _styleContainer.createStyledComponent)(styles, 'div');
+
+var checkForViolations = function checkForViolations(props) {
+  // Check for conflicts given the spec's conflictsWith property
+  // See propertySpec.js for more detail
+  propertyNames.forEach(function (propName) {
+    var spec = _propertiesSpec.default[propName];
+    if (!props[propName] || !spec.conflictsWith) return;
+    spec.conflictsWith.forEach(function (otherPropName) {
+      if (props[propName] && props[otherPropName]) {
+        var msg = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName);
+        console.error(msg);
+      }
+    });
+  }); // TODO: To pull this check off, we'll need re-evaluate our baseline.
+  // current is 22.5px
+  // checkLineHeightViolations(props);
+};
+/*
+const checkLineHeightViolations = props => {
+  const rem2px = rem => {
+    return parseFloat(rem) * props.fontSize;
+  };
+
+  const baseline = props.lineHeight * props.fontSize;
+
+  // Calculate total margin, padding, and border
+  let totalMargin = 0;
+  if (props.margin) {
+    totalMargin = rem2px(props.margin);
+  } else {
+    totalMargin += rem2px(props.marginTop) || 0;
+    totalMargin += rem2px(props.marginBottom) || 0;
+  }
+
+  let totalPadding = 0;
+  if (props.padding) {
+    totalPadding = rem2px(props.padding);
+  } else {
+    totalPadding += rem2px(props.paddingTop) || 0;
+    totalPadding += rem2px(props.paddingBottom) || 0;
+  }
+
+  let totalBorder = 0;
+  if (props.borderHeight) {
+    totalBorder = rem2px(props.borderHeight);
+  } else {
+    totalBorder += rem2px(props.borderTopHeight) || 0;
+    totalBorder += rem2px(props.borderBottomHeight) || 0;
+  }
+
+  // Warn the user if the total spacing isn't a multiple of the baseline
+  const spacing = totalMargin + totalBorder + totalPadding;
+  if (spacing && baseline % spacing !== 0) {
+    console.warn(
+      `Spacing from padding, border, and margin surrounding element should be a multiple of baseline ${baseline}.`
+    );
+  }
+};
+*/
+// Extract proptypes from the propertiesSpec
+
+
+var extractPropTypes = function extractPropTypes() {
+  var propTypes = {}; // Loop through all property specs and pluck the prop type
+
+  propertyNames.forEach(function (name) {
+    propTypes[name] = _propertiesSpec.default[name].propType;
+  });
+  return propTypes;
+};
+
+Box.propTypes = _objectSpread({
+  className: _propTypes.default.string,
+  children: _propTypes.default.node
+}, extractPropTypes());
+Box.displayName = 'Box';
+var _default = Box;
+exports.default = _default;

package/lib/BoxTheme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
+var _default = function _default(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  return {};
+};
+
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BoxUnstyled", {
+  enumerable: true,
+  get: function get() {
+    return _Box.default;
+  }
+});
+Object.defineProperty(exports, "BoxTheme", {
+  enumerable: true,
+  get: function get() {
+    return _BoxTheme.default;
+  }
+});
+exports.Box = void 0;
+
+var _styleContainer = require("@cloudflare/style-container");
+
+var _Box = _interopRequireDefault(require("./Box"));
+
+var _BoxTheme = _interopRequireDefault(require("./BoxTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Box = (0, _styleContainer.applyTheme)(_Box.default, _BoxTheme.default);
+exports.Box = Box;

package/lib/propertiesSpec.js

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styleConst = require("@cloudflare/style-const");
+
+var _polished = require("polished");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-line behance/no-deprecated
+var numberOrString = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]);
+
+var pxToRem = function pxToRem(value) {
+  if (typeof value === 'number' || /\d+px/.test(value)) {
+    return (0, _polished.rem)(value, _styleConst.variables.fontSize);
+  }
+
+  return value;
+}; // The export of this module is a datastructuer containing metadata
+// which powers:
+//  - the creation of fela style rules
+//  - the creation of the theme in BoxTheme
+//  - a number of safety checks
+//
+// At a bare minimum, the propType must be specified to support a
+// new style property
+//
+// In addition, several other properties can be specified in the spec.
+//
+// Conflicts with shows an error if the developer tries to use both props.
+//
+// For example, given the following spec:
+//
+//    foo: {
+//      propType: numberOrString,
+//      conflictsWith: [
+//        'bar',
+//      ]
+//    },
+//
+//  passing the foo and bar props to the component will cause a warning.
+//
+//  Providing 'preprocessWith' will cause all the provided callbacks
+//  to be invoked on the passed prop when building the components styles
+//
+//  For example, given the following spec:
+//    foo: {
+//      propType: number,
+//      preprocessWith: [ 'pxToRem' ]
+//   },
+//
+//  The value of the 'foo' prop will be transformed with pxToRem.
+//
+//  The default property is currently un-used. They're left in place
+//  in case we arrive upon a performant solution to using them (like
+//  generating the code for the Box component).
+//
+
+
+var _default = {
+  margin: {
+    propType: numberOrString,
+    conflictsWith: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']
+  },
+  marginTop: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginBottom: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginLeft: {
+    propType: numberOrString,
+    default: 0
+  },
+  marginRight: {
+    propType: numberOrString,
+    default: 0
+  },
+  padding: {
+    propType: numberOrString,
+    conflictsWith: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
+  },
+  paddingTop: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingBottom: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingLeft: {
+    propType: numberOrString,
+    default: 0
+  },
+  paddingRight: {
+    propType: numberOrString,
+    default: 0
+  },
+  overflow: {
+    propType: _propTypes.default.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
+  },
+  overflowX: {
+    propType: _propTypes.default.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
+  },
+  border: {
+    propType: _propTypes.default.string,
+    conflictsWith: ['borderStyle', 'borderColor', 'borderWidth', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
+  },
+  borderLeft: {
+    propType: _propTypes.default.string,
+    conflictsWith: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth']
+  },
+  borderBottom: {
+    propType: _propTypes.default.string,
+    conflictsWith: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth']
+  },
+  borderColor: {
+    propType: _propTypes.default.string,
+    conflictsWith: ['borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor']
+  },
+  borderTopColor: {
+    propType: _propTypes.default.string
+  },
+  borderBottomColor: {
+    propType: _propTypes.default.string
+  },
+  borderLeftColor: {
+    propType: _propTypes.default.string
+  },
+  borderRightColor: {
+    propType: _propTypes.default.string
+  },
+  borderStyle: {
+    propType: _propTypes.default.string,
+    conflictsWith: ['borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle']
+  },
+  borderTopStyle: {
+    propType: _propTypes.default.string
+  },
+  borderBottomStyle: {
+    propType: _propTypes.default.string
+  },
+  borderLeftStyle: {
+    propType: _propTypes.default.string
+  },
+  borderRightStyle: {
+    propType: _propTypes.default.string
+  },
+  borderWidth: {
+    propType: _propTypes.default.number,
+    conflictsWith: ['borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
+  },
+  borderTopWidth: {
+    propType: _propTypes.default.number
+  },
+  borderBottomWidth: {
+    propType: _propTypes.default.number
+  },
+  borderLeftWidth: {
+    propType: _propTypes.default.number
+  },
+  borderRightWidth: {
+    propType: _propTypes.default.number
+  },
+  lineHeight: {
+    propType: _propTypes.default.number,
+    default: _styleConst.variables.lineHeight
+  },
+  fontSize: {
+    propType: numberOrString,
+    default: _styleConst.variables.fontSize
+  },
+  fontWeight: {
+    propType: numberOrString,
+    default: _styleConst.variables.fontWeight
+  },
+  fontFamily: {
+    propType: _propTypes.default.string,
+    default: _styleConst.variables.fontFamily
+  },
+  color: {
+    propType: _propTypes.default.string,
+    default: _styleConst.variables.colors.gray[1]
+  },
+  backgroundColor: {
+    propType: _propTypes.default.string,
+    default: 'transparent'
+  },
+  backgroundImage: {
+    propType: _propTypes.default.string
+  },
+  backgroundPosition: {
+    propType: _propTypes.default.string
+  },
+  backgroundPositionX: {
+    propType: _propTypes.default.string
+  },
+  backgroundPositionY: {
+    propType: _propTypes.default.string
+  },
+  display: {
+    propType: _propTypes.default.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']),
+    default: 'block'
+  },
+  position: {
+    propType: _propTypes.default.oneOf(['static', 'relative', 'absolute', 'fixed']),
+    default: 'static'
+  },
+  float: {
+    propType: _propTypes.default.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end'])
+  },
+  top: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  bottom: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  left: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  right: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  width: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  height: {
+    propType: numberOrString,
+    default: 'auto',
+    preprocessWith: [pxToRem]
+  },
+  minWidth: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  minHeight: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  maxWidth: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  maxHeight: {
+    propType: numberOrString,
+    default: 0,
+    preprocessWith: [pxToRem]
+  },
+  verticalAlign: {
+    propType: numberOrString,
+    default: 'baseline'
+  },
+  transform: {
+    propType: _propTypes.default.string
+  },
+  flexDirection: {
+    propType: _propTypes.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+    default: 'row'
+  },
+  flexWrap: {
+    propType: _propTypes.default.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+    default: 'nowrap'
+  },
+  justifyContent: {
+    propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),
+    default: 'flex-start'
+  },
+  alignItems: {
+    propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+    default: 'stretch'
+  },
+  alignContent: {
+    propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']),
+    default: 'stretch'
+  },
+  order: {
+    propType: _propTypes.default.number,
+    default: 0
+  },
+  flexGrow: {
+    propType: _propTypes.default.number,
+    default: 0
+  },
+  flexShrink: {
+    propType: _propTypes.default.number,
+    default: 1
+  },
+  flexBasis: {
+    propType: numberOrString,
+    default: 'auto'
+  },
+  flex: {
+    propType: _propTypes.default.string
+  },
+  alignSelf: {
+    propType: _propTypes.default.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+    default: 'auto'
+  },
+  zIndex: {
+    propType: numberOrString,
+    default: 'auto'
+  },
+  textAlign: {
+    propType: _propTypes.default.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']),
+    default: 'start'
+  },
+  textDecoration: {
+    propType: _propTypes.default.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']),
+    default: 'initial'
+  },
+  textTransform: {
+    propType: _propTypes.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']),
+    default: 'none'
+  },
+  opacity: {
+    propType: numberOrString,
+    default: 1.0
+  },
+  userSelect: {
+    propType: _propTypes.default.oneOf(['none', 'auto', 'text', 'container', 'all']),
+    default: 'auto'
+  },
+  wordWrap: {
+    propType: _propTypes.default.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']),
+    default: 'normal'
+  },
+  clear: {
+    propType: _propTypes.default.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']),
+    default: 'none'
+  }
+};
+/*
+ * Need support for:
+   content
+   outline
+   border-radius
+   box-shadow
+*/
+
+exports.default = _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-box",
   "description": "Cloudflare Box Component\n\nThis is styling component similar to cf-component-flex which allows for arbitrary styling.\n\n This component should only be used when the built in style doesn't quite fit the bill and when it can't be done with fela. Ideally, cfui components should have the right styling built in for most cases. In the few edge cases that pop up in real world feature development, this is an alternative to wrapping your component in a `<div>` or `<span>` and styling it with css to accomodate one-offs. \n\n Also, note that using Box effectively performs a component level CSS reset, as all props not provided will be pulled from the default theme. These defaults, outlined in propertiesSpec, either match the browser defaults, or are taken from our global styles as defined by cf-style-const.",
-  "version": "2.3.2-beta",
+  "version": "2.3.6",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Culveyhouse <jculveyhouse@cloudflare.com>",
@@ -11,9 +11,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/style-const": "^5.0.8",
-    "@cloudflare/style-container": "^7.5.2",
-    "@cloudflare/types": "^6.8.24",
+    "@cloudflare/style-const": "^5.0.11",
+    "@cloudflare/style-container": "^7.5.5",
+    "@cloudflare/types": "^6.11.0",
     "fela": "^11.6.1",
     "polished": "^1.9.3",
     "prop-types": "^15.6.0"
@@ -31,5 +31,6 @@
     "test": "stratus test",
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
-  }
+  },
+  "gitHead": "a1a7ca299c6676e5222e50aee57bc5beedb44882"
 }