@hipay/hipay-material-ui 3.7.13 → 3.9.0

package/HiAccordion/HiAccordion.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+
+var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
+
+var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
+
+var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
+
+var _HiAccordionSummary = _interopRequireDefault(require("../HiAccordionSummary"));
+
+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; }
+
+var HiAccordion = function HiAccordion(props) {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isExpanded = _useState2[0],
+      setExpanded = _useState2[1]; // Call callback when edit button clicked
+
+
+  var handleEdit = function handleEdit(e) {
+    // Stop propagation of event to avoir panel closing
+    e.stopPropagation(); // Set expanded to avoid closing animation after edition when panel was collapsed
+
+    setExpanded(true);
+    props.onEdit && props.onEdit();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className
+  }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    className: "expansionPanel",
+    defaultExpanded: true,
+    expanded: props.editMode ? true : isExpanded,
+    onChange: function onChange(e, exp) {
+      return setExpanded(exp);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_HiAccordionSummary.default, {
+    editable: props.editable,
+    heading: props.heading,
+    secondaryHeading: props.secondaryHeading,
+    editMode: props.editMode,
+    editIcon: props.editIcon,
+    editLabel: props.editLabel,
+    editDisabled: props.editDisabled,
+    onEdit: handleEdit
+  }), /*#__PURE__*/_react.default.createElement(_AccordionDetails.default, {
+    className: "panelDetails"
+  }, props.editMode ? /*#__PURE__*/_react.default.createElement(_Card.default, {
+    className: "editCard"
+  }, /*#__PURE__*/_react.default.createElement(_CardContent.default, {
+    className: "content"
+  }, props.editContent)) : props.content)));
+};
+
+var StyledHiAccordion = (0, _styledComponents.default)(HiAccordion).withConfig({
+  displayName: "HiAccordion__StyledHiAccordion",
+  componentId: "sc-t8vs74-0"
+})(["max-width:688px;margin:auto;margin-top:32px;.expansionPanel{box-shadow:none;border:none;background-color:transparent;}.panelDetails{width:100%;padding:", ";.editCard{width:100%;overflow:visible;.content{width:100%;}}}"], function (_ref) {
+  var editMode = _ref.editMode;
+  return editMode ? '0 0 24px 0' : '8px 0 24px 0';
+});
+var _default = StyledHiAccordion;
+exports.default = _default;

package/HiAccordion/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _HiAccordion = _interopRequireDefault(require("./HiAccordion"));
+
+var _default = _HiAccordion.default;
+exports.default = _default;

package/HiAccordionActions/HiAccordionActions.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_Save.default, {
+  fontSize: "small"
+});
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+  size: 24,
+  color: "primary",
+  className: "save-loading-progress"
+});
+
+var HiAccordionActions = function HiAccordionActions(props) {
+  var handleCancel = function handleCancel() {
+    props.onCancel && props.onCancel();
+  };
+
+  var handleSave = function handleSave() {
+    props.onSave && props.onSave();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className
+  }, /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+    id: "cancel-button",
+    variant: "contained",
+    color: "#EEEEEE",
+    onClick: handleCancel,
+    disabled: props.isSaving
+  }, props.cancelLabel), /*#__PURE__*/_react.default.createElement("div", {
+    className: "save-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+    variant: "contained",
+    color: "primary",
+    disabled: props.isSaving || props.disabled,
+    onClick: handleSave
+  }, _ref, /*#__PURE__*/_react.default.createElement("span", {
+    className: "save-text"
+  }, props.saveLabel)), props.isSaving && _ref2));
+};
+
+HiAccordionActions.defaultProps = {
+  disabled: false,
+  isSaving: false
+};
+var StyledHiAccordionActions = (0, _styledComponents.default)(HiAccordionActions).withConfig({
+  displayName: "HiAccordionActions__StyledHiAccordionActions",
+  componentId: "sc-sfgibt-0"
+})(["display:flex;position:sticky;bottom:0;background-color:#ffffff;padding:20px 0;margin-bottom:-24px;#cancel-button{margin-right:20px;}.save-wrapper{position:relative;.save-text{margin-left:6px;}.save-loading-progress{position:absolute;top:50%;left:50%;margin-left:-12px;margin-top:-12px;}}"]);
+var _default = StyledHiAccordionActions;
+exports.default = _default;

package/HiAccordionActions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _HiAccordionActions = _interopRequireDefault(require("./HiAccordionActions"));
+
+var _default = _HiAccordionActions.default;
+exports.default = _default;

package/HiAccordionSummary/HiAccordionSummary.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _MenuDown = _interopRequireDefault(require("mdi-material-ui/MenuDown"));
+
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_MenuDown.default, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_Edit.default, {
+  fontSize: "small"
+});
+
+var HiAccordionSummary = function HiAccordionSummary(props) {
+  return /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
+    classes: {
+      root: 'summary',
+      content: 'summaryContent'
+    },
+    className: (0, _classnames.default)(props.className, {
+      editMode: props.editMode
+    }),
+    expandIcon: props.editMode ? null : _ref
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "h2",
+    className: "heading"
+  }, props.heading), !props.editMode && /*#__PURE__*/_react.default.createElement("div", {
+    className: "secondary"
+  }, !!props.secondaryHeading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "secondaryHeading",
+    variant: "h5"
+  }, props.secondaryHeading), props.editable && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+    className: "editButton",
+    color: "primary",
+    disabled: props.editDisabled,
+    onClick: props.onEdit
+  }, _ref2, /*#__PURE__*/_react.default.createElement("span", {
+    className: "saveLabel"
+  }, props.editLabel))));
+};
+
+HiAccordionSummary.defaultProps = {
+  editable: false,
+  editMode: false,
+  editDisabled: false
+};
+var StyledHiAccordionSummary = (0, _styledComponents.default)(HiAccordionSummary).withConfig({
+  displayName: "HiAccordionSummary__StyledHiAccordionSummary",
+  componentId: "sc-x8gl70-0"
+})(["&.summary{border-bottom:1px solid #e3e6e7;height:48px;min-height:48px;padding:0;&.editMode{border-bottom:none;cursor:default;.heading{font-weight:bold;}}.summaryContent{display:flex;justify-content:space-between;align-items:center;.secondary{display:flex;align-items:center;.secondaryHeading{color:", ";font-size:11px;}}}.saveLabel{margin-left:6px;}}"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette.neutral.light;
+});
+var _default = StyledHiAccordionSummary;
+exports.default = _default;

package/HiAccordionSummary/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _HiAccordionSummary = _interopRequireDefault(require("./HiAccordionSummary"));
+
+var _default = _HiAccordionSummary.default;
+exports.default = _default;

package/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/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/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/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"));