@blocklet/ui-react 2.4.2 → 2.4.5

package/lib/Footer/brand.js

@@ -9,9 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -41,7 +39,7 @@ function Brand(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
 
   if (!name && !logo && !description) {
     return null;
@@ -78,5 +76,4 @@ Brand.defaultProps = {
   logo: '',
   description: ''
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-size: 14px;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n  .footer-brand-logo {\n    display: flex;\n    align-items: center;\n    margin-right: 16px;\n    line-height: 1;\n    img,\n    svg {\n      width: auto;\n      height: 44px;\n      max-height: 44px;\n    }\n  }\n  .footer-brand-name {\n    font-size: 16px;\n    font-weight: bold;\n  }\n  .footer-brand-desc {\n    margin-top: 16px;\n  }\n\n  ", " {\n    width: auto;\n  }\n\n  ", " {\n    .footer-brand-logo {\n      img,\n      svg {\n        height: 32px;\n        max-height: 32px;\n      }\n    }\n  }\n"])), props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-size: 14px;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n  .footer-brand-logo {\n    display: flex;\n    align-items: center;\n    margin-right: 16px;\n    line-height: 1;\n    img,\n    svg {\n      width: auto;\n      height: 44px;\n      max-height: 44px;\n    }\n  }\n  .footer-brand-name {\n    font-size: 16px;\n    font-weight: bold;\n  }\n  .footer-brand-desc {\n    margin-top: 16px;\n  }\n\n  ", " {\n    width: auto;\n  }\n\n  ", " {\n    .footer-brand-logo {\n      img,\n      svg {\n        height: 32px;\n        max-height: 32px;\n      }\n    }\n  }\n"])), props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/copyright.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Copyright;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Theme = require("@arcblock/ux/lib/Theme");
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -49,5 +49,4 @@ Copyright.defaultProps = {
   owner: 'ArcBlock, Inc.',
   year: "".concat(new Date().getFullYear())
 };
-
-const Root = _styled.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 13px;\n"])));
+const Root = (0, _Theme.styled)('p')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 0;\n  font-size: 13px;\n"])));

package/lib/Footer/index.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _reactErrorBoundary = require("react-error-boundary");
 
@@ -56,7 +54,7 @@ function Footer(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const muiTheme = (0, _styles.useTheme)();
+  const muiTheme = (0, _Theme.useTheme)();
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -115,7 +113,7 @@ Footer.propTypes = {
 Footer.defaultProps = {
   meta: {}
 };
-const StyledInternalFooter = (0, _styled.default)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.$theme.palette.grey[600], _ref2 => {
+const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.$theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Footer/internal-footer.js

@@ -21,21 +21,22 @@ var _plain = _interopRequireDefault(require("./layout/plain"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["brand", "navigation", "socialMedia", "copyright", "links"];
+const _excluded = ["brand", "navigation", "socialMedia", "copyright", "links", "layout"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 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; }
 
 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; }
 
-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 layouts = [{
+  name: 'plain',
   // navigation 数据为空时, 使用简单布局
   support: (_, data) => {
     var _data$navigation;
@@ -44,10 +45,14 @@ const layouts = [{
   },
   component: _plain.default
 }, {
+  name: 'standard',
   // 默认标准布局
   support: () => true,
   component: _standard.default
 }];
+const layoutsKeyByName = layouts.reduce((acc, cur) => _objectSpread(_objectSpread({}, acc), {}, {
+  [cur.name]: cur
+}), {});
 /**
  * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
  */
@@ -58,7 +63,8 @@ function InternalFooter(props) {
     navigation,
     socialMedia,
     copyright,
-    links
+    links,
+    layout
   } = props,
         rest = _objectWithoutProperties(props, _excluded);
 
@@ -106,9 +112,23 @@ function InternalFooter(props) {
     copyright: renderCopyright(),
     links: renderLinks()
   };
-  const LayoutComponent = layouts.find(layout => layout.support(elements, props)).component;
+  let LayoutComponent = null;
+
+  if (layout === 'auto') {
+    LayoutComponent = layouts.find(item => item.support(elements, props)).component;
+  } else {
+    var _layoutsKeyByName$lay;
+
+    LayoutComponent = (_layoutsKeyByName$lay = layoutsKeyByName[layout]) === null || _layoutsKeyByName$lay === void 0 ? void 0 : _layoutsKeyByName$lay.component;
+  }
+
+  if (!LayoutComponent) {
+    throw new Error("layout ".concat(layout, " is not supported."));
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutComponent, _objectSpread({
-    elements: elements
+    elements: elements,
+    data: props
   }, rest));
 }
 
@@ -134,14 +154,17 @@ InternalFooter.propTypes = {
   links: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.node,
     link: _propTypes.default.string
-  }))
+  })),
+  // 可显式指定 footer layout, 默认根据内容自动决定 layout
+  layout: _propTypes.default.oneOf(['auto', 'standard', 'plain'])
 };
 InternalFooter.defaultProps = {
   brand: null,
   navigation: null,
   copyright: null,
   socialMedia: null,
-  links: null
+  links: null,
+  layout: 'auto'
 };
 var _default = InternalFooter;
 exports.default = _default;

package/lib/Footer/layout/plain.js

@@ -9,15 +9,17 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
+var _Theme = require("@arcblock/ux/lib/Theme");
+
+var _row = _interopRequireDefault(require("./row"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["elements"];
+const _excluded = ["elements", "data"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,17 +40,26 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 function PlainLayout(_ref) {
   let {
-    elements
+    elements,
+    data
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
       className: "plain-layout-container",
-      children: [/*#__PURE__*/(0, _react.cloneElement)(elements.brand, {
-        name: null,
-        description: null
-      }), elements.copyright]
+      children: [!!data.links && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
+        sx: {
+          width: 1
+        },
+        autoCenter: true,
+        children: [elements.copyright, elements.links]
+      }), !data.links && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _react.cloneElement)(elements.brand, {
+          name: null,
+          description: null
+        }), elements.copyright]
+      })]
     })
   }));
 }
@@ -60,10 +71,9 @@ PlainLayout.propTypes = {
     socialMedia: _propTypes.default.element,
     copyright: _propTypes.default.element,
     links: _propTypes.default.element
-  }).isRequired
+  }).isRequired,
+  data: _propTypes.default.object.isRequired
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 24px 0;\n  border-top: 1px solid #eee;\n  .plain-layout-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n"])));
-
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 24px 0;\n  border-top: 1px solid #eee;\n  .plain-layout-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n"])));
 var _default = PlainLayout;
 exports.default = _default;

package/lib/Footer/layout/row.js

@@ -7,9 +7,9 @@ exports.default = Row;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -40,7 +40,7 @@ function Row(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
 
   if (!children) {
     return null;
@@ -63,5 +63,4 @@ Row.defaultProps = {
   children: null,
   autoCenter: false
 };
-
-const RowRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  & + & {\n    margin-top: 24px;\n  }\n  &.footer-row-auto-center > *:only-child {\n    margin: 0 auto;\n  }\n\n  ", " {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 16px;\n    > * {\n      flex: 1 0 100%;\n    }\n    &.footer-row-auto-center > * {\n      margin: 0 auto;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));
+const RowRoot = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  & + & {\n    margin-top: 24px;\n  }\n  &.footer-row-auto-center > *:only-child {\n    margin: 0 auto;\n  }\n\n  ", " {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 16px;\n    > * {\n      flex: 1 0 100%;\n    }\n    &.footer-row-auto-center > * {\n      margin: 0 auto;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/layout/standard.js

@@ -7,19 +7,19 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
+var _Theme = require("@arcblock/ux/lib/Theme");
+
 var _row = _interopRequireDefault(require("./row"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["elements"];
+const _excluded = ["elements", "data"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,48 +38,61 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * footer standard layout
  */
-function Footer(_ref) {
+function StandardLayout(_ref) {
+  var _data$navigation;
+
   let {
-    elements
+    elements,
+    data
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            width: {
-              md: 240
-            },
-            children: elements.brand
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            mt: 2,
-            children: elements.socialMedia
-          })]
-        }), elements.navigation]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          pb: 3
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          children: elements.brand
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          lineHeight: 1,
+          alignSelf: "end",
+          children: elements.socialMedia
+        })]
+      }), !!((_data$navigation = data.navigation) !== null && _data$navigation !== void 0 && _data$navigation.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          mb: 6,
+          pt: 3,
+          borderTop: 1,
+          borderColor: 'grey.200'
+        },
+        children: elements.navigation
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
-        autoCenter: true,
-        style: {
-          marginTop: 72
+        sx: {
+          pt: 3,
+          borderTop: 1,
+          borderColor: 'grey.200'
         },
+        autoCenter: true,
         children: [elements.copyright, elements.links]
       })]
     })
   }));
 }
 
-Footer.propTypes = {
+StandardLayout.propTypes = {
   elements: _propTypes.default.shape({
     brand: _propTypes.default.element,
     navigation: _propTypes.default.element,
     socialMedia: _propTypes.default.element,
     copyright: _propTypes.default.element,
     links: _propTypes.default.element
-  }).isRequired
+  }).isRequired,
+  data: _propTypes.default.object.isRequired
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 48px 0;\n"])));
-
-var _default = Footer;
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 32px 0 24px 0;\n  .footer-brand-desc {\n    display: none;\n  }\n"])));
+var _default = StandardLayout;
 exports.default = _default;

package/lib/Footer/links.js

@@ -9,12 +9,14 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -46,7 +48,7 @@ function Links(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const [activeIndex, setActiveIndex] = (0, _react.useState)(-1);
 
   if (!(links !== null && links !== void 0 && links.length)) {
@@ -64,6 +66,7 @@ function Links(_ref) {
     let {
       label,
       link,
+      icon,
       render,
       props
     } = _ref2;
@@ -83,7 +86,15 @@ function Links(_ref) {
       }));
     }
 
-    return result;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: icon,
+        size: 20,
+        sx: {
+          mr: 0.5
+        }
+      }), result]
+    });
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
@@ -101,14 +112,22 @@ function Links(_ref) {
         const {
           items
         } = item;
+        const isActive = i === activeIndex;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx.default)('footer-links-group', {
-            'footer-links-group--active': i === activeIndex
+            'footer-links-group--active': isActive
           }),
           onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "footer-links-item",
-            children: renderItem(item)
+            children: [renderItem(item), !!(items !== null && items !== void 0 && items.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "footer-links-group-expand-icon",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+                style: {
+                  transform: "rotate(".concat(isActive ? 180 : 0, "deg)")
+                }
+              })
+            })]
           }), !!(items !== null && items !== void 0 && items.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "footer-links-sub",
             children: items.map((child, j) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -136,5 +155,4 @@ Links.defaultProps = {
   links: [],
   flowLayout: false
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  color: ", ";\n  .footer-links-inner {\n    display: flex;\n    justify-content: space-between;\n    margin: 0 -8px;\n  }\n  .footer-links-group,\n  .footer-links-sub {\n    display: flex;\n    flex-direction: column;\n  }\n  .footer-links-item {\n    display: inline-block;\n    padding: 0 8px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n  .footer-links-group + .footer-links-group {\n    margin-left: 128px;\n  }\n  &.footer-links--grouped {\n    .footer-links-group {\n      > .footer-links-item {\n        font-weight: bold;\n      }\n      .footer-links-sub {\n        margin-top: 8px;\n      }\n    }\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.footer-links--flow {\n    display: inline-flex;\n    .footer-links-inner {\n      justify-content: center;\n      flex-wrap: wrap;\n      margin: 0 -8px;\n      .footer-links-item {\n        padding: 0 8px;\n      }\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 56px;\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 40px;\n    }\n  }\n\n  ", " {\n    .footer-links-inner {\n      flex-direction: column;\n      margin: 0;\n    }\n    .footer-links-sub {\n      display: none;\n    }\n    .footer-links-group {\n      padding: 12px 0;\n      border-top: 1px solid ", ";\n    }\n    .footer-links-group + .footer-links-group {\n      margin-left: 0;\n    }\n    .footer-links-group--active {\n      .footer-links-sub {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        .footer-links-item {\n          flex: 0 0 50%;\n        }\n      }\n    }\n    .footer-links-item {\n      padding: 0;\n      font-size: 13px;\n    }\n    &.footer-links--grouped {\n      .footer-links-group {\n        > .footer-links-item {\n          font-size: 14px;\n        }\n      }\n    }\n\n    &.footer-links--flow {\n      .footer-links-inner {\n        flex-direction: row;\n      }\n    }\n  }\n"])), props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  color: ", ";\n  .footer-links-inner {\n    display: flex;\n    justify-content: space-between;\n    margin: 0 -8px;\n  }\n  .footer-links-group,\n  .footer-links-sub {\n    display: flex;\n    flex-direction: column;\n  }\n  .footer-links-group-expand-icon {\n    display: none;\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translate(0, -50%);\n    svg {\n      width: auto;\n      height: 0.75em;\n    }\n  }\n  .footer-links-item {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    padding: 0 8px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n  &.footer-links--grouped {\n    .footer-links-group {\n      > .footer-links-item {\n        font-weight: bold;\n      }\n      .footer-links-sub {\n        margin-top: 8px;\n      }\n    }\n  }\n  a {\n    display: inline-block;\n    max-width: 150px;\n    color: inherit;\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.footer-links--flow {\n    display: inline-flex;\n    .footer-links-inner {\n      justify-content: center;\n      flex-wrap: wrap;\n      margin: 0 -8px;\n      .footer-links-item {\n        padding: 0 8px;\n      }\n      .footer-links-item + .footer-links-item::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translate(0, -50%);\n        height: 1em;\n        border-left: 1px solid ", ";\n      }\n    }\n  }\n\n  ", " {\n    .footer-links-inner {\n      flex-direction: column;\n      margin: 0;\n    }\n    .footer-links-sub {\n      display: none;\n    }\n    .footer-links-group {\n      position: relative;\n      padding: 12px 0;\n      .footer-links-item .footer-links-group-expand-icon {\n        display: inline-block;\n      }\n    }\n    .footer-links-group + .footer-links-group {\n      border-top: 1px solid ", ";\n    }\n    .footer-links-group--active {\n      .footer-links-sub {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        .footer-links-item {\n          flex: 0 0 50%;\n        }\n      }\n    }\n    .footer-links-item {\n      padding: 0;\n      font-size: 13px;\n    }\n    &.footer-links--grouped {\n      .footer-links-group {\n        > .footer-links-item {\n          font-size: 14px;\n        }\n      }\n    }\n\n    &.footer-links--flow {\n      .footer-links-inner {\n        flex-direction: row;\n      }\n    }\n  }\n"])), props => props.$theme.palette.grey[600], props => props.theme.palette.grey[400], props => props.$theme.breakpoints.down('md'), props => props.$theme.palette.grey[200]);

package/lib/Footer/social-media.js

@@ -7,9 +7,7 @@ exports.default = SocialMedia;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -39,7 +37,7 @@ function SocialMedia(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
 
   if (!(items !== null && items !== void 0 && items.length)) {
     return null;
@@ -60,8 +58,7 @@ function SocialMedia(_ref) {
               bgcolor: theme.palette.grey[600],
               color: '#fff'
             },
-            size: 44,
-            variant: "rounded",
+            size: 24,
             component: "span"
           })
         }, i)
@@ -80,5 +77,4 @@ SocialMedia.propTypes = {
 SocialMedia.defaultProps = {
   items: null
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  a + a {\n    margin-left: 12px;\n  }\n"])));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  a {\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  }\n  a + a {\n    margin-left: 20px;\n  }\n"])), props => props.theme.palette.grey[400], props => props.theme.palette.primary.light);

package/lib/Header/index.js

@@ -11,10 +11,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
-
 var _reactErrorBoundary = require("react-error-boundary");
 
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
@@ -63,7 +59,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; }
 
-const muiTheme = (0, _Theme.create)(); // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
+const muiTheme = (0, _Theme.createTheme)(); // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 
 const parseNavigation = navigation => {
   if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
@@ -203,7 +199,7 @@ function Header(_ref) {
 
   const renderedAddons = renderAddons();
   const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
     theme: muiTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
       logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
@@ -265,7 +261,7 @@ Header.defaultProps = {
   },
   homeLink: _blocklets.publicPath
 };
-const StyledUxHeader = (0, _styled.default)(_Header.ResponsiveHeader)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  .header-logo {\n    min-width: 44px;\n  }\n  ", " {\n    .header-logo {\n      min-width: 32px;\n    }\n  }\n  .header-nav {\n    .navmenu-sub .navmenu-item {\n      min-width: 80px;\n    }\n  }\n  .header-nav.navmenu--horizontal {\n    .navmenu-root > .navmenu-sub,\n    .navmenu-root > .navmenu-item {\n      padding: 16px 4px;\n\n      .navmenu-sub-container {\n        padding-top: 0;\n      }\n    }\n  }\n"])), _ref3 => {
+const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  .header-logo {\n    min-width: 44px;\n  }\n  ", " {\n    .header-logo {\n      min-width: 32px;\n    }\n  }\n  .header-nav {\n    .navmenu-sub .navmenu-item {\n      min-width: 80px;\n    }\n  }\n  .header-nav.navmenu--horizontal {\n    .navmenu-root > .navmenu-sub,\n    .navmenu-root > .navmenu-item {\n      padding: 16px 4px;\n\n      .navmenu-sub-container {\n        padding-top: 0;\n      }\n    }\n    .navmenu-item-icon > .MuiAvatar-root,\n    .navmenu-sub-icon > .MuiAvatar-root {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/lib/Icon/index.js

@@ -56,6 +56,11 @@ function Icon(_ref) {
         color: 'inherit',
         backgroundColor: 'transparent',
         borderRadius: 0
+      },
+      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
+      '&.MuiAvatar-root svg': {
+        width: '100%',
+        height: '100%'
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.2",
+  "version": "2.4.5",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.2",
-    "@arcblock/ux": "^2.4.2",
+    "@arcblock/did-connect": "^2.4.5",
+    "@arcblock/ux": "^2.4.5",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "6a7e96c930c4ef0dd995bc9383738bb1cdf12844"
+  "gitHead": "ba62e426b63dd469d3d139d0de11d4d329d84fef"
 }

package/src/Footer/brand.js

@@ -1,7 +1,6 @@
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
+import { useTheme, styled } from '@arcblock/ux/lib/Theme';
 
 export default function Brand({ name, logo, description, ...rest }) {
   const theme = useTheme();
@@ -34,7 +33,7 @@ Brand.defaultProps = {
   description: '',
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   display: flex;
   flex-direction: column;
   font-size: 14px;

package/src/Footer/copyright.js

@@ -1,5 +1,5 @@
+import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 export default function Copyright({ owner, year, ...rest }) {
   return (
@@ -19,7 +19,9 @@ Copyright.defaultProps = {
   year: `${new Date().getFullYear()}`,
 };
 
-const Root = styled.p`
+const Root = styled('p')`
+  display: flex;
+  align-items: center;
   margin: 0;
   font-size: 13px;
 `;

package/src/Footer/index.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@arcblock/ux/lib/Theme';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+
 import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';

package/src/Footer/internal-footer.js

@@ -8,22 +8,26 @@ import PlainLayout from './layout/plain';
 
 const layouts = [
   {
+    name: 'plain',
     // navigation 数据为空时, 使用简单布局
     support: (_, data) => !data.navigation?.length,
     component: PlainLayout,
   },
   {
+    name: 'standard',
     // 默认标准布局
     support: () => true,
     component: StandardLayout,
   },
 ];
 
+const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur }), {});
+
 /**
  * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
  */
 function InternalFooter(props) {
-  const { brand, navigation, socialMedia, copyright, links, ...rest } = props;
+  const { brand, navigation, socialMedia, copyright, links, layout, ...rest } = props;
   const renderBrand = () => {
     return brand ? <Brand {...brand} /> : null;
   };
@@ -52,8 +56,16 @@ function InternalFooter(props) {
     copyright: renderCopyright(),
     links: renderLinks(),
   };
-  const LayoutComponent = layouts.find((layout) => layout.support(elements, props)).component;
-  return <LayoutComponent elements={elements} {...rest} />;
+  let LayoutComponent = null;
+  if (layout === 'auto') {
+    LayoutComponent = layouts.find((item) => item.support(elements, props)).component;
+  } else {
+    LayoutComponent = layoutsKeyByName[layout]?.component;
+  }
+  if (!LayoutComponent) {
+    throw new Error(`layout ${layout} is not supported.`);
+  }
+  return <LayoutComponent elements={elements} data={props} {...rest} />;
 }
 
 InternalFooter.propTypes = {
@@ -85,6 +97,8 @@ InternalFooter.propTypes = {
       link: PropTypes.string,
     })
   ),
+  // 可显式指定 footer layout, 默认根据内容自动决定 layout
+  layout: PropTypes.oneOf(['auto', 'standard', 'plain']),
 };
 
 InternalFooter.defaultProps = {
@@ -93,6 +107,7 @@ InternalFooter.defaultProps = {
   copyright: null,
   socialMedia: null,
   links: null,
+  layout: 'auto',
 };
 
 export default InternalFooter;

package/src/Footer/layout/plain.js

@@ -1,17 +1,28 @@
 import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
+import { styled } from '@arcblock/ux/lib/Theme';
+import Row from './row';
 
 /**
  * footer plain layout
  */
-function PlainLayout({ elements, ...rest }) {
+function PlainLayout({ elements, data, ...rest }) {
   return (
     <Root {...rest}>
       <Container className="plain-layout-container">
-        {cloneElement(elements.brand, { name: null, description: null })}
-        {elements.copyright}
+        {!!data.links && (
+          <Row sx={{ width: 1 }} autoCenter>
+            {elements.copyright}
+            {elements.links}
+          </Row>
+        )}
+        {!data.links && (
+          <>
+            {cloneElement(elements.brand, { name: null, description: null })}
+            {elements.copyright}
+          </>
+        )}
       </Container>
     </Root>
   );
@@ -25,9 +36,10 @@ PlainLayout.propTypes = {
     copyright: PropTypes.element,
     links: PropTypes.element,
   }).isRequired,
+  data: PropTypes.object.isRequired,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   padding: 24px 0;
   border-top: 1px solid #eee;
   .plain-layout-container {

package/src/Footer/layout/row.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useTheme, styled } from '@arcblock/ux/lib/Theme';
 import clsx from 'clsx';
 
 export default function Row({ children, autoCenter, ...rest }) {
@@ -25,7 +25,7 @@ Row.defaultProps = {
   autoCenter: false,
 };
 
-const RowRoot = styled.div`
+const RowRoot = styled(Box)`
   display: flex;
   justify-content: space-between;
   & + & {

package/src/Footer/layout/standard.js

@@ -1,24 +1,32 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
+import { styled } from '@arcblock/ux/lib/Theme';
+
 import Row from './row';
 
 /**
  * footer standard layout
  */
-function Footer({ elements, ...rest }) {
+function StandardLayout({ elements, data, ...rest }) {
   return (
     <Root {...rest}>
       <Container>
-        <Row>
-          <Box>
-            <Box width={{ md: 240 }}>{elements.brand}</Box>
-            <Box mt={2}>{elements.socialMedia}</Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 3,
+          }}>
+          <Box>{elements.brand}</Box>
+          <Box lineHeight={1} alignSelf="end">
+            {elements.socialMedia}
           </Box>
-          {elements.navigation}
-        </Row>
-        <Row autoCenter style={{ marginTop: 72 }}>
+        </Box>
+        {!!data.navigation?.length && (
+          <Box sx={{ mb: 6, pt: 3, borderTop: 1, borderColor: 'grey.200' }}>{elements.navigation}</Box>
+        )}
+        <Row sx={{ pt: 3, borderTop: 1, borderColor: 'grey.200' }} autoCenter>
           {elements.copyright}
           {elements.links}
         </Row>
@@ -27,7 +35,7 @@ function Footer({ elements, ...rest }) {
   );
 }
 
-Footer.propTypes = {
+StandardLayout.propTypes = {
   elements: PropTypes.shape({
     brand: PropTypes.element,
     navigation: PropTypes.element,
@@ -35,10 +43,14 @@ Footer.propTypes = {
     copyright: PropTypes.element,
     links: PropTypes.element,
   }).isRequired,
+  data: PropTypes.object.isRequired,
 };
 
-const Root = styled.div`
-  padding: 48px 0;
+const Root = styled('div')`
+  padding: 32px 0 24px 0;
+  .footer-brand-desc {
+    display: none;
+  }
 `;
 
-export default Footer;
+export default StandardLayout;

package/src/Footer/links.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
+import { useTheme, styled } from '@arcblock/ux/lib/Theme';
 import clsx from 'clsx';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Icon from '../Icon';
 
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
@@ -17,7 +18,7 @@ export default function Links({ links, flowLayout, ...rest }) {
   }
   // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
   const isGroupMode = links.some((item) => item.items?.length);
-  const renderItem = ({ label, link, render, props }) => {
+  const renderItem = ({ label, link, icon, render, props }) => {
     let result = label;
     if (render) {
       result = render({ label, link, props });
@@ -28,9 +29,13 @@ export default function Links({ links, flowLayout, ...rest }) {
         </a>
       );
     }
-    return result;
+    return (
+      <>
+        <Icon icon={icon} size={20} sx={{ mr: 0.5 }} />
+        {result}
+      </>
+    );
   };
-
   return (
     <Root
       {...rest}
@@ -49,14 +54,26 @@ export default function Links({ links, flowLayout, ...rest }) {
         {!flowLayout &&
           links.map((item, i) => {
             const { items } = item;
+            const isActive = i === activeIndex;
             return (
               <div
                 key={i}
                 className={clsx('footer-links-group', {
-                  'footer-links-group--active': i === activeIndex,
+                  'footer-links-group--active': isActive,
                 })}
                 onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
-                <span className="footer-links-item">{renderItem(item)}</span>
+                <span className="footer-links-item">
+                  {renderItem(item)}
+                  {!!items?.length && (
+                    <span className="footer-links-group-expand-icon">
+                      <ExpandMoreIcon
+                        style={{
+                          transform: `rotate(${isActive ? 180 : 0}deg)`,
+                        }}
+                      />
+                    </span>
+                  )}
+                </span>
                 {!!items?.length && (
                   <div className="footer-links-sub">
                     {items.map((child, j) => (
@@ -92,7 +109,7 @@ Links.defaultProps = {
   flowLayout: false,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   overflow: hidden;
   color: ${(props) => props.$theme.palette.grey[600]};
   .footer-links-inner {
@@ -105,15 +122,25 @@ const Root = styled.div`
     display: flex;
     flex-direction: column;
   }
+  .footer-links-group-expand-icon {
+    display: none;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translate(0, -50%);
+    svg {
+      width: auto;
+      height: 0.75em;
+    }
+  }
   .footer-links-item {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
     padding: 0 8px;
     font-size: 14px;
     line-height: 1.6;
   }
-  .footer-links-group + .footer-links-group {
-    margin-left: 128px;
-  }
   &.footer-links--grouped {
     .footer-links-group {
       > .footer-links-item {
@@ -125,6 +152,8 @@ const Root = styled.div`
     }
   }
   a {
+    display: inline-block;
+    max-width: 150px;
     color: inherit;
     text-decoration: none;
     &:hover {
@@ -141,22 +170,19 @@ const Root = styled.div`
       .footer-links-item {
         padding: 0 8px;
       }
+      .footer-links-item + .footer-links-item::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate(0, -50%);
+        height: 1em;
+        border-left: 1px solid ${(props) => props.theme.palette.grey[400]};
+      }
     }
   }
 
-  ${(props) => props.$theme.breakpoints.down('lg')} {
-    .footer-links-group + .footer-links-group {
-      margin-left: 56px;
-    }
-  }
-
-  ${(props) => props.$theme.breakpoints.down('lg')} {
-    .footer-links-group + .footer-links-group {
-      margin-left: 40px;
-    }
-  }
-
-  ${(props) => props.$theme.breakpoints.down('sm')} {
+  ${(props) => props.$theme.breakpoints.down('md')} {
     .footer-links-inner {
       flex-direction: column;
       margin: 0;
@@ -165,11 +191,14 @@ const Root = styled.div`
       display: none;
     }
     .footer-links-group {
+      position: relative;
       padding: 12px 0;
-      border-top: 1px solid ${(props) => props.$theme.palette.grey[200]};
+      .footer-links-item .footer-links-group-expand-icon {
+        display: inline-block;
+      }
     }
     .footer-links-group + .footer-links-group {
-      margin-left: 0;
+      border-top: 1px solid ${(props) => props.$theme.palette.grey[200]};
     }
     .footer-links-group--active {
       .footer-links-sub {

package/src/Footer/social-media.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
+import { useTheme, styled } from '@arcblock/ux/lib/Theme';
 import Icon from '../Icon';
 
 export default function SocialMedia({ items, ...rest }) {
@@ -17,8 +16,7 @@ export default function SocialMedia({ items, ...rest }) {
             <Icon
               icon={item.icon}
               sx={{ bgcolor: theme.palette.grey[600], color: '#fff' }}
-              size={44}
-              variant="rounded"
+              size={24}
               component="span"
             />
           </a>
@@ -42,10 +40,16 @@ SocialMedia.defaultProps = {
   items: null,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   display: inline-flex;
   align-items: center;
+  a {
+    color: ${(props) => props.theme.palette.grey[400]};
+    &:hover {
+      color: ${(props) => props.theme.palette.primary.light};
+    }
+  }
   a + a {
-    margin-left: 12px;
+    margin-left: 20px;
   }
 `;

package/src/Header/index.js

@@ -2,11 +2,9 @@ import { useContext, useMemo, createElement } from 'react';
 // FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
 import { Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { ThemeProvider } from '@mui/material/styles';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { create } from '@arcblock/ux/lib/Theme';
+import { createTheme, ThemeProvider, styled } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -21,7 +19,7 @@ import { blockletMetaProps, sessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
-const muiTheme = create();
+const muiTheme = createTheme();
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation) => {
@@ -209,6 +207,11 @@ const StyledUxHeader = styled(ResponsiveHeader)`
         padding-top: 0;
       }
     }
+    .navmenu-item-icon > .MuiAvatar-root,
+    .navmenu-sub-icon > .MuiAvatar-root {
+      width: 20px;
+      height: 20px;
+    }
   }
 `;
 

package/src/Icon/index.js

@@ -19,6 +19,11 @@ export default function Icon({ icon, size, sx, ...rest }) {
         backgroundColor: 'transparent',
         borderRadius: 0,
       },
+      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
+      '&.MuiAvatar-root svg': {
+        width: '100%',
+        height: '100%',
+      },
     });
   }
   if (isUrl(icon)) {