@arcblock/ux 3.0.12 → 3.0.13

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

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { memo as k } from "react";
 import { useLocation as $, Link as s } from "react-router-dom";
-import { Box as w, Button as z, useTheme as v, Typography as I } from "@mui/material";
+import { Button as w, useTheme as z, Typography as v } from "@mui/material";
 import { teal as l } from "@mui/material/colors";
-import j from "../../Icon/image.js";
-import L from "../../Logo/index.js";
-import { styled as d } from "../../Theme/index.js";
-function C({
+import I from "../../Icon/image.js";
+import j from "../../Logo/index.js";
+import { styled as c } from "../../Theme/index.js";
+function q({
   images: e,
   links: m,
   prefix: p = "/images",
@@ -14,14 +14,14 @@ function C({
   logo: f = void 0,
   ...x
 }) {
-  const u = v(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
-  return /* @__PURE__ */ a(T, { ...x, children: [
-    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(L, { showText: !1, size: 20 }) }),
+  const u = z(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
+  return /* @__PURE__ */ a(L, { ...x, children: [
+    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(j, { showText: !1, size: 20 }) }),
     m.map(({ url: o, name: n, title: r, showBadge: y }) => {
       const i = h(o, n);
-      return /* @__PURE__ */ a(A, { component: s, selected: i, to: o, children: [
+      return /* @__PURE__ */ a(T, { component: s, selected: i, to: o, children: [
         /* @__PURE__ */ t(
-          j,
+          I,
           {
             name: e[n],
             size: 36,
@@ -30,14 +30,14 @@ function C({
             showBadge: y
           }
         ),
-        /* @__PURE__ */ t(I, { component: "span", className: "menu-title", children: r })
+        /* @__PURE__ */ t(v, { component: "span", className: "menu-title", children: r })
       ] }, o);
     }),
     /* @__PURE__ */ t("div", { style: { flex: 1 } }),
     g
   ] });
 }
-const T = k(d(w)`
+const L = k(c("div")`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@ const T = k(d(w)`
       display: block;
     }
   }
-`), c = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", A = d(z)`
+`), d = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", T = c(w)`
   && {
     display: flex;
     flex-direction: column;
@@ -66,13 +66,13 @@ const T = k(d(w)`
     align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
-    background: ${(e) => e.selected ? c : ""};
+    background: ${(e) => e.selected ? d : ""};
     padding: 24px 0;
     border-left: 2px solid ${(e) => e.selected ? l.A700 : "transparent"};
     border-radius: 0;
 
     &:hover {
-      background: ${c};
+      background: ${d};
       border-left-color: ${l.A700};
     }
 
@@ -89,5 +89,5 @@ const T = k(d(w)`
   }
 `;
 export {
-  C as default
+  q as default
 };

package/lib/Layout/index.js

@@ -1,22 +1,22 @@
-import { jsx as e, jsxs as o, Fragment as O } from "react/jsx-runtime";
-import { useState as P, useEffect as R } from "react";
-import W from "react-helmet";
-import { Box as $, Container as t, Toolbar as u, Divider as C, List as G, Link as v, ListItemButton as M, ListItemText as j, AppBar as E, IconButton as F, Typography as w, Drawer as S } from "@mui/material";
-import { Menu as Z } from "@mui/icons-material";
-import A from "../Footer/index.js";
-import H from "../Wallet/Open.js";
+import { jsx as e, jsxs as o, Fragment as P } from "react/jsx-runtime";
+import { useState as R, useEffect as W } from "react";
+import $ from "react-helmet";
+import { Container as t, Toolbar as u, Divider as B, List as C, Link as v, ListItemButton as G, ListItemText as M, AppBar as j, IconButton as E, Typography as w, Drawer as F } from "@mui/material";
+import { Menu as S } from "@mui/icons-material";
+import Z from "../Footer/index.js";
+import A from "../Wallet/Open.js";
 import b from "../Icon/index.js";
-import U from "../Logo/index.js";
+import H from "../Logo/index.js";
 import { styled as x } from "../Theme/index.js";
-function ne({
+function ie({
   title: i,
   brand: l,
   description: s = void 0,
   links: a = [],
-  logo: c = /* @__PURE__ */ e(U, { showText: !1, style: { width: "40px", height: "40px" } }),
+  logo: c = /* @__PURE__ */ e(H, { showText: !1, style: { width: "40px", height: "40px" } }),
   showLogo: d = !1,
   addons: y = void 0,
-  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(A, {}) }),
+  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(Z, {}) }),
   baseUrl: h = "",
   homeUrl: N = "/",
   variant: z = "shadow",
@@ -24,10 +24,10 @@ function ne({
   children: p,
   ...D
 }) {
-  const [m, I] = P(!1), f = () => {
+  const [m, I] = R(!1), f = () => {
     I(!m);
   };
-  if (R(() => {
+  if (W(() => {
     const { searchParams: r } = new URL(window.location.href), g = r.get("inviter");
     g && window.localStorage.setItem("inviter", g);
   }, []), L)
@@ -37,23 +37,23 @@ function ne({
   a.forEach((r) => {
     T.startsWith(r.url) && r.url.length > n.length && (n = r.url);
   });
-  const B = /* @__PURE__ */ o("div", { children: [
+  const O = /* @__PURE__ */ o("div", { children: [
     /* @__PURE__ */ o(u, { className: "toolbar toolbar--drawer", children: [
       !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
       /* @__PURE__ */ e("div", { style: { flexGrow: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: l })
     ] }),
-    /* @__PURE__ */ e(C, {}),
-    /* @__PURE__ */ e(G, { children: a.map((r) => /* @__PURE__ */ e(v, { className: "nav-link", href: r.url, underline: "hover", children: /* @__PURE__ */ e(M, { className: n === r.url ? "drawer-highlight-nav" : "", children: /* @__PURE__ */ o(j, { children: [
+    /* @__PURE__ */ e(B, {}),
+    /* @__PURE__ */ e(C, { children: a.map((r) => /* @__PURE__ */ e(v, { className: "nav-link", href: r.url, underline: "hover", children: /* @__PURE__ */ e(G, { className: n === r.url ? "drawer-highlight-nav" : "", children: /* @__PURE__ */ o(M, { children: [
       typeof r.icon == "string" ? /* @__PURE__ */ e(b, { name: r.icon, size: 18 * (r.iconZoom || 1), color: "inherit", style: { marginRight: "5px" } }) : r.icon,
       r.title
     ] }) }) }, r.url)) })
   ] });
-  return /* @__PURE__ */ o(O, { children: [
-    /* @__PURE__ */ o(q, { ...D, children: [
-      /* @__PURE__ */ e(W, { title: i }),
-      /* @__PURE__ */ e(E, { position: "fixed", className: `appbar appbar--${z}`, color: "default", style: { height: 56 }, children: /* @__PURE__ */ e(t, { disableGutters: !0, children: /* @__PURE__ */ o(u, { className: "toolbar", children: [
+  return /* @__PURE__ */ o(P, { children: [
+    /* @__PURE__ */ o(U, { ...D, children: [
+      /* @__PURE__ */ e($, { title: i }),
+      /* @__PURE__ */ e(j, { position: "fixed", className: `appbar appbar--${z}`, color: "default", style: { height: 56 }, children: /* @__PURE__ */ e(t, { disableGutters: !0, children: /* @__PURE__ */ o(u, { className: "toolbar", children: [
         /* @__PURE__ */ e(
-          F,
+          E,
           {
             color: "inherit",
             "aria-label": "open drawer",
@@ -61,7 +61,7 @@ function ne({
             onClick: f,
             className: "menu-button",
             size: "large",
-            children: /* @__PURE__ */ e(Z, {})
+            children: /* @__PURE__ */ e(S, {})
           }
         ),
         !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
@@ -109,10 +109,10 @@ function ne({
       /* @__PURE__ */ e("div", { className: "toolbar" }),
       /* @__PURE__ */ e(t, { style: { marginTop: 16, flex: 1 }, children: p }),
       k,
-      !!h && /* @__PURE__ */ e(H, { locale: "zh", link: h })
+      !!h && /* @__PURE__ */ e(A, { locale: "zh", link: h })
     ] }),
-    /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
-      S,
+    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+      F,
       {
         variant: "temporary",
         open: m,
@@ -125,12 +125,12 @@ function ne({
           // Better open performance on mobile.
           disablePortal: !0
         },
-        children: B
+        children: O
       }
     ) })
   ] });
 }
-const q = x($)`
+const U = x("div")`
   width: 100%;
   min-height: 100vh;
   display: flex;
@@ -213,7 +213,7 @@ const q = x($)`
       }
     }
   }
-`, J = x("nav")`
+`, q = x("nav")`
   width: 240px;
   .drawer-paper {
     width: 240px;
@@ -241,5 +241,5 @@ const q = x($)`
   }
 `;
 export {
-  ne as default
+  ie as default
 };

package/lib/Metric/index.js

@@ -1,21 +1,21 @@
 import { jsx as i, jsxs as m, Fragment as d } from "react/jsx-runtime";
-import { Box as x, Link as h } from "@mui/material";
-import f from "../Icon/image.js";
-import { styled as g } from "../Theme/index.js";
-function $({
+import { Link as x } from "@mui/material";
+import h from "../Icon/image.js";
+import { styled as f } from "../Theme/index.js";
+function z({
   icon: e,
   value: r,
   name: t,
   url: a = "",
   animated: o = !1,
-  LinkComponent: s = h,
+  LinkComponent: s = x,
   prefix: l = "/images",
   iconColor: p = "#222222",
   iconStyle: c = {}
 }) {
   const n = /* @__PURE__ */ m(d, { children: [
     /* @__PURE__ */ i("div", { className: "metric__image", children: /* @__PURE__ */ i(
-      f,
+      h,
       {
         name: e,
         alt: typeof t == "string" ? t : "",
@@ -36,9 +36,9 @@ function $({
       /* @__PURE__ */ i("div", { className: "metric__name", children: t })
     ] })
   ] });
-  return /* @__PURE__ */ i(_, { children: a ? /* @__PURE__ */ i(s, { to: a, children: n }) : n });
+  return /* @__PURE__ */ i(g, { children: a ? /* @__PURE__ */ i(s, { to: a, children: n }) : n });
 }
-const _ = g(x)`
+const g = f("div")`
   border-left: 1px solid ${(e) => e.theme.palette.divider};
   padding: 10px 0 10px 16px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
@@ -111,5 +111,5 @@ const _ = g(x)`
   }
 `;
 export {
-  $ as default
+  z as default
 };

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

@@ -1,15 +1,14 @@
 import { jsx as t } from "react/jsx-runtime";
-import n from "react-shadow/emotion";
-import { Box as e } from "@mui/material";
+import r from "react-shadow/emotion";
 import { styled as o } from "../../Theme/index.js";
-function a({ svg: r, ...i }) {
-  return /* @__PURE__ */ t(m, { ...i, children: /* @__PURE__ */ t(h, { dangerouslySetInnerHTML: { __html: r } }) });
+function l({ svg: i, ...n }) {
+  return /* @__PURE__ */ t(e, { ...n, children: /* @__PURE__ */ t(d, { dangerouslySetInnerHTML: { __html: i } }) });
 }
-const m = o(n.span)`
+const e = o(r.span)`
   display: block;
   width: 100%;
   height: 100%;
-`, h = o(e)`
+`, d = o("div")`
   &,
   & > svg {
     height: 100%;
@@ -19,5 +18,5 @@ const m = o(n.span)`
   }
 `;
 export {
-  a as default
+  l as default
 };

package/lib/PricingTable/index.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Box as a, Grid as n } from "@mui/material";
-import m from "./PricingPlan.js";
-import { styled as o } from "../Theme/index.js";
-import { withDeprecated as d } from "../Util/deprecate.js";
-function f({ plans: i = [] }) {
-  return i && i.length > 0 ? /* @__PURE__ */ e(c, { variant: "even", children: /* @__PURE__ */ e(
+import { Grid as n } from "@mui/material";
+import a from "./PricingPlan.js";
+import { styled as m } from "../Theme/index.js";
+import { withDeprecated as o } from "../Util/deprecate.js";
+function d({ plans: i = [] }) {
+  return i && i.length > 0 ? /* @__PURE__ */ e(f, { variant: "even", children: /* @__PURE__ */ e(
     n,
     {
       container: !0,
@@ -21,14 +21,14 @@ function f({ plans: i = [] }) {
             sm: 6,
             md: 3
           },
-          children: /* @__PURE__ */ e(m, { plan: t })
+          children: /* @__PURE__ */ e(a, { plan: t })
         },
         r
       ))
     }
   ) }) : null;
 }
-const u = d(f, { name: "PricingTable" }), c = o(a)`
+const g = o(d, { name: "PricingTable" }), f = m("div")`
   padding: 100px 0;
   text-align: center;
   background-color: ${(i) => i.variant === "even" ? "#fbfbfb" : "#ffffff"};
@@ -42,5 +42,5 @@ const u = d(f, { name: "PricingTable" }), c = o(a)`
   }
 `;
 export {
-  u as default
+  g as default
 };

package/lib/Result/result.js

@@ -1,11 +1,11 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { Box as t } from "@mui/material";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
 import { styled as c } from "../Theme/index.js";
-function g({ icon: r = null, title: o = "", description: e = "", extra: i = null, ...l }) {
+function g({ icon: r = null, title: t = "", description: o = "", extra: i = null, ...l }) {
   return /* @__PURE__ */ f(s, { ...l, children: [
     r,
-    typeof o == "string" ? /* @__PURE__ */ n(
-      t,
+    typeof t == "string" ? /* @__PURE__ */ e(
+      n,
       {
         sx: {
           mt: 3,
@@ -14,11 +14,11 @@ function g({ icon: r = null, title: o = "", description: e = "", extra: i = null
           color: "#47494E",
           textAlign: "center"
         },
-        children: o
+        children: t
       }
-    ) : o,
-    typeof e == "string" ? /* @__PURE__ */ n(
-      t,
+    ) : t,
+    typeof o == "string" ? /* @__PURE__ */ e(
+      n,
       {
         sx: {
           mt: 1,
@@ -26,11 +26,11 @@ function g({ icon: r = null, title: o = "", description: e = "", extra: i = null
           color: "#7F828B",
           textAlign: "center"
         },
-        children: e
+        children: o
       }
-    ) : e,
-    /* @__PURE__ */ n(
-      t,
+    ) : o,
+    /* @__PURE__ */ e(
+      n,
       {
         sx: {
           mt: 3
@@ -40,7 +40,7 @@ function g({ icon: r = null, title: o = "", description: e = "", extra: i = null
     )
   ] });
 }
-const s = c(t)`
+const s = c("div")`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/lib/Screenshot/BaseScreenshot/index.js

@@ -1,21 +1,20 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { Box as p } from "@mui/material";
-import m from "./shells/Phone.js";
+import p from "./shells/Phone.js";
 import f from "./shells/Macbook.js";
-import { styled as u } from "../../Theme/index.js";
-const b = {
-  phone: m,
+import { styled as m } from "../../Theme/index.js";
+const u = {
+  phone: p,
   macbook: f
 };
-function k({ width: e = 0, children: i, type: s = "phone", ...n }) {
-  const r = s.toLowerCase(), { Shell: a, ratio: l, screenData: t, width: d } = b[r || "phone"], h = u(p)`
+function $({ width: e = 0, children: i, type: s = "phone", ...n }) {
+  const r = s.toLowerCase(), { Shell: a, ratio: d, screenData: t, width: l } = u[r || "phone"], h = m("div")`
     position: relative;
     display: inline-block;
-    width: ${e || `${d}px`};
+    width: ${e || `${l}px`};
     &:after {
       display: block;
       content: '';
-      padding-bottom: ${l * 100}%;
+      padding-bottom: ${d * 100}%;
     }
     > svg {
       display: block;
@@ -53,5 +52,5 @@ function k({ width: e = 0, children: i, type: s = "phone", ...n }) {
   ] }) });
 }
 export {
-  k as default
+  $ as default
 };

package/lib/Screenshot/index.js

@@ -1,10 +1,9 @@
-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";
+import { mergeProps as z } from "../Util/index.js";
+import { styled as g } from "../Theme/index.js";
+import C from "./BaseScreenshot/index.js";
 /* empty css            */
 const u = {
   "iphone-x": {
@@ -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
 };