@arcblock/ux 1.17.21 → 2.0.2

package/lib/ActionButton/index.js

@@ -83,7 +83,7 @@ ActionButton.defaultProps = {
   color: '',
   border: '',
   width: '',
-  theme: 'default',
+  theme: 'inherit',
   variant: 'outlined',
   size: 'large',
   children: null

package/lib/ActivityIndicator/index.js

@@ -11,9 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
-
-var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));
+var _colors = require("@mui/material/colors");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
 
@@ -62,13 +60,13 @@ function ActivityIndicator(_ref) {
     showText: false
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 56,
-    orbitColor: _green.default[500],
-    atomColor: _green.default[500],
+    orbitColor: _colors.green[500],
+    atomColor: _colors.green[500],
     duration: 1
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 80,
-    orbitColor: _blue.default[800],
-    atomColor: _blue.default[800],
+    orbitColor: _colors.blue[800],
+    atomColor: _colors.blue[800],
     duration: 1.5
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 100,

package/lib/Alert/index.js

@@ -11,9 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _blueGrey = _interopRequireDefault(require("@material-ui/core/colors/blueGrey"));
+var _colors = require("@mui/material/colors");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -75,7 +75,7 @@ const Alert = props => {
     borderColor
   } = types[type] || types.success;
   const styles = Object.assign({
-    color: _blueGrey.default[500],
+    color: _colors.blueGrey[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
     borderLeft: variant === 'border' ? "5px solid ".concat(borderColor) : 'none'
   }, style);

package/lib/Async/index.js

@@ -7,7 +7,7 @@ exports.default = LoadAsyncComponent;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/Badge/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 

package/lib/Blocklet/blocklet.js

@@ -11,15 +11,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _styles = require("@mui/styles");
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -83,7 +83,7 @@ function BlockletStore(_ref) {
     return false;
   });
 
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const isUpSm = (0, _useMediaQuery.default)(theme.breakpoints.up('sm'));
 
   const _onMainClick = wrapHandler(onMainClick);

package/lib/BlockletNFT/index.js

@@ -11,15 +11,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Portal = _interopRequireDefault(require("@material-ui/core/Portal"));
+var _Portal = _interopRequireDefault(require("@mui/material/Portal"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
@@ -136,8 +136,8 @@ function BlockletNFT(_ref2) {
   const _onMainClick = wrapHandler(onMainClick);
 
   const theme = (0, _useTheme.default)();
-  const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
-  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('lg'));
   const isUpLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size
   // eslint-disable-next-line no-nested-ternary
 

package/lib/Button/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _wrap = _interopRequireDefault(require("./wrap"));
 

package/lib/Button/wrap.js

@@ -30,26 +30,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const extendedColors = {
-  danger: {
-    contained: {
-      backgroundColor: _Colors.default.error.main,
-      color: _Colors.default.common.white
-    },
-    outlined: {
-      borderColor: _Colors.default.error.main,
-      color: _Colors.default.error.main
-    }
-  },
-  warning: {
-    contained: {
-      backgroundColor: _Colors.default.warning.main,
-      color: _Colors.default.common.white
-    },
-    outlined: {
-      borderColor: _Colors.default.warning.main,
-      color: _Colors.default.warning.main
-    }
-  },
   did: {
     contained: {
       backgroundColor: _Colors.default.did.primary,
@@ -100,8 +80,9 @@ function _default(BaseComponent) {
         break;
 
       default:
-    } // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    } // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
     // 这里扩展 danger/warning/reverse/did 四种 color
+    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
 
 
     const matched = extendedColors[color] && extendedColors[color][rest.variant];

package/lib/ButtonGroup/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 
 var _wrap = _interopRequireDefault(require("../Button/wrap"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
 // (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
 var _default = (0, _wrap.default)(_ButtonGroup.default);
 

package/lib/ClickToCopy/index.js

@@ -13,9 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
 
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/lib/CodeBlock/index.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _useMountedState = _interopRequireDefault(require("react-use/lib/useMountedState"));
 
@@ -47,9 +47,9 @@ var _plaintext = _interopRequireDefault(require("highlight.js/lib/languages/plai
 
 require("highlight.js/styles/atom-one-dark.css");
 
-var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
+var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
 
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 

package/lib/ContactForm/index.js

@@ -14,9 +14,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Util = require("../Util");
 
@@ -154,7 +154,7 @@ class ContactForm extends _react.default.Component {
     })), /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: "outlined",
       type: "submit",
-      color: "default",
+      color: "inherit",
       size: "large",
       disabled: loading,
       className: "subscribe-btn-empty"

package/lib/CookieConsent/index.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _reactCookieConsent = _interopRequireWildcard(require("react-cookie-consent"));
 
@@ -43,12 +43,17 @@ const translations = {
     agree: '我知道了'
   }
 };
+
+const AcceptButton = props => /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({
+  variant: "contained"
+}, props));
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
  * - 默认配置/样式
  */
 
+
 function DefaultCookieConsent(_ref) {
   let {
     children,
@@ -67,9 +72,8 @@ function DefaultCookieConsent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactCookieConsent.default, Object.assign({
     disableStyles: true,
     disableButtonStyles: true,
-    ButtonComponent: _Button.default,
+    ButtonComponent: AcceptButton,
     buttonText: translations[locale].agree,
-    buttonClasses: "MuiButton-contained MuiButton-containedPrimary",
     buttonStyle: {
       marginTop: 16,
       padding: '6px 16px'

package/lib/Dialog/dialog.js

@@ -11,19 +11,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
 const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps"];
 
@@ -55,7 +55,7 @@ const Dialog = _ref => {
 
   const theme = (0, _styles.useTheme)(); // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
 
-  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const showHeader = title || showCloseButton || toolbar;
 
   const handleOnClose = (e, reason) => {
@@ -77,7 +77,8 @@ const Dialog = _ref => {
 
   const closeButton = /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     className: "ux-dialog_closeButton",
-    onClick: e => handleOnClose(e, 'closeButton')
+    onClick: e => handleOnClose(e, 'closeButton'),
+    size: "large"
   }, /*#__PURE__*/_react.default.createElement(_Close.default, null));
 
   return /*#__PURE__*/_react.default.createElement(StyledMuiDialog, Object.assign({

package/lib/Footer/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Util = require("../Util");
 

package/lib/Header/header.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "containerComponent"];
 
@@ -94,7 +94,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 0;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('md'), props => props.$theme.breakpoints.down('sm'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 0;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Header/responsive-header.js

@@ -11,15 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 
 var _header = _interopRequireDefault(require("./header"));
 
@@ -57,7 +57,7 @@ function ResponsiveHeader(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _useTheme.default)();
-  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
 
   const _children = typeof children === 'function' ? children({
@@ -118,7 +118,7 @@ ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
 const Root = (0, _styledComponents.default)(_header.default).withConfig({
   displayName: "responsive-header__Root",
   componentId: "sc-1dugv47-0"
-})([".header-menu{display:none;}", "{.header-menu{display:block;}}"], props => props.$theme.breakpoints.down('sm'));
+})([".header-menu{display:none;}", "{.header-menu{display:block;}}"], props => props.$theme.breakpoints.down('md'));
 /**
  * Sidebar
  */

package/lib/Icon/index.js

@@ -25,7 +25,7 @@ const variants = {
   light: 'fal',
   regular: 'far',
   solid: 'fas'
-};
+}; // eslint-disable-next-line react/prop-types
 
 const Icon = _ref => {
   let {

package/lib/Img/index.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styles = require("@mui/material/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _reactIntersectionObserver = require("react-intersection-observer");
 
@@ -35,8 +37,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const useStyles = (0, _core.makeStyles)(() => ({
-  root: {
+const PREFIX = 'Img';
+const classes = {
+  root: "".concat(PREFIX, "-root")
+};
+const Root = (0, _styles.styled)('div')(() => ({
+  ["& .".concat(classes.root)]: {
     position: 'relative',
     overflow: 'hidden',
     '& .image--state, & .image--img': {
@@ -88,7 +94,6 @@ function Img(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const classes = useStyles();
   const [ref, inView] = lazy ? (0, _reactIntersectionObserver.useInView)({
     threshold: 0,
     triggerOnce: true
@@ -149,7 +154,7 @@ function Img(_ref) {
   return (
     /*#__PURE__*/
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    _react.default.createElement("div", Object.assign({
+    _react.default.createElement(Root, Object.assign({
       ref: ref,
       style: outerStyle
     }, rest), /*#__PURE__*/_react.default.createElement("div", {
@@ -158,13 +163,13 @@ function Img(_ref) {
     }, !fallback && imgState === 'error' && /*#__PURE__*/_react.default.createElement("div", {
       className: "image--state",
       title: "loading image"
-    }, /*#__PURE__*/_react.default.createElement(_core.SvgIcon, {
+    }, /*#__PURE__*/_react.default.createElement(_material.SvgIcon, {
       component: _Alert.default,
       className: "image--icon"
     })), !placeholder && imgState === 'loading' && /*#__PURE__*/_react.default.createElement("div", {
       className: "image--state",
       title: "Image load error"
-    }, /*#__PURE__*/_react.default.createElement(_core.SvgIcon, {
+    }, /*#__PURE__*/_react.default.createElement(_material.SvgIcon, {
       component: _Image.default,
       className: "image--icon"
     })), imgState === 'loaded' && /*#__PURE__*/_react.default.createElement("img", {

package/lib/InfoRow/index.js

@@ -15,7 +15,7 @@ var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 const _excluded = ["name", "nameFormatter", "layout", "children", "valueComponent", "nameWidth"];
 

package/lib/Layout/dashboard/header.js

@@ -11,19 +11,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
 
-var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));
+var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
 
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -40,7 +40,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
   displayName: "header__StyledAppBar",
   componentId: "sc-yt81c4-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('sm'));
+})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
 /*
   自定义 logo 相关:
   如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
@@ -80,7 +80,7 @@ function Header(_ref) {
     to: homeUrl,
     className: "header-link"
   }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
-    smDown: true
+    mdDown: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
   }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {

package/lib/Layout/dashboard/index.js

@@ -13,11 +13,11 @@ var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 
 var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
 

package/lib/Layout/dashboard/sidebar.js

@@ -11,15 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _withTheme = _interopRequireDefault(require("@material-ui/core/styles/withTheme"));
+var _withTheme = _interopRequireDefault(require("@mui/styles/withTheme"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _teal = _interopRequireDefault(require("@material-ui/core/colors/teal"));
+var _colors = require("@mui/material/colors");
 
 var _image = _interopRequireDefault(require("../../Icon/image"));
 
@@ -104,13 +104,13 @@ Sidebar.defaultProps = {
 const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
   displayName: "sidebar__MenuItems",
   componentId: "sc-gaosgy-0"
-})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('sm')));
+})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gaosgy-1"
-})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
+})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));