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

package/es/old_components/HiSelectableList/HiSelectableListItem.js

@@ -0,0 +1,427 @@
+"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 _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 _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiCheckbox = _interopRequireDefault(require("../HiCheckbox"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+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 styles = function styles(theme) {
+  return {
+    root: {
+      paddingLeft: 4
+    },
+    listItem: {
+      backgroundColor: theme.palette.background3,
+      color: theme.palette.neutral.dark,
+      padding: '5px 12px 5px 0px',
+      fontWeight: theme.typography.fontWeightRegular,
+      maxHeight: 56,
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      '&$listItemInlineWithInfoWithoutSecondary': {
+        justifyContent: 'space-between'
+      },
+      '&$listItemWithoutSecondaryInline': {
+        display: 'block'
+      },
+      '&$inline': {
+        minHeight: 40,
+        '& $secondaryLabel': {
+          display: 'inline-block'
+        }
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.action.hover,
+        outline: 'none'
+      }
+    },
+    listItemWithoutSecondaryInline: {},
+    listItemInlineWithInfoWithoutSecondary: {},
+    listItemHover: {
+      '&:hover:not($disabled):not($pinned)': {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
+    },
+    centered: {
+      textAlign: 'center',
+      width: '100%'
+    },
+    disabled: {
+      fontWeight: theme.typography.fontWeightLight,
+      cursor: 'default',
+      opacity: 'inherit'
+    },
+    selected: {
+      backgroundColor: theme.palette.action.selected
+    },
+    pinned: {
+      display: 'inherit',
+      marginRight: 8,
+      backgroundColor: theme.palette.background3
+    },
+    thin: {
+      fontWeight: theme.typography.fontWeightLight
+    },
+    loader: {
+      textAlign: 'center',
+      width: 1,
+      height: 22,
+      padding: '8px 0',
+      margin: 'auto'
+    },
+    listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
+      fontWeight: 'inherit',
+      width: '100%',
+      minWidth: '50%',
+      padding: '5px 0',
+      '&$listItemContentSelected': {
+        marginBottom: 1,
+        marginLeft: -4
+      },
+      '& strong': {
+        fontWeight: theme.typography.fontWeightMedium
+      },
+      display: 'contents'
+    }),
+    listItemContentSelected: {},
+    label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      margin: '1px 0',
+      paddingLeft: 4
+    },
+    primaryHighlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.primary.main,
+      textTransform: 'uppercase'
+    },
+    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 11,
+      marginLeft: 4
+    }),
+    inline: {},
+    info: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 12,
+      textOverflow: 'ellipsis',
+      textAlign: 'right',
+      alignSelf: 'center'
+    }),
+    img: {
+      width: 24,
+      height: 'auto',
+      margin: '1px 4px 3px 4px',
+      verticalAlign: 'middle'
+    },
+    icon: {
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
+    labelContent: {
+      display: '-webkit-flex',
+      alignItems: 'center',
+      maxWidth: '85%',
+      '&$labelWithoutSecondaryInline': {
+        maxWidth: '100%'
+      }
+    },
+    labelWithoutSecondaryInline: {},
+    infosContent: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      justifyContent: 'space-between',
+      '&$infosInlineWithoutSecondary': {
+        width: 'auto'
+      },
+      '&$infosWithoutSecondaryInline': {
+        paddingLeft: 28
+      }
+    },
+    infosInlineWithoutSecondary: {},
+    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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setHover", function (hover) {
+      return function () {
+        _this.setState({
+          hover: hover
+        });
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+
+  (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
+          });
+        }
+
+        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);
+    }
+  }, {
+    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;
+      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
+        id: id,
+        tabIndex: disabled ? '-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
+      }, disabled || {
+        onClick: onSelect,
+        onMouseEnter: this.setHover(true),
+        onMouseLeave: this.setHover(false),
+        onKeyDown: this.handleKeyDown(item)
+      }, {
+        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.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        "data-id": id
+      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+        icon: icon,
+        className: classes.icon
+      }), 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);
+
+(0, _defineProperty2.default)(HiSelectableListItem, "defaultProps", {
+  centered: false,
+  disabled: false,
+  hideCheckbox: false,
+  hoverIcon: 'check_box_outline_blank',
+  checkedIcon: 'check_box',
+  indeterminateIcon: 'indeterminate_check_box',
+  indeterminate: false,
+  level: 0,
+  paddingLeft: 4,
+  pinned: false,
+  secondaryInline: true,
+  selected: false,
+  thin: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableListItem'
+})(HiSelectableListItem);
+
+exports.default = _default;

package/es/old_components/HiSelectableList/index.js

@@ -0,0 +1,31 @@
+"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 _HiSelectableList.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectableListItem", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectableListItem.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectableListHierarchic", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectableListHierarchic.default;
+  }
+});
+
+var _HiSelectableList = _interopRequireDefault(require("./HiSelectableList"));
+
+var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
+
+var _HiSelectableListHierarchic = _interopRequireDefault(require("./HiSelectableListHierarchic"));

package/es/old_components/HiSwitch/HiSwitch.js

@@ -0,0 +1,201 @@
+"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 _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SwitchBase = _interopRequireDefault(require("@material-ui/core/internal/SwitchBase"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _helpers = require("../utils/helpers");
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'inline-flex',
+      width: 62,
+      position: 'relative',
+      flexShrink: 0,
+      zIndex: 0
+    },
+    bar: {
+      borderRadius: 7,
+      display: 'block',
+      position: 'absolute',
+      width: 34,
+      height: 14,
+      top: '50%',
+      marginTop: -7,
+      left: '50%',
+      marginLeft: -17,
+      transition: theme.transitions.create(['opacity', 'background-color'], {
+        duration: theme.transitions.duration.shortest
+      }),
+      backgroundColor: theme.palette.type === 'light' ? theme.palette.neutral.main : '#fff',
+      opacity: theme.palette.type === 'light' ? 0.38 : 0.3
+    },
+    icon: {
+      boxShadow: theme.shadows[1],
+      width: 20,
+      height: 20,
+      borderRadius: '50%',
+      backgroundColor: theme.palette.background2,
+      color: theme.palette.background2,
+      padding: 2
+    },
+    iconDisabled: {
+      backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+      color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+      '&:not($iconChecked)': {
+        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
+      }
+    },
+    // For SwitchBase
+    switchBaseRoot: {
+      zIndex: 1,
+      color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shortest
+      }),
+      height: 40,
+      width: 40
+    },
+    disabled: {
+      color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+      '& + $bar': {
+        backgroundColor: theme.palette.type === 'light' ? '#000' : '#fff',
+        opacity: theme.palette.type === 'light' ? 0.12 : 0.1
+      }
+    },
+    iconChecked: {},
+    iconCheckedPrimary: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    },
+    iconCheckedSecondary: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText
+    },
+    iconCheckedPositive: {
+      backgroundColor: theme.palette.positive.main,
+      color: theme.palette.positive.contrastText
+    },
+    iconCheckedNegative: {
+      backgroundColor: theme.palette.negative.main,
+      color: theme.palette.negative.contrastText
+    },
+    iconCheckedMiddle: {
+      backgroundColor: theme.palette.middle.main,
+      color: theme.palette.middle.contrastText
+    },
+    iconCheckedNeutral: {
+      backgroundColor: theme.palette.neutral.main,
+      color: theme.palette.neutral.contrastText
+    },
+    checkedPrimary: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.primary.main,
+        opacity: 0.5
+      }
+    },
+    checkedSecondary: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.secondary.main,
+        opacity: 0.5
+      }
+    },
+    checkedPositive: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.positive.main,
+        opacity: 0.5
+      }
+    },
+    checkedNegative: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.negative.main,
+        opacity: 0.5
+      }
+    },
+    checkedMiddle: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.middle.main,
+        opacity: 0.5
+      }
+    },
+    checkedNeutral: {
+      transform: 'translateX(18px)',
+      '& + $bar': {
+        backgroundColor: theme.palette.neutral.main,
+        opacity: 0.5
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+function HiSwitch(props) {
+  var _classNames;
+
+  var classes = props.classes,
+      className = props.className,
+      checked = props.checked,
+      color = props.color,
+      disabled = props.disabled,
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "checked", "color", "disabled"]);
+  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
+  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+
+  var icon = _react.default.createElement(_Check.default, {
+    className: iconClass
+  });
+
+  return _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.root, className)
+  }, _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({
+    type: "checkbox",
+    icon: icon,
+    classes: {
+      root: classes.switchBaseRoot,
+      checked: isHiColor && !disabled ? classes["checked".concat((0, _helpers.capitalize)(color))] : classes.checkedNeutral,
+      disabled: classes.disabled
+    },
+    checkedIcon: icon,
+    checked: checked,
+    disabled: disabled
+  }, other)), _react.default.createElement("div", {
+    className: classes.bar
+  }));
+}
+
+HiSwitch.defaultProps = {
+  color: 'inherit'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSwitch'
+})(HiSwitch);
+
+exports.default = _default;