@arcblock/ux 3.0.12 → 3.0.14

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/PageScroller/story/FullPage.js

@@ -7,7 +7,7 @@ import c from "./SecondComponent.js";
 import u from "./ThirdComponent.js";
 import d from "./FourthComponent.js";
 import f from "./FifthComponent.js";
-/* empty css          */
+import "./index.css";
 function y() {
   const [e, a] = m(0), n = [];
   for (let o = 0; o < 5; o++)

package/lib/PageScroller/story/PageContain.js

@@ -7,7 +7,7 @@ import p from "./SecondComponent.js";
 import d from "./ThirdComponent.js";
 import h from "./FourthComponent.js";
 import u from "./FifthComponent.js";
-/* empty css          */
+import "./index.css";
 function F() {
   const [e, a] = s(0), n = [];
   for (let o = 0; o < 5; o++)

package/lib/PageScroller/story/index.css

@@ -0,0 +1,115 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  margin-left: 50px;
+}
+
+.links .link {
+  margin-top: 20px;
+}
+
+.component {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.component.first-component {
+  background-color: gray;
+  position: relative;
+}
+
+.first-component--inside-scroller {
+  position: absolute;
+  right: 20px;
+  top: 100px;
+}
+
+.component.second-component {
+  background-color: red;
+}
+
+.component.third-component {
+  background-color: blue;
+}
+
+.component.fourth-component {
+  background-color: yellow;
+}
+
+.component.fifth-component {
+  background-color: purple;
+}
+
+h2 {
+  margin: auto;
+  text-align: center;
+}
+
+.pagination-additional-class {
+  margin: 0;
+  position: fixed;
+  top: 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.pagination-additional-class > li:not(:last-of-type) > a,
+.pagination-additional-class > li:not(:last-of-type) > span {
+  margin-right: 50px;
+}
+
+.demo-page-contain {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.demo-page-contain__hint {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .pagination-additional-class > li:not(:last-of-type) > a,
+  .pagination-additional-class > li:not(:last-of-type) > span {
+    margin-right: 5px;
+  }
+}
+
+.demo-page-full {
+  position: relative;
+}
+.progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  overflow: hidden;
+  transition: all 0.2s linear;
+}
+.progress,
+.progress:before {
+  height: 6px;
+}
+.progress:before {
+  display: block;
+  width: 100%;
+  background-color: #4e6af6;
+  content: '';
+  transform-origin: 0 100%;
+  transform: skewX(45deg);
+}
+.progress[style*='100%']:before {
+  transform: none;
+}

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
 };