@arcblock/ux 2.9.16 → 2.9.18

package/es/Avatar/did-motif.js

@@ -1,6 +1,7 @@
 import { useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { update } from '@arcblock/did-motif';
+import { Box } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
 function DIDMotif({
   did,
@@ -25,13 +26,15 @@ function DIDMotif({
       ...rest.style,
       width: '100%'
     };
-    return /*#__PURE__*/_jsx("svg", {
+    return /*#__PURE__*/_jsx(Box, {
+      component: "svg",
       ref: svgRef,
       ...rest,
       style: styles
     });
   }
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsx(Box, {
+    component: "span",
     ...rest,
     style: {
       display: 'inline-block',
@@ -39,7 +42,8 @@ function DIDMotif({
       height: size,
       ...rest.style
     },
-    children: /*#__PURE__*/_jsx("svg", {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "svg",
       ref: svgRef,
       style: {
         width: '100%'

package/es/Avatar/index.js

@@ -6,7 +6,6 @@ import { Shape } from '@arcblock/did-motif';
 import Box from '@mui/material/Box';
 import Img from '../Img';
 import { mergeProps, isEthereumDid } from '../Util';
-import { styled } from '../Theme';
 import DIDMotif from './did-motif';
 import blockies from './etherscan-blockies';
 
@@ -59,13 +58,25 @@ function Avatar(props) {
 
   // 如果显式传入 src 则直接使用 src
   if (src && !imgError) {
-    return /*#__PURE__*/_jsx(StyledImg, {
+    return /*#__PURE__*/_jsx(Img, {
       width: size,
       src: src,
       alt: did,
       onError: () => setImgError(true),
       ...rest,
-      className: `avatar-img--${variant} ${rest.className}`
+      // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
+      className: `avatar-img--${variant} ${rest?.className || ''}`,
+      sx: {
+        '& .avatar-img--rounded': {
+          borderRadius: '4px',
+          overflow: 'hidden'
+        },
+        '& .avatar-img--circle': {
+          borderRadius: '100%',
+          overflow: 'hidden'
+        },
+        ...rest.sx
+      }
     });
   }
   // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
@@ -73,9 +84,25 @@ function Avatar(props) {
     if (blockiesPadding) {
       // blocky icon 要与灰色卡片矩形留有空间
       const padding = size > 24 ? 4 : 2;
-      return /*#__PURE__*/_jsx(BlockyIconContainer, {
-        $size: size,
+      return /*#__PURE__*/_jsx(Box, {
         ...rest,
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          width: size,
+          height: size,
+          '.blocky-icon-inner': {
+            boxSizing: 'border-box',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: size,
+            height: size * 0.7,
+            borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
+            background: '#ddd'
+          },
+          ...rest.sx
+        },
         children: /*#__PURE__*/_jsx("div", {
           className: "blocky-icon-inner",
           children: /*#__PURE__*/_jsx(Img, {
@@ -87,6 +114,7 @@ function Avatar(props) {
       });
     }
     return /*#__PURE__*/_jsx(Img, {
+      ...rest,
       width: size,
       src: blockyIcon,
       alt: did,
@@ -127,32 +155,6 @@ Avatar.defaultProps = {
   shape: '',
   responsive: false
 };
-const BlockyIconContainer = styled(Box)`
-  display: flex;
-  align-items: center;
-  width: ${props => props.$size}px;
-  height: ${props => props.$size}px;
-  .blocky-icon-inner {
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: ${props => props.$size}px;
-    height: ${props => props.$size * 0.7}px;
-    border-radius: ${props => Math.min(10, Math.floor(0.1 * props.$size + 2))}px;
-    background: #ddd;
-  }
-`;
-const StyledImg = styled(Img)`
-  &.avatar-img--rounded {
-    border-radius: 4px;
-    overflow: hidden;
-  }
-  &.avatar-img--circle {
-    border-radius: 100%;
-    overflow: hidden;
-  }
-`;
 export default function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = {

package/es/Img/index.js

@@ -4,8 +4,8 @@ import { useInView } from 'react-intersection-observer';
 import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
 import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
+import { Box } from '@mui/material';
 import noop from 'lodash/noop';
-import { styled } from '../Theme';
 
 /**
  * @typedef {Object} ImgExProps
@@ -36,41 +36,6 @@ const classes = {
   root: `${PREFIX}-root`
 };
 
-/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Root = styled('div')(() => ({
-  [`& .${classes.root}`]: {
-    position: 'relative',
-    overflow: 'hidden',
-    '& .image--state, & .image--img': {
-      minWidth: '100%',
-      minHeight: '100%',
-      position: 'absolute',
-      top: 0,
-      left: '50%',
-      transform: 'translateX(-50%)'
-    },
-    '& .image--state': {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: '#999',
-      background: '#eee',
-      width: '100%',
-      height: '100%'
-    },
-    '& .image--img': {
-      opacity: 0,
-      visibility: 'hidden'
-    },
-    '& .image--icon': {
-      fontSize: 30,
-      maxWidth: '80%',
-      maxHeight: '80%'
-    }
-  }
-}));
-
 /**
  *
  * @param {ImgProps} props
@@ -152,10 +117,45 @@ function Img({
   return (
     /*#__PURE__*/
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    _jsx(Root, {
+    _jsx(Box, {
+      "data-id": "2",
       ref: ref,
       style: outerStyle,
       ...rest,
+      sx: {
+        [`& .${classes.root}`]: {
+          position: 'relative',
+          overflow: 'hidden',
+          '& .image--state, & .image--img': {
+            minWidth: '100%',
+            minHeight: '100%',
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'translateX(-50%)'
+          },
+          '& .image--state': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#999',
+            background: '#eee',
+            width: '100%',
+            height: '100%'
+          },
+          '& .image--img': {
+            opacity: 0,
+            visibility: 'hidden'
+          },
+          '& .image--icon': {
+            fontSize: 30,
+            maxWidth: '80%',
+            maxHeight: '80%'
+          }
+        },
+        ...rest.sx
+      },
       children: /*#__PURE__*/_jsxs("div", {
         className: `image ${className} ${classes.root}`,
         style: mergedStyle,

package/es/Layout/dashboard/index.js

@@ -232,7 +232,7 @@ const Wrapper = styled('div', {
       display: flex;
       justify-content: center;
       /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
-      width: ${props => props.sidebarWidth - 24 * 2}px;
+      min-width: ${props => props.sidebarWidth - 24 * 2}px;
     }
     &.dashboard-dense {
       .header-logo {

package/es/Locale/selector.js

@@ -65,7 +65,7 @@ export default function LocaleSelector(props) {
       fontSize: size,
       color: theme.palette.text.secondary,
       style: {
-        transform: 'scale(1.15)'
+        transform: 'scale(1.10)'
       }
     });
   }, [Icon, theme?.palette?.text?.secondary, size]);

package/es/SessionBlocklet/index.js

@@ -51,7 +51,7 @@ export default function SessionBlocklet({
         icon: DashboardOutlineRoundedIcon,
         fontSize: size,
         style: {
-          transform: 'scale(1.10)'
+          transform: 'scale(1.08)'
         }
       })
     }), /*#__PURE__*/_jsx(Popper, {

package/lib/Avatar/did-motif.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _didMotif = require("@arcblock/did-motif");
+var _material = require("@mui/material");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["did", "size", "animation", "shape", "responsive"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,19 +41,23 @@ function DIDMotif(_ref) {
     const styles = _objectSpread(_objectSpread({}, rest.style), {}, {
       width: '100%'
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
+      component: "svg",
       ref: svgRef
     }, rest), {}, {
       style: styles
     }));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
+    component: "span"
+  }, rest), {}, {
     style: _objectSpread({
       display: 'inline-block',
       width: size,
       height: size
     }, rest.style),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      component: "svg",
       ref: svgRef,
       style: {
         width: '100%'

package/lib/Avatar/index.js

@@ -11,11 +11,9 @@ var _didMotif = require("@arcblock/did-motif");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Img = _interopRequireDefault(require("../Img"));
 var _Util = require("../Util");
-var _Theme = require("../Theme");
 var _didMotif2 = _interopRequireDefault(require("./did-motif"));
 var _etherscanBlockies = _interopRequireDefault(require("./etherscan-blockies"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
 const _excluded = ["did", "size", "src", "variant", "animation", "shape", "blockiesPadding", "responsive"];
 /* eslint-disable react/no-unused-prop-types */
 /**
@@ -37,7 +35,6 @@ const _excluded = ["did", "size", "src", "variant", "animation", "shape", "block
  * @returns {JSX.Element}
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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; }
@@ -74,13 +71,24 @@ function Avatar(props) {
 
   // 如果显式传入 src 则直接使用 src
   if (src && !imgError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, _objectSpread(_objectSpread({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread(_objectSpread({
       width: size,
       src: src,
       alt: did,
       onError: () => setImgError(true)
     }, rest), {}, {
-      className: "avatar-img--".concat(variant, " ").concat(rest.className)
+      // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
+      className: "avatar-img--".concat(variant, " ").concat((rest === null || rest === void 0 ? void 0 : rest.className) || ''),
+      sx: _objectSpread({
+        '& .avatar-img--rounded': {
+          borderRadius: '4px',
+          overflow: 'hidden'
+        },
+        '& .avatar-img--circle': {
+          borderRadius: '100%',
+          overflow: 'hidden'
+        }
+      }, rest.sx)
     }));
   }
   // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
@@ -88,9 +96,23 @@ function Avatar(props) {
     if (blockiesPadding) {
       // blocky icon 要与灰色卡片矩形留有空间
       const padding = size > 24 ? 4 : 2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockyIconContainer, _objectSpread(_objectSpread({
-        $size: size
-      }, rest), {}, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, _objectSpread(_objectSpread({}, rest), {}, {
+        sx: _objectSpread({
+          display: 'flex',
+          alignItems: 'center',
+          width: size,
+          height: size,
+          '.blocky-icon-inner': {
+            boxSizing: 'border-box',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: size,
+            height: size * 0.7,
+            borderRadius: "".concat(Math.min(10, Math.floor(0.1 * size + 2)), "px"),
+            background: '#ddd'
+          }
+        }, rest.sx),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "blocky-icon-inner",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
@@ -101,14 +123,14 @@ function Avatar(props) {
         })
       }));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread(_objectSpread({}, rest), {}, {
       width: size,
       src: blockyIcon,
       alt: did,
       style: {
         marginRight: 4
       }
-    });
+    }));
   }
   if (did) {
     // 渲染 did motif
@@ -141,8 +163,6 @@ Avatar.defaultProps = {
   shape: '',
   responsive: false
 };
-const BlockyIconContainer = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: ", "px;\n  .blocky-icon-inner {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background: #ddd;\n  }\n"])), props => props.$size, props => props.$size, props => props.$size, props => props.$size * 0.7, props => Math.min(10, Math.floor(0.1 * props.$size + 2)));
-const StyledImg = (0, _Theme.styled)(_Img.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.avatar-img--rounded {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  &.avatar-img--circle {\n    border-radius: 100%;\n    overflow: hidden;\n  }\n"])));
 function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = {

package/lib/Img/index.js

@@ -10,8 +10,8 @@ var _reactIntersectionObserver = require("react-intersection-observer");
 var _warningRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/warning-rounded"));
 var _imageRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/image-rounded"));
 var _react2 = require("@iconify/react");
+var _material = require("@mui/material");
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
 /**
@@ -48,41 +48,6 @@ const classes = {
   root: "".concat(PREFIX, "-root")
 };
 
-/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Root = (0, _Theme.styled)('div')(() => ({
-  ["& .".concat(classes.root)]: {
-    position: 'relative',
-    overflow: 'hidden',
-    '& .image--state, & .image--img': {
-      minWidth: '100%',
-      minHeight: '100%',
-      position: 'absolute',
-      top: 0,
-      left: '50%',
-      transform: 'translateX(-50%)'
-    },
-    '& .image--state': {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: '#999',
-      background: '#eee',
-      width: '100%',
-      height: '100%'
-    },
-    '& .image--img': {
-      opacity: 0,
-      visibility: 'hidden'
-    },
-    '& .image--icon': {
-      fontSize: 30,
-      maxWidth: '80%',
-      maxHeight: '80%'
-    }
-  }
-}));
-
 /**
  *
  * @param {ImgProps} props
@@ -164,10 +129,44 @@ function Img(_ref) {
   return (
     /*#__PURE__*/
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    (0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({
+    (0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
+      "data-id": "2",
       ref: ref,
       style: outerStyle
     }, rest), {}, {
+      sx: _objectSpread({
+        ["& .".concat(classes.root)]: {
+          position: 'relative',
+          overflow: 'hidden',
+          '& .image--state, & .image--img': {
+            minWidth: '100%',
+            minHeight: '100%',
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'translateX(-50%)'
+          },
+          '& .image--state': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#999',
+            background: '#eee',
+            width: '100%',
+            height: '100%'
+          },
+          '& .image--img': {
+            opacity: 0,
+            visibility: 'hidden'
+          },
+          '& .image--icon': {
+            fontSize: 30,
+            maxWidth: '80%',
+            maxHeight: '80%'
+          }
+        }
+      }, rest.sx),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "image ".concat(className, " ").concat(classes.root),
         style: mergedStyle,

package/lib/Layout/dashboard/index.js

@@ -206,7 +206,7 @@ Dashboard.defaultProps = {
 };
 const Wrapper = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'sidebarWidth'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      min-width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"])));
 
 // 兼容旧版 dashboard

package/lib/Locale/selector.js

@@ -83,7 +83,7 @@ function LocaleSelector(props) {
       fontSize: size,
       color: theme.palette.text.secondary,
       style: {
-        transform: 'scale(1.15)'
+        transform: 'scale(1.10)'
       }
     });
   }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary, size]);

package/lib/SessionBlocklet/index.js

@@ -64,7 +64,7 @@ function SessionBlocklet(_ref) {
         icon: _dashboardOutlineRounded.default,
         fontSize: size,
         style: {
-          transform: 'scale(1.10)'
+          transform: 'scale(1.08)'
         }
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.16",
+  "version": "2.9.18",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -344,12 +344,12 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "d970601a888adbd27f76ee9ce490bc8f93f11833",
+  "gitHead": "435fbdda42f68b81af5b09ce49fc874142d17e74",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.16",
-    "@arcblock/nft-display": "^2.9.16",
-    "@arcblock/react-hooks": "^2.9.16",
+    "@arcblock/icons": "^2.9.18",
+    "@arcblock/nft-display": "^2.9.18",
+    "@arcblock/react-hooks": "^2.9.18",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Avatar/did-motif.jsx

@@ -1,6 +1,7 @@
 import { useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { update } from '@arcblock/did-motif';
+import { Box } from '@mui/material';
 
 function DIDMotif({ did, size, animation, shape, responsive, ...rest }) {
   const svgRef = useRef(null);
@@ -12,12 +13,12 @@ function DIDMotif({ did, size, animation, shape, responsive, ...rest }) {
   if (responsive) {
     // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
     const styles = { ...rest.style, width: '100%' };
-    return <svg ref={svgRef} {...rest} style={styles} />;
+    return <Box component="svg" ref={svgRef} {...rest} style={styles} />;
   }
   return (
-    <span {...rest} style={{ display: 'inline-block', width: size, height: size, ...rest.style }}>
-      <svg ref={svgRef} style={{ width: '100%' }} />
-    </span>
+    <Box component="span" {...rest} style={{ display: 'inline-block', width: size, height: size, ...rest.style }}>
+      <Box component="svg" ref={svgRef} style={{ width: '100%' }} />
+    </Box>
   );
 }
 

package/src/Avatar/index.jsx

@@ -6,7 +6,6 @@ import { Shape } from '@arcblock/did-motif';
 import Box from '@mui/material/Box';
 import Img from '../Img';
 import { mergeProps, isEthereumDid } from '../Util';
-import { styled } from '../Theme';
 import DIDMotif from './did-motif';
 import blockies from './etherscan-blockies';
 
@@ -51,13 +50,25 @@ function Avatar(props) {
   // 如果显式传入 src 则直接使用 src
   if (src && !imgError) {
     return (
-      <StyledImg
+      <Img
         width={size}
         src={src}
         alt={did}
         onError={() => setImgError(true)}
         {...rest}
-        className={`avatar-img--${variant} ${rest.className}`}
+        // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
+        className={`avatar-img--${variant} ${rest?.className || ''}`}
+        sx={{
+          '& .avatar-img--rounded': {
+            borderRadius: '4px',
+            overflow: 'hidden',
+          },
+          '& .avatar-img--circle': {
+            borderRadius: '100%',
+            overflow: 'hidden',
+          },
+          ...rest.sx,
+        }}
       />
     );
   }
@@ -67,15 +78,33 @@ function Avatar(props) {
       // blocky icon 要与灰色卡片矩形留有空间
       const padding = size > 24 ? 4 : 2;
       return (
-        <BlockyIconContainer $size={size} {...rest}>
+        <Box
+          {...rest}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            width: size,
+            height: size,
+            '.blocky-icon-inner': {
+              boxSizing: 'border-box',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: size,
+              height: size * 0.7,
+              borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
+              background: '#ddd',
+            },
+            ...rest.sx,
+          }}>
           <div className="blocky-icon-inner">
             <Img width={size * 0.7 - padding * 2} src={blockyIcon} alt={did} />
           </div>
-        </BlockyIconContainer>
+        </Box>
       );
     }
 
-    return <Img width={size} src={blockyIcon} alt={did} style={{ marginRight: 4 }} />;
+    return <Img {...rest} width={size} src={blockyIcon} alt={did} style={{ marginRight: 4 }} />;
   }
 
   if (did) {
@@ -115,34 +144,6 @@ Avatar.defaultProps = {
   responsive: false,
 };
 
-const BlockyIconContainer = styled(Box)`
-  display: flex;
-  align-items: center;
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  .blocky-icon-inner {
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => props.$size}px;
-    height: ${(props) => props.$size * 0.7}px;
-    border-radius: ${(props) => Math.min(10, Math.floor(0.1 * props.$size + 2))}px;
-    background: #ddd;
-  }
-`;
-
-const StyledImg = styled(Img)`
-  &.avatar-img--rounded {
-    border-radius: 4px;
-    overflow: hidden;
-  }
-  &.avatar-img--circle {
-    border-radius: 100%;
-    overflow: hidden;
-  }
-`;
-
 export default function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = { rounded: '4px', circle: '100%' }[props.variant] || 0;

package/src/Img/index.jsx

@@ -4,10 +4,9 @@ import { useInView } from 'react-intersection-observer';
 import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
 import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
+import { Box } from '@mui/material';
 import noop from 'lodash/noop';
 
-import { styled } from '../Theme';
-
 /**
  * @typedef {Object} ImgExProps
  * @property {string} src - required
@@ -37,41 +36,6 @@ const classes = {
   root: `${PREFIX}-root`,
 };
 
-/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Root = styled('div')(() => ({
-  [`& .${classes.root}`]: {
-    position: 'relative',
-    overflow: 'hidden',
-    '& .image--state, & .image--img': {
-      minWidth: '100%',
-      minHeight: '100%',
-      position: 'absolute',
-      top: 0,
-      left: '50%',
-      transform: 'translateX(-50%)',
-    },
-    '& .image--state': {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: '#999',
-      background: '#eee',
-      width: '100%',
-      height: '100%',
-    },
-    '& .image--img': {
-      opacity: 0,
-      visibility: 'hidden',
-    },
-    '& .image--icon': {
-      fontSize: 30,
-      maxWidth: '80%',
-      maxHeight: '80%',
-    },
-  },
-}));
-
 /**
  *
  * @param {ImgProps} props
@@ -158,7 +122,45 @@ function Img({
 
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    <Root ref={ref} style={outerStyle} {...rest}>
+    <Box
+      data-id="2"
+      ref={ref}
+      style={outerStyle}
+      {...rest}
+      sx={{
+        [`& .${classes.root}`]: {
+          position: 'relative',
+          overflow: 'hidden',
+          '& .image--state, & .image--img': {
+            minWidth: '100%',
+            minHeight: '100%',
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'translateX(-50%)',
+          },
+          '& .image--state': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#999',
+            background: '#eee',
+            width: '100%',
+            height: '100%',
+          },
+          '& .image--img': {
+            opacity: 0,
+            visibility: 'hidden',
+          },
+          '& .image--icon': {
+            fontSize: 30,
+            maxWidth: '80%',
+            maxHeight: '80%',
+          },
+        },
+        ...rest.sx,
+      }}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
@@ -172,7 +174,7 @@ function Img({
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
       </div>
-    </Root>
+    </Box>
   );
 }
 

package/src/Layout/dashboard/index.js

@@ -199,7 +199,7 @@ const Wrapper = styled('div', {
       display: flex;
       justify-content: center;
       /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
-      width: ${(props) => props.sidebarWidth - 24 * 2}px;
+      min-width: ${(props) => props.sidebarWidth - 24 * 2}px;
     }
     &.dashboard-dense {
       .header-logo {

package/src/Locale/selector.jsx

@@ -63,7 +63,7 @@ export default function LocaleSelector(props) {
         icon={LanguageIcon}
         fontSize={size}
         color={theme.palette.text.secondary}
-        style={{ transform: 'scale(1.15)' }}
+        style={{ transform: 'scale(1.10)' }}
       />
     );
   }, [Icon, theme?.palette?.text?.secondary, size]);

package/src/SessionBlocklet/index.jsx

@@ -55,7 +55,7 @@ export default function SessionBlocklet({ session, locale, size }) {
   return (
     <>
       <IconButton size="medium" ref={popperAnchorRef} onClick={() => onTogglePopper()}>
-        <Icon icon={DashboardOutlineRoundedIcon} fontSize={size} style={{ transform: 'scale(1.10)' }} />
+        <Icon icon={DashboardOutlineRoundedIcon} fontSize={size} style={{ transform: 'scale(1.08)' }} />
       </IconButton>
       <Popper
         open={currentState.open}