@hipay/hipay-material-ui 3.9.2 → 3.11.0-beta.0

package/HiTable/HiTableBody.js

@@ -19,7 +19,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
-var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody/TableBody"));
+var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
 
 var _HiTableRow = _interopRequireDefault(require("./HiTableRow"));
 

package/HiTable/HiTableHeader.js

@@ -23,15 +23,15 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 
-var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
+var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
 
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 
-var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 
 var cst = _interopRequireWildcard(require("./constants"));
 
@@ -140,7 +140,7 @@ var HiTableHeader = /*#__PURE__*/function (_React$PureComponent) {
   return HiTableHeader;
 }(_react.default.PureComponent);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableHeader'
 })(HiTableHeader);

package/HiTable/HiTableRow.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -31,9 +31,9 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 
 var _HiCellBuilder = _interopRequireDefault(require("./HiCellBuilder"));
 
@@ -139,7 +139,7 @@ var HiTableRow = /*#__PURE__*/function (_React$PureComponent) {
   return HiTableRow;
 }(_react.default.PureComponent);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableRow'
 })(HiTableRow);

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_HIDDEN_CONTENT = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.VIEWS = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_STATUS = exports.TYPE_SENTINEL = exports.TYPE_SCORE = exports.TYPE_RATE = exports.TYPE_PIN_TO_ACTION = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_HIDDEN_CONTENT = exports.TYPE_DATE = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_COUNTRY = exports.TYPE_CHECKBOX = exports.TYPE_AMOUNT = exports.TYPE_ADDRESS = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.NO_EVOLUTION = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_ACCEPTED = exports.EVOLUTION_UP = exports.EVOLUTION_DOWN = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.DEFAULT_WIDTHS = exports.DEFAULT_VIEWS = exports.DEFAULT_PADDING = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.ALIGN_RIGHT_TYPES = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 

package/es/HiAccordion/HiAccordion.js

@@ -15,13 +15,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
 
-var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
 
-var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
 
-var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
 
 var _HiAccordionSummary = _interopRequireDefault(require("../HiAccordionSummary"));
 

package/es/HiAccordionActions/HiAccordionActions.js

@@ -13,9 +13,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _HiButton = _interopRequireDefault(require("../HiButton"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+var _Save = _interopRequireDefault(require("@mui/icons-material/Save"));
 
 var _ref = /*#__PURE__*/_react.default.createElement(_Save.default, {
   fontSize: "small"

package/es/HiAccordionSummary/HiAccordionSummary.js

@@ -13,13 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _MenuDown = _interopRequireDefault(require("mdi-material-ui/MenuDown"));
 
-var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 
 var _HiButton = _interopRequireDefault(require("../HiButton"));
 

package/es/HiAlertModal/HiAlertModal.js

@@ -17,23 +17,23 @@ var _HiButton = _interopRequireDefault(require("../HiButton"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 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 HiAlertModal = function HiAlertModal(props) {
-  var submitButtonRef = (0, _react.useRef)(null);
-  var cancelButtonRef = (0, _react.useRef)(null); // Refs to HiButton to display focus state
+  var cancelButtonRef = (0, _react.useRef)(null);
+  var submitButtonRef = (0, _react.useRef)(null); // Refs to HiButton to display focus state
 
   var submitActionsRef;
   var cancelActionsRef; // On Dialog opening, focus an action button
@@ -66,7 +66,7 @@ var HiAlertModal = function HiAlertModal(props) {
     className: "dialog-title"
   }, props.title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     className: "dialog-content"
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: 'div',
     variant: "body1",
     color: "textSecondary"
@@ -77,7 +77,7 @@ var HiAlertModal = function HiAlertModal(props) {
     onClick: props.onCancelClick,
     variant: props.cancelButtonVariant,
     color: props.cancelButtonColor,
-    innerRef: cancelButtonRef,
+    ref: cancelButtonRef,
     action: function action(actions) {
       cancelActionsRef = actions;
     }
@@ -86,7 +86,7 @@ var HiAlertModal = function HiAlertModal(props) {
     onClick: props.onSubmitClick,
     color: props.submitButtonColor,
     variant: props.submitButtonVariant,
-    innerRef: submitButtonRef,
+    ref: submitButtonRef,
     action: function action(actions) {
       submitActionsRef = actions;
     }

package/es/HiAppBar/HiAppBar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -25,13 +25,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
 
-var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 
-var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
@@ -131,7 +131,7 @@ HiAppBar.defaultProps = {
   hideable: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiAppBar'
 })(HiAppBar);

package/es/HiAvatar/HiAvatar.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 
 /*
  * Display an material-ui Avatar

package/es/HiBadge/HiBadge.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -13,9 +13,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var styles = function styles(theme) {
   return {
@@ -95,7 +95,7 @@ HiBadge.defaultProps = {
   color: 'primary'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiBadge'
 })(HiBadge);

package/es/HiBreadcrumb/HiStep.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -23,7 +23,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -123,7 +123,7 @@ HiStep.defaultProps = {
   validConnector: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'MuiHiStep'
 })(HiStep);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiStepContent = _interopRequireDefault(require("./HiStepContent"));
 
@@ -160,7 +160,7 @@ HiStepConnector.defaultProps = {
   validConnector: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepConnector'
 })(HiStepConnector);

package/es/HiBreadcrumb/HiStepContent.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -23,9 +23,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -93,7 +93,7 @@ HiStepContent.defaultProps = {
   isLast: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepContent'
 })(HiStepContent);

package/es/HiBreadcrumb/HiStepIcon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -23,7 +23,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -150,7 +150,7 @@ HiStepIcon.defaultProps = {
   type: 'back'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepIcon'
 })(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiStepIcon = _interopRequireDefault(require("./HiStepIcon"));
 
@@ -168,7 +168,7 @@ HiStepLabel.defaultProps = {
   type: 'back'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepLabel',
   withTheme: true

package/es/HiBreadcrumb/HiStepper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -75,7 +75,7 @@ HiStepper.defaultProps = {
   activeStep: 0
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'MuiHiStepper'
 })(HiStepper);

package/es/HiButton/HiButton.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.useStyles = void 0;
+exports.useStyles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -15,17 +15,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 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 useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles.default)(function (theme) {
   return {
     root: {},
     // a style rule
@@ -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.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+            backgroundColor: (0, _styles.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
             // Reset on touch devices, it doesn't add specificity
             '@media (hover: none)': {
               backgroundColor: 'transparent'
@@ -46,10 +46,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
         return {
           color: props.disabled ? theme.palette.action.disabled : props.color,
-          "&:hover": {
-            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity),
-            "@media (hover: none)": {
-              backgroundColor: "transparent"
+          '&:hover': {
+            backgroundColor: (0, _styles.alpha)(props.color, theme.palette.action.hoverOpacity),
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
             }
           }
         };
@@ -58,7 +58,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       return null;
     },
     contained: function contained(props) {
-      if (props.variant === "contained" && ['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+      if (props.variant === 'contained' && ['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
         return {
           color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].contrastText,
           backgroundColor: props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
@@ -70,38 +70,38 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
             }
           }
         };
-      } else if (props.variant === "contained" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+      } else if (props.variant === 'contained' && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
         return {
           color: props.disabled ? theme.palette.neutral.contrastText : theme.palette.getContrastText(props.color),
           backgroundColor: props.disabled ? theme.palette.neutral.main : props.color,
-          "&:hover": {
-            backgroundColor: (0, _colorManipulator.darken)(props.color, theme.palette.tonalOffset * 1.5),
-            "@media (hover: none)": {
+          '&:hover': {
+            backgroundColor: (0, _styles.darken)(props.color, theme.palette.tonalOffset * 1.5),
+            '@media (hover: none)': {
               backgroundColor: props.color
             }
           }
         };
-      } else if (props.variant === "containedLight" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+      } 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.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
-          "&:hover": {
-            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity + 0.1),
-            "@media (hover: none)": {
-              backgroundColor: (0, _colorManipulator.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
+          backgroundColor: (0, _styles.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
+          '&:hover': {
+            backgroundColor: (0, _styles.alpha)(props.color, theme.palette.action.hoverOpacity + 0.1),
+            '@media (hover: none)': {
+              backgroundColor: (0, _styles.alpha)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
             }
           }
         };
-      } else if (props.variant === "containedLight" // && is a palette color
+      } 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.alpha)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+          backgroundColor: (0, _styles.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),
+            backgroundColor: (0, _styles.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)
+              backgroundColor: (0, _styles.alpha)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity)
             }
           }
         };
@@ -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.alpha)(theme.palette[props.color].main, 0.5)),
+          border: "1px solid ".concat((0, _styles.alpha)(theme.palette[props.color].main, 0.5)),
           '&:hover': {
             border: "1px solid ".concat(theme.palette[props.color].main),
-            backgroundColor: (0, _colorManipulator.alpha)(theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+            backgroundColor: (0, _styles.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.alpha)(props.color, 0.5)),
-          "&:hover": {
+          border: "1px solid ".concat((0, _styles.alpha)(props.color, 0.5)),
+          '&:hover': {
             border: "1px solid ".concat(props.color),
-            backgroundColor: (0, _colorManipulator.alpha)(props.color, theme.palette.action.hoverOpacity)
+            backgroundColor: (0, _styles.alpha)(props.color, theme.palette.action.hoverOpacity)
           }
         };
       }
@@ -141,7 +141,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
-function HiButton(props) {
+var HiButton = _react.default.forwardRef(function (props, ref) {
   var disableElevation = props.disableElevation,
       variant = props.variant,
       color = props.color,
@@ -151,7 +151,7 @@ function HiButton(props) {
     var style = {};
 
     if (disableElevation) {
-      style.boxShadow = "none";
+      style.boxShadow = 'none';
     }
 
     return style;
@@ -160,27 +160,28 @@ 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]);
 
   var _variant = (0, _react.useMemo)(function () {
-    if (variant === "containedLight") {
-      return "contained";
+    if (variant === 'containedLight') {
+      return 'contained';
     }
 
     return variant;
   }, [variant]);
 
   return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
+    ref: ref,
     style: style,
     classes: classes,
     color: _color,
     variant: _variant
   }, otherProps));
-}
+});
 
 HiButton.defaultProps = {
   disableElevation: false,