@arcblock/ux 2.4.2 → 2.4.5

package/lib/Switch/index.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@mui/material/styles");
-
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["labelProps"];
@@ -30,7 +30,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
-const IOSSwitch = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, _objectSpread({
+const IOSSwitch = (0, _Theme.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, _objectSpread({
   focusVisibleClassName: ".Mui-focusVisible",
   disableRipple: true
 }, props)))(_ref => {

package/lib/Tabs/index.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
-var _styles = require("@mui/material/styles");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
 
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["tabs", "current", "onChange"];
@@ -34,7 +34,7 @@ const classes = {
   tabs: "".concat(PREFIX, "-tabs"),
   tab: "".concat(PREFIX, "-tab")
 };
-const StyledMuiTabs = (0, _styles.styled)(_Tabs.default)(_ref => {
+const StyledMuiTabs = (0, _Theme.styled)(_Tabs.default)(_ref => {
   let {
     theme
   } = _ref;

package/lib/Tag/index.js

@@ -9,16 +9,14 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styles = require("@mui/material/styles");
-
 var _Util = require("../Util");
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -77,7 +75,7 @@ function Tag(props) {
 
   const {
     palette
-  } = (0, _styles.useTheme)();
+  } = (0, _Theme.useTheme)();
   const styles = Object.assign({}, types[type] || types.primary, style);
 
   if (palette[type]) {
@@ -116,4 +114,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/
 })));
 
 exports.default = _default;
-const Span = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 20px;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 4px;\n  }\n"])));
+const Span = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 20px;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 4px;\n  }\n"])));

package/lib/TextCollapse/index.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -92,4 +92,4 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
-const Container = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);
+const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);

package/lib/Theme/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  styled: true,
+  useTheme: true,
   ThemeProvider: true
 };
 Object.defineProperty(exports, "ThemeProvider", {
@@ -12,6 +14,18 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _themeProvider.default;
   }
 });
+Object.defineProperty(exports, "styled", {
+  enumerable: true,
+  get: function get() {
+    return _styles.styled;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _styles.useTheme;
+  }
+});
 
 var _theme = require("./theme");
 
@@ -27,6 +41,8 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
+var _styles = require("@mui/material/styles");
+
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Theme/theme-provider.js

@@ -7,8 +7,6 @@ exports.default = ThemeProvider;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require("@emotion/react");
-
 var _styles = require("@mui/material/styles");
 
 var _StyledEngineProvider = _interopRequireDefault(require("@mui/material/StyledEngineProvider"));
@@ -21,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const defaultTheme = (0, _theme.create)();
+const defaultTheme = (0, _theme.createTheme)();
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
@@ -37,12 +35,9 @@ function ThemeProvider(_ref) {
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     (0, _jsxRuntime.jsx)(_StyledEngineProvider.default, {
       injectFirst: injectFirst,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ThemeProvider, {
-          theme: theme,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
-        })
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
       })
     })
   );

package/lib/Theme/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = void 0;
+exports.createTheme = exports.create = void 0;
 
 var _styles = require("@mui/material/styles");
 
@@ -154,4 +154,6 @@ const create = function create() {
   return enhanced;
 };
 
-exports.create = create;
+exports.create = create;
+const createTheme = create;
+exports.createTheme = createTheme;

package/lib/Video/index.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactPlayer = _interopRequireDefault(require("react-player"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -102,5 +102,4 @@ Video.defaultProps = {
   height: 400,
   style: {}
 };
-
-const Placeholder = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #222222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n\n  .loading-indicator {\n    position: absolute;\n    top: 45%;\n    left: 47%;\n    z-index: 2;\n  }\n"])));
+const Placeholder = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #222222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n\n  .loading-indicator {\n    position: absolute;\n    top: 45%;\n    left: 47%;\n    z-index: 2;\n  }\n"])));

package/lib/Wallet/Action.js

@@ -7,8 +7,6 @@ exports.default = WalletAction;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _abtwallet = _interopRequireDefault(require("./images/abtwallet.png"));
@@ -19,6 +17,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -112,5 +112,4 @@ const sizes = {
     xlarge: 18
   }
 };
-
-const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  .wallet-action__logo {\n    width: auto;\n    height: auto;\n    max-width: ", "px;\n    margin-left: 5px;\n  }\n\n  .wallet-action__text {\n    padding: 8px;\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .wallet-action__action {\n    font-size: ", "px;\n    text-transform: capitalize;\n    margin-bottom: 1px;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n\n  .wallet-action__title {\n    font-size: ", "px;\n    text-transform: capitalize;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n"])), props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);
+const Content = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  .wallet-action__logo {\n    width: auto;\n    height: auto;\n    max-width: ", "px;\n    margin-left: 5px;\n  }\n\n  .wallet-action__text {\n    padding: 8px;\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .wallet-action__action {\n    font-size: ", "px;\n    text-transform: capitalize;\n    margin-bottom: 1px;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n\n  .wallet-action__title {\n    font-size: ", "px;\n    text-transform: capitalize;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n"])), props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);

package/lib/Wallet/Download.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
@@ -19,6 +17,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -336,5 +336,4 @@ WalletDownload.defaultProps = {
   style: {},
   locale: 'zh'
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n\n  .download-title {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n\n  .download-store-list {\n    display: flex;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .download-link {\n      padding: 0;\n      margin: 0;\n\n      margin-right: ", ";\n      margin-bottom: ", ";\n\n      &:last-of-type {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? '0' : '16px', props => props.layout === 'vertical' ? '16px' : '0', props => props.storeLayout === 'vertical' ? 'column' : 'row', props => props.storeLayout === 'vertical' ? '0' : '16px', props => props.storeLayout === 'vertical' ? '16px' : '0');
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n\n  .download-title {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n\n  .download-store-list {\n    display: flex;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .download-link {\n      padding: 0;\n      margin: 0;\n\n      margin-right: ", ";\n      margin-bottom: ", ";\n\n      &:last-of-type {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? '0' : '16px', props => props.layout === 'vertical' ? '16px' : '0', props => props.storeLayout === 'vertical' ? 'column' : 'row', props => props.storeLayout === 'vertical' ? '0' : '16px', props => props.storeLayout === 'vertical' ? '16px' : '0');

package/lib/Wallet/Open.js

@@ -7,12 +7,12 @@ exports.default = OpenInWallet;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 
 var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -53,4 +53,4 @@ OpenInWallet.propTypes = {
 OpenInWallet.defaultProps = {
   locale: 'zh'
 };
-const Button = (0, _styled.default)(_Fab.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    font-size: 12px;\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform-origin: 50% 50%;\n    transform: translateX(-50%);\n    min-width: 120px;\n    z-index: ", ";\n  }\n"])), props => props.theme.zIndex.tooltip);
+const Button = (0, _Theme.styled)(_Fab.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    font-size: 12px;\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform-origin: 50% 50%;\n    transform: translateX(-50%);\n    min-width: 120px;\n    z-index: ", ";\n  }\n"])), props => props.theme.zIndex.tooltip);

package/lib/WechatPrompt/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WechatPrompt;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
@@ -17,6 +15,8 @@ var _ios = _interopRequireDefault(require("./images/ios.png"));
 
 var _android = _interopRequireDefault(require("./images/android.png"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -81,4 +81,4 @@ function WechatPrompt() {
   });
 }
 
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .wechat-title {\n    height: 80px;\n    line-height: 80px;\n    text-align: center;\n    font-size: 20px;\n    color: #fff;\n    background-color: #9cdbd8;\n  }\n\n  .wechat-tip {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .wechat-tip-text {\n      font-size: 20px;\n      padding: 10px 10px;\n      overflow: auto;\n      word-break: break-word;\n      text-align: center;\n    }\n\n    .wechat-tip-img {\n      width: 90%;\n      object-fit: cover;\n    }\n  }\n"])));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .wechat-title {\n    height: 80px;\n    line-height: 80px;\n    text-align: center;\n    font-size: 20px;\n    color: #fff;\n    background-color: #9cdbd8;\n  }\n\n  .wechat-tip {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .wechat-tip-text {\n      font-size: 20px;\n      padding: 10px 10px;\n      overflow: auto;\n      word-break: break-word;\n      text-align: center;\n    }\n\n    .wechat-tip-img {\n      width: 90%;\n      object-fit: cover;\n    }\n  }\n"])));

package/lib/withTheme/index.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var React = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _styles = require("@mui/material/styles");
-
 var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
 
 var _Theme = require("../Theme");
@@ -21,10 +19,6 @@ var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -33,8 +27,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-const globalStyles = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n\n  a,\n  a:hover,\n  a:active {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  a:hover {\n    color: ", ";\n  }\n\n  .section--latest-post {\n    p:last-of-type {\n      margin: 0;\n    }\n  }\n\n  .has-scrolled {\n    .section--footnotes {\n      position: static !important;\n      transition-property: background-color;\n      transition-duration: 600ms;\n      transition-timing-function: ease;\n      .footnote__title {\n        color: #fff;\n      }\n    }\n  }\n"])), props => props.theme.typography.fontFamily, props => props.theme.typography.color.main, props => props.theme.palette.primary.dark, props => props.theme.palette.primary.main);
-
 function withTheme(Component) {
   let {
     mode = 'light',
@@ -42,42 +34,28 @@ function withTheme(Component) {
     palette,
     typography
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  class WithTheme extends React.Component {
-    constructor(props) {
-      super(props);
-      this.theme = (0, _Theme.create)({
-        mode,
-        pageWidth,
-        palette,
-        typography
-      });
-    }
-
-    componentDidMount() {
-      // Remove the server-side injected CSS.
+  const theme = (0, _Theme.createTheme)({
+    mode,
+    pageWidth,
+    palette,
+    typography
+  });
+  const globalStyles = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-family: ", ";\n    color: ", ";\n\n    a,\n    a:hover,\n    a:active {\n      text-decoration: none;\n      color: ", ";\n    }\n\n    a:hover {\n      color: ", ";\n    }\n\n    .section--latest-post {\n      p:last-of-type {\n        margin: 0;\n      }\n    }\n\n    .has-scrolled {\n      .section--footnotes {\n        position: static !important;\n        transition-property: background-color;\n        transition-duration: 600ms;\n        transition-timing-function: ease;\n        .footnote__title {\n          color: #fff;\n        }\n      }\n    }\n  "])), theme.typography.fontFamily, theme.typography.color.main, theme.palette.primary.dark, theme.palette.primary.main);
+  return function WithTheme(props) {
+    (0, _react.useEffect)(() => {
       const jssStyles = document.querySelector('#jss-server-side');
 
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles);
       }
-    }
-
-    render() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
-        theme: this.theme,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
-          styles: globalStyles
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
-          theme: this.theme,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, this.props))
-        })]
-      });
-    }
-
-  }
-
-  return WithTheme;
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Theme.ThemeProvider, {
+      theme: theme,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
+        styles: globalStyles
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, props))]
+    });
+  };
 }
 
 var _default = withTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.2",
+  "version": "2.4.5",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "6a7e96c930c4ef0dd995bc9383738bb1cdf12844",
+  "gitHead": "ba62e426b63dd469d3d139d0de11d4d329d84fef",
   "dependencies": {
-    "@arcblock/icons": "^2.4.2",
-    "@arcblock/react-hooks": "^2.4.2",
+    "@arcblock/icons": "^2.4.5",
+    "@arcblock/react-hooks": "^2.4.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ActivityIndicator/index.js

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';
 import colors from '../Colors';
+import { styled } from '../Theme';
 
 /**
  * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
@@ -49,7 +49,7 @@ ActivityIndicator.defaultProps = {
   messages: ['Loading data...'],
 };
 
-const Div = styled.div`
+const Div = styled('div')`
   && {
     box-sizing: border-box;
     padding: 20px;
@@ -112,7 +112,7 @@ Orbit.defaultProps = {
   duration: 2,
 };
 
-const OrbitRoot = styled.div`
+const OrbitRoot = styled('div')`
   @keyframes orbit {
     0% {
       transform: rotate(0deg);

package/src/Alert/index.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 import { blueGrey } from '@mui/material/colors';
 
 import Icon from '../Icon';
 import { mergeProps } from '../Util';
 import colors from '../Colors';
+import { styled } from '../Theme';
 
 const types = {
   error: {
@@ -74,7 +74,7 @@ Alert.defaultProps = {
 
 export default Alert;
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   align-items: center;
   font-size: 16px;

package/src/AnimationWaiter/index.js

@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
+
 import lottieJson from './default-animation.json';
+import { styled } from '../Theme';
 
 /**
  * 用于长时间等待的用的动画组件
@@ -191,7 +192,7 @@ AnimationWaiter.defaultProps = {
   increaseSpeed: 0,
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Badge/index.js

@@ -1,11 +1,10 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 
 import colors from '../Colors';
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 const types = {
   error: {

package/src/Blocklet/blocklet.js

@@ -1,15 +1,14 @@
-import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
-import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 import Button from '../Button';
 import Img from '../Img';
+import { useTheme, styled } from '../Theme';
 
-const Div = styled.div`
+const Div = styled('div')`
   &.arcblock-blocklet {
     padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0
       ${(props) => props.theme.spacing(2)};

package/src/Blocklet/utils.js

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
+import { styled } from '../Theme';
 
-const ActionButton = styled.div`
+const ActionButton = styled('div')`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;

package/src/BlockletNFT/index.js

@@ -1,16 +1,15 @@
 import { useRef } from 'react';
-import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Portal from '@mui/material/Portal';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
 
 import Icon from '../Icon';
 import Button from '../Button';
 import Img from '../Img';
+import { useTheme, styled } from '../Theme';
 
 /**
  * 美化数字 1000-->1k
@@ -29,7 +28,7 @@ function prettySize(_size, digits = 1) {
   return _size && `${size}${list[index]}`;
 }
 
-const Div = styled.div`
+const Div = styled('div')`
   &.arcblock-blocklet {
     padding: 0 16px;
     background: ${(props) => props.theme.palette.common.white};

package/src/Center/index.js

@@ -1,6 +1,7 @@
-import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 
+import { styled } from '../Theme';
+
 /**
  *
  * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
@@ -19,7 +20,7 @@ export default function Center({ children, relative }) {
   return <Div style={style}>{children}</Div>;
 }
 
-const Div = styled.div`
+const Div = styled('div')`
   flex: 1;
   width: 100vw;
   height: 100vh;

package/src/ClickToCopy/index.js

@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import styled from '@emotion/styled';
+
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 export { default as CopyButton } from './copy-button';
 

package/src/CodeBlock/index.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-danger */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Copy from 'copy-to-clipboard';
 import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';
@@ -27,6 +26,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import colors from '../Colors';
+import { styled } from '../Theme';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('js', javascript);
@@ -100,7 +100,7 @@ CodeBlock.defaultProps = {
 };
 
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = styled.pre`
+const Pre = styled('pre')`
   font-family: ${fontFamily};
   display: block;
   font-size: 14px;