@arcblock/ux 2.9.91 → 2.10.0

package/lib/Theme/theme-provider.js

@@ -1,43 +1,36 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ThemeProvider;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _StyledEngineProvider = _interopRequireDefault(require("@mui/material/StyledEngineProvider"));
-var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
-var _theme = require("./theme");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const defaultTheme = (0, _theme.createTheme)();
+import PropTypes from 'prop-types';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import CssBaseline from '@mui/material/CssBaseline';
+import { createTheme } from './theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultTheme = createTheme();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-function ThemeProvider(_ref) {
-  let {
-    children,
-    theme,
-    injectFirst
-  } = _ref;
+export default function ThemeProvider({
+  children,
+  theme,
+  injectFirst
+}) {
   return (
     /*#__PURE__*/
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    (0, _jsxRuntime.jsx)(_StyledEngineProvider.default, {
+    _jsx(StyledEngineProvider, {
       injectFirst: injectFirst,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+      children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
         theme: theme,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
+        children: [/*#__PURE__*/_jsx(CssBaseline, {}), children]
       })
     })
   );
 }
 ThemeProvider.propTypes = {
-  children: _propTypes.default.any,
-  theme: _propTypes.default.any,
-  injectFirst: _propTypes.default.bool
+  children: PropTypes.any,
+  theme: PropTypes.any,
+  injectFirst: PropTypes.bool
 };
 ThemeProvider.defaultProps = {
   children: null,

package/lib/Theme/theme.js

@@ -1,30 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createTheme = exports.create = void 0;
-var _styles = require("@mui/material/styles");
-require("@fontsource/inter/latin-300.css");
-require("@fontsource/inter/latin-400.css");
-require("@fontsource/inter/latin-500.css");
-require("@fontsource/inter/latin-700.css");
-require("@fontsource/inter/latin-ext-300.css");
-require("@fontsource/inter/latin-ext-400.css");
-require("@fontsource/inter/latin-ext-500.css");
-require("@fontsource/inter/latin-ext-700.css");
-var _Colors = _interopRequireDefault(require("../Colors"));
-const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"]; // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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 muiDarkTheme = (0, _styles.createTheme)({
+import '@fontsource/inter/latin-300.css';
+import '@fontsource/inter/latin-400.css';
+import '@fontsource/inter/latin-500.css';
+import '@fontsource/inter/latin-700.css';
+import '@fontsource/inter/latin-ext-300.css';
+import '@fontsource/inter/latin-ext-400.css';
+import '@fontsource/inter/latin-ext-500.css';
+import '@fontsource/inter/latin-ext-700.css';
+import colors from '../Colors';
+const muiDarkTheme = _createTheme({
   palette: {
     mode: 'dark'
   }
@@ -32,33 +18,33 @@ const muiDarkTheme = (0, _styles.createTheme)({
 
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
-const create = exports.create = function create() {
-  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    {
-      mode = 'light',
-      pageWidth = 'md',
-      palette,
-      typography,
-      overrides
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  palette,
+  typography,
+  overrides,
+  ...rest
+} = {}) => {
   // palette 考虑 light & dark mode, dark mode 需要持续完善
   // - 能配合 ColorModeContext 使用
   // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette = mode === 'light' ? Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
+  const _palette = mode === 'light' ? Object.assign({
+    ...colors,
     background: {
-      paper: _Colors.default.common.white,
-      default: _Colors.default.background.default
+      paper: colors.common.white,
+      default: colors.background.default
     },
     mode
-  }), palette || {}) : Object.assign(_objectSpread(_objectSpread({}, muiDarkTheme.palette), {}, {
+  }, palette || {}) : Object.assign({
+    ...muiDarkTheme.palette,
     background: {
-      paper: _Colors.default.grey[900],
-      default: _Colors.default.grey[900]
+      paper: colors.grey[900],
+      default: colors.grey[900]
     },
     mode
-  }), palette || {});
-  const theme = (0, _styles.createTheme)(_objectSpread({
+  }, palette || {});
+  const theme = _createTheme({
     themeName: 'ArcBlock',
     palette: _palette,
     typography: Object.assign({
@@ -68,8 +54,8 @@ const create = exports.create = function create() {
         // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
         //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
         //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-        main: mode === 'light' ? '#222222' : _Colors.default.common.white,
-        gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
+        main: mode === 'light' ? '#222222' : colors.common.white,
+        gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
       },
       fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
       // button 默认使用粗体
@@ -77,7 +63,7 @@ const create = exports.create = function create() {
         fontWeight: 700
       }
     }, typography || {}),
-    components: _objectSpread({
+    components: {
       MuiButton: {
         styleOverrides: {
           root: {
@@ -94,11 +80,10 @@ const create = exports.create = function create() {
       },
       MuiTableCell: {
         styleOverrides: {
-          root: _ref2 => {
-            let {
-              ownerState
-            } = _ref2;
-            return _objectSpread({}, ownerState.size === 'small' ? {
+          root: ({
+            ownerState
+          }) => ({
+            ...(ownerState.size === 'small' ? {
               borderBottomWidth: '0',
               paddingTop: '8px',
               paddingBottom: '8px',
@@ -110,18 +95,19 @@ const create = exports.create = function create() {
               paddingBottom: '14px',
               paddingLeft: 0,
               paddingRight: '30px'
-            });
-          },
+            })
+          }),
           head: {
             textTransform: 'uppercase',
-            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
           },
           body: {
-            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
           }
         }
-      }
-    }, overrides),
+      },
+      ...overrides
+    },
     pageWidth,
     // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
     //       可以从 Colors 模块/theme.palette/mui colors 中取值
@@ -145,9 +131,10 @@ const create = exports.create = function create() {
       danger: '#D0021B',
       lightGrey: '#BCBCBC'
     },
-    mode
-  }, rest));
-  const enhanced = (0, _styles.responsiveFontSizes)(theme, {
+    mode,
+    ...rest
+  });
+  const enhanced = responsiveFontSizes(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,
     factor: 3,
@@ -155,4 +142,4 @@ const create = exports.create = function create() {
   });
   return enhanced;
 };
-const createTheme = exports.createTheme = create;
+export const createTheme = create;

package/lib/Toast/index.js

@@ -1,32 +1,24 @@
-"use strict";
+import { createRef } from 'react';
+import { SnackbarProvider, useSnackbar } from 'notistack';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import noop from 'lodash/noop';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToastProvider = ToastProvider;
-exports.default = void 0;
-var _react = require("react");
-var _notistack = require("notistack");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+/**
  *
  * @typedef {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject, ...args: any[]) => import('notistack').SnackbarKey} EnqueueSnackbarFunc
  *
- */ /**
+ */
+
+/**
  * @type {import('notistack').ProviderContext['enqueueSnackbar']}
  */
-let _success = _noop.default;
-let _error = _noop.default;
-let _warning = _noop.default;
-let _info = _noop.default;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+let success = noop;
+let error = noop;
+let warning = noop;
+let info = noop;
 /**
  * @description
  * @param {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject) => import('notistack').SnackbarKey} enqueueSnackbar
@@ -34,24 +26,23 @@ let _info = _noop.default;
  * @param {import('notistack').VariantType} variant
  * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
  */
-const genFn = (enqueueSnackbar, variant) => function (message) {
-  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  enqueueSnackbar(message, _objectSpread({
+const genFn = (enqueueSnackbar, variant) => (message, opts = {}) => {
+  enqueueSnackbar(message, {
     autoHideDuration: 5000,
-    variant
-  }, opts));
+    variant,
+    ...opts
+  });
 };
 
 // eslint-disable-next-line react/prop-types
-function ToastProvider(_ref) {
-  let {
-    children
-  } = _ref;
-  const notistackRef = /*#__PURE__*/(0, _react.createRef)();
+function ToastProvider({
+  children
+}) {
+  const notistackRef = /*#__PURE__*/createRef();
   const onClickDismiss = key => () => {
     notistackRef.current.closeSnackbar(key);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_notistack.SnackbarProvider, {
+  return /*#__PURE__*/_jsxs(SnackbarProvider, {
     anchorOrigin: {
       vertical: 'top',
       horizontal: 'right'
@@ -59,71 +50,48 @@ function ToastProvider(_ref) {
     ref: notistackRef
     // eslint-disable-next-line react/no-unstable-nested-components
     ,
-    action: key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    action: key => /*#__PURE__*/_jsx(IconButton, {
       "aria-label": "close",
       color: "inherit",
       onClick: onClickDismiss(key),
       size: "large",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+      children: /*#__PURE__*/_jsx(CloseIcon, {
         style: {
           fontSize: 16
         }
       })
     }, "close"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Toast, {}), children]
+    children: [/*#__PURE__*/_jsx(Toast, {}), children]
   });
 }
 function Toast() {
   const {
     enqueueSnackbar
-  } = (0, _notistack.useSnackbar)();
-  _success = genFn(enqueueSnackbar, 'success');
-  _error = genFn(enqueueSnackbar, 'error');
-  _warning = genFn(enqueueSnackbar, 'warning');
-  _info = genFn(enqueueSnackbar, 'info');
+  } = useSnackbar();
+  success = genFn(enqueueSnackbar, 'success');
+  error = genFn(enqueueSnackbar, 'error');
+  warning = genFn(enqueueSnackbar, 'warning');
+  info = genFn(enqueueSnackbar, 'info');
   return null;
 }
-var _default = exports.default = {
+export { ToastProvider };
+export default {
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  success: function success(message) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-    return _success(message, options, ...args);
-  },
+  success: (message, options = {}, ...args) => success(message, options, ...args),
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  error: function error(message) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      autoHideDuration: 15000
-    };
-    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      args[_key2 - 2] = arguments[_key2];
-    }
-    return _error(message, options, ...args);
-  },
+  error: (message, options = {
+    autoHideDuration: 15000
+  }, ...args) => error(message, options, ...args),
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  warning: function warning(message) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    for (var _len3 = arguments.length, args = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
-      args[_key3 - 2] = arguments[_key3];
-    }
-    return _warning(message, options, ...args);
-  },
+  warning: (message, options = {}, ...args) => warning(message, options, ...args),
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  info: function info(message) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
-      args[_key4 - 2] = arguments[_key4];
-    }
-    return _info(message, options, ...args);
-  }
+  info: (message, options = {}, ...args) => info(message, options, ...args)
 };

package/lib/Typography/index.js

@@ -1,41 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Typography;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["minFontSize", "fontSize", "children", "sx"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
-function Typography(_ref) {
-  let {
-      minFontSize,
-      fontSize,
-      children,
-      sx
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const refMock = (0, _react.useRef)(null);
-  const refContainer = (0, _react.useRef)(null);
-  const state = (0, _ahooks.useReactive)({
+import PropTyps from 'prop-types';
+import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
+import { useCreation, useReactive, useSize } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Typography({
+  minFontSize,
+  fontSize,
+  children,
+  sx,
+  ...rest
+}) {
+  const refMock = useRef(null);
+  const refContainer = useRef(null);
+  const state = useReactive({
     fontSize,
     loading: true,
     initialSize: undefined
   });
-  const mockSize = (0, _ahooks.useSize)(refMock.current);
-  const containerSize = (0, _ahooks.useSize)(refContainer.current);
-  (0, _react.useEffect)(() => {
+  const mockSize = useSize(refMock.current);
+  const containerSize = useSize(refContainer.current);
+  useEffect(() => {
     if (state.loading) {
       if (fontSize === 'auto') {
         if (mockSize && !state.initialSize) {
@@ -55,49 +40,53 @@ function Typography(_ref) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fontSize, mockSize === null || mockSize === void 0 ? void 0 : mockSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
-  const loading = (0, _ahooks.useCreation)(() => {
+  }, [fontSize, mockSize?.width, containerSize?.width]);
+  const loading = useCreation(() => {
     if (fontSize === 'auto') {
       return state.loading;
     }
     return false;
   }, [fontSize, state.loading]);
-  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+  return loading ? /*#__PURE__*/_jsxs(Box, {
     ref: refContainer,
     flex: 1,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/_jsx(MuiTypography, {
+      ...rest,
       sx: sx,
       noWrap: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+      children: /*#__PURE__*/_jsx(Skeleton, {
         variant: "text",
         sx: {
           fontSize: '1rem'
         }
       })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({
-      ref: refMock
-    }, rest), {}, {
-      sx: _objectSpread(_objectSpread({}, sx), {}, {
-        fontSize: "".concat(state.fontSize, "px !important"),
+    }), /*#__PURE__*/_jsx(MuiTypography, {
+      ref: refMock,
+      ...rest,
+      sx: {
+        ...sx,
+        fontSize: `${state.fontSize}px !important`,
         position: 'fixed',
         top: -1000,
         left: -1000
-      }),
+      },
       noWrap: true,
       children: children
-    }))]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
-    sx: _objectSpread(_objectSpread({}, sx), {}, {
-      fontSize: "".concat(state.fontSize, "px !important")
-    }),
+    })]
+  }) : /*#__PURE__*/_jsx(MuiTypography, {
+    ...rest,
+    sx: {
+      ...sx,
+      fontSize: `${state.fontSize}px !important`
+    },
     children: children
-  }));
+  });
 }
 Typography.propTypes = {
-  fontSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  children: _propTypes.default.any.isRequired,
-  minFontSize: _propTypes.default.number,
-  sx: _propTypes.default.object
+  fontSize: PropTyps.oneOfType([PropTyps.string, PropTyps.number]),
+  children: PropTyps.any.isRequired,
+  minFontSize: PropTyps.number,
+  sx: PropTyps.object
 };
 Typography.defaultProps = {
   fontSize: undefined,

package/lib/Util/constant.js

@@ -1,26 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WELLKNOWN_SERVICE_PATH_PREFIX = exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.PASSPORT_STATUS = exports.OAUTH_PROVIDER = exports.NAVIGATION_URL = exports.LOGIN_PROVIDER_NAME = exports.LOGIN_PROVIDER = exports.DID_PREFIX = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
-const DEFAULT_TIMEOUT = exports.DEFAULT_TIMEOUT = 5 * 60;
-const DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_WINDOW_TIMEOUT = 30 * 60;
-const WELLKNOWN_SERVICE_PATH_PREFIX = exports.WELLKNOWN_SERVICE_PATH_PREFIX = '/.well-known/service';
-const AUTH_SERVICE_PREFIX = exports.AUTH_SERVICE_PREFIX = '/.well-known/service';
-const SESSION_TOKEN_STORAGE_KEY = exports.SESSION_TOKEN_STORAGE_KEY = 'login_token';
-const REFRESH_TOKEN_STORAGE_KEY = exports.REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
-const RELAY_SOCKET_PREFIX = exports.RELAY_SOCKET_PREFIX = '/.well-known/service';
-const API_DID_PREFIX = exports.API_DID_PREFIX = '/api/did';
-const DASHBOARD_URL = exports.DASHBOARD_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin");
-const PROFILE_URL = exports.PROFILE_URL = "".concat(AUTH_SERVICE_PREFIX, "/user");
-const NAVIGATION_URL = exports.NAVIGATION_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin/navigation");
-const DID_PREFIX = exports.DID_PREFIX = 'did:abt:';
-const PASSPORT_STATUS = exports.PASSPORT_STATUS = {
+export const DEFAULT_TIMEOUT = 5 * 60;
+export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
+export const WELLKNOWN_SERVICE_PATH_PREFIX = '/.well-known/service';
+export const AUTH_SERVICE_PREFIX = '/.well-known/service';
+export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
+export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
+export const RELAY_SOCKET_PREFIX = '/.well-known/service';
+export const API_DID_PREFIX = '/api/did';
+export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
+export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
+export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
+export const DID_PREFIX = 'did:abt:';
+export const PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked'
 };
-const LOGIN_PROVIDER = exports.LOGIN_PROVIDER = {
+export const LOGIN_PROVIDER = {
   // EMAIL: 'Email',
   AUTH0: 'auth0',
   APPLE: 'apple',
@@ -29,7 +23,7 @@ const LOGIN_PROVIDER = exports.LOGIN_PROVIDER = {
   WALLET: 'wallet',
   NFT: 'nft'
 };
-const LOGIN_PROVIDER_NAME = exports.LOGIN_PROVIDER_NAME = {
+export const LOGIN_PROVIDER_NAME = {
   // [LOGIN_PROVIDER.EMAIL]: 'Email',
   [LOGIN_PROVIDER.AUTH0]: 'Email',
   [LOGIN_PROVIDER.APPLE]: 'Apple',
@@ -40,7 +34,7 @@ const LOGIN_PROVIDER_NAME = exports.LOGIN_PROVIDER_NAME = {
 };
 
 // HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
-const OAUTH_PROVIDER = exports.OAUTH_PROVIDER = {
+export const OAUTH_PROVIDER = {
   auth0: 'Email',
   apple: 'Apple',
   github: 'Github',