@arcblock/ux 2.4.2 → 2.4.3

package/src/Header/header.js

@@ -1,9 +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 { useTheme } from '@mui/material/styles';
 import AutoHidden from './auto-hidden';
+import { styled, useTheme } from '../Theme';
 
 /**
  * Header 组件
@@ -62,7 +61,7 @@ Header.defaultProps = {
   align: 'left',
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   position: relative;
   z-index: ${(props) => props.$theme.zIndex.appBar};
   font-size: 14px;

package/src/Header/responsive-header.js

@@ -1,14 +1,13 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import Button from '@mui/material/IconButton';
 import Container from '@mui/material/Container';
-import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Header from './header';
+import { styled, useTheme } from '../Theme';
 
 /**
  * ResponsiveHeader

package/src/Icon/image.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import Img from '../Img';
+import { styled } from '../Theme';
 
 export default function ImageIcon({ name, size, alt, color, style, prefix, showBadge, ...rest }) {
   const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
@@ -39,7 +39,7 @@ ImageIcon.defaultProps = {
   showBadge: false,
 };
 
-const Div = styled.div`
+const Div = styled('div')`
   position: relative;
   .badge-point {
     position: absolute;

package/src/Icon/index.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import colors from '../Colors';
+import { styled } from '../Theme';
 
 const variants = {
   light: 'fal',
@@ -50,7 +50,7 @@ Icon.defaultProps = {
   style: {},
 };
 
-const Span = styled.span`
+const Span = styled('span')`
   width: ${(props) => props.size * 2}px;
   height: ${(props) => props.size * 2}px;
   border-radius: 50%;

package/src/Img/index.js

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { SvgIcon } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import Alert from 'mdi-material-ui/Alert';
 import ImageIcon from 'mdi-material-ui/Image';
+import { styled } from '../Theme';
 
 const PREFIX = 'Img';
 

package/src/InfoRow/index.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 
+import { styled } from '../Theme';
+
 function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) {
   return (
     <Container layout={layout} width={nameWidth} {...rest}>
@@ -44,7 +45,7 @@ InfoRow.defaultProps = {
   layout: 'horizontal',
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   justify-content: flex-start;

package/src/Layout/dashboard/index.js

@@ -2,8 +2,6 @@ import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
@@ -14,6 +12,7 @@ import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
 import Sidebar from './sidebar';
 import { Link } from './with-external-link';
+import { styled, useTheme } from '../../Theme';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
@@ -110,7 +109,7 @@ Dashboard.defaultProps = {
   dense: 'auto',
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   &.dashboard {
     display: flex;
     flex-direction: column;

package/src/Layout/dashboard/sidebar.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
+
 import { NavLink } from './with-external-link';
+import { styled } from '../../Theme';
 
 // 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
 function renderLinks(links) {
@@ -66,7 +66,7 @@ Sidebar.defaultProps = {
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
-const Root = styled.div`
+const Root = styled('div')`
   display: flex;
   flex-direction: column;
   ul {

package/src/Layout/dashboard-legacy/header.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Button from '@mui/material/IconButton';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -10,6 +9,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
 
 import Logo from '../../Logo';
+import { styled } from '../../Theme';
 
 const StyledAppBar = styled(AppBar)`
   && {

package/src/Layout/dashboard-legacy/index.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
@@ -10,8 +9,9 @@ import useWindowSize from 'react-use/lib/useWindowSize';
 import Sidebar from './sidebar';
 import Header from './header';
 import Footer from '../../Footer';
+import { styled } from '../../Theme';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   &.dashboard {
     display: flex;
     flex-direction: column;

package/src/Layout/dashboard-legacy/sidebar.js

@@ -1,15 +1,13 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import { Link, useLocation } from 'react-router-dom';
-import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
+import { styled, useTheme } from '../../Theme';
 
 export default function Sidebar({ images, links, prefix, addons, logo, ...rest }) {
   const theme = useTheme();
@@ -61,7 +59,7 @@ Sidebar.defaultProps = {
   logo: null,
 };
 
-const MenuItems = memo(styled.div`
+const MenuItems = memo(styled('div')`
   flex: 1;
   display: flex;
   flex-direction: column;

package/src/Layout/index.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Helmet from 'react-helmet';
 import Link from '@mui/material/Link';
 
@@ -20,6 +19,7 @@ import Footer from '../Footer';
 import OpenInWallet from '../Wallet/Open';
 import Icon from '../Icon';
 import Logo from '../Logo';
+import { styled } from '../Theme';
 
 export default function Layout({
   title,
@@ -192,7 +192,7 @@ Layout.defaultProps = {
   ),
 };
 
-const Div = styled.div`
+const Div = styled('div')`
   width: 100%;
   min-height: 100vh;
   display: flex;
@@ -277,7 +277,7 @@ const Div = styled.div`
   }
 `;
 
-const DrawerDiv = styled.nav`
+const DrawerDiv = styled('nav')`
   width: 240px;
   .drawer-paper {
     width: 240px;

package/src/Locale/selector.js

@@ -1,9 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
-import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
@@ -18,6 +15,7 @@ import GlobeIcon from '@arcblock/icons/lib/Globe';
 import { getColor, getBackground } from '../Util';
 
 import { LocaleContext, languages } from './context';
+import { styled, useTheme } from '../Theme';
 
 function LocaleSelector(props) {
   const { showText, popperProps, popperType, icon: Icon, ...rest } = props;
@@ -123,7 +121,7 @@ LocaleSelector.defaultProps = {
 
 export default LocaleSelector;
 
-const Div = styled.div`
+const Div = styled('div')`
   display: inline-block;
 
   .trigger {

package/src/Logo/index.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+
+import { styled } from '../Theme';
 
 import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
 import { ReactComponent as LightText } from './images/logo-light-text.svg';
@@ -32,7 +33,7 @@ Logo.defaultProps = {
   showLogo: true,
 };
 
-const Container = styled.span`
+const Container = styled('span')`
   display: inline-flex;
   flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};
   justify-content: center;

package/src/Metric/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import ImageIcon from '../Icon/image';
+import { styled } from '../Theme';
 
 export default function Metric({ icon, value, name, url, animated, LinkComponent, prefix }) {
   const metric = (
@@ -40,7 +40,7 @@ Metric.defaultProps = {
   prefix: '/images',
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   border-left: 1px solid ${(props) => props.theme.typography.color.main};
   padding: 10px 0 10px 16px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {

package/src/NFTDisplay/aspect-ratio-container.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+
+import { styled } from '../Theme';
 
 function AspectRatioContainer({ aspect, children, ...rest }) {
   return (
@@ -14,7 +15,7 @@ AspectRatioContainer.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-const Root = styled.span`
+const Root = styled('span')`
   display: block;
   position: relative;
   width: 100%;

package/src/NFTDisplay/broken.js

@@ -1,6 +1,7 @@
-import styled from '@emotion/styled';
 import BrokenImage from '@mui/icons-material/BrokenImage';
 
+import { styled } from '../Theme';
+
 export default function Broken() {
   return <Root className="nft-display-broken" />;
 }

package/src/NFTDisplay/index.js

@@ -1,18 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';
 import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
+
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
 import InlineSvgEmbedder from './svg-embedder/inline-svg';
 import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
+import { styled } from '../Theme';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -220,7 +221,7 @@ NFTDisplay.defaultProps = {
   onCompleted: () => {},
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/NFTDisplay/loading.js

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
+import { styled } from '../Theme';
 
 export default function Loading() {
   return <Root className="nft-display__loading">loading...</Root>;
 }
 
-const Root = styled.span`
+const Root = styled('span')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import root from 'react-shadow/emotion';
 
+import { styled } from '../../Theme';
+
 /**
  * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
  */
@@ -23,7 +24,7 @@ const Root = styled(root.span)`
   height: 100%;
 `;
 
-const Inner = styled.div`
+const Inner = styled('div')`
   &,
   & > svg {
     height: 100%;

package/src/NavMenu/style.js

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
+import { styled } from '../Theme';
 
-const NavMenuBase = styled.nav`
+const NavMenuBase = styled('nav')`
   background-color: ${(props) => props.$bgColor};
   font-size: 16px;
   ul {

package/src/PricingTable/PricingPlan.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
+import { styled } from '../Theme';
+
 function PricingPlan({ plan }) {
   return (
     <PlanCard $shadow>

package/src/PricingTable/index.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
+import { styled } from '../Theme';
 
 function PricingTable({ plans }) {
   if (plans && plans.length > 0) {
@@ -28,7 +28,7 @@ PricingTable.propTypes = {
   plans: PropTypes.array.isRequired,
 };
 
-const Div = styled.div`
+const Div = styled('div')`
   padding: 100px 0;
   text-align: center;
   background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};

package/src/Result/common.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
-import { useTheme } from '@mui/material/styles';
 import InfoIcon from '@mui/icons-material/Info';
 import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
 import Result from './result';
 import translations from './translations';
 import { useLocaleContext } from '../Locale/context';
+import { useTheme } from '../Theme';
 
 // 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
 const useLocale = (locale) => {

package/src/Result/result.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
+import { styled } from '../Theme';
+
 function Result({ icon, title, description, extra, ...rest }) {
   return (
     <Root {...rest}>
@@ -42,7 +43,7 @@ Result.defaultProps = {
   extra: undefined,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/src/Screenshot/index.js

@@ -1,8 +1,8 @@
 import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 import './devices.css';
 
@@ -144,7 +144,7 @@ function Screenshot(props) {
   );
 }
 
-const Div = styled.div`
+const Div = styled('div')`
   @media (max-width: ${(props) => types[props.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(props) => types[props.type].scale});

package/src/SplitButton/index.js

@@ -1,6 +1,5 @@
 import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
@@ -10,6 +9,8 @@ import MenuItem from '@mui/material/MenuItem';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 
+import { styled } from '../Theme';
+
 /**
  * SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
  */

package/src/Switch/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MuiSwitch from '@mui/material/Switch';
+import { styled } from '../Theme';
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
 const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />)(

package/src/Tabs/index.js

@@ -1,7 +1,7 @@
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import MuiTabs from '@mui/material/Tabs';
 import MuiTab from '@mui/material/Tab';
+import { styled } from '../Theme';
 
 const PREFIX = 'index';
 

package/src/Tag/index.js

@@ -1,12 +1,10 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/material/styles';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';
+import { useTheme, styled } from '../Theme';
 
 const types = {
   error: {

package/src/TextCollapse/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-
 import Typography from '@mui/material/Typography';
-import styled from '@emotion/styled';
+
+import { styled } from '../Theme';
 
 export default function TextCollapse({
   children,

package/src/Theme/index.js

@@ -1,2 +1,3 @@
 export * from './theme';
+export { styled, useTheme } from '@mui/material/styles';
 export { default as ThemeProvider } from './theme-provider';

package/src/Theme/theme-provider.js

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
-import { create } from './theme';
+import { createTheme } from './theme';
 
-const defaultTheme = create();
+const defaultTheme = createTheme();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
@@ -15,10 +14,8 @@ export default function ThemeProvider({ children, theme, injectFirst }) {
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          {children}
-        </EmotionThemeProvider>
+        <CssBaseline />
+        {children}
       </MuiThemeProvider>
     </StyledEngineProvider>
   );

package/src/Theme/theme.js

@@ -1,10 +1,10 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import '@fontsource/lato/400.css';
 import '@fontsource/lato/700.css';
 import colors from '../Colors';
 
-const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
+const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
@@ -37,7 +37,7 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           palette || {}
         );
 
-  const theme = createTheme({
+  const theme = _createTheme({
     themeName: 'ArcBlock',
     palette: _palette,
     typography: Object.assign(
@@ -162,3 +162,5 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
 
   return enhanced;
 };
+
+export const createTheme = create;

package/src/Video/index.js

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from '@emotion/styled';
-
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 const { string, number, array, oneOfType, object } = PropTypes;
 
@@ -50,7 +49,7 @@ Video.defaultProps = {
   style: {},
 };
 
-const Placeholder = styled.div`
+const Placeholder = styled('div')`
   background-color: #222222;
   display: flex;
   justify-content: center;