@hipay/hipay-material-ui 3.7.13 → 3.9.0

package/es/HiAlertModal/HiAlertModal.js

@@ -2,22 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _HiButton = _interopRequireDefault(require("../HiButton"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
@@ -25,195 +23,94 @@ var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogAct
 
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
 
-var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
-
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
 
-var _styles = require("@material-ui/core/styles");
-
-var _HiButton = _interopRequireDefault(require("../HiButton"));
-
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _helpers = require("../utils/helpers");
+var _core = require("@material-ui/core");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// @inheritedComponent Dialog
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    classContent: {
-      fontSize: 14,
-      lineHeight: '24px',
-      color: '#484848',
-      position: 'relative'
-    },
-    classDialogPaper: {
-      backgroundColor: theme.palette.background3,
-      minHeight: 248,
-      maxWidth: 280,
-      borderRadius: 2
-    },
-    classCancelButton: {
-      margin: '0'
-    },
-    classSubmitButton: {
-      float: 'right'
-    },
-    classTitle: {
-      fontSize: 20,
-      fontFamily: theme.typography.fontFamily,
-      fontWeight: theme.typography.fontWeightLight,
-      lineHeight: '24px'
-    },
-    classAction: {
-      display: 'inline-block',
-      margin: '0',
-      padding: '0px 24px 24px 24px'
-    },
-    classDialogRoot: {
-      backgroundColor: 'rgba(0, 0, 0, 0.28)'
-    },
-    classBackgroundIcon: {
-      position: 'absolute',
-      top: 'calc(50%)',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      color: theme.palette.background2,
-      flex: '1'
-    },
-    backgroundIcon: function backgroundIcon(props) {
-      return {
-        fontSize: "".concat(props.iconSize, "px !important")
-      };
-    }
-  };
-});
-/**
- * Pop up d'alert
- */
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var HiAlertModal = function HiAlertModal(props) {
-  var backgroundIcon = props.backgroundIcon,
-      iconSize = props.iconSize,
-      content = props.content,
-      labelCancelButton = props.labelCancelButton,
-      labelSubmitButton = props.labelSubmitButton,
-      onCancelClick = props.onCancelClick,
-      onSubmitClick = props.onSubmitClick,
-      open = props.open,
-      cancelColor = props.cancelColor,
-      submitColor = props.submitColor,
-      title = props.title,
-      theme = props.theme,
-      onClose = props.onClose,
-      submitActionsRef = props.submitActionsRef,
-      cancelActionsRef = props.cancelActionsRef,
-      others = (0, _objectWithoutProperties2.default)(props, ["backgroundIcon", "iconSize", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title", "theme", "onClose", "submitActionsRef", "cancelActionsRef"]);
-  var classes = useStyles(props);
   var submitButtonRef = (0, _react.useRef)(null);
-  var cancelButtonRef = (0, _react.useRef)(null);
-  var thisCancelActionsRef = (0, _objectSpread2.default)({}, cancelActionsRef);
-  var thisSubmitActionsRef = (0, _objectSpread2.default)({}, submitActionsRef); // Appelé si clic en dehors de la pop up
+  var cancelButtonRef = (0, _react.useRef)(null); // Refs to HiButton to display focus state
 
-  var handleOnClose = function handleOnClose() {
-    if (onClose) {
-      onClose();
-    }
-  };
+  var submitActionsRef;
+  var cancelActionsRef; // On Dialog opening, focus an action button
 
   var handleOnEntered = function handleOnEntered() {
-    if (labelSubmitButton) {
+    if (props.labelSubmitButton) {
+      // Focus submit button
       submitButtonRef.current.focus();
-      thisSubmitActionsRef.focusVisible();
+      submitActionsRef.focusVisible();
     } else if (props.labelCancelButton) {
+      // Focus cancel button
       cancelButtonRef.current.focus();
-      thisCancelActionsRef.focusVisible();
+      cancelActionsRef.focusVisible();
     }
-  }; // Render
-
-
-  var dialogContent = content;
-
-  if (typeof content === 'string') {
-    dialogContent = /*#__PURE__*/_react.default.createElement("span", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: (0, _helpers.escapeHTML)(content)
-      }
-    });
-  }
-
-  var bgIcon;
-
-  if (backgroundIcon) {
-    var iconProps = {
-      color: "inherit",
-      className: classes.backgroundIcon
-    };
-
-    if (typeof backgroundIcon === 'string') {
-      bgIcon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
-        icon: backgroundIcon
-      }, iconProps));
-    } else if ((0, _typeof2.default)(backgroundIcon) === 'object') {
-      bgIcon = (0, _objectSpread2.default)({}, backgroundIcon);
-      bgIcon.props = (0, _objectSpread2.default)({}, iconProps);
-    }
-  }
+  };
 
-  return /*#__PURE__*/_react.default.createElement(_Dialog.default, (0, _extends2.default)({
-    open: open,
-    onClose: handleOnClose,
-    onEntered: handleOnEntered,
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    className: props.className,
     classes: {
-      root: classes.classDialogRoot,
-      paper: classes.classDialogPaper
-    }
-  }, others), bgIcon && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.classBackgroundIcon
-  }, bgIcon), title && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
-    disableTypography: true,
-    classes: {
-      root: classes.classTitle
-    }
-  }, title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, {
-    classes: {
-      root: classes.classContent
-    }
-  }, dialogContent)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
-    classes: {
-      root: classes.classAction
-    }
-  }, labelCancelButton && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
-    classes: {
-      root: classes.classCancelButton
+      paper: 'dialog-paper'
     },
-    onClick: onCancelClick,
-    color: cancelColor,
+    open: props.open,
+    onClose: props.onClose,
+    "aria-labelledby": "dialog-title",
+    "aria-describedby": "dialog-content",
+    TransitionProps: {
+      onEntered: handleOnEntered
+    }
+  }, props.title && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+    className: "dialog-title"
+  }, props.title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
+    className: "dialog-content"
+  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    component: 'div',
+    variant: "body1",
+    color: "textSecondary"
+  }, props.content)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
+    className: "dialog-actions"
+  }, props.labelCancelButton && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+    className: "cancel-button",
+    onClick: props.onCancelClick,
+    variant: props.cancelButtonVariant,
+    color: props.cancelButtonColor,
     innerRef: cancelButtonRef,
     action: function action(actions) {
-      thisCancelActionsRef = actions;
+      cancelActionsRef = actions;
     }
-  }, labelCancelButton), labelSubmitButton && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
-    classes: {
-      root: classes.classSubmitButton
-    },
-    onClick: onSubmitClick,
-    color: submitColor,
+  }, props.labelCancelButton), props.labelSubmitButton && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+    className: "submit-button",
+    onClick: props.onSubmitClick,
+    color: props.submitButtonColor,
+    variant: props.submitButtonVariant,
     innerRef: submitButtonRef,
     action: function action(actions) {
-      thisSubmitActionsRef = actions;
+      submitActionsRef = actions;
     }
-  }, labelSubmitButton)));
+  }, /*#__PURE__*/_react.default.createElement(_HiIcon.default, null, props.submitIcon), /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-text"
+  }, props.labelSubmitButton))));
 };
 
+var StyledHiAlertModal = (0, _styledComponents.default)(HiAlertModal).withConfig({
+  displayName: "HiAlertModal__StyledHiAlertModal",
+  componentId: "sc-dmfyat-0"
+})([".dialog-paper{padding:32px;", "{width:560px;min-width:560px;padding:55px;}}text-align:center;.dialog-title{padding:0;margin-bottom:25px;h2{font-weight:300;}}.dialog-content{padding:0;margin-bottom:25px;white-space:pre-line;}.dialog-actions{padding:0;display:flex;justify-content:space-around;}.cancel-button{width:122px;}.submit-button{width:288px;.submit-text{margin-left:6px;}}", "{.dialog-actions{flex-direction:column-reverse;justify-content:center;flex-wrap:wrap;padding:0;}.submit-button{width:100%;margin-bottom:16px;margin-left:0;}.cancel-button{width:100%;}}"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.breakpoints.up('sm');
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.breakpoints.down('sm');
+});
 HiAlertModal.defaultProps = {
-  content: '',
-  cancelColor: 'neutral',
-  submitColor: 'primary'
+  cancelButtonColor: 'neutral',
+  cancelButtonVariant: 'containedLight',
+  submitButtonColor: 'primary',
+  submitButtonVariant: 'contained',
+  submitIcon: 'done'
 };
-var _default = HiAlertModal;
+var _default = StyledHiAlertModal;
 exports.default = _default;

package/es/HiAlertModal/index.js

@@ -5,11 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _HiAlertModal.default;
-  }
-});
+exports.default = void 0;
+
+var _HiAlertModal = _interopRequireDefault(require("./HiAlertModal"));
 
-var _HiAlertModal = _interopRequireDefault(require("./HiAlertModal"));
+var _default = _HiAlertModal.default;
+exports.default = _default;

package/es/HiAvatar/HiAvatar.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+
+/*
+ * Display an material-ui Avatar
+ * If boolean internal is true, it displays white avatar with colored border and colored text
+ * If internal is false, it displays classic Avatar with colored background
+ */
+var HiAvatar = (0, _styledComponents.default)(function (_ref) {
+  var internal = _ref.internal,
+      color = _ref.color,
+      other = (0, _objectWithoutProperties2.default)(_ref, ["internal", "color"]);
+  return /*#__PURE__*/_react.default.createElement(_Avatar.default, other);
+}).withConfig({
+  displayName: "HiAvatar",
+  componentId: "sc-4o6l6c-0"
+})(["background-color:", ";color:", ";border:", ";"], function (props) {
+  return props.internal ? 'white' : props.color;
+}, function (props) {
+  return props.internal && props.color;
+}, function (props) {
+  return props.internal && "solid 1px ".concat(props.color);
+});
+HiAvatar.propTypes = {
+  /* If internal user, display Avatar colors reversed */
+  internal: _propTypes.default.bool,
+
+  /* Avatar color */
+  color: _propTypes.default.string
+};
+HiAvatar.defaultProps = {
+  internal: false
+};
+var _default = HiAvatar;
+exports.default = _default;

package/es/HiAvatar/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 _HiAvatar.default;
+  }
+});
+
+var _HiAvatar = _interopRequireDefault(require("./HiAvatar"));

package/es/HiButton/HiButton.js

@@ -36,7 +36,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         return {
           color: props.disabled ? theme.palette.action.disabled : theme.palette[props.color].main,
           '&:hover': {
-            backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+            backgroundColor: (0, _colorManipulator.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
             // Reset on touch devices, it doesn't add specificity
             '@media (hover: none)': {
               backgroundColor: 'transparent'
@@ -47,7 +47,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         return {
           color: props.disabled ? theme.palette.action.disabled : props.color,
           "&:hover": {
-            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity),
+            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity),
             "@media (hover: none)": {
               backgroundColor: "transparent"
             }
@@ -84,28 +84,28 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       } else if (props.variant === "containedLight" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
         return {
           color: props.disabled ? theme.palette.neutral.contrastText : props.color,
-          backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
+          backgroundColor: (0, _colorManipulator.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
           "&:hover": {
-            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity + 0.1),
+            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity + 0.1),
             "@media (hover: none)": {
-              backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
+              backgroundColor: (0, _colorManipulator.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
             }
           }
         };
       } else if (props.variant === "containedLight" // && is a palette color
       ) {
-          return {
-            color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].main,
-            backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity),
-            '&:hover': {
-              backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity + 0.1),
-              // Reset on touch devices, it doesn't add specificity
-              '@media (hover: none)': {
-                backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity)
-              }
+        return {
+          color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].main,
+          backgroundColor: (0, _colorManipulator.alpha)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+          '&:hover': {
+            backgroundColor: (0, _colorManipulator.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity + 0.1),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: (0, _colorManipulator.alpha)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity)
             }
-          };
-        }
+          }
+        };
+      }
 
       return null;
     },
@@ -113,19 +113,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
         return {
           color: theme.palette[props.color].main,
-          border: "1px solid ".concat((0, _colorManipulator.fade)(theme.palette[props.color].main, 0.5)),
+          border: "1px solid ".concat((0, _colorManipulator.alpha)(theme.palette[props.color].main, 0.5)),
           '&:hover': {
             border: "1px solid ".concat(theme.palette[props.color].main),
-            backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+            backgroundColor: (0, _colorManipulator.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity)
           }
         };
       } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
         return {
           color: props.color,
-          border: "1px solid ".concat((0, _colorManipulator.fade)(props.color, 0.5)),
+          border: "1px solid ".concat((0, _colorManipulator.alpha)(props.color, 0.5)),
           "&:hover": {
             border: "1px solid ".concat(props.color),
-            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity)
+            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity)
           }
         };
       }
@@ -160,8 +160,8 @@ function HiButton(props) {
   var _color = (0, _react.useMemo)(function () {
     if (['neutral', 'positive', 'middle', 'negative'].includes(color) || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color) // isHexColor
     ) {
-        return "inherit";
-      }
+      return "inherit";
+    }
 
     return color;
   }, [color]);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -50,37 +50,37 @@ var styles = function styles(theme) {
     /* Styles applied to the root element if `color="primary"`. */
     colorPrimary: {
       color: theme.palette.primary.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.08)
     },
 
     /* Styles applied to the root element if `color="secondary"`. */
     colorSecondary: {
       color: theme.palette.secondary.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.secondary.main, 0.08)
     },
 
     /* Styles applied to the root element if `color="positive"`. */
     colorPositive: {
       color: theme.palette.positive.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.positive.main, 0.08)
     },
 
     /* Styles applied to the root element if `color="negative"`. */
     colorNegative: {
       color: theme.palette.negative.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.negative.main, 0.08)
     },
 
     /* Styles applied to the root element if `color="middle"`. */
     colorMiddle: {
       color: theme.palette.middle.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.middle.main, 0.08)
     },
 
     /* Styles applied to the root element if `color="neutral"`. */
     colorNeutral: {
       color: theme.palette.neutral.main,
-      backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, 0.08)
+      backgroundColor: (0, _colorManipulator.alpha)(theme.palette.neutral.main, 0.08)
     },
     activeColor: {
       fontWeight: 500
@@ -155,7 +155,7 @@ function HiColoredLabel(props) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), (0, _defineProperty2.default)(_classNames, classes.body1, fontSize >= 15), (0, _defineProperty2.default)(_classNames, classes.body2, fontSize === 14), (0, _defineProperty2.default)(_classNames, classes.body3, fontSize === 13), (0, _defineProperty2.default)(_classNames, classes.body4, fontSize === 12), (0, _defineProperty2.default)(_classNames, classes.body5, fontSize <= 11), _classNames), className),
     style: (0, _objectSpread2.default)({}, style, {}, isHexColor && {
-      backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
+      backgroundColor: active ? color : (0, _colorManipulator.alpha)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, {}, fontWeight && {
       fontWeight: fontWeight

package/es/HiDatePicker/stylesheet.js

@@ -188,7 +188,7 @@ var _default = function _default(theme) {
       fontWeight: theme.typography.fontWeightMedium,
       textTransform: 'uppercase',
       '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+        backgroundColor: (0, _colorManipulator.alpha)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -237,7 +237,7 @@ var _default = function _default(theme) {
     },
     */
     selected: {
-      // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+      // backgroundColor: alpha(theme.palette.business.primary.normal, 0.36),
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
       borderRadius: '0%',

package/es/HiDialog/HiDialog.js

@@ -17,10 +17,6 @@ var _styles = require("@material-ui/core/styles");
 
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
-var _Close = _interopRequireDefault(require("mdi-material-ui/Close"));
-
-var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,34 +26,29 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     paper: {
       backgroundColor: theme.palette.background3,
       minWidth: 400,
-      maxWidth: 400,
       borderRadius: 2,
-      padding: "8px 24px 24px 24px"
+      padding: "50px"
     },
     header: {
-      display: "flex",
-      justifyContent: "space-between"
+      textAlign: "center",
+      marginBottom: 25
     },
     closeDiv: {
       marginTop: theme.spacing(-2),
       marginRight: theme.spacing(-6)
     },
-    title: (0, _objectSpread2.default)({}, theme.typography.h2),
-    content: {
-      padding: "12px 0px"
-    }
+    title: (0, _objectSpread2.default)({}, theme.typography.h1, {
+      margin: 0
+    })
   };
 });
 
-var _ref = /*#__PURE__*/_react.default.createElement(_Close.default, null);
-
 var HiDialog = function HiDialog(props) {
   var content = props.content,
       id = props.id,
       onClose = props.onClose,
       open = props.open,
-      title = props.title,
-      closeBtn = props.closeBtn;
+      title = props.title;
   var classes = useStyles(props);
   var handleClose = (0, _react.useCallback)(function () {
     if (onClose) {
@@ -75,14 +66,7 @@ var HiDialog = function HiDialog(props) {
     className: classes.header
   }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
     className: classes.title
-  }, title) : title, closeBtn !== false && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.closeDiv
-  }, /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
-    id: "close-dialog-btn",
-    onClick: onClose
-  }, _ref))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.content
-  }, content));
+  }, title) : title), /*#__PURE__*/_react.default.createElement("div", null, content));
 };
 
 var _default = HiDialog;

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -21,11 +21,11 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
 
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
 
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
+var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
 
 var _styles = require("@material-ui/core/styles");
 
@@ -138,7 +138,7 @@ function HiExpansionPanel(props) {
       setPanelDetailsExited = _useState2[1];
 
   var effectiveDisabled = disabled || !children;
-  return /*#__PURE__*/_react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Accordion.default, (0, _extends2.default)({
     disabled: effectiveDisabled,
     expanded: collapseDisable || expanded,
     TransitionProps: (0, _objectSpread2.default)({
@@ -154,7 +154,7 @@ function HiExpansionPanel(props) {
       root: classes.panel,
       disabled: classes.disabledPanel
     }
-  }), /*#__PURE__*/_react.default.createElement(_ExpansionPanelSummary.default, {
+  }), /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
     classes: {
       root: classes.summaryRoot,
       content: classes.summaryContent,
@@ -169,7 +169,7 @@ function HiExpansionPanel(props) {
     className: classes.secondaryHeading
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.secondaryHeadingSpan
-  }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && /*#__PURE__*/_react.default.createElement(_ExpansionPanelDetails.default, {
+  }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && /*#__PURE__*/_react.default.createElement(_AccordionDetails.default, {
     className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, panelDetailsExited))
   }, children));
 }