@arcblock/ux 3.0.12 → 3.0.14

package/lib/Screenshot/index.js

@@ -1,11 +1,10 @@
-import { jsx as s, jsxs as N } from "react/jsx-runtime";
-import { useRef as k, useState as f, useEffect as S, Children as g, cloneElement as $, createElement as z } from "react";
-import { Box as v } from "@mui/material";
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import { useRef as N, useState as f, useEffect as k, Children as v, cloneElement as S, createElement as $ } from "react";
 import a from "lodash/isUndefined";
-import { mergeProps as C } from "../Util/index.js";
-import { styled as b } from "../Theme/index.js";
-import j from "./BaseScreenshot/index.js";
-/* empty css            */
+import { mergeProps as z } from "../Util/index.js";
+import { styled as g } from "../Theme/index.js";
+import C from "./BaseScreenshot/index.js";
+import "./devices.css";
 const u = {
   "iphone-x": {
     borderRadius: 32,
@@ -72,33 +71,33 @@ const u = {
     width: 200,
     scale: 1
   }
-}, E = {
+}, j = {
   img: ["alt", "title", "src", "srcSet", "sizes", "loading", "key", "children"],
   video: ["alt", "title", "muted", "autoplay", "loop", "key", "children"]
-}, O = (t) => [
-  z(
+}, E = (t) => [
+  $(
     t.type,
-    E[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
+    j[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
   )
-], w = (t, e = !0) => {
+], b = (t, e = !0) => {
   for (let i = 0; i < t.length; i++) {
     const r = t[i];
     if (["img", "video"].includes(r.type))
-      return O(r);
+      return E(r);
     if (r.props && r.props.children) {
-      const n = g.toArray(r.props.children), o = w(n, !1);
+      const n = v.toArray(r.props.children), o = b(n, !1);
       if (o)
         return o;
     }
   }
   return e ? t : null;
 };
-function y(t) {
+function w(t) {
   const e = Object.assign({}, t);
   a(e.type) && (e.type = "iphone-x"), a(e.className) && (e.className = ""), a(e.style) && (e.style = {}), a(e.width) && (e.width = 0), a(e.height) && (e.height = 0);
-  const i = C(e, y, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
-  return /* @__PURE__ */ N(
-    H,
+  const i = z(e, w, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
+  return /* @__PURE__ */ x(
+    O,
     {
       ...l,
       type: r,
@@ -107,7 +106,7 @@ function y(t) {
       contentRadius: d,
       contentZIndex: h,
       children: [
-        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: w(g.toArray(n))?.map((R, x) => $(R, { key: x })) }) }),
+        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: b(v.toArray(n))?.map((y, R) => S(y, { key: R })) }) }),
         /* @__PURE__ */ s("div", { className: "device-stripe" }),
         /* @__PURE__ */ s("div", { className: "device-header" }),
         /* @__PURE__ */ s("div", { className: "device-sensors" }),
@@ -117,7 +116,7 @@ function y(t) {
     }
   );
 }
-const H = b(v)`
+const O = g("div")`
   @media (max-width: ${(t) => u[t.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(t) => u[t.type].scale});
@@ -136,9 +135,9 @@ const H = b(v)`
     height: 100.1%;
   }
 `;
-function P({ ...t }) {
-  const e = k(null), [i, r] = f(), [n, o] = f(null);
-  return S(() => {
+function H({ ...t }) {
+  const e = N(null), [i, r] = f(), [n, o] = f(null);
+  return k(() => {
     let c = null;
     const p = () => {
       const { clientWidth: m } = e.current, { clientWidth: l, clientHeight: h } = e.current.children[0], d = m / l;
@@ -147,18 +146,18 @@ function P({ ...t }) {
     return e.current && (c = new ResizeObserver(p), c.observe(e.current)), () => {
       c && c.disconnect();
     };
-  }, [e.current]), /* @__PURE__ */ s(W, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(y, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
+  }, [e.current]), /* @__PURE__ */ s(P, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(w, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
 }
-const W = b(v)`
+const P = g("div")`
   div[type] {
     transform: scale(1);
     transform-origin: 0 0;
   }
 `;
-function _({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
+function Z({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
   const o = t.toLowerCase();
-  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(j, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(P, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
+  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(C, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(H, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
 }
 export {
-  _ as default
+  Z as default
 };

package/lib/Video/index.js

@@ -1,27 +1,27 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { useState as u } from "react";
 import h from "react-player";
-import { Box as g, CircularProgress as m } from "@mui/material";
+import { CircularProgress as m } from "@mui/material";
 import l from "lodash/isUndefined";
-import { mergeProps as b } from "../Util/index.js";
-import { styled as x } from "../Theme/index.js";
-function j(p) {
+import { mergeProps as g } from "../Util/index.js";
+import { styled as b } from "../Theme/index.js";
+function x(p) {
   const e = Object.assign({}, p);
   l(e.width) && (e.width = 640), l(e.height) && (e.height = 400), l(e.style) && (e.style = {});
-  const n = b(e, j, ["style"]), { url: o, width: i, height: r, style: y } = n, [s, a] = u(!1), d = Object.assign({ border: "none" }, y, {
-    width: i,
+  const n = g(e, x, ["style"]), { url: i, width: o, height: r, style: y } = n, [s, a] = u(!1), d = Object.assign({ border: "none" }, y, {
+    width: o,
     height: r,
     visibility: s ? "visible" : "hidden"
   });
-  return o.indexOf("v.qq.com") > 0 ? /* @__PURE__ */ c(f, { style: { width: i, height: r }, children: [
-    /* @__PURE__ */ t("iframe", { title: o, style: d, src: o, onLoad: () => a(!0), allowFullScreen: !0 }),
+  return i.indexOf("v.qq.com") > 0 ? /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
+    /* @__PURE__ */ t("iframe", { title: i, style: d, src: i, onLoad: () => a(!0), allowFullScreen: !0 }),
     !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
-  ] }) : /* @__PURE__ */ c(f, { style: { width: i, height: r }, children: [
+  ] }) : /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
     /* @__PURE__ */ t(h, { style: d, ...n, onReady: () => a(!0) }),
     !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
   ] });
 }
-const f = x(g)`
+const f = b("div")`
   background-color: #222222;
   display: flex;
   justify-content: center;
@@ -36,5 +36,5 @@ const f = x(g)`
   }
 `;
 export {
-  j as default
+  x as default
 };

package/lib/Wallet/Action.js

@@ -1,18 +1,18 @@
 import { jsx as l, jsxs as o } from "react/jsx-runtime";
-import { Box as g, Typography as x } from "@mui/material";
+import { Typography as g } from "@mui/material";
 import i from "lodash/isUndefined";
-import y from "./images/abtwallet.png";
-import { mergeProps as _ } from "../Util/index.js";
+import x from "./images/abtwallet.png";
+import { mergeProps as y } from "../Util/index.js";
 import c from "../Colors/themes/default.js";
-import h from "../Button/index.js";
-import { styled as u } from "../Theme/index.js";
-function w(t) {
+import _ from "../Button/index.js";
+import { styled as h } from "../Theme/index.js";
+function u(t) {
   const e = Object.assign({}, t);
   i(e.action) && (e.action = "Login"), i(e.textLayout) && (e.textLayout = "vertical"), i(e.size) && (e.size = "medium"), i(e.style) && (e.style = {});
-  const m = _(e, w, ["style"]), { action: n, size: p, textLayout: s, style: f = {}, ...d } = m, r = Object.assign({}, f, { border: "none", padding: 0 });
-  return /* @__PURE__ */ l(h, { style: r, ...d, variant: "outlined", children: /* @__PURE__ */ o(z, { size: p, color: r.color, children: [
-    /* @__PURE__ */ l("img", { src: y, className: "wallet-action__logo", alt: "DID Wallet" }),
-    s === "vertical" && /* @__PURE__ */ o(x, { className: "wallet-action__text", component: "div", children: [
+  const m = y(e, u, ["style"]), { action: n, size: p, textLayout: s, style: f = {}, ...d } = m, r = Object.assign({}, f, { border: "none", padding: 0 });
+  return /* @__PURE__ */ l(_, { style: r, ...d, variant: "outlined", children: /* @__PURE__ */ o(w, { size: p, color: r.color, children: [
+    /* @__PURE__ */ l("img", { src: x, className: "wallet-action__logo", alt: "DID Wallet" }),
+    s === "vertical" && /* @__PURE__ */ o(g, { className: "wallet-action__text", component: "div", children: [
       /* @__PURE__ */ o("span", { className: "wallet-action__action", children: [
         n,
         " with"
@@ -38,7 +38,7 @@ const a = {
     large: 13,
     xlarge: 18
   }
-}, z = u(g)`
+}, w = h("div")`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -79,5 +79,5 @@ const a = {
   }
 `;
 export {
-  w as default
+  u as default
 };

package/lib/Wallet/Download.js

@@ -1,26 +1,26 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import g from "@arcblock/react-hooks/lib/useBrowser";
-import { Box as v, Typography as f } from "@mui/material";
+import { Typography as f } from "@mui/material";
 import a from "lodash/isUndefined";
-import b from "./images/app-store.svg.js";
-import x from "./images/google-play.svg.js";
+import v from "./images/app-store.svg.js";
+import b from "./images/google-play.svg.js";
 import L from "./images/android_download.svg.js";
 import i from "../Button/index.js";
 import { mergeProps as k } from "../Util/index.js";
-import { styled as D } from "../Theme/index.js";
-function N(t) {
+import { styled as x } from "../Theme/index.js";
+function D(t) {
   const l = g(), o = Object.assign({}, t);
   a(o.title) && (o.title = "Download DID Wallet"), a(o.layout) && (o.layout = "vertical"), a(o.storeLayout) && (o.storeLayout = "horizontal"), a(o.locale) && (o.locale = "zh"), a(o.iosLink) && (o.iosLink = "https://itunes.apple.com/app/id1460083542"), a(o.androidLink) && (o.androidLink = "https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product"), a(o.androidDownLoadUrl) && (o.androidDownLoadUrl = "https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk"), a(o.style) && (o.style = {});
-  const h = k(o, N, ["style"]), { title: d, children: s, iosLink: c, androidLink: m, androidDownLoadUrl: p, locale: n, ...w } = h, y = l.mobile.android.phone || l.mobile.android.tablet, u = l.mobile.apple.phone || l.mobile.apple.tablet;
-  return /* @__PURE__ */ r($, { ...w, children: [
+  const h = k(o, D, ["style"]), { title: d, children: s, iosLink: c, androidLink: m, androidDownLoadUrl: p, locale: n, ...w } = h, y = l.mobile.android.phone || l.mobile.android.tablet, u = l.mobile.apple.phone || l.mobile.apple.tablet;
+  return /* @__PURE__ */ r(N, { ...w, children: [
     /* @__PURE__ */ r("div", { className: "download-text", children: [
       !!d && /* @__PURE__ */ e(f, { className: "download-title", component: "div", children: d }),
       s && /* @__PURE__ */ e(f, { className: "download-extra", component: "div", children: s })
     ] }),
     !l.mobile.any && /* @__PURE__ */ r("div", { className: "download-store-list", children: [
-      /* @__PURE__ */ e(i, { className: "download-link", component: "a", href: c, children: /* @__PURE__ */ e(b, {}) }),
+      /* @__PURE__ */ e(i, { className: "download-link", component: "a", href: c, children: /* @__PURE__ */ e(v, {}) }),
       n === "zh" && /* @__PURE__ */ e(i, { component: "a", className: "download-link", href: p, children: /* @__PURE__ */ e(L, {}) }),
-      n === "en" && /* @__PURE__ */ e(i, { component: "a", className: "download-link", href: m, children: /* @__PURE__ */ e(x, {}) })
+      n === "en" && /* @__PURE__ */ e(i, { component: "a", className: "download-link", href: m, children: /* @__PURE__ */ e(b, {}) })
     ] }),
     y && /* @__PURE__ */ r("div", { className: "download-store-list", children: [
       n === "zh" && /* @__PURE__ */ e(i, { component: "a", href: p, variant: "outlined", color: "primary", children: "本地下载" }),
@@ -29,7 +29,7 @@ function N(t) {
     u && /* @__PURE__ */ e("div", { className: "download-store-list", children: /* @__PURE__ */ e(i, { component: "a", href: c, variant: "outlined", color: "primary", children: "Download" }) })
   ] });
 }
-const $ = D(v)`
+const N = x("div")`
   display: flex;
   flex-direction: ${(t) => t.layout === "vertical" ? "column" : "row"};
   align-items: center;
@@ -60,5 +60,5 @@ const $ = D(v)`
   }
 `;
 export {
-  N as default
+  D as default
 };

package/lib/WechatPrompt/index.js

@@ -20,7 +20,7 @@ function u() {
     ] })
   ] }) });
 }
-const c = s(Box)`
+const c = s("div")`
   .wechat-title {
     height: 80px;
     line-height: 80px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "ebe824e4b0ddfc1cbdd9ffecc22283e57a58c042",
+  "gitHead": "3957f4585b68497a5f297c25649f8759e98c6c7a",
   "dependencies": {
-    "@arcblock/bridge": "3.0.12",
+    "@arcblock/bridge": "3.0.14",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.12",
-    "@arcblock/nft-display": "3.0.12",
-    "@arcblock/react-hooks": "3.0.12",
+    "@arcblock/icons": "3.0.14",
+    "@arcblock/nft-display": "3.0.14",
+    "@arcblock/react-hooks": "3.0.14",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.12",
+    "@blocklet/theme": "3.0.14",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/ActivityIndicator/index.jsx

@@ -1,7 +1,6 @@
 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';
@@ -55,7 +54,7 @@ ActivityIndicator.propTypes = {
   messages: PropTypes.arrayOf(PropTypes.string.isRequired),
 };
 
-const Div = styled(Box)`
+const Div = styled('div')`
   && {
     box-sizing: border-box;
     padding: 20px;
@@ -114,7 +113,7 @@ Orbit.propTypes = {
   duration: PropTypes.number,
 };
 
-const OrbitRoot = styled(Box)`
+const OrbitRoot = styled('div')`
   @keyframes orbit {
     0% {
       transform: rotate(0deg);

package/src/Address/Address.stories.jsx

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

package/src/Alert/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Box, Typography } from '@mui/material';
+import { 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(Box)`
+const Container = styled('div')`
   display: flex;
   align-items: center;
   font-size: 16px;

package/src/AnimationWaiter/index.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { Box, Skeleton } from '@mui/material';
+import { 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(Box)`
+const Container = styled('div')`
   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 { Box, CircularProgress, Typography, useMediaQuery } from '@mui/material';
+import { 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(Box)`
+const Div = styled('div')`
   &.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,7 +1,6 @@
-import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
-const ActionButton = styled(Box)`
+const ActionButton = styled('div')`
   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, Box } from '@mui/material';
+import { Portal, Typography, CircularProgress, useMediaQuery } 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(Box)`
+const Div = styled('div')`
   &.arcblock-blocklet {
     padding: 0 16px;
     background: ${(props) => props.theme.palette.common.white};

package/src/BlockletV2/utils.js

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

package/src/Center/index.tsx

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

package/src/CodeBlock/LightBox.tsx

@@ -1,8 +1,7 @@
 // highlight.js/styles/atom-one-light.css
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
 
-const LightBox = styled(Box)`
+const LightBox = styled('div')`
   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(Box)`
+const StyledComponentTestBox = styled('div')`
   padding: 16px;
   background-color: ${colors.success.main};
 `;

package/src/CookieConsent/index.tsx

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

package/src/CountDown/index.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Box, type SxProps } from '@mui/material';
+import { 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(Box, { shouldForwardProp: (prop) => prop !== 'dark' })<{ dark: boolean }>`
+const Container = styled('div', { shouldForwardProp: (prop) => prop !== 'dark' })<{ dark: boolean }>`
   color: ${(props) => getColor(props)};
   font-size: 50px;
   display: flex;

package/src/DID/DID.stories.jsx

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

package/src/Datatable/CustomToolbar.jsx

@@ -19,7 +19,6 @@ import {
   MenuItem,
   Tooltip,
   IconButton,
-  Box,
 } from '@mui/material';
 import { useDeepCompareEffect } from 'ahooks';
 
@@ -351,7 +350,7 @@ CustomToolbar.propTypes = {
   tableRef: PropTypes.func.isRequired,
 };
 
-const Container = styled(Box)`
+const Container = styled('div')`
   display: flex;
   align-items: center;
   height: 56px;
@@ -413,7 +412,7 @@ const Container = styled(Box)`
   }
 `;
 
-const ProgressContainer = styled(Box)`
+const ProgressContainer = styled('div')`
   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, Box } from '@mui/material';
+import { IconButton, Tooltip, TextField } 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(Box)`
+const Container = styled('div')`
   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 { Box, CircularProgress } from '@mui/material';
+import { 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(Box)`
+const FilterLine = styled('div')`
   display: flex;
   align-items: center;
   .toolbar-filter-content {
@@ -481,7 +481,7 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled(Box, {
+const TableContainer = styled('div', {
   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(Box, {
   `;
 });
 
-const FooterContainer = styled(Box)`
+const FooterContainer = styled('div')`
   display: flex;
   align-items: center;
   .datatable-footer {

package/src/Earth/index.tsx

@@ -4,7 +4,6 @@ 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';
@@ -394,7 +393,7 @@ type ContainerProps = {
   colors: Colors;
 };
 
-const Container = styled(Box)<ContainerProps>`
+const Container = styled('div')<ContainerProps>`
   background-color: ${(props) => (props.$theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
@@ -477,7 +476,7 @@ const Container = styled(Box)<ContainerProps>`
   }
 `;
 
-const Tooltip = styled(Box)`
+const Tooltip = styled('div')`
   position: absolute;
   width: auto;
   min-width: 90px;

package/src/Footer/index.tsx

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

package/src/Icon/image.tsx

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