@arcblock/ux 2.3.0 → 2.4.2

package/src/Dialog/dialog.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import MuiDialog from '@mui/material/Dialog';
 import MuiDialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';

package/src/Earth/index.js

@@ -2,7 +2,7 @@
 import { useReducer, useRef, useEffect } from 'react';
 import useSpring from 'react-use/lib/useSpring';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import * as d3 from 'd3-geo';
 import * as topojson from 'topojson-client';
 import versor from 'versor';

package/src/Empty/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Icon from '../Icon';
 
 const Wrapper = styled.div`

package/src/ErrorBoundary/fallback.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 import Button from '../Button';

package/src/Footer/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
 

package/src/Header/auto-hidden.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
 /**

package/src/Header/header.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import { useTheme } from '@mui/material/styles';

package/src/Header/responsive-header.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+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';

package/src/Icon/image.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Img from '../Img';
 

package/src/Icon/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import colors from '../Colors';
 

package/src/InfoRow/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 
 function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) {

package/src/Layout/dashboard/index.js

@@ -2,7 +2,7 @@ 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 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';

package/src/Layout/dashboard/sidebar.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Button from '@mui/material/IconButton';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';

package/src/Layout/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Helmet from 'react-helmet';
 import Link from '@mui/material/Link';
 

package/src/Locale/selector.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';

package/src/Logo/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
 import { ReactComponent as LightText } from './images/logo-light-text.svg';

package/src/Metric/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import ImageIcon from '../Icon/image';
 

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 function AspectRatioContainer({ aspect, children, ...rest }) {
   return (

package/src/NFTDisplay/broken.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import BrokenImage from '@mui/icons-material/BrokenImage';
 
 export default function Broken() {

package/src/NFTDisplay/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';

package/src/NFTDisplay/loading.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function Loading() {
   return <Root className="nft-display__loading">loading...</Root>;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import root from 'react-shadow/styled-components';
+import styled from '@emotion/styled';
+import root from 'react-shadow/emotion';
 
 /**
  * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染

package/src/NavMenu/style.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const NavMenuBase = styled.nav`
   background-color: ${(props) => props.$bgColor};

package/src/PricingTable/PricingPlan.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';

package/src/PricingTable/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';

package/src/Result/result.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
 function Result({ icon, title, description, extra, ...rest }) {

package/src/Screenshot/index.js

@@ -1,6 +1,6 @@
 import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { mergeProps } from '../Util';
 

package/src/SplitButton/index.js

@@ -1,6 +1,6 @@
 import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';

package/src/Tag/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';

package/src/TextCollapse/index.js

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

package/src/Theme/theme-provider.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+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';
@@ -9,17 +9,16 @@ const defaultTheme = create();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
  */
-export default function ThemeProvider({ children, theme }) {
+export default function ThemeProvider({ children, theme, injectFirst }) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
-        <StyledThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
           <CssBaseline />
           {children}
-        </StyledThemeProvider>
+        </EmotionThemeProvider>
       </MuiThemeProvider>
     </StyledEngineProvider>
   );
@@ -28,9 +27,11 @@ export default function ThemeProvider({ children, theme }) {
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
+  injectFirst: PropTypes.bool,
 };
 
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
+  injectFirst: true,
 };

package/src/Video/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import CircularProgress from '@mui/material/CircularProgress';
 

package/src/Wallet/Action.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 

package/src/Wallet/Download.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';

package/src/Wallet/Open.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 

package/src/WechatPrompt/index.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';

package/src/withTheme/index.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { Global, ThemeProvider, css } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
 import { create } from '../Theme';
 
-const GlobalStyle = createGlobalStyle`
+const globalStyles = css`
   font-family: ${(props) => props.theme.typography.fontFamily};
   color: ${(props) => props.theme.typography.color.main};
 
-  a, a:hover, a:active {
+  a,
+  a:hover,
+  a:active {
     text-decoration: none;
     color: ${(props) => props.theme.palette.primary.dark};
   }
@@ -57,7 +59,7 @@ function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typog
       return (
         <MuiThemeProvider theme={this.theme}>
           <CssBaseline />
-          <GlobalStyle theme={this.theme} />
+          <Global styles={globalStyles} />
           <ThemeProvider theme={this.theme}>
             <Component {...this.props} />
           </ThemeProvider>