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

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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,

package/HiCell/CellAddress.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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 
@@ -19,7 +19,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); }; }
 
@@ -93,7 +93,7 @@ CellAddress.defaultProps = {
   view: 'l'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   name: 'HmuiCellAddress'
 })(CellAddress);
 

package/HiCell/CellDate.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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 
@@ -21,7 +21,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
-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); }; }
 
@@ -102,7 +102,7 @@ CellDate.defaultProps = {
   view: 'm'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   name: 'HmuiCellDate'
 })(CellDate);
 

package/HiCell/CellHiddenContent.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -15,19 +15,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _VisibilityRounded = _interopRequireDefault(require("@material-ui/icons/VisibilityRounded"));
+var _VisibilityRounded = _interopRequireDefault(require("@mui/icons-material/VisibilityRounded"));
 
-var _VisibilityOffRounded = _interopRequireDefault(require("@material-ui/icons/VisibilityOffRounded"));
+var _VisibilityOffRounded = _interopRequireDefault(require("@mui/icons-material/VisibilityOffRounded"));
 
 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: {
       display: 'flex',