@arcblock/ux 1.17.21 → 2.0.0

package/lib/Layout/index.js

@@ -13,29 +13,29 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _Link = _interopRequireDefault(require("@material-ui/core/Link"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 
-var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 
-var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _List = _interopRequireDefault(require("@material-ui/core/List"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
 
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
 var _Footer = _interopRequireDefault(require("../Footer"));
 
@@ -104,7 +104,8 @@ function Layout(_ref) {
   }, brand)), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(_List.default, null, links.map(x => /*#__PURE__*/_react.default.createElement(_Link.default, {
     className: "nav-link",
     key: x.url,
-    href: x.url
+    href: x.url,
+    underline: "hover"
   }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     button: true,
     className: activeLink === x.url ? 'drawer-highlight-nav' : ''
@@ -135,7 +136,8 @@ function Layout(_ref) {
     "aria-label": "open drawer",
     edge: "start",
     onClick: onToggleDrawer,
-    className: "menu-button"
+    className: "menu-button",
+    size: "large"
   }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), showLogo ? /*#__PURE__*/_react.default.createElement("div", {
     className: "menu-logo"
   }, logo) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -162,7 +164,8 @@ function Layout(_ref) {
     key: x.url,
     href: x.url,
     className: "nav-link ".concat(activeLink === x.url ? 'highlight-nav' : ''),
-    color: x.color
+    color: x.color,
+    underline: "hover"
   }, x.icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: x.icon,
     size: 20 * (x.iconZoom || 1),
@@ -232,7 +235,7 @@ Layout.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Layout__Div",
   componentId: "sc-12bllvc-0"
-})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'));
+})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
 
 const DrawerDiv = _styledComponents.default.nav.withConfig({
   displayName: "Layout__DrawerDiv",

package/lib/Locale/selector.js

@@ -11,23 +11,25 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 
-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 _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 
-var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 
-var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
 var _Util = require("../Util");
 
@@ -90,6 +92,9 @@ function LocaleSelector(props) {
     ref: anchorEl,
     className: "trigger",
     onClick: () => setOpen(!open)
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: dark ? _globeDark.default : _globeLight.default,
     className: "trigger-image",
@@ -97,7 +102,7 @@ function LocaleSelector(props) {
   }), showText ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "strong",
     className: "trigger-text"
-  }, _context.languages.find(x => x.value === locale).text) : ''), /*#__PURE__*/_react.default.createElement(_Popper.default, Object.assign({
+  }, _context.languages.find(x => x.value === locale).text) : '')), /*#__PURE__*/_react.default.createElement(_Popper.default, Object.assign({
     open: open,
     anchorEl: anchorEl.current
   }, popperProps, {
@@ -142,4 +147,4 @@ exports.default = _default;
 const Div = _styledComponents.default.div.withConfig({
   displayName: "selector__Div",
   componentId: "sc-wfz3sf-0"
-})([".trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+})([".trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;color:", ";}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/NFTDisplay/broken.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _BrokenImage = _interopRequireDefault(require("@material-ui/icons/BrokenImage"));
+var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/NavMenu/nav-menu.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
 var _style = require("./style");
 

package/lib/PageScroller/index.js

@@ -202,8 +202,12 @@ const PageScroller = _ref => {
     pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
     pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
     return () => {
-      pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
-      pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      var _pageContainer$curren;
+
+      if ((_pageContainer$curren = pageContainer.current) !== null && _pageContainer$curren !== void 0 && _pageContainer$curren.removeEventListener) {
+        pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+        pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      }
     };
   }, [touchMove, keyPress]);
   (0, _react.useEffect)(() => {

package/lib/PricingTable/PricingPlan.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/PricingTable/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
 var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
@@ -28,7 +28,7 @@ const PricingTable = _ref => {
     }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
       container: true,
       spacing: 2,
-      justify: "center"
+      justifyContent: "center"
     }, plans.map(x => /*#__PURE__*/_react.default.createElement(_Grid.default, {
       item: true,
       className: "plan-item",

package/lib/Result/common.js

@@ -7,11 +7,11 @@ exports.PageNotFound = exports.Maintenance = exports.InternalServerError = expor
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
-var _CancelRounded = _interopRequireDefault(require("@material-ui/icons/CancelRounded"));
+var _CancelRounded = _interopRequireDefault(require("@mui/icons-material/CancelRounded"));
 
 var _result = _interopRequireDefault(require("./result"));
 

package/lib/Result/index.js

@@ -53,14 +53,11 @@ const ResultWrapper = _ref => {
   return /*#__PURE__*/_react.default.createElement(_result.default, rest);
 };
 
-ResultWrapper.propTypes = _objectSpread(_objectSpread({
+ResultWrapper.propTypes = _objectSpread({
   status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-}, _result.default.propTypes), {}, {
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element])
-});
+}, _result.default.propTypes);
 ResultWrapper.defaultProps = {
-  status: '',
-  title: ''
+  status: ''
 };
 var _default = ResultWrapper;
 exports.default = _default;

package/lib/Result/result.js

@@ -11,7 +11,7 @@ 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"));
 
 const _excluded = ["icon", "title", "description", "extra"];
 
@@ -48,13 +48,14 @@ const Result = _ref => {
 
 Result.propTypes = {
   icon: _propTypes.default.element,
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   actions: _propTypes.default.any,
   extra: _propTypes.default.element
 };
 Result.defaultProps = {
   icon: undefined,
+  title: '',
   description: '',
   actions: null,
   extra: undefined

package/lib/Spinner/index.js

@@ -7,7 +7,7 @@ exports.default = Spinner;
 
 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 }; }
 
@@ -20,7 +20,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * Spinner
  *
- * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @material-ui/core/CircularProgress 的实现
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现
  *
  * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
  * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖

package/lib/SplitButton/index.js

@@ -11,19 +11,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
-var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
-var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 
-var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 
-var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -98,7 +98,7 @@ function SplitButton(_ref) {
 
 SplitButton.propTypes = {
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  color: _propTypes.default.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  color: _propTypes.default.oneOf(['primary', 'secondary', 'inherit']),
   menu: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.array]),
   // 也可以是用于渲染主按钮的 function
   children: _propTypes.default.any,

package/lib/Switch/index.js

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
 const _excluded = ["classes"],
       _excluded2 = ["labelProps"];

package/lib/Tabs/index.js

@@ -7,13 +7,13 @@ exports.default = Tabs;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 
-var _core = require("@material-ui/core");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
 
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
 const _excluded = ["tabs", "current", "onChange"];
 
@@ -23,26 +23,35 @@ 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)(theme => ({
-  tabs: {},
-  tab: {
-    fontSize: '0.875rem',
-    [theme.breakpoints.up('md')]: {
-      fontSize: '1rem'
+const PREFIX = 'index';
+const classes = {
+  tabs: "".concat(PREFIX, "-tabs"),
+  tab: "".concat(PREFIX, "-tab")
+};
+const StyledMuiTabs = (0, _styles.styled)(_Tabs.default)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    ["& .".concat(classes.tabs)]: {},
+    ["& .".concat(classes.tab)]: {
+      fontSize: '0.875rem',
+      [theme.breakpoints.up('md')]: {
+        fontSize: '1rem'
+      }
     }
-  }
-}));
+  };
+});
 
-function Tabs(_ref) {
+function Tabs(_ref2) {
   let {
     tabs,
     current,
     onChange: _onChange
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
-  const classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement(_Tabs.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(StyledMuiTabs, Object.assign({
     scrollButtons: "on",
     variant: "scrollable",
     value: current,

package/lib/Tag/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 _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 var _Util = require("../Util");
 

package/lib/TextCollapse/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/lib/Theme/index.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.create = void 0;
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 require("@fontsource/lato/400.css");
 
 require("@fontsource/lato/700.css");
 
-var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
-
 var _Colors = _interopRequireDefault(require("../Colors"));
 
 const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
@@ -29,8 +27,13 @@ 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; }
 
-// https://material-ui.com/customization/default-theme/
+const muiDarkTheme = (0, _styles.createTheme)({
+  palette: {
+    mode: 'dark'
+  }
+}); // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
+
 const create = function create() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       {
@@ -42,15 +45,26 @@ const create = function create() {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette = mode === 'light' ? Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
+    background: {
+      paper: _Colors.default.common.white,
+      default: _Colors.default.background.default
+    },
+    mode
+  }), palette || {}) : Object.assign(_objectSpread(_objectSpread({}, muiDarkTheme.palette), {}, {
+    background: {
+      paper: _Colors.default.grey[900],
+      default: _Colors.default.grey[900]
+    },
+    mode
+  }), palette || {});
+
   const theme = (0, _styles.createTheme)(_objectSpread({
     themeName: 'ArcBlock',
-    palette: Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
-      background: {
-        paper: mode === 'light' ? _Colors.default.common.white : _Colors.default.grey[900],
-        default: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
-      },
-      type: mode
-    }), palette || {}),
+    palette: _palette,
     typography: Object.assign({
       useNextVariants: true,
       color: {
@@ -72,70 +86,40 @@ const create = function create() {
         fontWeight: 700
       }
     }, typography || {}),
-    overrides: Object.assign({
+    components: _objectSpread({
       MuiButton: {
-        root: {
-          boxShadow: 'none'
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
         }
       },
       MuiButtonGroup: {
-        contained: {
-          boxShadow: 'none'
-        }
-      },
-      MuiAppBar: {
-        root: {
-          height: 80
-        }
-      },
-      MuiToolbar: {
-        root: {
-          background: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
         }
       },
       MuiTableCell: {
-        root: {
-          borderBottomWidth: '0',
-          paddingTop: '14px',
-          paddingBottom: '14px',
-          paddingLeft: 0,
-          paddingRight: '30px'
-        },
-        head: {
-          textTransform: 'uppercase',
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        },
-        body: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        }
-      },
-      MuiChip: {
-        root: {
-          padding: '3px',
-          height: '24px',
-          fontSize: '12px',
-          marginRight: '10px'
-        },
-        label: {
-          paddingLeft: '5px',
-          paddingRight: '5px',
-          marginRight: '5px'
-        }
-      },
-      MuiTooltip: {
-        tooltip: {
-          fontSize: '14px'
-        }
-      },
-      MuiTypography: {
-        body1: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        },
-        body2: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+        styleOverrides: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px'
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          },
+          body: {
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          }
         }
       }
-    }, overrides || {}),
+    }, overrides),
     pageWidth,
     // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
     //       可以从 Colors 模块/theme.palette/mui colors 中取值
@@ -161,7 +145,7 @@ const create = function create() {
     },
     mode
   }, rest));
-  const enhanced = (0, _responsiveFontSizes.default)(theme, {
+  const enhanced = (0, _styles.responsiveFontSizes)(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,
     factor: 3,