@hipay/hipay-material-ui 3.7.13 → 3.9.0

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

package/HiIconButton/HiIconButton.js

@@ -40,7 +40,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       return {
         color: color,
         '&:hover': {
-          backgroundColor: (0, _colorManipulator.fade)(color, theme.palette.action.hoverOpacity),
+          backgroundColor: (0, _colorManipulator.alpha)(color, theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'

package/HiPaymentMeans/HiPaymentMeans.js

@@ -544,7 +544,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
       }, formatNumber), entity && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.entityLabel)
       }, translations.entity ? translations.entity : "ENTITY"), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.entityNumber)
+        className: (0, _classnames.default)(classes.number, classes.entityNumber),
+        "data-name": "entity_number"
       }, entity)), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
         title: username,

package/HiSelect/HiSelect.js

@@ -345,7 +345,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
             var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
 
             if (selectedValue && typeof selectedValue === 'string') {
-              item = _this.overlay.getElementsByTagName('li')[selectedValue];
+              item = _this.overlay.getElementsByTagName('li').namedItem(selectedValue);
             } else if (selectedValue && typeof selectedValue === 'number') {
               item = _this.overlay.querySelector('li:not([tabindex^="-"])')[selectedValue - 1];
             }

package/HiSelect/HiSelectInput.js

@@ -286,9 +286,8 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
         onMouseLeave: this.props.onMouseLeave,
         onKeyDown: this.handleKeyDown,
         onFocus: this.props.onFocus,
-        onBlur: this.handleBlur // buttref={this.ref}
-        ,
-        buttonRef: this.ref
+        onBlur: this.handleBlur,
+        ref: this.ref
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), onReset && focused && /*#__PURE__*/_react.default.createElement("div", {

package/es/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/es/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/es/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/es/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/es/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/es/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;