@arcblock/ux 3.0.10 → 3.0.12

package/src/ActivityIndicator/index.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { green, blue } from '@mui/material/colors';
+import { Box } from '@mui/material';
 
 import Logo from '../Logo';
 import { styled, useTheme } from '../Theme';
@@ -54,7 +55,7 @@ ActivityIndicator.propTypes = {
   messages: PropTypes.arrayOf(PropTypes.string.isRequired),
 };
 
-const Div = styled('div')`
+const Div = styled(Box)`
   && {
     box-sizing: border-box;
     padding: 20px;
@@ -113,7 +114,7 @@ Orbit.propTypes = {
   duration: PropTypes.number,
 };
 
-const OrbitRoot = styled('div')`
+const OrbitRoot = styled(Box)`
   @keyframes orbit {
     0% {
       transform: rotate(0deg);

package/src/Address/Address.stories.jsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
 export { default as WithDifferentSizes } from './demo/with-different-sizes';
@@ -23,7 +24,7 @@ export default {
   ],
 };
 
-const ResizableContainer = styled('div')`
+const ResizableContainer = styled(Box)`
   width: 600px;
   max-width: 100%;
   padding: 16px;

package/src/Alert/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
 import isUndefined from 'lodash/isUndefined';
 
@@ -106,7 +106,7 @@ Alert.propTypes = {
 
 export default withDeprecated(Alert, { name: 'Alert', alternative: '@mui/material/Alert' });
 
-const Container = styled('div')`
+const Container = styled(Box)`
   display: flex;
   align-items: center;
   font-size: 16px;

package/src/AnimationWaiter/index.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { Skeleton } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
 
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
@@ -214,7 +214,7 @@ AnimationWaiter.propTypes = {
   increaseSpeed: PropTypes.number,
 };
 
-const Container = styled('div')`
+const Container = styled(Box)`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Blocklet/blocklet.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import { CircularProgress, Typography, useMediaQuery } from '@mui/material';
+import { Box, CircularProgress, Typography, useMediaQuery } from '@mui/material';
 
 import Avatar from '../Avatar';
 import Button from '../Button';
@@ -9,7 +9,7 @@ import Img from '../Img';
 import { useTheme, styled } from '../Theme';
 import { strippedString } from './utils';
 
-const Div = styled('div')`
+const Div = styled(Box)`
   &.arcblock-blocklet {
     padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0
       ${(props) => props.theme.spacing(2)};

package/src/Blocklet/utils.jsx

@@ -1,6 +1,7 @@
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
-const ActionButton = styled('div')`
+const ActionButton = styled(Box)`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;

package/src/BlockletNFT/index.jsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Portal, Typography, CircularProgress, useMediaQuery } from '@mui/material';
+import { Portal, Typography, CircularProgress, useMediaQuery, Box } from '@mui/material';
 
 import Avatar from '../Avatar';
 import Icon from '../Icon';
@@ -25,7 +25,7 @@ function prettySize(_size, digits = 1) {
   return _size && `${size}${list[index]}`;
 }
 
-const Div = styled('div')`
+const Div = styled(Box)`
   &.arcblock-blocklet {
     padding: 0 16px;
     background: ${(props) => props.theme.palette.common.white};

package/src/BlockletV2/utils.js

@@ -1,6 +1,7 @@
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
-const ActionButton = styled('div')`
+const ActionButton = styled(Box)`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;

package/src/Center/index.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
 export default function Center({
@@ -22,7 +23,7 @@ export default function Center({
   return <Div style={style}>{children}</Div>;
 }
 
-const Div = styled('div')`
+const Div = styled(Box)`
   flex: 1;
   width: 100vw;
   height: 100vh;

package/src/CodeBlock/LightBox.tsx

@@ -1,7 +1,8 @@
 // highlight.js/styles/atom-one-light.css
 import styled from '@emotion/styled';
+import { Box } from '@mui/material';
 
-const LightBox = styled('div')`
+const LightBox = styled(Box)`
   display: block;
   pre code.hljs {
     display: block;

package/src/Colors/Colors.stories.jsx

@@ -205,7 +205,7 @@ export function MuiThemeBoxButton() {
 
 MuiThemeBoxButton.storyName = 'mui theme & Box/Button';
 
-const StyledComponentTestBox = styled('div')`
+const StyledComponentTestBox = styled(Box)`
   padding: 16px;
   background-color: ${colors.success.main};
 `;

package/src/CookieConsent/index.tsx

@@ -70,7 +70,7 @@ export default function DefaultCookieConsent({
   );
 }
 
-const Wrapper = styled('div')`
+const Wrapper = styled(Box)`
   box-sizing: border-box;
   position: fixed;
   right: 20px;

package/src/CountDown/index.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { type SxProps } from '@mui/material';
+import { Box, type SxProps } from '@mui/material';
 import isUndefined from 'lodash/isUndefined';
 
 import { getColor, mergeProps } from '../Util';
@@ -118,7 +118,7 @@ export default class CountDown extends Component<CountDownProps, CountDownState>
 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', { shouldForwardProp: (prop) => prop !== 'dark' })<{ dark: boolean }>`
+const Container = styled(Box, { shouldForwardProp: (prop) => prop !== 'dark' })<{ dark: boolean }>`
   color: ${(props) => getColor(props)};
   font-size: 50px;
   display: flex;

package/src/DID/DID.stories.jsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
 export { default as ActionTest } from './demo/action-test';
@@ -22,7 +23,7 @@ export default {
   ],
 };
 
-const ResizableContainer = styled('div')`
+const ResizableContainer = styled(Box)`
   width: 100%;
   max-width: 100%;
   padding: 16px;

package/src/Datatable/CustomToolbar.jsx

@@ -19,6 +19,7 @@ import {
   MenuItem,
   Tooltip,
   IconButton,
+  Box,
 } from '@mui/material';
 import { useDeepCompareEffect } from 'ahooks';
 
@@ -350,7 +351,7 @@ CustomToolbar.propTypes = {
   tableRef: PropTypes.func.isRequired,
 };
 
-const Container = styled('div')`
+const Container = styled(Box)`
   display: flex;
   align-items: center;
   height: 56px;
@@ -412,7 +413,7 @@ const Container = styled('div')`
   }
 `;
 
-const ProgressContainer = styled('div')`
+const ProgressContainer = styled(Box)`
   width: 100%;
   height: 2px;
   .toolbar-progress {

package/src/Datatable/TableSearch.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, Tooltip, TextField } from '@mui/material';
+import { IconButton, Tooltip, TextField, Box } from '@mui/material';
 import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
 import clsx from 'clsx';
 import noop from 'lodash/noop';
@@ -113,7 +113,7 @@ TableSearch.propTypes = {
   searchClose: PropTypes.func.isRequired,
 };
 
-const Container = styled('div')`
+const Container = styled(Box)`
   display: flex;
   align-items: center;
   .toolbar-search-area {

package/src/Datatable/index.jsx

@@ -8,7 +8,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import clsx from 'clsx';
 import { useCreation, useDeepCompareEffect } from 'ahooks';
-import { CircularProgress } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 
 import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
@@ -66,7 +66,7 @@ import { styled } from '../Theme';
  * } & ModifiedMUIDataTableProps} DataTableProps
  */
 
-const FilterLine = styled('div')`
+const FilterLine = styled(Box)`
   display: flex;
   align-items: center;
   .toolbar-filter-content {
@@ -481,7 +481,7 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled('div', {
+const TableContainer = styled(Box, {
   shouldForwardProp: (prop) => !['verticalKeyWidth', 'bgColor', 'hoverColor', 'stripColor'].includes(prop),
 })(({ theme, verticalKeyWidth, bgColor, hoverColor, stripColor }) => {
   const primaryTextColor = theme.palette.text.primary;
@@ -607,7 +607,7 @@ const TableContainer = styled('div', {
   `;
 });
 
-const FooterContainer = styled('div')`
+const FooterContainer = styled(Box)`
   display: flex;
   align-items: center;
   .datatable-footer {

package/src/Earth/index.tsx

@@ -4,6 +4,7 @@ import useSpring from 'react-use/lib/useSpring';
 import * as d3 from 'd3-geo';
 import * as topojson from 'topojson-client';
 import versor from 'versor';
+import { Box } from '@mui/material';
 
 import json from './countries.json';
 import util from './util';
@@ -393,7 +394,7 @@ type ContainerProps = {
   colors: Colors;
 };
 
-const Container = styled('div')<ContainerProps>`
+const Container = styled(Box)<ContainerProps>`
   background-color: ${(props) => (props.$theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
@@ -476,7 +477,7 @@ const Container = styled('div')<ContainerProps>`
   }
 `;
 
-const Tooltip = styled('div')`
+const Tooltip = styled(Box)`
   position: absolute;
   width: auto;
   min-width: 90px;

package/src/Footer/index.tsx

@@ -63,7 +63,7 @@ type ContainerProps = {
   dark: boolean;
 };
 
-const Container = styled('div', {
+const Container = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'dark',
 })<ContainerProps>`
   position: relative;

package/src/Icon/image.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import Img, { type ImgProps } from '../Img';
 import { styled } from '../Theme';
 
@@ -36,7 +37,7 @@ export default function ImageIcon({
   );
 }
 
-const Div = styled('div')`
+const Div = styled(Box)`
   position: relative;
   .badge-point {
     position: absolute;

package/src/InfoRow/index.tsx

@@ -1,6 +1,6 @@
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import { styled } from '../Theme';
 
@@ -51,7 +51,7 @@ type ContainerProps = {
   width: number;
 };
 
-const Container = styled('div')<ContainerProps>`
+const Container = styled(Box)<ContainerProps>`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   justify-content: flex-start;

package/src/Layout/dashboard/index.tsx

@@ -177,7 +177,7 @@ function Dashboard({
 
 type WrapperProps = React.HTMLAttributes<HTMLDivElement> & { sidebarWidth: number };
 
-const Wrapper = styled('div', {
+const Wrapper = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sidebarWidth',
 })<WrapperProps>`
   &.dashboard {

package/src/Layout/dashboard/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
@@ -66,7 +66,7 @@ function Sidebar({ links, addons = undefined, dense = false, ...rest }: SidebarP
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
-const Root = styled('div')`
+const Root = styled(Box)`
   display: flex;
   flex-direction: column;
   ul {

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

@@ -8,7 +8,7 @@ import Header from './header';
 import Footer from '../../Footer';
 import { styled } from '../../Theme';
 
-const Wrapper = styled('div')`
+const Wrapper = styled(Box)`
   &.dashboard {
     display: flex;
     flex-direction: column;

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Button, Typography, type SxProps, type ButtonProps } from '@mui/material';
+import { Button, Typography, type SxProps, type ButtonProps, Box } from '@mui/material';
 import { teal } from '@mui/material/colors';
 
 import ImageIcon from '../../Icon/image';
@@ -69,7 +69,7 @@ export default function Sidebar({
   );
 }
 
-const MenuItems = memo(styled('div')`
+const MenuItems = memo(styled(Box)`
   flex: 1;
   display: flex;
   flex-direction: column;

package/src/Layout/index.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
   type SxProps,
   ListItemButton,
+  Box,
 } from '@mui/material';
 import { Menu as MenuIcon } from '@mui/icons-material';
 
@@ -196,7 +197,7 @@ export default function Layout({
   );
 }
 
-const Div = styled('div')`
+const Div = styled(Box)`
   width: 100%;
   min-height: 100vh;
   display: flex;

package/src/Metric/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { Link } from '@mui/material';
+import { Box, Link } from '@mui/material';
 
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
@@ -56,7 +56,7 @@ type ContainerProps = {
   size?: 'small' | 'large';
 };
 
-const Container = styled('div')<ContainerProps>`
+const Container = styled(Box)<ContainerProps>`
   border-left: 1px solid ${(props) => props.theme.palette.divider};
   padding: 10px 0 10px 16px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {

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

@@ -1,5 +1,5 @@
 import root from 'react-shadow/emotion';
-import { type SxProps } from '@mui/material';
+import { Box, type SxProps } from '@mui/material';
 
 import { styled } from '../../Theme';
 
@@ -23,7 +23,7 @@ const Root = styled(root.span)`
   height: 100%;
 `;
 
-const Inner = styled('div')`
+const Inner = styled(Box)`
   &,
   & > svg {
     height: 100%;

package/src/PricingTable/index.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 
 import PricingPlan, { type PricingPlanProps } from './PricingPlan';
 import { styled } from '../Theme';
@@ -44,7 +44,7 @@ type DivProps = {
   variant: 'even' | 'odd';
 };
 
-const Div = styled('div')<DivProps>`
+const Div = styled(Box)<DivProps>`
   padding: 100px 0;
   text-align: center;
   background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};

package/src/Result/result.tsx

@@ -50,7 +50,7 @@ function Result({ icon = null, title = '', description = '', extra = null, ...re
   );
 }
 
-const Root = styled('div')`
+const Root = styled(Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/src/Screenshot/BaseScreenshot/index.tsx

@@ -1,4 +1,4 @@
-import { type SxProps } from '@mui/material';
+import { Box, type SxProps } from '@mui/material';
 
 import phone from './shells/Phone';
 import macbook from './shells/Macbook';
@@ -20,7 +20,7 @@ function Screenshot({ width = 0, children, type = 'phone', ...rest }: Screenshot
 
   const { Shell, ratio, screenData, width: defaultWidth } = map[(_type as keyof typeof map) || 'phone'];
 
-  const Root = styled('div')`
+  const Root = styled(Box)`
     position: relative;
     display: inline-block;
     width: ${width || `${defaultWidth}px`};

package/src/Screenshot/index.tsx

@@ -1,5 +1,5 @@
 import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
-import { type SxProps } from '@mui/material';
+import { Box, type SxProps } from '@mui/material';
 import isUndefined from 'lodash/isUndefined';
 
 import { mergeProps } from '../Util';
@@ -195,7 +195,7 @@ type DivProps = {
   contentZIndex: number;
 };
 
-const Div = styled('div')<DivProps>`
+const Div = styled(Box)<DivProps>`
   @media (max-width: ${(props) => types[props.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(props) => types[props.type].scale});
@@ -266,7 +266,7 @@ function ScreenFixer({ ...props }: ScreenFixerProps) {
   );
 }
 
-const ReScreen = styled('div')`
+const ReScreen = styled(Box)`
   div[type] {
     transform: scale(1);
     transform-origin: 0 0;

package/src/Video/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import Player from 'react-player';
-import { CircularProgress } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import isUndefined from 'lodash/isUndefined';
 
 import { mergeProps } from '../Util';
@@ -54,7 +54,7 @@ export default function Video(rawProps: VideoProps) {
   );
 }
 
-const Placeholder = styled('div')`
+const Placeholder = styled(Box)`
   background-color: #222222;
   display: flex;
   justify-content: center;

package/src/Wallet/Action.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import isUndefined from 'lodash/isUndefined';
 
 import logo from './images/abtwallet.png';
@@ -76,7 +76,7 @@ type ContentProps = {
   color: string;
 };
 
-const Content = styled('div')<ContentProps>`
+const Content = styled(Box)<ContentProps>`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Wallet/Download.tsx

@@ -1,5 +1,5 @@
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { Typography, type SxProps } from '@mui/material';
+import { Box, Typography, type SxProps } from '@mui/material';
 import isUndefined from 'lodash/isUndefined';
 
 import AppStoreIcon from './images/app-store.svg?react';
@@ -125,7 +125,7 @@ type ContainerProps = {
   storeLayout?: WalletDownloadProps['storeLayout'];
 };
 
-const Container = styled('div')<ContainerProps>`
+const Container = styled(Box)<ContainerProps>`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   align-items: center;

package/src/WechatPrompt/index.tsx

@@ -44,7 +44,7 @@ export default function WechatPrompt() {
   );
 }
 
-const Container = styled('div')`
+const Container = styled(Box)`
   .wechat-title {
     height: 80px;
     line-height: 80px;