@blocklet/ui-react 2.1.40 → 2.1.43

package/lib/Footer/brand.js

@@ -78,4 +78,4 @@ Brand.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "brand__Root",
   componentId: "sc-6z2c3k-0"
-})(["display:flex;flex-direction:column;width:240px;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{width:auto;height:44px;max-height:44px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}", "{.footer-brand-logo{img,svg{height:32px;max-height:32px;}}}"], props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));
+})(["display:flex;flex-direction:column;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{width:auto;height:44px;max-height:44px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}", "{.footer-brand-logo{img,svg{height:32px;max-height:32px;}}}"], props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/copyright.js

@@ -49,4 +49,4 @@ Copyright.defaultProps = {
 const Root = _styledComponents.default.p.withConfig({
   displayName: "copyright__Root",
   componentId: "sc-g2r3zf-0"
-})(["margin:0;font-size:14px;"]);
+})(["margin:0;font-size:13px;"]);

package/lib/Footer/index.js

@@ -5,30 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = require("react");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("@mui/material/styles");
 
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-
 var _reactErrorBoundary = require("react-error-boundary");
 
-var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
-
-var _brand = _interopRequireDefault(require("./brand"));
-
-var _links = _interopRequireDefault(require("./links"));
+var _context = require("@arcblock/ux/lib/Locale/context");
 
-var _socialMedia = _interopRequireDefault(require("./social-media"));
-
-var _copyright = _interopRequireDefault(require("./copyright"));
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 
-var _row = _interopRequireDefault(require("./row"));
+var _internalFooter = _interopRequireDefault(require("./internal-footer"));
 
 var _utils = require("../utils");
 
+var _blocklets = require("../blocklets");
+
 var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -51,13 +45,26 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
 function Footer(_ref) {
+  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background;
+
   let {
     meta
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const muiTheme = (0, _styles.useTheme)();
+  const {
+    locale
+  } = (0, _context.useLocaleContext)() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = (0, _react.useMemo)(() => {
+    try {
+      return (0, _blocklets.formatBlockletInfo)(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
 
   if (!blocklet.appName) {
     return null;
@@ -68,53 +75,33 @@ function Footer(_ref) {
     appName,
     appDescription,
     description,
-    theme: blockletTheme,
-    navigation = [],
-    copyrightOwner,
-    footerNavigation,
-    footerLinks,
-    socialMedia
-  } = blocklet;
-  const navMenuItems = (0, _utils.mapRecursive)( // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
-  footerNavigation || navigation, item => _objectSpread(_objectSpread({}, item), {}, {
-    label: item.title,
-    link: item.link
-  }), 'items');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-    $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
-    $theme: theme,
-    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)(_brand.default, {
-            name: appName,
-            logo: appLogo,
-            description: appDescription || description
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_socialMedia.default, {
-            items: socialMedia,
-            style: {
-              marginTop: 24
-            }
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
-          links: navMenuItems
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
-        autoCenter: true,
-        style: {
-          marginTop: 72
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_copyright.default, {
-          owner: copyrightOwner || appName
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
-          flowLayout: true,
-          links: footerLinks,
-          style: {
-            color: '#999'
-          }
-        })]
-      })]
-    })
+    theme,
+    copyright
+  } = formattedBlocklet;
+  const localized = {
+    footerNav: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.footer, locale) || [],
+    socialMedia: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na2 = formattedBlocklet.navigation) === null || _formattedBlocklet$na2 === void 0 ? void 0 : _formattedBlocklet$na2.social, locale) || [],
+    links: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na3 = formattedBlocklet.navigation) === null || _formattedBlocklet$na3 === void 0 ? void 0 : _formattedBlocklet$na3.bottom, locale) || []
+  };
+  const props = {
+    brand: {
+      name: appName,
+      description: appDescription || description,
+      logo: appLogo
+    },
+    navigation: (0, _utils.mapRecursive)(localized.footerNav, item => _objectSpread(_objectSpread({}, item), {}, {
+      label: item.title,
+      link: item.link
+    }), 'items'),
+    copyright,
+    socialMedia: localized.socialMedia,
+    links: localized.links.map(item => _objectSpread(_objectSpread({}, item), {}, {
+      label: item.title
+    }))
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
+    $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer,
+    $theme: muiTheme
   }));
 }
 
@@ -124,11 +111,10 @@ Footer.propTypes = {
 Footer.defaultProps = {
   meta: {}
 };
-
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "Footer__Root",
+const StyledInternalFooter = (0, _styledComponents.default)(_internalFooter.default).withConfig({
+  displayName: "Footer__StyledInternalFooter",
   componentId: "sc-1iwl1nd-0"
-})(["padding:48px 0;border-top:1px solid #eee;color:", ";", ""], props => props.$theme.palette.grey[600], _ref2 => {
+})(["border-top:1px solid #eee;color:", ";", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';"], props => props.$theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Footer/internal-footer.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _brand = _interopRequireDefault(require("./brand"));
+
+var _links = _interopRequireDefault(require("./links"));
+
+var _socialMedia = _interopRequireDefault(require("./social-media"));
+
+var _copyright = _interopRequireDefault(require("./copyright"));
+
+var _standard = _interopRequireDefault(require("./layout/standard"));
+
+var _plain = _interopRequireDefault(require("./layout/plain"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["brand", "navigation", "socialMedia", "copyright", "links"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = [{
+  // navigation 数据为空时, 使用简单布局
+  support: (_, data) => {
+    var _data$navigation;
+
+    return !((_data$navigation = data.navigation) !== null && _data$navigation !== void 0 && _data$navigation.length);
+  },
+  component: _plain.default
+}, {
+  // 默认标准布局
+  support: () => true,
+  component: _standard.default
+}];
+/**
+ * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
+ */
+
+function InternalFooter(props) {
+  const {
+    brand,
+    navigation,
+    socialMedia,
+    copyright,
+    links
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const renderBrand = () => {
+    return brand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_brand.default, _objectSpread({}, brand)) : null;
+  };
+
+  const renderNavigation = () => {
+    return navigation !== null && navigation !== void 0 && navigation.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
+      links: navigation
+    }) : null;
+  };
+
+  const renderSocialMedia = () => {
+    return socialMedia !== null && socialMedia !== void 0 && socialMedia.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_socialMedia.default, {
+      items: socialMedia
+    }) : null;
+  };
+
+  const renderCopyright = () => {
+    // 如果 copyright.owner 不存在, 则使用 brand.name, 如果 brand.name 也不存在, copyright 元素为空
+    const copyrightOwner = (copyright === null || copyright === void 0 ? void 0 : copyright.owner) || (brand === null || brand === void 0 ? void 0 : brand.name);
+
+    if (!copyrightOwner) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_copyright.default, {
+      owner: copyrightOwner,
+      year: (copyright === null || copyright === void 0 ? void 0 : copyright.year) || undefined
+    });
+  };
+
+  const renderLinks = () => {
+    return links !== null && links !== void 0 && links.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
+      flowLayout: true,
+      links: links
+    }) : null;
+  };
+
+  const elements = {
+    brand: renderBrand(),
+    navigation: renderNavigation(),
+    socialMedia: renderSocialMedia(),
+    copyright: renderCopyright(),
+    links: renderLinks()
+  };
+  const LayoutComponent = layouts.find(layout => layout.support(elements, props)).component;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutComponent, _objectSpread({
+    elements: elements
+  }, rest));
+}
+
+InternalFooter.propTypes = {
+  brand: _propTypes.default.shape({
+    name: _propTypes.default.node,
+    description: _propTypes.default.string,
+    logo: _propTypes.default.node
+  }),
+  navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    link: _propTypes.default.string
+  })),
+  socialMedia: _propTypes.default.arrayOf(_propTypes.default.shape({
+    icon: _propTypes.default.node,
+    link: _propTypes.default.string
+  })),
+  copyright: _propTypes.default.shape({
+    owner: _propTypes.default.string,
+    year: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  }),
+  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
+  links: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    link: _propTypes.default.string
+  }))
+};
+InternalFooter.defaultProps = {
+  brand: null,
+  navigation: null,
+  copyright: null,
+  socialMedia: null,
+  links: null
+};
+var _default = InternalFooter;
+exports.default = _default;

package/lib/Footer/layout/plain.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["elements"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * footer plain layout
+ */
+function PlainLayout(_ref) {
+  let {
+    elements
+  } = _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]
+    })
+  }));
+}
+
+PlainLayout.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
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "plain__Root",
+  componentId: "sc-qoddfp-0"
+})(["padding:24px 0;border-top:1px solid #eee;.plain-layout-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}"]);
+
+var _default = PlainLayout;
+exports.default = _default;

package/lib/Footer/{row.js → layout/row.js}

@@ -62,5 +62,5 @@ Row.defaultProps = {
 
 const RowRoot = _styledComponents.default.div.withConfig({
   displayName: "row__RowRoot",
-  componentId: "sc-11upj1u-0"
+  componentId: "sc-1b3lw4c-0"
 })(["display:flex;justify-content:space-between;& + &{margin-top:24px;}&.footer-row-auto-center > *:only-child{margin:0 auto;}", "{align-items:stretch;flex-direction:column;gap:16px;> *{flex:1 0 100%;}&.footer-row-auto-center > *{margin:0 auto;}}"], props => props.$theme.breakpoints.down('md'));

package/lib/Footer/layout/standard.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+
+var _row = _interopRequireDefault(require("./row"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["elements"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * footer standard layout
+ */
+function Footer(_ref) {
+  let {
+    elements
+  } = _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]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
+        autoCenter: true,
+        style: {
+          marginTop: 72
+        },
+        children: [elements.copyright, elements.links]
+      })]
+    })
+  }));
+}
+
+Footer.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
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "standard__Root",
+  componentId: "sc-13y30cb-0"
+})(["padding:48px 0;"]);
+
+var _default = Footer;
+exports.default = _default;

package/lib/Header/index.js

@@ -35,12 +35,14 @@ var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
-require("@iconify/iconify");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _types = require("../types");
 
 var _utils = require("../utils");
 
+var _blocklets = require("../blocklets");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["meta", "addons", "sessionManagerProps"];
@@ -72,9 +74,8 @@ const parseNavigation = navigation => {
   const parseItem = item => {
     var _item$link, _item$link2;
 
-    const icon = item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "iconify",
-      "data-icon": item.icon
+    const icon = item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: item.icon
     }) : null;
 
     if (item.items) {
@@ -122,6 +123,8 @@ const parseNavigation = navigation => {
 
 
 function Header(_ref) {
+  var _formattedBlocklet$na, _theme$background;
+
   let {
     meta,
     addons,
@@ -134,6 +137,14 @@ function Header(_ref) {
     locale
   } = (0, _context.useLocaleContext)() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = (0, _react.useMemo)(() => {
+    try {
+      return (0, _blocklets.formatBlockletInfo)(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
 
   if (!blocklet.appName) {
     return null;
@@ -144,10 +155,10 @@ function Header(_ref) {
     appLogo,
     appName,
     theme,
-    navigation = [],
     enableConnect = true,
     enableLocale = true
-  } = blocklet;
+  } = formattedBlocklet;
+  const navigation = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.header, locale);
   const {
     navItems,
     activeId
@@ -187,7 +198,7 @@ function Header(_ref) {
     theme: muiTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
       logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: _utils.publicPath,
+        href: _blocklets.publicPath,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: appLogo,
           alt: "logo"
@@ -209,7 +220,7 @@ function Header(_ref) {
       }) : null,
       addons: renderAddons()
     }, rest), {}, {
-      $bgcolor: theme === null || theme === void 0 ? void 0 : theme.background,
+      $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.header,
       $theme: muiTheme,
       children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
         let {
@@ -220,7 +231,8 @@ function Header(_ref) {
           activeId: activeId,
           items: navItems,
           className: "header-nav",
-          bgColor: "transparent"
+          bgColor: "transparent",
+          textColor: "#888"
         });
       }
     }))
@@ -245,7 +257,7 @@ Header.defaultProps = {
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",
   componentId: "sc-kcf4st-0"
-})(["", " .header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
+})(["", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';.header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/lib/Icon/index.js

@@ -15,7 +15,7 @@ var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["icon", "size"];
+const _excluded = ["icon", "size", "sx"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,29 +35,47 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function Icon(_ref) {
   let {
     icon,
-    size
+    size,
+    sx
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const sx = _objectSpread({}, rest.sx);
+  const _sx = [...(Array.isArray(sx) ? sx : [sx])];
 
   if (size) {
-    sx.width = size;
-    sx.height = size;
+    _sx.push({
+      width: size,
+      height: size
+    });
+  } // 禁用默认的 circular variant 样式
+
+
+  if (!rest.variant) {
+    _sx.push({
+      '&.MuiAvatar-root': {
+        color: 'inherit',
+        backgroundColor: 'transparent',
+        borderRadius: 0
+      }
+    });
   }
 
   if ((0, _utils.isUrl)(icon)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({}, rest), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
+      as: "span"
+    }, rest), {}, {
       src: icon,
-      sx: sx
+      sx: _sx
     }));
   }
 
   if (icon) {
     // y = 0.6 * x + 4
     const iconHeight = size ? 0.6 * size + 4 : 0;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({}, rest), {}, {
-      sx: sx,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
+      as: "span"
+    }, rest), {}, {
+      sx: _sx,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({
         className: "iconify",
         "data-icon": icon
@@ -75,8 +93,10 @@ Icon.propTypes = {
   // 1. iconify icon name: <prefix>:<name>
   // 2. url
   icon: _propTypes.default.string.isRequired,
-  size: _propTypes.default.number
+  size: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.object])
 };
 Icon.defaultProps = {
-  size: null
+  size: null,
+  sx: null
 };