@arcblock/ux 2.10.67 → 2.10.68

package/lib/Logo/index.js

@@ -1,64 +1,106 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
+import React from "react";
 import { styled } from '../Theme';
-
-// eslint-disable-next-line import/no-unresolved
-import LightLogo from './images/logo-light-top.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import LightText from './images/logo-light-text.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import DarkLogo from './images/logo-dark-top.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import DarkText from './images/logo-dark-text.svg?react';
-
-/**
-  @typedef {import('react').HTMLAttributes<HTMLSpanElement> & {
-    mode?: 'light' | 'dark',
-    layout?: 'vertical' | 'horizontal',
-    showText?: boolean,
-    showLogo?: boolean,
-  }} LogoProps
-*/
-
-/**
- * @description
- * @export
- * @param {LogoProps} props
- * @return {React.ReactComponentElement}
- */
+var LightLogo = function LightLogo(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "#FFF",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
+      })]
+    })
+  });
+};
+LightLogo.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "45",
+  height: "52",
+  viewBox: "0 0 45 52"
+};
+var LightText = function LightText(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "#FFF",
+      fillRule: "evenodd",
+      d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
+    })
+  });
+};
+LightText.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "99",
+  height: "18",
+  viewBox: "0 0 99 18"
+};
+var DarkLogo = function DarkLogo(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "#000",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
+      })]
+    })
+  });
+};
+DarkLogo.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "45",
+  height: "52",
+  viewBox: "0 0 45 52"
+};
+var DarkText = function DarkText(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
+    })
+  });
+};
+DarkText.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "99",
+  height: "18",
+  viewBox: "0 0 99 18"
+};
 export default function Logo({
-  showText,
-  showLogo,
-  mode,
-  layout,
+  showText = true,
+  showLogo = true,
+  mode = 'dark',
+  layout = 'vertical',
+  size,
+  style = {},
   ...rest
 }) {
-  const logo = mode === 'light' ? /*#__PURE__*/_jsx(LightLogo, {}) : /*#__PURE__*/_jsx(DarkLogo, {});
-  const text = mode === 'light' ? /*#__PURE__*/_jsx(LightText, {
+  const isLight = mode === 'light';
+  const logo = isLight ? /*#__PURE__*/_jsx(LightLogo, {}) : /*#__PURE__*/_jsx(DarkLogo, {});
+  const text = isLight ? /*#__PURE__*/_jsx(LightText, {
     className: "logo-text"
   }) : /*#__PURE__*/_jsx(DarkText, {
     className: "logo-text"
   });
+  if (size) {
+    style.width = `${size}px`;
+    style.height = `${size}px`;
+  }
   return /*#__PURE__*/_jsxs(Container, {
     layout: layout,
+    style: style,
     ...rest,
     children: [showLogo && logo, showText && text]
   });
 }
-Logo.propTypes = {
-  mode: PropTypes.oneOf(['light', 'dark']),
-  layout: PropTypes.oneOf(['vertical', 'horizontal']),
-  showText: PropTypes.bool,
-  showLogo: PropTypes.bool
-};
-Logo.defaultProps = {
-  mode: 'dark',
-  layout: 'vertical',
-  showText: true,
-  showLogo: true
-};
-
-/** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
 const Container = styled('span')`
   display: inline-flex;
   flex-direction: ${props => props.layout === 'horizontal' ? 'row' : 'column'};

package/lib/Metric/index.d.ts

@@ -1,32 +1,10 @@
-declare function Metric({ icon, value, name, url, animated, LinkComponent, prefix }: {
-    icon: any;
-    value: any;
-    name: any;
-    url: any;
-    animated: any;
-    LinkComponent: any;
-    prefix: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Metric {
-    namespace propTypes {
-        let icon: PropTypes.Validator<string>;
-        let value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
-        let name: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let animated: PropTypes.Requireable<boolean>;
-        let url: PropTypes.Requireable<string>;
-        let LinkComponent: PropTypes.Requireable<any>;
-        let prefix: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let animated_1: boolean;
-        export { animated_1 as animated };
-        let url_1: string;
-        export { url_1 as url };
-        let LinkComponent_1: null;
-        export { LinkComponent_1 as LinkComponent };
-        let prefix_1: string;
-        export { prefix_1 as prefix };
-    }
+export interface MetricProps {
+    icon: string;
+    value: string | number;
+    name: React.ReactNode;
+    url?: string;
+    animated?: false | true;
+    LinkComponent?: React.ElementType;
+    prefix?: string;
 }
-export default Metric;
-import PropTypes from 'prop-types';
+export default function Metric({ icon, value, name, url, animated, LinkComponent, prefix, }: MetricProps): import("react/jsx-runtime").JSX.Element;

package/lib/Metric/index.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-danger */
-import PropTypes from 'prop-types';
+import { Link } from '@mui/material';
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
 export default function Metric({
   icon,
   value,
   name,
-  url,
-  animated,
-  LinkComponent,
-  prefix
+  url = '',
+  animated = false,
+  LinkComponent = Link,
+  prefix = '/images'
 }) {
   const metric = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
@@ -41,21 +41,6 @@ export default function Metric({
     }) : metric
   });
 }
-Metric.propTypes = {
-  icon: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  name: PropTypes.node.isRequired,
-  animated: PropTypes.bool,
-  url: PropTypes.string,
-  LinkComponent: PropTypes.any,
-  prefix: PropTypes.string
-};
-Metric.defaultProps = {
-  animated: false,
-  url: '',
-  LinkComponent: null,
-  prefix: '/images'
-};
 const Container = styled('div')`
   border-left: 1px solid ${props => props.theme.typography.color.main};
   padding: 10px 0 10px 16px;

package/lib/NFTDisplay/aspect-ratio-container.d.ts

@@ -1,13 +1,6 @@
-export default AspectRatioContainer;
-declare function AspectRatioContainer({ aspect, children, ...rest }: {
-    [x: string]: any;
-    aspect: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace AspectRatioContainer {
-    namespace propTypes {
-        let aspect: PropTypes.Validator<number>;
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-    }
+export interface AspectRatioContainerProps {
+    aspect: number;
+    children?: React.ReactNode;
 }
-import PropTypes from 'prop-types';
+declare function AspectRatioContainer({ aspect, children, ...rest }: AspectRatioContainerProps): import("react/jsx-runtime").JSX.Element;
+export default AspectRatioContainer;

package/lib/NFTDisplay/aspect-ratio-container.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import { styled } from '../Theme';
 function AspectRatioContainer({
   aspect,
@@ -15,10 +14,6 @@ function AspectRatioContainer({
     })
   });
 }
-AspectRatioContainer.propTypes = {
-  aspect: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired
-};
 const Root = styled('span')`
   display: block;
   position: relative;

package/lib/NFTDisplay/broken.d.ts

@@ -1,14 +1,4 @@
-declare function Broken({ children }?: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Broken {
-    namespace propTypes {
-        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-    namespace defaultProps {
-        let children_1: string;
-        export { children_1 as children };
-    }
+export interface BrokenProps {
+    children?: React.ReactNode;
 }
-export default Broken;
-import PropTypes from 'prop-types';
+export default function Broken({ children }?: BrokenProps): import("react/jsx-runtime").JSX.Element;

package/lib/NFTDisplay/broken.js

@@ -1,11 +1,87 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import Box from '@mui/material/Box';
-import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-unresolved
-import NFTBroken from './NFTBroken.svg?react';
 import { styled } from '../Theme';
+var NFTBroken = function NFTBroken(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsxs("g", {
+      clipPath: "url(#a)",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M60 0h60v60H60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M0 0h60v60H0zM180 0h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .898 .9059 .9216)",
+        d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M60 60h60v60H60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M120 60h60v60h-60zM240 60h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .898 .9059 .9216)",
+        d: "M180 60h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M0 120h60v60H0z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M0 180h60v60H0z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M0 240h60v60H0z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .898 .9059 .9216)",
+        d: "M60 120h60v60H60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M60 180h60v60H60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .898 .9059 .9216)",
+        d: "M60 240h60v60H60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M120 120h60v60h-60zM180 180h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M120 240h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M240 120h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .898 .9059 .9216)",
+        d: "M120 180h60v60h-60zM180 240h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9529 .9569 .9647)",
+        d: "M180 120h60v60h-60zM240 180h60v60h-60z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "color(display-p3 .9765 .9804 .9843)",
+        d: "M240 240h60v60h-60z"
+      })]
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: "a",
+        children: /*#__PURE__*/_jsx("path", {
+          fill: "#fff",
+          d: "M0 0h300v300H0z"
+        })
+      })
+    })]
+  });
+};
+NFTBroken.defaultProps = {
+  width: "300",
+  height: "300",
+  viewBox: "0 0 300 300",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 export default function Broken({
-  children
+  children = 'Non-publicly accessible NFT'
 } = {}) {
   return /*#__PURE__*/_jsxs(Root, {
     children: [/*#__PURE__*/_jsx(NFTBroken, {
@@ -16,12 +92,6 @@ export default function Broken({
     })]
   });
 }
-Broken.propTypes = {
-  children: PropTypes.node
-};
-Broken.defaultProps = {
-  children: 'Non-publicly accessible NFT'
-};
 const Root = styled(Box)`
   width: 100%;
   height: 100%;

package/lib/NFTDisplay/displayApi.d.ts

@@ -1,2 +1,2 @@
-export default instance;
 declare const instance: import("axios").AxiosInstance;
+export default instance;

package/lib/NFTDisplay/index.d.ts

@@ -1,12 +1,34 @@
+import React from 'react';
+import { type BoxProps } from '@mui/material';
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
  * - 旧: assetState.data.value (.credentialSubject.display)
  * - 新: assetState.display
  */
-export function getNFTData(assetState: any): any;
-declare function _default({ aspect, inset, ...rest }: {
-    [x: string]: any;
-    aspect: any;
-    inset: any;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function getNFTData(assetState: Record<string, any>): any;
+export interface NFTDisplayProps extends BoxProps {
+    /** asset data 可以是 raw data 和 parsed data */
+    data: string | Record<string, any>;
+    address: string;
+    inset?: false | true;
+    aspect?: number;
+    component?: React.ElementType<any>;
+    className?: string;
+    renderError?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    /** 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img */
+    preferredSvgEmbedder?: 'img' | 'svg';
+    /** 针对非 url type 的情况, 检测 svg 有效性, 默认禁用 */
+    checkSvg?: false | true;
+    /** loading 最小显示时间 (避免闪烁) */
+    minimumLoadingTime?: number;
+    /** 完成回调, 无论加载成功|失败 */
+    onCompleted?: () => void;
+    /**
+     * 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
+     * 配置参数会全部转发给 Image Service
+     */
+    imageFilter?: object | null;
+}
+declare const _default: ({ aspect, inset, ...rest }: NFTDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/NFTDisplay/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';
@@ -9,6 +8,7 @@ import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
 import noop from 'lodash/noop';
+import { Box } from '@mui/material';
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
 import InlineSvgEmbedder from './svg-embedder/inline-svg';
@@ -44,7 +44,6 @@ const getSvgEmbedder = preferredSvgEmbedder => {
   };
   return embedders[preferredSvgEmbedder];
 };
-
 /**
  * TODO:
  * 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
@@ -55,31 +54,32 @@ function NFTDisplay({
   address,
   inset,
   aspect,
-  component,
-  className,
+  component = 'span',
+  className = '',
   renderError,
   renderLoading,
-  preferredSvgEmbedder,
-  checkSvg,
-  minimumLoadingTime,
-  onCompleted,
-  imageFilter,
+  preferredSvgEmbedder = 'img',
+  checkSvg = false,
+  minimumLoadingTime = 0,
+  onCompleted = noop,
+  imageFilter = null,
   ...rest
 }) {
   const wrapRoot = children => /*#__PURE__*/_jsx(Root, {
-    as: component,
+    component: component,
     ...rest,
     className: clsx(className, {
       'nft-display--inset': inset
     }),
     children: children
   });
-  const parsed = useRef(data);
+  const parsed = useRef({});
   try {
     // 如果是 raw data 先解析
-    if (typeof parsed.current === 'string') {
+    if (typeof data === 'string') {
       parsed.current = JSON.parse(data);
-      // console.log('[debug] parse data')
+    } else {
+      parsed.current = data;
     }
     const {
       vcId
@@ -144,6 +144,7 @@ function NFTDisplay({
           }),
           method: 'HEAD'
         });
+        // @ts-expect-error
         const contentType = response?.headers?.get('Content-Type');
         setState({
           ...state,
@@ -324,42 +325,7 @@ function NFTDisplay({
     return wrapRoot(renderError ? renderError() : /*#__PURE__*/_jsx(DefaultBrokenImage, {}));
   }
 }
-NFTDisplay.propTypes = {
-  // asset data 可以是 raw data 和 parsed data
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-  address: PropTypes.string.isRequired,
-  component: PropTypes.string,
-  inset: PropTypes.bool,
-  aspect: PropTypes.number,
-  className: PropTypes.string,
-  renderError: PropTypes.func,
-  renderLoading: PropTypes.func,
-  // 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img
-  preferredSvgEmbedder: PropTypes.oneOf(['img', 'svg']),
-  // 针对非 url type 的情况, 检测 svg 有效性, 默认禁用
-  checkSvg: PropTypes.bool,
-  // loading 最小显示时间 (避免闪烁)
-  minimumLoadingTime: PropTypes.number,
-  // 完成回调, 无论加载成功|失败
-  onCompleted: PropTypes.func,
-  // 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
-  // 配置参数会全部转发给 Image Service
-  imageFilter: PropTypes.object
-};
-NFTDisplay.defaultProps = {
-  component: 'span',
-  inset: false,
-  aspect: 0,
-  className: '',
-  renderError: null,
-  renderLoading: null,
-  preferredSvgEmbedder: 'img',
-  checkSvg: false,
-  minimumLoadingTime: 0,
-  onCompleted: noop,
-  imageFilter: null
-};
-const Root = styled('div')`
+const Root = styled(Box)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -395,7 +361,7 @@ function withAspectRatio(Component) {
     ...rest
   }) {
     // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
-    const applyAspectRatio = aspect > 0 && !inset;
+    const applyAspectRatio = aspect && aspect > 0 && !inset;
     if (applyAspectRatio) {
       return /*#__PURE__*/_jsx(AspectRatioContainer, {
         aspect: aspect,

package/lib/NFTDisplay/svg-embedder/img.d.ts

@@ -1,24 +1,9 @@
-export default ImgEmbedder;
-/**
- * 基于 <img> 嵌入 svg
- */
-declare function ImgEmbedder({ svg, alt, fallback, ...rest }: {
-    [x: string]: any;
-    svg: any;
-    alt: any;
-    fallback: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ImgEmbedder {
-    namespace propTypes {
-        let svg: PropTypes.Validator<string>;
-        let alt: PropTypes.Requireable<string>;
-        let fallback: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        let alt_1: string;
-        export { alt_1 as alt };
-        let fallback_1: boolean;
-        export { fallback_1 as fallback };
-    }
+export interface ImgEmbedderProps extends React.HTMLAttributes<HTMLImageElement> {
+    svg: string;
+    alt?: string;
+    /** 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM */
+    fallback?: true | false;
 }
-import PropTypes from 'prop-types';
+/** 基于 <img> 嵌入 svg */
+declare function ImgEmbedder({ svg, alt, fallback, ...rest }: ImgEmbedderProps): import("react/jsx-runtime").JSX.Element;
+export default ImgEmbedder;

package/lib/NFTDisplay/svg-embedder/img.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import InlineSvgEmbedder from './inline-svg';
 const svgToImgUrl = svg => {
   // fix: #225, https://stackoverflow.com/a/52135328)
@@ -8,14 +7,11 @@ const svgToImgUrl = svg => {
   });
   return URL.createObjectURL(blob);
 };
-
-/**
- * 基于 <img> 嵌入 svg
- */
+/** 基于 <img> 嵌入 svg */
 function ImgEmbedder({
   svg,
-  alt,
-  fallback,
+  alt = '',
+  fallback = true,
   ...rest
 }) {
   // 包含 foreignObject 的 svg, fallback 到 shadow dom
@@ -32,14 +28,4 @@ function ImgEmbedder({
     ...rest
   });
 }
-ImgEmbedder.propTypes = {
-  svg: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  // 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM
-  fallback: PropTypes.bool
-};
-ImgEmbedder.defaultProps = {
-  alt: '',
-  fallback: true
-};
 export default ImgEmbedder;