@arcblock/ux 3.0.11 → 3.0.12

package/lib/Layout/index.js

@@ -1,22 +1,22 @@
-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 { 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 b from "../Icon/index.js";
-import H from "../Logo/index.js";
+import U from "../Logo/index.js";
 import { styled as x } from "../Theme/index.js";
-function ie({
+function ne({
   title: i,
   brand: l,
   description: s = void 0,
   links: a = [],
-  logo: c = /* @__PURE__ */ e(H, { showText: !1, style: { width: "40px", height: "40px" } }),
+  logo: c = /* @__PURE__ */ e(U, { showText: !1, style: { width: "40px", height: "40px" } }),
   showLogo: d = !1,
   addons: y = void 0,
-  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(Z, {}) }),
+  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(A, {}) }),
   baseUrl: h = "",
   homeUrl: N = "/",
   variant: z = "shadow",
@@ -24,10 +24,10 @@ function ie({
   children: p,
   ...D
 }) {
-  const [m, I] = R(!1), f = () => {
+  const [m, I] = P(!1), f = () => {
     I(!m);
   };
-  if (W(() => {
+  if (R(() => {
     const { searchParams: r } = new URL(window.location.href), g = r.get("inviter");
     g && window.localStorage.setItem("inviter", g);
   }, []), L)
@@ -37,23 +37,23 @@ function ie({
   a.forEach((r) => {
     T.startsWith(r.url) && r.url.length > n.length && (n = r.url);
   });
-  const O = /* @__PURE__ */ o("div", { children: [
+  const B = /* @__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(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: [
+    /* @__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: [
       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(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: [
+  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: [
         /* @__PURE__ */ e(
-          E,
+          F,
           {
             color: "inherit",
             "aria-label": "open drawer",
@@ -61,7 +61,7 @@ function ie({
             onClick: f,
             className: "menu-button",
             size: "large",
-            children: /* @__PURE__ */ e(S, {})
+            children: /* @__PURE__ */ e(Z, {})
           }
         ),
         !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
@@ -109,10 +109,10 @@ function ie({
       /* @__PURE__ */ e("div", { className: "toolbar" }),
       /* @__PURE__ */ e(t, { style: { marginTop: 16, flex: 1 }, children: p }),
       k,
-      !!h && /* @__PURE__ */ e(A, { locale: "zh", link: h })
+      !!h && /* @__PURE__ */ e(H, { locale: "zh", link: h })
     ] }),
-    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
-      F,
+    /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
+      S,
       {
         variant: "temporary",
         open: m,
@@ -125,12 +125,12 @@ function ie({
           // Better open performance on mobile.
           disablePortal: !0
         },
-        children: O
+        children: B
       }
     ) })
   ] });
 }
-const U = x("div")`
+const q = x($)`
   width: 100%;
   min-height: 100vh;
   display: flex;
@@ -213,7 +213,7 @@ const U = x("div")`
       }
     }
   }
-`, q = x("nav")`
+`, J = x("nav")`
   width: 240px;
   .drawer-paper {
     width: 240px;
@@ -241,5 +241,5 @@ const U = x("div")`
   }
 `;
 export {
-  ie as default
+  ne 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 { Link as x } from "@mui/material";
-import h from "../Icon/image.js";
-import { styled as f } from "../Theme/index.js";
-function z({
+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 $({
   icon: e,
   value: r,
   name: t,
   url: a = "",
   animated: o = !1,
-  LinkComponent: s = x,
+  LinkComponent: s = h,
   prefix: l = "/images",
   iconColor: p = "#222222",
   iconStyle: c = {}
 }) {
   const n = /* @__PURE__ */ m(d, { children: [
     /* @__PURE__ */ i("div", { className: "metric__image", children: /* @__PURE__ */ i(
-      h,
+      f,
       {
         name: e,
         alt: typeof t == "string" ? t : "",
@@ -36,9 +36,9 @@ function z({
       /* @__PURE__ */ i("div", { className: "metric__name", children: t })
     ] })
   ] });
-  return /* @__PURE__ */ i(g, { children: a ? /* @__PURE__ */ i(s, { to: a, children: n }) : n });
+  return /* @__PURE__ */ i(_, { children: a ? /* @__PURE__ */ i(s, { to: a, children: n }) : n });
 }
-const g = f("div")`
+const _ = g(x)`
   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 = f("div")`
   }
 `;
 export {
-  z as default
+  $ as default
 };

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

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

package/lib/PricingTable/index.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-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(
+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(
     n,
     {
       container: !0,
@@ -21,14 +21,14 @@ function d({ plans: i = [] }) {
             sm: 6,
             md: 3
           },
-          children: /* @__PURE__ */ e(a, { plan: t })
+          children: /* @__PURE__ */ e(m, { plan: t })
         },
         r
       ))
     }
   ) }) : null;
 }
-const g = o(d, { name: "PricingTable" }), f = m("div")`
+const u = d(f, { name: "PricingTable" }), c = o(a)`
   padding: 100px 0;
   text-align: center;
   background-color: ${(i) => i.variant === "even" ? "#fbfbfb" : "#ffffff"};
@@ -42,5 +42,5 @@ const g = o(d, { name: "PricingTable" }), f = m("div")`
   }
 `;
 export {
-  g as default
+  u as default
 };

package/lib/Result/result.js

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

package/lib/Screenshot/BaseScreenshot/index.js

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

package/lib/Screenshot/index.js

@@ -1,9 +1,10 @@
-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 { 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 a from "lodash/isUndefined";
-import { mergeProps as z } from "../Util/index.js";
-import { styled as g } from "../Theme/index.js";
-import C from "./BaseScreenshot/index.js";
+import { mergeProps as C } from "../Util/index.js";
+import { styled as b } from "../Theme/index.js";
+import j from "./BaseScreenshot/index.js";
 /* empty css            */
 const u = {
   "iphone-x": {
@@ -71,33 +72,33 @@ const u = {
     width: 200,
     scale: 1
   }
-}, j = {
+}, E = {
   img: ["alt", "title", "src", "srcSet", "sizes", "loading", "key", "children"],
   video: ["alt", "title", "muted", "autoplay", "loop", "key", "children"]
-}, E = (t) => [
-  $(
+}, O = (t) => [
+  z(
     t.type,
-    j[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
+    E[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
   )
-], b = (t, e = !0) => {
+], w = (t, e = !0) => {
   for (let i = 0; i < t.length; i++) {
     const r = t[i];
     if (["img", "video"].includes(r.type))
-      return E(r);
+      return O(r);
     if (r.props && r.props.children) {
-      const n = v.toArray(r.props.children), o = b(n, !1);
+      const n = g.toArray(r.props.children), o = w(n, !1);
       if (o)
         return o;
     }
   }
   return e ? t : null;
 };
-function w(t) {
+function y(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 = 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,
+  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,
     {
       ...l,
       type: r,
@@ -106,7 +107,7 @@ function w(t) {
       contentRadius: d,
       contentZIndex: h,
       children: [
-        /* @__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-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: w(g.toArray(n))?.map((R, x) => $(R, { key: x })) }) }),
         /* @__PURE__ */ s("div", { className: "device-stripe" }),
         /* @__PURE__ */ s("div", { className: "device-header" }),
         /* @__PURE__ */ s("div", { className: "device-sensors" }),
@@ -116,7 +117,7 @@ function w(t) {
     }
   );
 }
-const O = g("div")`
+const H = b(v)`
   @media (max-width: ${(t) => u[t.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(t) => u[t.type].scale});
@@ -135,9 +136,9 @@ const O = g("div")`
     height: 100.1%;
   }
 `;
-function H({ ...t }) {
-  const e = N(null), [i, r] = f(), [n, o] = f(null);
-  return k(() => {
+function P({ ...t }) {
+  const e = k(null), [i, r] = f(), [n, o] = f(null);
+  return S(() => {
     let c = null;
     const p = () => {
       const { clientWidth: m } = e.current, { clientWidth: l, clientHeight: h } = e.current.children[0], d = m / l;
@@ -146,18 +147,18 @@ function H({ ...t }) {
     return e.current && (c = new ResizeObserver(p), c.observe(e.current)), () => {
       c && c.disconnect();
     };
-  }, [e.current]), /* @__PURE__ */ s(P, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(w, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
+  }, [e.current]), /* @__PURE__ */ s(W, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(y, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
 }
-const P = g("div")`
+const W = b(v)`
   div[type] {
     transform: scale(1);
     transform-origin: 0 0;
   }
 `;
-function Z({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
+function _({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
   const o = t.toLowerCase();
-  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) });
+  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) });
 }
 export {
-  Z as default
+  _ 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 { CircularProgress as m } from "@mui/material";
+import { Box as g, CircularProgress as m } from "@mui/material";
 import l from "lodash/isUndefined";
-import { mergeProps as g } from "../Util/index.js";
-import { styled as b } from "../Theme/index.js";
-function x(p) {
+import { mergeProps as b } from "../Util/index.js";
+import { styled as x } from "../Theme/index.js";
+function j(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 = 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,
+  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,
     height: r,
     visibility: s ? "visible" : "hidden"
   });
-  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 }),
+  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 }),
     !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
-  ] }) : /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
+  ] }) : /* @__PURE__ */ c(f, { style: { width: i, height: r }, children: [
     /* @__PURE__ */ t(h, { style: d, ...n, onReady: () => a(!0) }),
     !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
   ] });
 }
-const f = b("div")`
+const f = x(g)`
   background-color: #222222;
   display: flex;
   justify-content: center;
@@ -36,5 +36,5 @@ const f = b("div")`
   }
 `;
 export {
-  x as default
+  j as default
 };

package/lib/Wallet/Action.js

@@ -1,18 +1,18 @@
 import { jsx as l, jsxs as o } from "react/jsx-runtime";
-import { Typography as g } from "@mui/material";
+import { Box as g, Typography as x } from "@mui/material";
 import i from "lodash/isUndefined";
-import x from "./images/abtwallet.png";
-import { mergeProps as y } from "../Util/index.js";
+import y from "./images/abtwallet.png";
+import { mergeProps as _ } from "../Util/index.js";
 import c from "../Colors/themes/default.js";
-import _ from "../Button/index.js";
-import { styled as h } from "../Theme/index.js";
-function u(t) {
+import h from "../Button/index.js";
+import { styled as u } from "../Theme/index.js";
+function w(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 = 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: [
+  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: [
       /* @__PURE__ */ o("span", { className: "wallet-action__action", children: [
         n,
         " with"
@@ -38,7 +38,7 @@ const a = {
     large: 13,
     xlarge: 18
   }
-}, w = h("div")`
+}, z = u(g)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -79,5 +79,5 @@ const a = {
   }
 `;
 export {
-  u as default
+  w as default
 };

package/lib/Wallet/Download.js

@@ -1,26 +1,26 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import g from "@arcblock/react-hooks/lib/useBrowser";
-import { Typography as f } from "@mui/material";
+import { Box as v, Typography as f } from "@mui/material";
 import a from "lodash/isUndefined";
-import v from "./images/app-store.svg.js";
-import b from "./images/google-play.svg.js";
+import b from "./images/app-store.svg.js";
+import x 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 x } from "../Theme/index.js";
-function D(t) {
+import { styled as D } from "../Theme/index.js";
+function N(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, 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: [
+  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: [
     /* @__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(v, {}) }),
+      /* @__PURE__ */ e(i, { className: "download-link", component: "a", href: c, children: /* @__PURE__ */ e(b, {}) }),
       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(b, {}) })
+      n === "en" && /* @__PURE__ */ e(i, { component: "a", className: "download-link", href: m, children: /* @__PURE__ */ e(x, {}) })
     ] }),
     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 D(t) {
     u && /* @__PURE__ */ e("div", { className: "download-store-list", children: /* @__PURE__ */ e(i, { component: "a", href: c, variant: "outlined", color: "primary", children: "Download" }) })
   ] });
 }
-const N = x("div")`
+const $ = D(v)`
   display: flex;
   flex-direction: ${(t) => t.layout === "vertical" ? "column" : "row"};
   align-items: center;
@@ -60,5 +60,5 @@ const N = x("div")`
   }
 `;
 export {
-  D as default
+  N as default
 };

package/lib/WechatPrompt/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "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": "3619d5d23622fb8074ace5f6c685bcc25c14c056",
+  "gitHead": "ebe824e4b0ddfc1cbdd9ffecc22283e57a58c042",
   "dependencies": {
-    "@arcblock/bridge": "3.0.11",
+    "@arcblock/bridge": "3.0.12",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.11",
-    "@arcblock/nft-display": "3.0.11",
-    "@arcblock/react-hooks": "3.0.11",
+    "@arcblock/icons": "3.0.12",
+    "@arcblock/nft-display": "3.0.12",
+    "@arcblock/react-hooks": "3.0.12",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.11",
+    "@blocklet/theme": "3.0.12",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",