@hipay/hipay-material-ui 3.2.3 → 3.3.0

package/es/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/es/HiCheckbox/HiCheckbox.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
@@ -43,7 +45,8 @@ var styles = function styles(theme) {
     root: {
       marginRight: 4,
       marginLeft: 4,
-      padding: 0
+      padding: 0,
+      fontSize: 20
     },
     checked: {},
     checkedPrimary: {
@@ -125,6 +128,23 @@ function (_React$PureComponent) {
         height: size
       }, style);
       var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+      var checkboxIcon;
+
+      if (icon) {
+        var iconProps = {
+          className: classes.root
+        };
+
+        if (typeof icon === 'string') {
+          checkboxIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: icon
+          }, iconProps));
+        } else if ((0, _typeof2.default)(icon) === 'object') {
+          checkboxIcon = (0, _objectSpread2.default)({}, icon);
+          checkboxIcon.props = (0, _objectSpread2.default)({}, checkboxIcon.props, {}, iconProps);
+        }
+      }
+
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,
@@ -133,13 +153,8 @@ function (_React$PureComponent) {
         },
         style: iconStyles,
         color: hcolor,
-        onChange: this.handleChange
-      }, icon && {
-        icon: _react.default.createElement(_HiIcon.default, {
-          className: classes.root,
-          icon: icon,
-          size: 20
-        })
+        onChange: this.handleChange,
+        icon: checkboxIcon
       }, checkedIcon && {
         checkedIcon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,

package/es/HiChip/HiChip.js

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -21,7 +25,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _styles = require("@material-ui/core/styles");
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: (0, _objectSpread2.default)({}, theme.typography.b3, {
       display: 'inline-flex',
@@ -53,8 +57,12 @@ var styles = function styles(theme) {
     rightNavigation: {},
     deletable: {},
     leftIcon: {},
-    icon: {
-      marginRight: 4
+    icon: function icon(props) {
+      var fontSize = props.iconSize || 20;
+      return {
+        marginRight: 4,
+        fontSize: fontSize
+      };
     },
     iconClickable: {
       cursor: 'pointer',
@@ -105,9 +113,7 @@ var styles = function styles(theme) {
       paddingRight: '8px'
     }
   };
-};
-
-exports.styles = styles;
+});
 
 var handleKeyDown = function handleKeyDown(e, fn) {
   if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
@@ -116,11 +122,10 @@ var handleKeyDown = function handleKeyDown(e, fn) {
   }
 };
 
-function HiChip(props) {
-  var _classNames;
+var HiChip = function HiChip(props) {
+  var _classNames2;
 
   var className = props.className,
-      classes = props.classes,
       fallbackImage = props.fallbackImage,
       icon = props.icon,
       _props$iconSize = props.iconSize,
@@ -143,27 +148,41 @@ function HiChip(props) {
       titleNext = props.titleNext,
       titlePrevious = props.titlePrevious,
       style = props.style;
+  var classes = useStyles(props);
+  var chipIcon;
+
+  if (icon) {
+    var iconProps = {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+      id: "".concat(id, "-icon"),
+      onClick: onIconClick,
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, onIconClick);
+      },
+      title: titleIcon,
+      tabIndex: onIconClick ? 0 : -1
+    };
+
+    if (typeof icon === 'string') {
+      chipIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: icon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      chipIcon = (0, _objectSpread2.default)({}, icon);
+      chipIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
   return _react.default.createElement("div", {
     id: id,
     role: 'button',
-    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
+    className: (0, _classnames.default)(classes.root, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames2, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames2, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames2, classes.leftIcon, icon), _classNames2)),
     title: title,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: onKeyDown ? '0' : '-1',
     style: style
-  }, icon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
-    id: "".concat(id, "-icon"),
-    icon: icon,
-    size: iconSize,
-    onClick: onIconClick,
-    onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, onIconClick);
-    },
-    title: titleIcon,
-    tabIndex: onIconClick ? 0 : -1
-  }), prefix && _react.default.createElement("span", {
+  }, chipIcon, prefix && _react.default.createElement("span", {
     id: "".concat(id, "-prefix"),
     className: classes.prefix
   }, prefix), img && _react.default.createElement("img", {
@@ -225,11 +244,7 @@ function HiChip(props) {
     title: titleDelete,
     tabIndex: 0
   }));
-}
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiChip'
-})(HiChip);
+};
 
+var _default = HiChip;
 exports.default = _default;

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -44,6 +44,10 @@ var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
 
 var _reactDeviceDetect = require("react-device-detect");
 
+var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
+
+var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
+
 function findSeparator(format) {
   var str = '';
 
@@ -302,6 +306,10 @@ exports.styles = styles;
 var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
+var _ref2 = _react.default.createElement(_Calendar.default, null);
+
+var _ref3 = _react.default.createElement(_CalendarBlank.default, null);
+
 var HiDateRangeSelector =
 /*#__PURE__*/
 function (_React$Component) {
@@ -402,7 +410,7 @@ function (_React$Component) {
           id: "preset_periods_subheader",
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar",
+          icon: _ref2,
           label: translations.preset_periods
         });
         presetOptionsAvailable.forEach(function (option) {
@@ -417,7 +425,7 @@ function (_React$Component) {
           id: "custom_periods_subheader",
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar_blank",
+          icon: _ref3,
           label: translations.custom_periods
         });
         customOptionsAvailable.forEach(function (option) {

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -27,12 +27,12 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
 
-var _HiIcon = _interopRequireDefault(require("./../HiIcon"));
-
 var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _MenuUp = _interopRequireDefault(require("mdi-material-ui/MenuUp"));
+
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     summaryContent: {
@@ -113,10 +113,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
  * HiExpansionPanel
  */
 
-var _ref = _react.default.createElement(_HiIcon.default, {
-  icon: "mdi_menu_up",
-  size: 24
-});
+var _ref = _react.default.createElement(_MenuUp.default, null);
 
 function HiExpansionPanel(props) {
   var disabled = props.disabled,

package/es/HiForm/HiInput.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -86,6 +90,7 @@ var styles = function styles(theme) {
       borderRadius: 2
     },
     startAdornment: {
+      fontSize: 20,
       zIndex: 1,
       marginLeft: 0,
       marginRight: 8
@@ -100,6 +105,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.light
     },
     rightIcon: {
+      fontSize: 20,
       width: 39,
       color: theme.palette.neutral.main
     },
@@ -355,16 +361,26 @@ function (_React$PureComponent) {
       });
       var leftIcon;
 
-      if (startAdornment) {
+      if (!!startAdornment) {
         var _classNames2;
 
-        leftIcon = _react.default.createElement(_HiIcon.default, {
-          icon: startAdornment,
-          size: 20,
+        var leftIconProps = {
           color: startAdornmentColor,
           onClick: this.props.onLeftIconClick,
           className: (0, _classnames.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDefaultColor, !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentFocus, focused && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDisabled, disabled && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
-        });
+        };
+
+        if (typeof startAdornment === 'string') {
+          leftIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: startAdornment
+          }, leftIconProps));
+        } else if ((0, _typeof2.default)(startAdornment) === 'object') {
+          // Icon component as prop
+          leftIcon = (0, _objectSpread2.default)({}, startAdornment);
+          leftIcon.props = (0, _objectSpread2.default)({}, leftIcon.props, {}, leftIconProps, {
+            className: "".concat(leftIconProps.className, " ").concat(leftIcon.props.className)
+          });
+        }
       } // Build endAdornment with eraseIcon + endAdornmentProps
 
 

package/es/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,15 +54,12 @@ 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) {
       return "line_awesome";
     } else if (iconName && iconName.indexOf('hi_') === 0) {
       return "hipay";
-    } else if (iconName && iconName.indexOf('mdi_') === 0) {
-      return "mdi";
     } else {
       return "mui";
     }
@@ -89,19 +84,9 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
         size: size
       }, other));
 
-    case "mdi":
-      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
-        ref: ref,
-        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
-        color: "inherit",
-        style: {
-          fontSize: size
-        }
-      }, other));
-
     case "mui":
     default:
+      // console.log({ ...props });
       return _react.default.createElement(_Icon.default, (0, _extends2.default)({
         ref: ref,
         className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),

package/es/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
+var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
+
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+
+var _RemoveCircle = _interopRequireDefault(require("@material-ui/icons/RemoveCircle"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: function root(props) {
+      return {
+        color: props.disabled ? theme.palette.neutral.light : "initial",
+        display: "flex",
+        height: 48,
+        padding: 12,
+        "&:hover": {
+          backgroundColor: props.disabled ? "none" : "#E6F9FD",
+          cursor: props.disabled ? "cursor" : "pointer"
+        },
+        "&:not(:last-child)": {
+          borderBottom: "1px solid #E0E0E0"
+        },
+        // margin between children (unless last span for ripple effect)
+        "& > :not(span)": {
+          marginLeft: 12
+        },
+        "& > div": {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          alignSelf: "center",
+          minWidth: "5%"
+        }
+      };
+    },
+    primary: function primary(props) {
+      return {
+        fontSize: "14px",
+        textTransform: "uppercase",
+        flex: props.secondary ? "initial" : 1 // expand primary text unless there is secondary
+
+      };
+    },
+    secondary: {
+      alignSelf: "center",
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 11,
+      flex: 1
+    },
+    info: {
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily
+    }
+  };
+});
+
+var StatusIcon = function StatusIcon(_ref) {
+  var disabled = _ref.disabled,
+      status = _ref.status;
+  var theme = (0, _styles.useTheme)();
+  var Icon, color;
+
+  switch (status) {
+    case "done":
+      Icon = _CheckCircle.default;
+      color = theme.palette.positive.main;
+      break;
+
+    case "error":
+      Icon = _Cancel.default;
+      color = theme.palette.negative.main;
+      break;
+
+    case "warning":
+      Icon = _Error.default;
+      color = theme.palette.middle.main;
+      break;
+
+    case "in_progress":
+      Icon = _RemoveCircle.default;
+      color = theme.palette.primary.main;
+      break;
+
+    default:
+      return null;
+  }
+
+  if (disabled) {
+    color = theme.palette.neutral.light;
+  }
+
+  return _react.default.createElement(Icon, {
+    htmlColor: color
+  });
+};
+
+var _ref2 = _react.default.createElement(_ArrowRight.default, null);
+
+var HiListItemLink = _react.default.forwardRef(function (props, ref) {
+  var disabled = props.disabled,
+      info = props.info,
+      primary = props.primary,
+      secondary = props.secondary,
+      status = props.status,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "status"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root,
+    button: true,
+    disableGutters: true,
+    disabled: disabled
+  }, others), _react.default.createElement("div", {
+    className: classes.primary
+  }, primary), secondary && _react.default.createElement("div", {
+    className: classes.secondary
+  }, secondary), info && _react.default.createElement("div", {
+    className: classes.info
+  }, info), status && _react.default.createElement(StatusIcon, {
+    disabled: disabled,
+    status: status
+  }), _ref2);
+});
+
+HiListItemLink.defaultProps = {};
+var _default = HiListItemLink;
+exports.default = _default;

package/es/HiListItemLink/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiListItemLink.default;
+  }
+});
+
+var _HiListItemLink = _interopRequireDefault(require("./HiListItemLink"));

package/es/HiSelectableList/HiSelectableListItem.js

@@ -11,6 +11,10 @@ exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -206,10 +210,14 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '1px 4px 3px 4px',
       verticalAlign: 'middle'
     },
-    icon: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      verticalAlign: 'middle'
+    icon: function icon(props) {
+      return {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        verticalAlign: 'middle',
+        color: props.selected && props.color ? props.color : 'inherit',
+        fontSize: 20
+      };
     },
     labelContent: {
       display: '-webkit-flex',
@@ -273,7 +281,7 @@ function HiSelectableListItem(props) {
       item = props.item;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
-  var isHovering = (0, _reactUse.useHoverDirty)(ref);
+  var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
   var onKeyDown = (0, _react.useCallback)(function (_ref) {
     var code = _ref.code;
 
@@ -302,6 +310,24 @@ function HiSelectableListItem(props) {
   }
 
   var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var itemIcon;
+
+  if (displayedIcon) {
+    var iconProps = {
+      className: classes.icon,
+      color: selected && color ? color : 'inherit'
+    };
+
+    if (typeof displayedIcon === 'string') {
+      itemIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: displayedIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      itemIcon = (0, _objectSpread2.default)({}, displayedIcon);
+      itemIcon.props = (0, _objectSpread2.default)({}, itemIcon.props, {}, iconProps);
+    }
+  }
+
   return _react.default.createElement(ListItemComponentName, {
     ref: ref,
     id: id,
@@ -327,7 +353,7 @@ function HiSelectableListItem(props) {
     checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
     ,
     disabled: disabled,
-    icon: displayedIcon,
+    icon: itemIcon,
     indeterminate: indeterminate,
     indeterminateIcon: indeterminateIcon
   }), type === 'image' && img && _react.default.createElement("img", {
@@ -344,11 +370,7 @@ function HiSelectableListItem(props) {
   }), _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, {
+  }, itemIcon && hideCheckbox && itemIcon, _react.default.createElement(ItemLabel, {
     color: color,
     label: label,
     labelHighlight: labelHighlight,

package/es/HiStepper/DefaultIndicator.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
+
+var _ref = _react.default.createElement(_SvgIcon.default, null, _react.default.createElement("circle", {
+  cx: "10",
+  cy: "10",
+  r: "3",
+  fill: "white"
+}));
+
+var DefaultIndicator = function DefaultIndicator() {
+  return _ref;
+};
+
+var _default = DefaultIndicator;
+exports.default = _default;