@arcblock/ux 2.4.1 → 2.4.4

package/src/ContactForm/index.js

@@ -2,14 +2,13 @@
 /* eslint-disable react/static-property-placement */
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import axios from 'axios';
-
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
 import Button from '../Button';
+import { styled } from '../Theme';
 
 export async function submitContactForm({ formId, portalId }, fields, context) {
   const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
@@ -188,7 +187,7 @@ export default class ContactForm extends React.Component {
 // prettier-ignore
 const getInputWidth = props => (props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`);
 
-const Form = styled.form`
+const Form = styled('form')`
   display: flex;
   flex-direction: column;
   justify-content: center;

package/src/CookieConsent/index.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Button from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
+import { styled } from '../Theme';
+
 export { resetCookieConsentValue };
 
 const translations = {
@@ -59,7 +60,7 @@ DefaultCookieConsent.defaultProps = {
   locale: 'en',
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   box-sizing: border-box;
   position: fixed;
   right: 20px;

package/src/CountDown/index.js

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import { getColor, mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 const SECONDS_OF_MINUTE = 60;
 const SECONDS_OF_HOUR = 60 * SECONDS_OF_MINUTE;
@@ -99,7 +99,7 @@ CountDown.defaultProps = {
 const textBackground = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
 linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`;
 
-const Container = styled.div`
+const Container = styled('div')`
   color: ${(props) => getColor(props)};
   font-size: 50px;
   display: flex;

package/src/Datatable/CustomToolbar.js

@@ -1,7 +1,6 @@
 import { useState, useRef, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableFilter, TableViewCol } from 'mui-datatables';
-import styled from '@emotion/styled';
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -16,11 +15,11 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
 import LinearProgress from '@mui/material/LinearProgress';
 import { handleCSVDownload } from './utils';
 import TableSearch from './TableSearch';
 import { useDatatableContext } from './DatatableContext';
+import { styled, useTheme } from '../Theme';
 
 function useMobile() {
   const theme = useTheme();
@@ -351,7 +350,7 @@ CustomToolbar.defaultProps = {
   searchText: null,
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   align-items: center;
   height: 56px;
@@ -413,7 +412,7 @@ const Container = styled.div`
   }
 `;
 
-const ProgressContainer = styled.div`
+const ProgressContainer = styled('div')`
   width: 100%;
   height: 2px;
   .toolbar-progress {

package/src/Datatable/TableSearch.js

@@ -5,9 +5,9 @@ import Tooltip from '@mui/material/Tooltip';
 import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
-import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { useDatatableContext } from './DatatableContext';
+import { styled } from '../Theme';
 
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const { searchOpen, searchPlaceholder, searchAlwaysOpen } = options;
@@ -113,7 +113,7 @@ TableSearch.defaultProps = {
   onSearchOpen: () => {},
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   align-items: center;
   .toolbar-search-area {

package/src/Datatable/index.js

@@ -2,7 +2,6 @@
 import { useEffect, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
@@ -12,6 +11,7 @@ import Empty from '../Empty';
 import Spinner from '../Spinner';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvider, useDatatableContext } from './DatatableContext';
+import { styled } from '../Theme';
 
 export default function Datatable({ ...props }) {
   return (
@@ -382,7 +382,7 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled.div`
+const TableContainer = styled('div')`
   &.datatable-hide-header {
     thead.MuiTableHead-root {
       display: none;
@@ -474,7 +474,7 @@ const TableContainer = styled.div`
   }
 `;
 
-const FilterLine = styled.div`
+const FilterLine = styled('div')`
   display: flex;
   align-items: center;
   .toolbar-filter-content {
@@ -522,7 +522,7 @@ function WrapTableFooter(props) {
   );
 }
 
-const FooterContainer = styled.div`
+const FooterContainer = styled('div')`
   display: flex;
   align-items: center;
   .datatable-footer {

package/src/Dialog/dialog.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import MuiDialog from '@mui/material/Dialog';
 import MuiDialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import IconButton from '@mui/material/IconButton';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
 
+import { styled, useTheme } from '../Theme';
+
 /**
  * Dialog
  *
@@ -108,7 +108,7 @@ const StyledMuiDialog = styled(MuiDialog)`
   }
 `;
 
-const Header = styled.div`
+const Header = styled('div')`
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/Earth/index.js

@@ -2,13 +2,13 @@
 import { useReducer, useRef, useEffect } from 'react';
 import useSpring from 'react-use/lib/useSpring';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import * as d3 from 'd3-geo';
 import * as topojson from 'topojson-client';
 import versor from 'versor';
 
 import json from './countries.json';
 import util from './util';
+import { styled } from '../Theme';
 
 const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
 const themes = {
@@ -371,7 +371,7 @@ Earth.defaultProps = {
   colors: {},
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   background-color: ${(props) => (props.theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
@@ -454,7 +454,7 @@ const Container = styled.div`
   }
 `;
 
-const Tooltip = styled.div`
+const Tooltip = styled('div')`
   position: absolute;
   width: auto;
   min-width: 90px;

package/src/Empty/index.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+
 import Icon from '../Icon';
+import { styled } from '../Theme';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/ErrorBoundary/fallback.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { useTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 import Button from '../Button';
+import { styled, useTheme } from '../Theme';
 
 function InternalErrorFallback({ title, desc, retryFunc }) {
   const theme = useTheme();
@@ -46,7 +45,7 @@ ErrorFallbackRetry.propTypes = {
   resetErrorBoundary: PropTypes.func.isRequired,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   padding: 16px;
   border: 2px solid ${(props) => props.$theme.palette.error.main};
   border-radius: 4px;

package/src/Footer/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-unused-prop-types */
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
+import { styled } from '../Theme';
 
 export default function Footer(props) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
@@ -49,7 +49,7 @@ Footer.defaultProps = {
   style: {},
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   margin-top: 64px;
   padding: 24px 0 32px;
   border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};

package/src/Header/auto-hidden.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';
+
 /**
  * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
  */

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" />;
 }