@blocklet/ui-react 2.4.2 → 2.4.3

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  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/layout/plain.js

@@ -9,10 +9,10 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -62,8 +62,6 @@ PlainLayout.propTypes = {
     links: _propTypes.default.element
   }).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,7 @@ exports.default = Row;
 
 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"));
 
@@ -40,7 +38,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 +61,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)('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'));

package/lib/Footer/layout/standard.js

@@ -7,12 +7,12 @@ 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");
@@ -78,8 +78,6 @@ Footer.propTypes = {
     links: _propTypes.default.element
   }).isRequired
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 48px 0;\n"])));
-
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 48px 0;\n"])));
 var _default = Footer;
 exports.default = _default;

package/lib/Footer/links.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 _clsx = _interopRequireDefault(require("clsx"));
 
@@ -46,7 +44,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)) {
@@ -136,5 +134,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-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]);

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;
@@ -80,5 +78,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 + a {\n    margin-left: 12px;\n  }\n"])));

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  }\n"])), _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "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.3",
+    "@arcblock/ux": "^2.4.3",
     "@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": "a3c4e62917f630b62edccc064cfbb88e72b8407d"
 }

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,7 @@ Copyright.defaultProps = {
   year: `${new Date().getFullYear()}`,
 };
 
-const Root = styled.p`
+const Root = styled('p')`
   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/layout/plain.js

@@ -1,7 +1,7 @@
 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';
 
 /**
  * footer plain layout
@@ -27,7 +27,7 @@ PlainLayout.propTypes = {
   }).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,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 clsx from 'clsx';
 
 export default function Row({ children, autoCenter, ...rest }) {
@@ -25,7 +24,7 @@ Row.defaultProps = {
   autoCenter: false,
 };
 
-const RowRoot = styled.div`
+const RowRoot = styled('div')`
   display: flex;
   justify-content: space-between;
   & + & {

package/src/Footer/layout/standard.js

@@ -1,7 +1,8 @@
 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';
 
 /**
@@ -37,7 +38,7 @@ Footer.propTypes = {
   }).isRequired,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   padding: 48px 0;
 `;
 

package/src/Footer/links.js

@@ -1,8 +1,7 @@
 /* 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';
 
 /**
@@ -92,7 +91,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 {

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 }) {
@@ -42,7 +41,7 @@ SocialMedia.defaultProps = {
   items: null,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   display: inline-flex;
   align-items: center;
   a + a {

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) => {