@hipay/hipay-material-ui 3.0.0 → 3.2.0-PSYCHE-2816

package/Guideline/index.js

@@ -0,0 +1,2 @@
+// fake component to display guideline
+"use strict";

package/HiCell/CellRate.js

@@ -23,7 +23,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _ArrowBottomRight = _interopRequireDefault(require("mdi-material-ui/ArrowBottomRight"));
+
+var _ArrowTopRight = _interopRequireDefault(require("mdi-material-ui/ArrowTopRight"));
+
+var _Equal = _interopRequireDefault(require("mdi-material-ui/Equal"));
 
 var _helpers = require("../utils/helpers");
 
@@ -102,19 +106,19 @@ function (_React$PureComponent) {
 
       switch (trendchip) {
         case 'equal':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.Equal, {
+          trendIcon = _react.default.createElement(_Equal.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
           });
           break;
 
         case 'up':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+          trendIcon = _react.default.createElement(_ArrowTopRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, isPositive), (0, _defineProperty2.default)(_classNames, classes.negative, !isPositive), _classNames))
           });
           break;
 
         case 'down':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowBottomRight, {
+          trendIcon = _react.default.createElement(_ArrowBottomRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
           });
           break;

package/HiChip/HiChip.js

@@ -128,6 +128,7 @@ function HiChip(props) {
       id = props.id,
       img = props.img,
       label = props.label,
+      labelIcon = props.labelIcon,
       onClick = props.onClick,
       onKeyDown = props.onKeyDown,
       onPrevious = props.onPrevious,
@@ -169,7 +170,7 @@ function HiChip(props) {
     className: classes.badge,
     id: "".concat(id, "-badge"),
     src: img,
-    alt: img,
+    alt: label,
     onError: function onError(e) {
       if (fallbackImage) {
         e.target.src = "".concat(fallbackImage);
@@ -178,6 +179,13 @@ function HiChip(props) {
       }
     },
     title: titleImg
+  }), labelIcon && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.icon),
+    id: "".concat(id, "-labelIcon"),
+    icon: labelIcon,
+    size: iconSize,
+    title: titleIcon,
+    tabIndex: -1
   }), onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     id: "".concat(id, "-previous"),

package/HiForm/HiFormControl.js

@@ -131,7 +131,7 @@ var styles = function styles(theme) {
     },
     icon: {
       position: 'absolute',
-      fontSize: 19
+      fontSize: 20
     }
   };
 };
@@ -291,6 +291,7 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiFormControl.defaultProps = {
+  id: (0, _helpers.uniqueId)(),
   fullWidth: true,
   required: true,
   disabled: false,

package/HiForm/HiPasswordField.js

@@ -97,7 +97,7 @@ function (_React$Component) {
         }, HiInputProps, {
           endAdornment: endAdornment,
           inputClassName: inputClassName,
-          autocomplete: 'on'
+          autocomplete: "new-password"
         })
       }));
     }

package/HiIcon/HiIcon.js

@@ -27,8 +27,6 @@ var _helpers = require("../utils/helpers");
 
 var hiSvgIcons = _interopRequireWildcard(require("../hi-svg-icons"));
 
-var mdi = _interopRequireWildcard(require("mdi-material-ui"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     /* Styles applied to the root element. */
@@ -56,7 +54,6 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var theme = (0, _styles.useTheme)();
   var iconName = icon !== null ? icon : children;
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {
@@ -90,8 +87,9 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       }, other));
 
     case "mdi":
-      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
+      var MdiIconComponent = require("mdi-material-ui/".concat((0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4))))).default;
+
+      return _react.default.createElement(MdiIconComponent, (0, _extends2.default)({
         ref: ref,
         className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
         color: "inherit",

package/HiPaymentMeans/HiPaymentMeans.js

@@ -153,27 +153,39 @@ var styles = function styles(theme) {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
-      marginTop: 16
+      marginTop: 16,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     giftCardNumber: {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
-      marginBottom: 28
+      marginBottom: 28,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     corporateNumber: {
       fontSize: 18,
       height: 25,
       width: 234,
       paddingLeft: 22,
-      marginBottom: 4
+      marginBottom: 4,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     ibanNumber: {
       fontSize: 14,
       height: 16,
       width: 256,
       paddingLeft: 12,
-      marginBottom: 11
+      marginBottom: 11,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     memberSince: {
       display: 'block',

package/HiSelectableList/HiSelectableListItem.js

@@ -1,31 +1,19 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -49,10 +37,64 @@ var _pure = _interopRequireDefault(require("recompose/pure"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
-var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
-var PureListItem = (0, _pure.default)(_ListItem.default);
+var _reactUse = require("react-use");
 
-var styles = function styles(theme) {
+var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      margin: '1px 0'
+    }
+  };
+});
+exports.useItemLabelStyles = useItemLabelStyles;
+
+function ItemLabel(props) {
+  var color = props.color,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      selected = props.selected;
+  var classes = useItemLabelStyles(props);
+
+  if (labelHighlight) {
+    var spanHighlight = _react.default.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: (0, _helpers.escapeHTML)(labelHighlight)
+      }
+    });
+
+    if (color && selected) {
+      return _react.default.createElement(_HiColoredLabel.default, {
+        color: color,
+        label: spanHighlight
+      });
+    }
+
+    return _react.default.createElement("span", {
+      className: classes.label
+    }, spanHighlight);
+  }
+
+  if (color && selected) {
+    return _react.default.createElement(_HiColoredLabel.default, {
+      className: classes.coloredLabel,
+      color: color,
+      label: label
+    });
+  }
+
+  return _react.default.createElement("div", {
+    className: classes.label,
+    title: label
+  }, label);
+}
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
       paddingLeft: theme.spacing(1)
@@ -137,14 +179,6 @@ var styles = function styles(theme) {
       display: 'contents'
     }),
     listItemContentSelected: {},
-    label: {
-      maxWidth: '100%',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      display: 'inline-block',
-      margin: '1px 0'
-    },
     highlight: {
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.neutral.main,
@@ -177,6 +211,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     icon: {
+      marginLeft: theme.spacing(1),
       marginRight: theme.spacing(1),
       verticalAlign: 'middle'
     },
@@ -204,227 +239,137 @@ var styles = function styles(theme) {
     infosWithSecondaryInline: {},
     infosWithoutSecondaryInline: {}
   };
-};
+});
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
  * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
-
-exports.styles = styles;
-
-var HiSelectableListItem =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
-
-  function HiSelectableListItem(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HiSelectableListItem);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
-
-    _this.setHover = function (hover) {
-      return function () {
-        _this.setState({
-          hover: hover
-        });
-      };
-    };
-
-    _this.handleKeyDown = function (item) {
-      return function (event) {
-        var key = (0, _keycode.default)(event);
-
-        if (key === 'space' || key === 'enter') {
-          event.preventDefault();
-          event.stopPropagation();
-
-          if (item) {
-            _this.props.onSelect(null, item);
-          }
-        }
-      };
-    };
-
-    _this.state = {
-      hover: false
-    };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
+exports.useStyles = useStyles;
+
+function HiSelectableListItem(props) {
+  var _classNames, _classNames3, _classNames4;
+
+  var centered = props.centered,
+      selected = props.selected,
+      disabled = props.disabled,
+      fallbackImage = props.fallbackImage,
+      hideCheckbox = props.hideCheckbox,
+      onSelect = props.onSelect,
+      indeterminate = props.indeterminate,
+      indeterminateIcon = props.indeterminateIcon,
+      icon = props.icon,
+      id = props.id,
+      img = props.img,
+      info = props.info,
+      hoverIcon = props.hoverIcon,
+      checkedIcon = props.checkedIcon,
+      level = props.level,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      paddingLeft = props.paddingLeft,
+      pinned = props.pinned,
+      secondaryInline = props.secondaryInline,
+      secondaryLabel = props.secondaryLabel,
+      thin = props.thin,
+      type = props.type,
+      color = props.color,
+      item = props.item;
+  var classes = useStyles(props);
+  var ref = (0, _react.useRef)(null);
+  var isHovering = (0, _reactUse.useHoverDirty)(ref);
+  var onKeyDown = (0, _react.useCallback)(function (_ref) {
+    var key = _ref.key;
+
+    if (key === 'space' || key === 'enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      if (item) onSelect(null, item);
+    }
+  }, [item]);
+  (0, _reactUse.useEvent)('keydown', onKeyDown); // Return simple loader list item
+
+  if (type === 'loader') {
+    return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
+      className: classes.loader,
+      loading: true,
+      size: 8
+    }));
   }
 
-  (0, _createClass2.default)(HiSelectableListItem, [{
-    key: "buildItemLabel",
-
-    /**
-     * Build item label with highlight and/or colored label
-     *
-     * @returns {*}
-     */
-    value: function buildItemLabel() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          color = _this$props.color,
-          label = _this$props.label,
-          labelHighlight = _this$props.labelHighlight,
-          selected = _this$props.selected;
-
-      if (labelHighlight) {
-        var spanHighlight = _react.default.createElement("span", {
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: (0, _helpers.escapeHTML)(labelHighlight)
-          }
-        });
-
-        if (color && selected) {
-          return _react.default.createElement(_HiColoredLabel.default, {
-            color: color,
-            label: spanHighlight
-          });
-        }
+  var displayedIcon;
 
-        return _react.default.createElement("span", {
-          className: classes.label
-        }, spanHighlight);
-      }
-
-      if (color && selected) {
-        return _react.default.createElement(_HiColoredLabel.default, {
-          className: classes.coloredLabel,
-          color: color,
-          label: label
-        });
-      }
+  if (!disabled && isHovering && hoverIcon) {
+    displayedIcon = hoverIcon;
+  } else if (icon) {
+    displayedIcon = icon;
+  }
 
-      return _react.default.createElement("div", {
-        className: classes.label,
-        title: label
-      }, label);
+  var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  return _react.default.createElement(ListItemComponentName, {
+    ref: ref,
+    id: id,
+    tabIndex: disabled || pinned ? '-1' : 0,
+    key: "li-".concat(id),
+    classes: {
+      root: classes.root
+    },
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+    disabled: disabled,
+    onClick: onSelect,
+    style: {
+      paddingLeft: "".concat(paddingLeft + level * 32, "px")
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames, _classNames3, _classNames4;
-
-      var _this$props2 = this.props,
-          centered = _this$props2.centered,
-          classes = _this$props2.classes,
-          selected = _this$props2.selected,
-          disabled = _this$props2.disabled,
-          fallbackImage = _this$props2.fallbackImage,
-          hideCheckbox = _this$props2.hideCheckbox,
-          onSelect = _this$props2.onSelect,
-          indeterminate = _this$props2.indeterminate,
-          indeterminateIcon = _this$props2.indeterminateIcon,
-          icon = _this$props2.icon,
-          id = _this$props2.id,
-          img = _this$props2.img,
-          info = _this$props2.info,
-          hoverIcon = _this$props2.hoverIcon,
-          checkedIcon = _this$props2.checkedIcon,
-          level = _this$props2.level,
-          paddingLeft = _this$props2.paddingLeft,
-          pinned = _this$props2.pinned,
-          secondaryInline = _this$props2.secondaryInline,
-          secondaryLabel = _this$props2.secondaryLabel,
-          thin = _this$props2.thin,
-          type = _this$props2.type,
-          color = _this$props2.color,
-          item = _this$props2.item; // Return simple loader list item
-
-      if (type === 'loader') {
-        return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
-          loading: true,
-          className: classes.loader,
-          size: 8
-        }));
-      }
-
-      var displayedIcon;
-
-      if (!disabled && this.state.hover) {
-        displayedIcon = hoverIcon;
-      } else if (icon) {
-        displayedIcon = icon;
-      }
-
-      var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
-      var listItemListenerProps = {};
-
-      if (!disabled && !pinned) {
-        listItemListenerProps = {
-          onClick: onSelect,
-          onMouseEnter: this.setHover(true),
-          onMouseLeave: this.setHover(false),
-          onKeyDown: this.handleKeyDown(item)
-        };
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+  }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+    tabIndex: 0,
+    classes: {
+      root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
+    },
+    checked: selected,
+    checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
+    ,
+    disabled: disabled,
+    icon: displayedIcon,
+    indeterminate: indeterminate,
+    indeterminateIcon: indeterminateIcon
+  }), type === 'image' && img && _react.default.createElement("img", {
+    src: img,
+    alt: '',
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
       }
-
-      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
-        id: id,
-        tabIndex: disabled || pinned ? '-1' : 0,
-        key: "li-".concat(id),
-        classes: {
-          root: classes.root
-        },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
-        disabled: disabled
-      }, listItemListenerProps, {
-        style: {
-          paddingLeft: "".concat(paddingLeft + level * 32, "px")
-        }
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
-      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
-        tabIndex: 0,
-        classes: {
-          root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
-        },
-        checked: selected,
-        checkedIcon: checkedIcon,
-        color: disabled ? 'inherit' : 'primary',
-        disabled: disabled,
-        icon: displayedIcon,
-        indeterminate: indeterminate,
-        indeterminateIcon: indeterminateIcon
-      }), type === 'image' && img && _react.default.createElement("img", {
-        src: img,
-        alt: '',
-        onError: function onError(e) {
-          if (fallbackImage) {
-            e.target.src = "".concat(fallbackImage);
-          } else {
-            e.target.style.display = 'none';
-          }
-        },
-        className: classes.img
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
-        "data-id": id
-      }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-        icon: icon,
-        className: classes.icon,
-        color: "inherit"
-      }), this.buildItemLabel())), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
-      }, !!secondaryLabel && _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-      }, secondaryLabel), !!info && _react.default.createElement("span", {
-        className: (0, _classnames.default)(classes.info)
-      }, info)));
-    }
-  }]);
-  return HiSelectableListItem;
-}(_react.default.PureComponent);
+    },
+    className: classes.img
+  }), _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+    "data-id": id
+  }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+    icon: icon,
+    className: classes.icon,
+    color: selected && color ? color : 'inherit'
+  }), _react.default.createElement(ItemLabel, {
+    color: color,
+    label: label,
+    labelHighlight: labelHighlight,
+    selected: selected
+  }))), _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+  }, !!secondaryLabel && _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
+  }, secondaryLabel), !!info && _react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.info)
+  }, info)));
+}
 
 HiSelectableListItem.defaultProps = {
   centered: false,
   disabled: false,
   hideCheckbox: false,
-  hoverIcon: 'check_box_outline_blank',
   checkedIcon: 'check_box',
   indeterminateIcon: 'indeterminate_check_box',
   indeterminate: false,
@@ -435,10 +380,5 @@ HiSelectableListItem.defaultProps = {
   selected: false,
   thin: false
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiSelectableListItem'
-})(HiSelectableListItem);
-
+var _default = HiSelectableListItem;
 exports.default = _default;