@arcblock/ux 2.10.18 → 2.10.20

package/lib/ActionButton/index.js

@@ -25,8 +25,7 @@ import { withDeprecated } from '../Util/deprecate';
  * @param {ActionButtonProps} props
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ActionButton(props) {
   /** @type {ActionButtonProps & {}} */
   const newProps = mergeProps(props, ActionButton);

package/lib/ActivityIndicator/index.js

@@ -18,8 +18,7 @@ import { styled } from '../Theme';
  * @param {ActivityIndicatorProps} props
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ActivityIndicator({
   messages,
   interval,

package/lib/Address/compact-text.js

@@ -4,8 +4,7 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
 import { styled } from '../Theme';
 import { CopyButton } from '../ClickToCopy';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledTooltip = styled(({
   className,
   ...props

package/lib/Address/did-address.js

@@ -9,8 +9,7 @@ import noop from 'lodash/noop';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
 import CompactText from './compact-text';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const translations = {
   en: {
     copy: 'Click To Copy',

package/lib/Alert/index.js

@@ -6,8 +6,7 @@ import { mergeProps } from '../Util';
 import colors from '../Colors';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const types = {
   error: {
     icon: 'exclamation-circle',

package/lib/AnimationWaiter/index.js

@@ -20,8 +20,7 @@ import { styled } from '../Theme';
  * @param {Number} increaseSpeed 在 maybeDuration 时间下增加的速度，默认为0（不增加速度）
  * @returns element
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function AnimationWaiter({
   animationData,
   size,

package/lib/Blocklet/blocklet.js

@@ -9,8 +9,7 @@ import Button from '../Button';
 import Img from '../Img';
 import { useTheme, styled } from '../Theme';
 import { strippedString } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Div = styled('div')`
   &.arcblock-blocklet {
     padding: ${props => props.theme.spacing(2)} ${props => props.theme.spacing(2)} 0

package/lib/BlockletNFT/index.js

@@ -16,9 +16,7 @@ import { useTheme, styled } from '../Theme';
  * @param {*} digits
  * @returns
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function prettySize(_size, digits = 1) {
   let size = _size;
   const list = ['', 'k', 'm', 'b'];

package/lib/Button/wrap.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import colors from '../Colors';
 import { mergeProps } from '../Util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const extendedColors = {
   did: {
     contained: {

package/lib/CodeBlock/index.js

@@ -24,9 +24,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import colors from '../Colors';
 import { styled } from '../Theme';
 import LightBox from './LightBox';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('js', javascript);
 hljs.registerLanguage('jsx', javascript);

package/lib/ContactForm/index.js

@@ -1,5 +1,5 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/static-property-placement */
@@ -12,8 +12,7 @@ import { mergeProps } from '../Util';
 import { warn as deprecatedWarn } from '../Util/deprecate';
 import Button from '../Button';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function submitContactForm({
   formId,
   portalId

package/lib/CountDown/index.js

@@ -2,8 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { getColor, mergeProps } from '../Util';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SECONDS_OF_MINUTE = 60;
 const SECONDS_OF_HOUR = 60 * SECONDS_OF_MINUTE;
 const SECONDS_OF_DAY = 24 * SECONDS_OF_HOUR;

package/lib/DID/index.js

@@ -12,9 +12,7 @@ import Address from '../Address';
 import Avatar from '../Avatar';
 import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
 import { translate } from '../Locale/util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const translations = {
   en: {
     scanQrcode: 'Scan with DID Wallet to transfer token to here',

package/lib/Datatable/CustomToolbar.js

@@ -20,9 +20,7 @@ import { handleCSVDownload } from './utils';
 import TableSearch from './TableSearch';
 import { useDatatableContext } from './DatatableContext';
 import { styled, useTheme } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function useMobile() {
   const theme = useTheme();
   return useMediaQuery(theme.breakpoints.down('sm'));

package/lib/Datatable/TableSearch.js

@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import noop from 'lodash/noop';
 import { useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function TableSearch({
   search,
   options,

package/lib/Datatable/index.js

@@ -58,8 +58,7 @@ import { styled } from '../Theme';
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
  * } & import('mui-datatables').MUIDataTableProps} DataTableProps
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FilterLine = styled('div')`
   display: flex;
   align-items: center;

package/lib/Dialog/confirm.js

@@ -22,9 +22,7 @@ import Dialog from './dialog';
  * @param {ConfirmProps} props
  * @returns {import('react').ReactComponentElement}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Confirm({
   title,
   children,

package/lib/Dialog/dialog.js

@@ -35,8 +35,7 @@ import { styled, useTheme } from '../Theme';
  * @param {DialogProps} props
  * @return {React.ReactComponentElement<any, DialogProps>}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dialog({
   children,
   title,

package/lib/Earth/index.js

@@ -9,8 +9,7 @@ import json from './countries.json';
 import util from './util';
 import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
 const themes = {
   light: {

package/lib/Empty/index.js

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = styled(Box)`
   display: flex;
   justify-content: center;

package/lib/ErrorBoundary/fallback.js

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import { red } from '@mui/material/colors';
 import Button from '../Button';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function InternalErrorFallback({
   title,
   desc,

package/lib/Footer/index.js

@@ -6,8 +6,7 @@ import Box from '@mui/material/Box';
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
 import { styled } from '../Theme';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export default function Footer(props) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
   const {

package/lib/Header/header.js

@@ -8,9 +8,7 @@ import { styled } from '../Theme';
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Header({
   logo,
   brand,

package/lib/Header/responsive-header.js

@@ -17,8 +17,7 @@ import { styled, useTheme } from '../Theme';
  *
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ResponsiveHeader({
   menu,
   prepend,

package/lib/Icon/image.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import Img from '../Img';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ImageIcon({
   name,
   size,

package/lib/Img/index.js

@@ -29,8 +29,7 @@ import noop from 'lodash/noop';
 /**
  * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PREFIX = 'Img';
 const classes = {
   root: `${PREFIX}-root`

package/lib/InfoRow/index.js

@@ -3,8 +3,7 @@ import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import Typography from '@mui/material/Typography';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function InfoRow({
   name,
   nameFormatter,

package/lib/Layout/dashboard/index.js

@@ -20,8 +20,7 @@ import { FullPageProvider, useFullPage } from './full-page';
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
 // eslint-disable-next-line react/prop-types
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function NavMenuWrapper({
   closeMenu,
   ...rest

package/lib/Layout/dashboard/sidebar.js

@@ -5,8 +5,7 @@ import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function renderItem(item, index) {
   if (item.children?.length) {
     // eslint-disable-next-line no-use-before-define

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

@@ -9,8 +9,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
 import Logo from '../../Logo';
 import { styled } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledAppBar = styled(AppBar)`
   && {
     z-index: ${props => props.theme.zIndex.drawer};

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

@@ -9,8 +9,7 @@ import Sidebar from './sidebar';
 import Header from './header';
 import Footer from '../../Footer';
 import { styled } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = styled('div')`
   &.dashboard {
     display: flex;

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

@@ -7,8 +7,7 @@ import { teal } from '@mui/material/colors';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 import { styled, useTheme } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Sidebar({
   images,
   links,

package/lib/Layout/index.js

@@ -8,9 +8,7 @@ import OpenInWallet from '../Wallet/Open';
 import Icon from '../Icon';
 import Logo from '../Logo';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Layout({
   title,
   brand,

package/lib/LoadingMask/index.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 import { temp as colors } from '../Colors';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LoadingMask({
   size,
   padding,

package/lib/Locale/selector.js

@@ -10,8 +10,7 @@ import { getColor, getBackground } from '../Util';
 import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LocaleSelector(props) {
   const {
     showText,

package/lib/Logo/index.js

@@ -1,8 +1,7 @@
 import React from "react";
 import PropTypes from 'prop-types';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var LightLogo = function LightLogo(props) {
   return /*#__PURE__*/_jsx("svg", {
     ...props,

package/lib/Metric/index.js

@@ -2,9 +2,7 @@
 import PropTypes from 'prop-types';
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Metric({
   icon,
   value,

package/lib/NFTDisplay/broken.js

@@ -80,8 +80,7 @@ NFTBroken.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Broken({
   children
 } = {}) {

package/lib/NFTDisplay/demo/data/asset-state-did-space-svg.json

@@ -0,0 +1,7 @@
+{
+  "address": "zjdq6X6NGfivzN22RjTD427kKSS6jE5Rmnmw",
+  "display": {
+    "content": "https://devcon.arcblock.io/workshop/api/nft/display",
+    "type": "url"
+  }
+}

package/lib/NFTDisplay/index.js

@@ -21,9 +21,7 @@ import displayApi from './displayApi';
  * - 旧: assetState.data.value (.credentialSubject.display)
  * - 新: assetState.display
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function getNFTData(assetState) {
   return assetState?.display || assetState?.data?.value;
 }
@@ -239,8 +237,8 @@ function NFTDisplay({
           onErrorCapture: onError,
           onLoad: onLoad,
           style: {
-            width: 'auto',
-            height: 'auto',
+            width: '100%',
+            height: '100%',
             pointerEvents: 'none'
           }
         }, url)

package/lib/NavMenu/nav-menu.js

@@ -4,8 +4,7 @@ import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NavMenuContext = /*#__PURE__*/createContext();
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element

package/lib/PageScroller/story/FullPage.js

@@ -8,8 +8,7 @@ import ThirdComponent from './ThirdComponent';
 import FourthComponent from './FourthComponent';
 import FifthComponent from './FifthComponent';
 import './index.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function FullPage() {
   const [current, setCurrent] = useState(0);
   const pageNumbers = [];

package/lib/PageScroller/story/PageContain.js

@@ -8,8 +8,7 @@ import ThirdComponent from './ThirdComponent';
 import FourthComponent from './FourthComponent';
 import FifthComponent from './FifthComponent';
 import './index.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function FullPage() {
   const [current, setCurrent] = useState(0);
   const pageNumbers = [];

package/lib/Passport/passport.js

@@ -3,8 +3,7 @@ import upperFirst from 'lodash/upperFirst';
 import { Box } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Passport({
   passport,
   user,

package/lib/PoweredByArcBlock/index.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import { Link, Typography } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function PoweredByArcBlock({
   linkProps,
   ...props

package/lib/PricingTable/PricingPlan.js

@@ -4,8 +4,7 @@ import Button from '@mui/material/Button';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PricingPlan({
   plan
 }) {

package/lib/Result/result.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Result({
   icon,
   title,

package/lib/Screenshot/BaseScreenshot/index.js

@@ -2,8 +2,7 @@ import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 import phone from './shells/Phone';
 import macbook from './shells/Macbook';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const map = {
   phone,
   macbook

package/lib/Screenshot/BaseScreenshot/shells/Macbook.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Shell({
   ...rest
 }) {

package/lib/Screenshot/index.js

@@ -4,8 +4,7 @@ import { mergeProps } from '../Util';
 import { styled } from '../Theme';
 import BaseScreenshot from './BaseScreenshot';
 import './devices.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const types = {
   'iphone-x': {
     borderRadius: 32,

package/lib/SessionBlocklet/index.js

@@ -10,9 +10,7 @@ import { temp as colors } from '../Colors';
 import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
 import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SessionBlocklet({
   session,
   locale,

package/lib/SessionUser/components/logged-in.js

@@ -15,9 +15,7 @@ import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
 import SessionPermission from '../../SessionPermission';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LoggedIn({
   session,
   dark,

package/lib/SessionUser/components/session-user-item.js

@@ -8,8 +8,7 @@ import Avatar from '../../Avatar';
 import DID from '../../DID';
 import { temp as colors } from '../../Colors';
 import { getSourceProvider } from '../libs/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SessionUserItem = /*#__PURE__*/forwardRef(({
   sessionItem,
   statusContent,

package/lib/SessionUser/components/session-user-switch.js

@@ -12,9 +12,7 @@ import { temp as colors } from '../../Colors';
 import { getVisitorId } from '../../Util';
 import { translate } from '../../Locale/util';
 import { translations } from '../libs/translation';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SessionUserSwitch({
   session,
   onSwitch,

package/lib/SessionUser/components/user-info.js

@@ -12,8 +12,7 @@ import { temp as colors } from '../../Colors';
 import { getWallet } from '../libs/utils';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function UserInfo({
   session,
   onSwitchPassport,

package/lib/SplitButton/index.js

@@ -1,4 +1,4 @@
-import { useState, useRef, isValidElement } from 'react';
+import { useState, useRef, isValidElement, createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
@@ -30,10 +30,7 @@ import { styled } from '../Theme';
  * @param {SplitButtonProps} props
  * @return {JSX.Element}
  */
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SplitButton(props) {
   const {
     size,

package/lib/Success/index.js

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 
 // FIXME: @zhanghan 目前无法适配各种 size，后续优化
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Success({
   size,
   backgroundColor,

package/lib/TextCollapse/index.js

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TextCollapse({
   children,
   startChars,

package/lib/Theme/theme-provider.js

@@ -3,8 +3,7 @@ import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
 /**

package/lib/Toast/index.js

@@ -13,8 +13,7 @@ import noop from 'lodash/noop';
 /**
  * @type {import('notistack').ProviderContext['enqueueSnackbar']}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 let success = noop;
 let error = noop;
 let warning = noop;

package/lib/Typography/index.js

@@ -2,8 +2,7 @@ import PropTyps from 'prop-types';
 import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
 import { useCreation, useReactive, useSize } from 'ahooks';
 import { useEffect, useRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Typography({
   minFontSize,
   fontSize,

package/lib/Video/index.js

@@ -4,8 +4,7 @@ import Player from 'react-player';
 import CircularProgress from '@mui/material/CircularProgress';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   string,
   number,

package/lib/Wallet/Action.js

@@ -5,8 +5,7 @@ import { mergeProps } from '../Util';
 import colors from '../Colors';
 import Button from '../Button';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WalletAction(props) {
   const newProps = mergeProps(props, WalletAction, ['style']);
   const {

package/lib/Wallet/Download.js

@@ -205,8 +205,7 @@ AndroidDownloadIcon.defaultProps = {
 import Button from '../Button';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WalletDownload(props) {
   const browser = useBrowser();
   const newProps = mergeProps(props, WalletDownload, ['style']);

package/lib/WebWalletSWKeeper/index.js

@@ -7,9 +7,7 @@ import { detectWalletExtension } from '@arcblock/ux/lib/Util';
 import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
 
 // 默认最大空闲时间: 30min
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30;
 // 可使用 localStorage.setItem('wallet_sw_keeper_disabled', 1) 来禁用嵌入 wallet iframe
 const STORAGE_KEY_DISABLED = 'wallet_sw_keeper_disabled';

package/lib/WechatPrompt/index.js

@@ -4,8 +4,7 @@ import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import IosImage from './images/ios.png';
 import AndroidImage from './images/android.png';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WechatPrompt() {
   const browser = useBrowser();
   if (!browser.mobile.any) {

package/lib/withTheme/index.js

@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme, ThemeProvider } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function withTheme(Component, {
   mode = 'light',
   pageWidth = 'md',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.18",
+  "version": "2.10.20",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "0c8a31e386a07c1d4ec78e702091d450ab4e4847",
+  "gitHead": "e824874fc5c195246c96fcb8da7308b46d77236f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.18",
-    "@arcblock/nft-display": "^2.10.18",
-    "@arcblock/react-hooks": "^2.10.18",
+    "@arcblock/icons": "^2.10.20",
+    "@arcblock/nft-display": "^2.10.20",
+    "@arcblock/react-hooks": "^2.10.20",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/NFTDisplay/index.js

@@ -209,7 +209,7 @@ function NFTDisplay({
           data={url}
           onErrorCapture={onError}
           onLoad={onLoad}
-          style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
+          style={{ width: '100%', height: '100%', pointerEvents: 'none' }}
         />
       );
     };