@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta2 → 2.3.0-rcstyleguide-beta4

package/es/old_components/HiCell/CellSentinelScore.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.sentinelColorById = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+exports.styles = styles;
+var sentinelColorById = {
+  NOT_LAUNCHED: '#737373',
+  ACCEPTED: '#00AF01',
+  AUTHENTICATE: '#484A4B',
+  FORCE_AUTHENTICATE: '#20272B',
+  PENDING: '#3987AD',
+  CHALLENGED: '#FF8F01',
+  BLOCKED: '#D50000',
+  ALLOWED: '#00AF01',
+  DENIED: '#D50000'
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.sentinelColorById = sentinelColorById;
+
+var CellSentinelScore =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinelScore, _React$PureComponent);
+
+  function CellSentinelScore() {
+    (0, _classCallCheck2.default)(this, CellSentinelScore);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellSentinelScore).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellSentinelScore, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          result = _this$props.result,
+          value = _this$props.value;
+      return _react.default.createElement("div", {
+        className: classes.flexContent
+      }, _react.default.createElement(_HiColoredLabel.default, {
+        active: active,
+        classes: {
+          root: classes.label
+        },
+        color: sentinelColorById[result],
+        label: value > 0 ? "+".concat(value) : "".concat(value)
+      }));
+    }
+  }]);
+  return CellSentinelScore;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellSentinelScore, "defaultProps", {
+  active: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellSentinelScore'
+})(CellSentinelScore);
+
+exports.default = _default;

package/es/old_components/HiCell/CellText.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var styles = {
+  leftEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    direction: 'rtl'
+  },
+  rightEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre'
+  },
+  noEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    whiteSpace: 'pre'
+  }
+};
+exports.styles = styles;
+
+var CellText =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(CellText, _React$Component);
+
+  function CellText(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CellText);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellText).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cellText", null);
+    _this.buildEllipsis = _this.buildEllipsis.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+  /**
+   * TODO - Ellipsis (middle, after-first-word)
+   */
+
+
+  (0, _createClass2.default)(CellText, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.buildEllipsis();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.label !== this.props.label) this.buildEllipsis();
+    }
+  }, {
+    key: "buildEllipsis",
+    value: function buildEllipsis() {
+      /**
+       * Calcul l'espace disponible dans la cellule en plus du premier mot
+       * si il reste de l'espace, définit la largeur du span pour le reste du texte
+       */
+      if (this.props.ellipsis === 'after-first-word' || this.props.ellipsis === 'name') {
+        if (this.cellText !== null) {
+          var _this$cellText$getEle = this.cellText.getElementsByTagName('span'),
+              _this$cellText$getEle2 = (0, _slicedToArray2.default)(_this$cellText$getEle, 2),
+              startSpan = _this$cellText$getEle2[0],
+              endSpan = _this$cellText$getEle2[1];
+
+          if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+            var availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - 2;
+
+            if (availableEndSpace > 0) {
+              endSpan.style.width = "".concat(availableEndSpace, "px");
+            } else {
+              startSpan.style.width = '100%';
+            }
+          }
+        }
+      }
+      /**
+       * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
+       * si ils dépassent la largeur de la cellule :
+       * - diminue d'autant et proportionnellement chaque span
+       * - ajoute l'ellipse à gauche de la deuxième moitié du texte.
+       */
+
+
+      if (this.props.ellipsis === 'middle') {
+        if (this.cellText !== null) {
+          var _this$cellText$getEle3 = this.cellText.getElementsByTagName('span'),
+              _this$cellText$getEle4 = (0, _slicedToArray2.default)(_this$cellText$getEle3, 2),
+              _startSpan = _this$cellText$getEle4[0],
+              _endSpan = _this$cellText$getEle4[1];
+
+          if (typeof _startSpan !== 'undefined' && typeof _endSpan !== 'undefined') {
+            var _availableEndSpace = this.cellText.offsetWidth - _startSpan.offsetWidth - _endSpan.offsetWidth;
+
+            if (_availableEndSpace < 0) {
+              _startSpan.style.width = '50%';
+              _endSpan.style.width = '49%';
+            } else {
+              _startSpan.style.width = 'initial';
+              _endSpan.style.width = 'initial';
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          label = _this$props.label,
+          ellipsis = _this$props.ellipsis,
+          color = _this$props.color;
+      var start;
+      var end;
+      var valueElement = '';
+      var valueString = label.toString();
+
+      switch (ellipsis) {
+        case 'name':
+        case 'after-first-word':
+          // Split value in 2 strings around first whitespace
+          start = valueString.substr(0, valueString.indexOf(' '));
+          end = valueString.substr(valueString.indexOf(' ') + 1);
+
+          if (start === '') {
+            start = end;
+            end = '';
+          }
+
+          valueElement = _react.default.createElement("div", {
+            ref: function ref(div) {
+              _this2.cellText = div;
+            }
+          }, _react.default.createElement("span", {
+            className: classes.rightEllipsisSpan
+          }, "".concat(start, " ")), _react.default.createElement("span", {
+            className: classes.leftEllipsisSpan
+          }, end));
+          break;
+
+        case 'middle':
+          // Split value in 2 strings
+          start = valueString.substr(0, Math.round(valueString.length / 2));
+          end = valueString.substr(Math.round(valueString.length / 2));
+          valueElement = _react.default.createElement("div", {
+            ref: function ref(div) {
+              _this2.cellText = div;
+            }
+          }, _react.default.createElement("span", {
+            className: classes.noEllipsisSpan
+          }, start), _react.default.createElement("span", {
+            className: classes.leftEllipsisSpan
+          }, end));
+          break;
+
+        case 'left':
+          valueElement = color ? _react.default.createElement(_HiColoredLabel.default, {
+            className: classes.leftEllipsisSpan,
+            label: valueString,
+            color: color
+          }) : _react.default.createElement("div", {
+            className: classes.leftEllipsisSpan,
+            style: {
+              width: '100%'
+            }
+          }, valueString);
+          break;
+
+        case 'right':
+        default:
+          valueElement = color ? _react.default.createElement(_HiColoredLabel.default, {
+            className: classes.rightEllipsisSpan,
+            label: valueString,
+            color: color
+          }) : _react.default.createElement("div", {
+            className: classes.rightEllipsisSpan,
+            style: {
+              width: '100%'
+            }
+          }, valueString);
+          break;
+      }
+
+      return valueElement;
+    }
+  }]);
+  return CellText;
+}(_react.default.Component);
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellText'
+})(CellText);
+
+exports.default = _default;

package/es/old_components/HiCell/CellTextStyled.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+var styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+var styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+var styleButton = {
+  padding: '1px 5px',
+  minHeight: '18px',
+  maxHeight: '18px'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param isButton
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+var CellTextStyled = function CellTextStyled(_ref) {
+  var label = _ref.label,
+      color = _ref.color,
+      isButton = _ref.isButton,
+      onClick = _ref.onClick,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
+  var valueString = label ? label.toString() : value.toString();
+
+  if (isButton) {
+    return _react.default.createElement(_HiButton.default, {
+      color: color,
+      onClick: onClick,
+      size: "small",
+      style: styleButton,
+      variant: "contained"
+    }, valueString);
+  }
+
+  return _react.default.createElement("div", {
+    style: styleRoot,
+    title: title || valueString
+  }, color ? _react.default.createElement(_HiColoredLabel.default, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : _react.default.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+var _default = CellTextStyled;
+exports.default = _default;

package/es/old_components/HiCell/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CellAddress", {
+  enumerable: true,
+  get: function get() {
+    return _CellAddress.default;
+  }
+});
+Object.defineProperty(exports, "CellDate", {
+  enumerable: true,
+  get: function get() {
+    return _CellDate.default;
+  }
+});
+Object.defineProperty(exports, "CellIcon", {
+  enumerable: true,
+  get: function get() {
+    return _CellIcon.default;
+  }
+});
+Object.defineProperty(exports, "CellImage", {
+  enumerable: true,
+  get: function get() {
+    return _CellImage.default;
+  }
+});
+Object.defineProperty(exports, "CellNumeric", {
+  enumerable: true,
+  get: function get() {
+    return _CellNumeric.default;
+  }
+});
+Object.defineProperty(exports, "CellRate", {
+  enumerable: true,
+  get: function get() {
+    return _CellRate.default;
+  }
+});
+Object.defineProperty(exports, "CellSentinel", {
+  enumerable: true,
+  get: function get() {
+    return _CellSentinel.default;
+  }
+});
+Object.defineProperty(exports, "CellText", {
+  enumerable: true,
+  get: function get() {
+    return _CellText.default;
+  }
+});
+Object.defineProperty(exports, "CellTextStyled", {
+  enumerable: true,
+  get: function get() {
+    return _CellTextStyled.default;
+  }
+});
+
+var _CellAddress = _interopRequireDefault(require("./CellAddress"));
+
+var _CellDate = _interopRequireDefault(require("./CellDate"));
+
+var _CellIcon = _interopRequireDefault(require("./CellIcon"));
+
+var _CellImage = _interopRequireDefault(require("./CellImage"));
+
+var _CellNumeric = _interopRequireDefault(require("./CellNumeric"));
+
+var _CellRate = _interopRequireDefault(require("./CellRate"));
+
+var _CellSentinel = _interopRequireDefault(require("./CellSentinel"));
+
+var _CellText = _interopRequireDefault(require("./CellText"));
+
+var _CellTextStyled = _interopRequireDefault(require("./CellTextStyled"));

package/es/old_components/HiCheckbox/HiCheckbox.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+// @inheritedComponent Checkbox
+var styles = function styles(theme) {
+  return {
+    root: {
+      marginRight: 4,
+      marginLeft: 4,
+      padding: 0
+    },
+    checked: {},
+    checkedPrimary: {
+      color: theme.palette.primary.main
+    },
+    checkedSecondary: {
+      color: theme.palette.secondary.main
+    },
+    checkedPositive: {
+      color: theme.palette.positive.main
+    },
+    checkedNegative: {
+      color: theme.palette.negative.main
+    },
+    checkedMiddle: {
+      color: theme.palette.middle.main
+    },
+    checkedNeutral: {
+      color: theme.palette.neutral.main
+    },
+    disabled: {
+      color: theme.palette.action.disabled
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiCheckbox =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiCheckbox, _React$PureComponent);
+
+  function HiCheckbox(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiCheckbox);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiCheckbox).call(this, props));
+    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+  /**
+   * Call callback function and stop click propagation
+   * @param event
+   * @param checked
+   */
+
+
+  (0, _createClass2.default)(HiCheckbox, [{
+    key: "handleChange",
+    value: function handleChange(event, checked) {
+      // Stop propagation
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event, checked);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          checkedIcon = _this$props.checkedIcon,
+          icon = _this$props.icon,
+          indeterminateIcon = _this$props.indeterminateIcon,
+          style = _this$props.style,
+          size = _this$props.size,
+          className = _this$props.className,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size", "className"]);
+      var iconStyles = (0, _objectSpread2.default)({
+        width: size,
+        height: size
+      }, style);
+      var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+      return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
+        classes: {
+          root: classes.root,
+          checked: (0, _classnames.default)(classes.checked, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.checkedPrimary, color === 'primary' || color === 'inherit'), (0, _defineProperty2.default)(_classNames, classes.checkedSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.checkedPositive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.checkedNegative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.checkedMiddle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.checkedNeutral, color === 'neutral'), _classNames)),
+          disabled: classes.disabled
+        },
+        style: iconStyles,
+        color: hcolor,
+        onChange: this.handleChange
+      }, icon && {
+        icon: _react.default.createElement(_HiIcon.default, {
+          className: classes.root,
+          icon: icon,
+          size: 20
+        })
+      }, checkedIcon && {
+        checkedIcon: _react.default.createElement(_HiIcon.default, {
+          className: classes.root,
+          icon: checkedIcon,
+          color: color,
+          size: 20
+        })
+      }, indeterminateIcon && {
+        indeterminateIcon: _react.default.createElement(_HiIcon.default, {
+          className: classes.root,
+          icon: indeterminateIcon,
+          color: color,
+          size: 20
+        })
+      }, other));
+    }
+  }]);
+  return HiCheckbox;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiCheckbox, "defaultProps", {
+  checked: false,
+  color: 'inherit',
+  size: 20,
+  icon: 'check_box_outline_blank'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiCheckbox'
+})(HiCheckbox);
+
+exports.default = _default;

package/es/old_components/HiCheckbox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiCheckbox.default;
+  }
+});
+
+var _HiCheckbox = _interopRequireDefault(require("./HiCheckbox"));