@arcblock/ux 3.0.12 → 3.0.13

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.13",
   "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": "2c404ff0a38e52d197334a035160b5eddf56df07",
   "dependencies": {
-    "@arcblock/bridge": "3.0.12",
+    "@arcblock/bridge": "3.0.13",
     "@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.13",
+    "@arcblock/nft-display": "3.0.13",
+    "@arcblock/react-hooks": "3.0.13",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.12",
+    "@blocklet/theme": "3.0.13",
     "@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;

package/src/InfoRow/index.tsx

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

package/src/Layout/dashboard/index.tsx

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

package/src/Layout/dashboard/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { 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(Box)`
+const Root = styled('div')`
   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(Box)`
+const Wrapper = styled('div')`
   &.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, Box } from '@mui/material';
+import { Button, Typography, type SxProps, type ButtonProps } 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(Box)`
+const MenuItems = memo(styled('div')`
   flex: 1;
   display: flex;
   flex-direction: column;

package/src/Layout/index.tsx

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

package/src/Metric/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { Box, Link } from '@mui/material';
+import { 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(Box)<ContainerProps>`
+const Container = styled('div')<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 { Box, type SxProps } from '@mui/material';
+import { type SxProps } from '@mui/material';
 
 import { styled } from '../../Theme';
 
@@ -23,7 +23,7 @@ const Root = styled(root.span)`
   height: 100%;
 `;
 
-const Inner = styled(Box)`
+const Inner = styled('div')`
   &,
   & > svg {
     height: 100%;

package/src/PricingTable/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid } from '@mui/material';
+import { 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(Box)<DivProps>`
+const Div = styled('div')<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(Box)`
+const Root = styled('div')`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/src/Screenshot/BaseScreenshot/index.tsx

@@ -1,4 +1,4 @@
-import { Box, type SxProps } from '@mui/material';
+import { 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(Box)`
+  const Root = styled('div')`
     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 { Box, type SxProps } from '@mui/material';
+import { 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(Box)<DivProps>`
+const Div = styled('div')<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(Box)`
+const ReScreen = styled('div')`
   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 { Box, CircularProgress } from '@mui/material';
+import { 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(Box)`
+const Placeholder = styled('div')`
   background-color: #222222;
   display: flex;
   justify-content: center;