@arcblock/ux 3.0.41 → 3.0.43

package/lib/NavMenu/images/did.svg.js

@@ -1,5 +1,5 @@
 import * as C from "react";
-const H = (e) => /* @__PURE__ */ C.createElement("svg", { width: 76, height: 76, viewBox: "0 0 76 76", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.32886 15.6177C5.22429 15.6177 4.32886 16.5131 4.32886 17.6177V20.7634H0.328857V17.6177C0.328857 14.304 3.01515 11.6177 6.32886 11.6177H69.2574C72.5711 11.6177 75.2574 14.304 75.2574 17.6177V59.4747C75.2574 62.7884 72.5712 65.4747 69.2574 65.4747H6.32887C3.01516 65.4747 0.328857 62.7884 0.328857 59.4747V56.5595H4.32886V59.4747C4.32886 60.5792 5.22429 61.4747 6.32887 61.4747H69.2574C70.362 61.4747 71.2574 60.5793 71.2574 59.4747V17.6177C71.2574 16.5131 70.362 15.6177 69.2574 15.6177H6.32886ZM40.4578 27.3455C42.8218 27.3455 44.8692 27.8372 46.6 28.8205C48.3519 29.7815 49.7133 31.1448 50.6842 32.9104C51.6552 34.6759 52.1407 36.7544 52.1407 39.1457C52.1407 41.5147 51.6552 43.5708 50.6842 45.314C49.7133 47.0572 48.3519 48.4093 46.6 49.3703C44.8692 50.3313 42.8218 50.8118 40.4578 50.8118H32.1943V27.3455H40.4578ZM40.3311 47.0237C42.7162 47.0237 44.5526 46.3309 45.8401 44.9452C47.1277 43.5373 47.7714 41.6041 47.7714 39.1457C47.7714 36.665 47.1277 34.7095 45.8401 33.2791C44.5526 31.8488 42.7162 31.1336 40.3311 31.1336H36.4685V47.0237H40.3311ZM27.501 27.3455H23.9811V50.8118H27.501V27.3455ZM8.77824 27.3455C11.1423 27.3455 13.1897 27.8372 14.9205 28.8205C16.6724 29.7815 18.0338 31.1448 19.0047 32.9104C19.9757 34.6759 20.4611 36.7544 20.4611 39.1457C20.4611 41.5147 19.9757 43.5708 19.0047 45.314C18.0338 47.0572 16.6724 48.4093 14.9205 49.3703C13.1897 50.3313 11.1423 50.8118 8.77824 50.8118H0.514743V27.3455H8.77824ZM8.6516 47.0237C11.0367 47.0237 12.8731 46.3309 14.1606 44.9452C15.4481 43.5373 16.0919 41.6041 16.0919 39.1457C16.0919 36.665 15.4481 34.7095 14.1606 33.2791C12.8731 31.8488 11.0367 31.1336 8.6516 31.1336H4.78897V47.0237H8.6516ZM62.2973 30.6486C62.2973 32.1114 61.1115 33.2972 59.6487 33.2972C58.186 33.2972 57.0001 32.1114 57.0001 30.6486C57.0001 29.1858 58.186 28 59.6487 28C61.1115 28 62.2973 29.1858 62.2973 30.6486ZM62.2972 46.5402C62.2972 48.003 61.1114 49.1888 59.6486 49.1888C58.1858 49.1888 57 48.003 57 46.5402C57 45.0774 58.1858 43.8916 59.6486 43.8916C61.1114 43.8916 62.2972 45.0774 62.2972 46.5402Z", fill: "#4598FA" }));
+const e = (H) => /* @__PURE__ */ C.createElement("svg", { viewBox: "0 0 90 65", xmlns: "http://www.w3.org/2000/svg", ...H }, /* @__PURE__ */ C.createElement("path", { d: "M79.4248 0.700195C85.1132 0.700234 89.7244 5.31169 89.7246 11V54.2344C89.7244 59.9227 85.1132 64.5341 79.4248 64.5342H11.1562C5.46786 64.5342 0.856682 59.9227 0.856445 54.2344V54.0186H5.45605V54.2344C5.45629 57.3822 8.00837 59.9336 11.1562 59.9336H79.4248C82.5726 59.9336 85.1248 57.3822 85.125 54.2344V11C85.1248 7.8522 82.5727 5.29984 79.4248 5.2998H11.1562C8.00837 5.2998 5.45629 7.85217 5.45605 11V11.4893H0.856445V11C0.856676 5.31166 5.46786 0.700195 11.1562 0.700195H79.4248ZM11.293 17.6914C14.2375 17.6914 16.7876 18.3114 18.9434 19.5508C21.1254 20.762 22.8219 22.4798 24.0312 24.7051C25.2406 26.9304 25.8447 29.5504 25.8447 32.5645C25.8447 35.5502 25.2405 38.1418 24.0312 40.3389C22.8219 42.536 21.1255 44.2399 18.9434 45.4512C16.7875 46.6624 14.2375 47.2686 11.293 47.2686H1V17.6914H11.293ZM35.2061 47.2686H29.8818V17.6914H35.2061V47.2686ZM50.8828 17.6914C53.8272 17.6914 56.3774 18.3114 58.5332 19.5508C60.7151 20.7619 62.4108 22.48 63.6201 24.7051C64.8295 26.9304 65.4346 29.5505 65.4346 32.5645C65.4346 35.5503 64.8295 38.1417 63.6201 40.3389C62.4108 42.5359 60.7152 44.2399 58.5332 45.4512C56.3774 46.6624 53.8272 47.2685 50.8828 47.2686H40.5898V17.6914H50.8828ZM73.4785 36.7568C75.1235 36.7568 76.457 38.0913 76.457 39.7363C76.4568 41.3811 75.1234 42.7148 73.4785 42.7148C71.8338 42.7147 70.5003 41.381 70.5 39.7363C70.5 38.0914 71.8336 36.757 73.4785 36.7568ZM6.32422 42.4941H11.1357C14.1064 42.4941 16.3934 41.6204 17.9971 39.874C19.6008 38.0994 20.4023 35.663 20.4023 32.5645C20.4023 29.4378 19.6008 26.9727 17.9971 25.1699C16.3934 23.3674 14.1063 22.4659 11.1357 22.4658H6.32422V42.4941ZM45.9141 42.4941H50.7246C53.6954 42.4941 55.9832 41.6205 57.5869 39.874C59.1905 38.0994 59.9922 35.6628 59.9922 32.5645C59.9922 29.4378 59.1906 26.9727 57.5869 25.1699C55.9832 23.3672 53.6954 22.4658 50.7246 22.4658H45.9141V42.4941ZM73.4785 22.8574C75.1235 22.8574 76.457 24.1909 76.457 25.8359C76.457 27.4809 75.1235 28.8145 73.4785 28.8145C71.8336 28.8143 70.5 27.4808 70.5 25.8359C70.5 24.191 71.8337 22.8576 73.4785 22.8574Z", fill: "currentColor" }));
 export {
-  H as default
+  e as default
 };

package/lib/NavMenu/products.js

@@ -1,34 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as f } from "react";
-import { Link as o } from "react-router-dom";
-import { useMemoizedFn as k, useCreation as S } from "ahooks";
-import { Box as m, useTheme as v, Grid as d } from "@mui/material";
-import A from "./sub-item-group.js";
-import { Item as I } from "./nav-menu.js";
-import { styled as y } from "../Theme/index.js";
-import { useNavMenuContext as C } from "./nav-menu-context.js";
-import { translate as _ } from "../Locale/util.js";
-import { useLocaleContext as N } from "../Locale/context.js";
-import G from "./images/ai-kit.svg.js";
-import D from "./images/nft-studio.svg.js";
-import $ from "./images/creator-studio.svg.js";
-import x from "./images/blocklet-launcher.svg.js";
-import K from "./images/blocklet-store.svg.js";
-import W from "./images/web3-kit.svg.js";
-import B from "./images/blocklet-framework.svg.js";
-import F from "./images/abt-network.svg.js";
-import E from "./images/blocklet-server.svg.js";
-import L from "./images/OCAP.svg.js";
-import s from "./images/did.svg.js";
-import P from "./images/did-wallet.svg.js";
-import T from "./images/did-name-service.svg.js";
-import M from "./images/vc.svg.js";
-import O from "./images/did-connect.svg.js";
-import H from "./images/payment-kit.png";
-import R from "./images/aigne.svg.js";
-import b from "./images/arcsphere.svg.js";
-import z from "./images/aistro.png";
-const V = {
+import { useRef as $, useState as D, useEffect as k } from "react";
+import { Link as p } from "react-router-dom";
+import { useMemoizedFn as S, useCreation as G } from "ahooks";
+import { Box as h, useTheme as E } from "@mui/material";
+import B from "./sub-item-group.js";
+import { Item as T } from "./nav-menu.js";
+import { styled as I } from "../Theme/index.js";
+import { useNavMenuContext as F } from "./nav-menu-context.js";
+import { translate as K } from "../Locale/util.js";
+import { useLocaleContext as L } from "../Locale/context.js";
+import M from "./images/nft-studio.svg.js";
+import _ from "./images/creator-studio.svg.js";
+import O from "./images/blocklet-launcher.svg.js";
+import P from "./images/blocklet-store.svg.js";
+import R from "./images/web3-kit.svg.js";
+import H from "./images/blocklet-framework.svg.js";
+import z from "./images/abt-network.svg.js";
+import V from "./images/blocklet-server.svg.js";
+import j from "./images/OCAP.svg.js";
+import q from "./images/did.svg.js";
+import U from "./images/did-wallet.svg.js";
+import J from "./images/vc.svg.js";
+import Q from "./images/payment-kit.png";
+import X from "./images/aigne.svg.js";
+import v from "./images/arcsphere.svg.js";
+import Y from "./images/aistro.png";
+const A = 260, Z = {
   en: {
     groups: {
       applications: "Applications",
@@ -221,11 +218,9 @@ const V = {
       }
     }
   }
-}, j = y(m)`
-  width: 80vw;
-  max-width: 900px;
+}, ee = I(h)`
   padding: 8px;
-  background: ${({ theme: n }) => n.palette.grey[100]};
+  background: ${({ theme: r }) => r.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {
@@ -244,276 +239,277 @@ const V = {
   .MuiGrid-container + .MuiGrid-container {
     margin-top: 0px;
   }
-`;
-function i({ color: n = "black", backgroundColor: l = "transparent" }) {
+`, oe = I(h, { shouldForwardProp: (r) => r !== "maxContent" })(
+  ({ theme: r, maxContent: n }) => ({
+    display: "grid",
+    gap: r.spacing(1),
+    gridTemplateColumns: `repeat(1, ${n}px)`,
+    [r.breakpoints.up("md")]: {
+      gridTemplateColumns: `repeat(2, ${n}px)`
+    },
+    [r.breakpoints.up("lg")]: {
+      gridTemplateColumns: `repeat(3, ${n}px)`
+    }
+  })
+);
+function C({ color: r = "black", backgroundColor: n = "transparent", children: l }) {
   return /* @__PURE__ */ e(
-    m,
+    h,
     {
       component: "span",
       sx: {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        color: n,
-        backgroundColor: l,
+        color: r,
+        backgroundColor: n,
         borderRadius: "4px"
       },
-      children: /* @__PURE__ */ e(R, {})
+      children: l
     }
   );
 }
-function Ie({ className: n, type: l, ...g }) {
-  const { mode: u } = C(), { palette: a } = v(), w = f(null), { locale: t = "en" } = N() || {}, r = k((c, p = {}) => _(V, c, t, "en", p)), h = S(() => l === "ARCBLOCK" ? [
+function m({ color: r = "black", backgroundColor: n = "transparent" }) {
+  return /* @__PURE__ */ e(C, { color: r, backgroundColor: n, children: /* @__PURE__ */ e(q, { style: { width: "100%" } }) });
+}
+function d({ color: r = "black", backgroundColor: n = "transparent" }) {
+  return /* @__PURE__ */ e(C, { color: r, backgroundColor: n, children: /* @__PURE__ */ e(X, { style: { width: "100%", height: "100%" } }) });
+}
+function t({ to: r, children: n, className: l = "" }) {
+  return (() => {
+    try {
+      return new URL(r).origin !== window.location.origin;
+    } catch {
+      return !1;
+    }
+  })() ? /* @__PURE__ */ e(p, { to: r, target: "_blank", rel: "noreferrer noopener", className: l, children: n }) : /* @__PURE__ */ e(p, { to: r, className: l, children: n });
+}
+function $e({ className: r = "", type: n, ...l }) {
+  const { mode: w } = F(), b = E(), { locale: i = "en" } = L() || {}, a = $(null), { palette: g } = b, o = S((c, s = {}) => K(Z, c, i, "en", s)), [y, N] = D(A), u = S(() => {
+    if (!a.current) return;
+    const c = a.current.querySelectorAll(".navmenu-item__content");
+    let s = A;
+    c.forEach((W) => {
+      const f = W.getBoundingClientRect().width + 64;
+      f > s && (s = f);
+    }), N(s);
+  });
+  k(() => {
+    u();
+  }, [b, i, n, u]), k(() => {
+    if (!a.current) return;
+    const c = a.current.querySelector(".navmenu-item__content");
+    if (!c) return;
+    const s = new ResizeObserver(() => {
+      u();
+    });
+    return s.observe(c), () => {
+      s.disconnect();
+    };
+  }, [u]);
+  const x = G(() => n === "ARCBLOCK" ? [
     {
       type: "Group",
-      label: r("groups.applications"),
+      label: o("groups.applications"),
       children: [
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.nftstudio.rocks/${t}`, target: "_blank", rel: "noreferrer noopener", children: "NFT Studio" }),
-          description: r("products.nftStudio.description"),
-          icon: /* @__PURE__ */ e(D, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.nftstudio.rocks/${i}`, children: "NFT Studio" }),
+          description: o("products.nftStudio.description"),
+          icon: /* @__PURE__ */ e(M, {})
         },
         {
           label: /* @__PURE__ */ e(
-            o,
+            p,
             {
-              to: `https://www.arcblock.io/content/collections/${t}/creator-studio`,
+              to: `https://www.arcblock.io/content/collections/${i}/creator-studio`,
               target: "_blank",
               rel: "noreferrer noopener",
               children: "Creator Studio"
             }
           ),
-          description: r("products.creatorStudio.description"),
-          icon: /* @__PURE__ */ e($, {})
+          description: o("products.creatorStudio.description"),
+          icon: /* @__PURE__ */ e(_, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/", target: "_blank", rel: "noreferrer noopener", children: "AIGNE" }),
-          description: r("products.aigne.description"),
-          icon: /* @__PURE__ */ e(i, { color: a.mode === "dark" ? "white" : "black" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/", children: "AIGNE" }),
+          description: o("products.aigne.description"),
+          icon: /* @__PURE__ */ e(d, { color: g.mode === "dark" ? "white" : "black" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.arcsphere.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "ArcSphere" }),
-          description: r("products.arcsphere.description"),
-          icon: /* @__PURE__ */ e(b, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${i}`, children: "ArcSphere" }),
+          description: o("products.arcsphere.description"),
+          icon: /* @__PURE__ */ e(v, {})
         }
       ]
     },
     {
       type: "Group",
-      label: r("groups.components"),
+      label: o("groups.components"),
       children: [
         {
-          label: /* @__PURE__ */ e(o, { to: `https://launcher.arcblock.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "Blocklet Launcher" }),
-          description: r("products.blockletLauncher.description"),
-          icon: /* @__PURE__ */ e(x, {})
-        },
-        {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/hub", target: "_blank", rel: "noreferrer noopener", children: "AI Kit" }),
-          description: r("products.aiKit.description"),
-          icon: /* @__PURE__ */ e(G, {})
+          label: /* @__PURE__ */ e(t, { to: `https://launcher.arcblock.io/${i}`, children: "Blocklet Launcher" }),
+          description: o("products.blockletLauncher.description"),
+          icon: /* @__PURE__ */ e(O, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.blocklet.io/${t}/payment-kit`, target: "_blank", rel: "noreferrer noopener", children: "Payment Kit" }),
-          description: r("products.paymentKit.description"),
-          icon: /* @__PURE__ */ e("img", { src: H, alt: "Payment Kit" })
+          label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${i}/payment-kit`, children: "Payment Kit" }),
+          description: o("products.paymentKit.description"),
+          icon: /* @__PURE__ */ e("img", { src: Q, alt: "Payment Kit" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://store.blocklet.dev/?locale=${t}`, target: "_blank", rel: "noreferrer noopener", children: "Blocklet Store" }),
-          description: r("products.blockletStore.description"),
-          icon: /* @__PURE__ */ e(K, {})
+          label: /* @__PURE__ */ e(t, { to: `https://store.blocklet.dev/?locale=${i}`, children: "Blocklet Store" }),
+          description: o("products.blockletStore.description"),
+          icon: /* @__PURE__ */ e(P, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.web3kit.rocks/${t}`, target: "_blank", rel: "noreferrer noopener", children: "Web3 Kit" }),
-          description: r("products.web3Kit.description"),
-          icon: /* @__PURE__ */ e(W, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.web3kit.rocks/${i}`, children: "Web3 Kit" }),
+          description: o("products.web3Kit.description"),
+          icon: /* @__PURE__ */ e(R, {})
         }
       ]
     },
     {
       type: "Group",
-      label: r("groups.computeStorage"),
+      label: o("groups.computeStorage"),
       children: [
         {
           label: /* @__PURE__ */ e(
-            o,
+            p,
             {
-              to: `https://www.arcblock.io/content/collections/${t}/blocklet`,
+              to: `https://www.arcblock.io/content/collections/${i}/blocklet`,
               target: "_blank",
               rel: "noreferrer noopener",
               children: "Blocklet Framework"
             }
           ),
-          description: r("products.blockletFramework.description"),
-          icon: /* @__PURE__ */ e(B, {})
+          description: o("products.blockletFramework.description"),
+          icon: /* @__PURE__ */ e(H, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.didspaces.com/${t}`, target: "_blank", rel: "noreferrer noopener", children: "DID Spaces" }),
-          description: r("products.didSpaces.description"),
-          icon: /* @__PURE__ */ e(s, {})
+          label: /* @__PURE__ */ e(p, { to: `https://www.didspaces.com/${i}`, target: "_blank", rel: "noreferrer noopener", children: "DID Spaces" }),
+          description: o("products.didSpaces.description"),
+          icon: /* @__PURE__ */ e(m, { color: "#876bf4" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://main.abtnetwork.io/", target: "_blank", rel: "noreferrer noopener", children: "ABT Network" }),
-          description: r("products.abtNetwork.description"),
-          icon: /* @__PURE__ */ e(F, {})
+          label: /* @__PURE__ */ e(p, { to: "https://main.abtnetwork.io/", target: "_blank", rel: "noreferrer noopener", children: "ABT Network" }),
+          description: o("products.abtNetwork.description"),
+          icon: /* @__PURE__ */ e(z, {})
         },
         {
-          label: /* @__PURE__ */ e(
-            o,
-            {
-              to: `https://www.blocklet.io/${t}/blocklet-server`,
-              target: "_blank",
-              rel: "noreferrer noopener",
-              children: "Blocklet Server"
-            }
-          ),
-          description: r("products.blockletServer.description"),
-          icon: /* @__PURE__ */ e(E, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${i}/blocklet-server`, children: "Blocklet Server" }),
+          description: o("products.blockletServer.description"),
+          icon: /* @__PURE__ */ e(V, {})
         },
         {
-          label: /* @__PURE__ */ e(
-            o,
-            {
-              to: `https://www.arcblock.io/content/collections/${t}/ocap`,
-              target: "_blank",
-              rel: "noreferrer noopener",
-              children: "ОСАР"
-            }
-          ),
-          description: r("products.ocap.description"),
-          icon: /* @__PURE__ */ e(L, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/ocap`, children: "ОСАР" }),
+          description: o("products.ocap.description"),
+          icon: /* @__PURE__ */ e(j, {})
         }
       ]
     },
     {
       type: "Group",
-      label: r("groups.identity"),
+      label: o("groups.identity"),
       children: [
         {
-          label: /* @__PURE__ */ e(
-            o,
-            {
-              to: `https://www.arcblock.io/content/collections/${t}/did`,
-              target: "_blank",
-              rel: "noreferrer noopener",
-              children: "DID"
-            }
-          ),
-          description: r("products.did.description"),
-          icon: /* @__PURE__ */ e(s, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/did`, children: "DID" }),
+          description: o("products.did.description"),
+          icon: /* @__PURE__ */ e(m, { color: "#5b96f3" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.didwallet.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "DID Wallet" }),
-          description: r("products.didWallet.description"),
-          icon: /* @__PURE__ */ e(P, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.didwallet.io/${i}`, children: "DID Wallet" }),
+          description: o("products.didWallet.description"),
+          icon: /* @__PURE__ */ e(U, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.didnames.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "DID Names" }),
-          description: r("products.didNameService.description"),
-          icon: /* @__PURE__ */ e(T, {})
+          label: /* @__PURE__ */ e(p, { to: `https://www.didnames.io/${i}`, target: "_blank", rel: "noreferrer noopener", children: "DID Names" }),
+          description: o("products.didNameService.description"),
+          icon: /* @__PURE__ */ e(m, { color: "#678ab0" })
         },
         {
-          label: /* @__PURE__ */ e(
-            o,
-            {
-              to: `https://www.arcblock.io/content/collections/${t}/verifiable-credential`,
-              target: "_blank",
-              rel: "noreferrer noopener",
-              children: "VC"
-            }
-          ),
-          description: r("products.vc.description"),
-          icon: /* @__PURE__ */ e(M, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/verifiable-credential`, children: "VC" }),
+          description: o("products.vc.description"),
+          icon: /* @__PURE__ */ e(J, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.didconnect.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "DID Connect" }),
-          description: r("products.didConnect.description"),
-          icon: /* @__PURE__ */ e(O, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.didconnect.io/${i}`, children: "DID Connect" }),
+          description: o("products.didConnect.description"),
+          icon: /* @__PURE__ */ e(m, { color: "#5bbec5" })
         }
       ]
     }
-  ] : l === "AIGNE" ? [
+  ] : n === "AIGNE" ? [
     {
       type: "Group",
-      label: r("groups.applications"),
+      label: o("groups.applications"),
       children: [
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.arcsphere.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "ArcSphere" }),
-          description: r("products.arcsphere.description"),
-          icon: /* @__PURE__ */ e(b, {})
+          label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${i}`, children: "ArcSphere" }),
+          description: o("products.arcsphere.description"),
+          icon: /* @__PURE__ */ e(v, {})
         },
         {
-          label: /* @__PURE__ */ e(o, { to: `https://www.aistro.io/${t}`, target: "_blank", rel: "noreferrer noopener", children: "Aistro" }),
-          description: r("products.aistro.description"),
-          icon: /* @__PURE__ */ e("img", { src: z, alt: "Aistro" })
+          label: /* @__PURE__ */ e(t, { to: `https://www.aistro.io/${i}`, children: "Aistro" }),
+          description: o("products.aistro.description"),
+          icon: /* @__PURE__ */ e("img", { src: Y, alt: "Aistro" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/doc-smith", target: "_blank", rel: "noreferrer noopener", children: "AIGNE CodeSmith" }),
-          description: r("products.aigneCodeSmith.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#56a596", backgroundColor: "#e9fcf6" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/doc-smith", children: "AIGNE CodeSmith" }),
+          description: o("products.aigneCodeSmith.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#56a596", backgroundColor: "#e9fcf6" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/code-smith", target: "_blank", rel: "noreferrer noopener", children: "AIGNE DocSmith" }),
-          description: r("products.aigneDocSmith.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#e46f38", backgroundColor: "#f7e0d7" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/code-smith", children: "AIGNE DocSmith" }),
+          description: o("products.aigneDocSmith.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#e46f38", backgroundColor: "#f7e0d7" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/web-smith", target: "_blank", rel: "noreferrer noopener", children: "AIGNE WebSmith" }),
-          description: r("products.aigneWebSmith.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#7c45eb", backgroundColor: "#f0e9ff" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/web-smith", children: "AIGNE WebSmith" }),
+          description: o("products.aigneWebSmith.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#7c45eb", backgroundColor: "#f0e9ff" })
         }
       ]
     },
     {
       type: "Group",
-      label: r("groups.frameworkTools"),
+      label: o("groups.frameworkTools"),
       children: [
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/cli", target: "_blank", rel: "noreferrer noopener", children: "AIGNE CLI" }),
-          description: r("products.aigneCLI.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#d05d4e", backgroundColor: "#faeaea" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/cli", children: "AIGNE CLI" }),
+          description: o("products.aigneCLI.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#d05d4e", backgroundColor: "#faeaea" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/observability", target: "_blank", rel: "noreferrer noopener", children: "AIGNE Observability" }),
-          description: r("products.aigneObservability.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#6ba456", backgroundColor: "#edfae8" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/observability", children: "AIGNE Observability" }),
+          description: o("products.aigneObservability.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#6ba456", backgroundColor: "#edfae8" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/studio", target: "_blank", rel: "noreferrer noopener", children: "AIGNE Studio" }),
-          description: r("products.aigneStudio.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#676cbf", backgroundColor: "#edeeff" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/studio", children: "AIGNE Studio" }),
+          description: o("products.aigneStudio.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#676cbf", backgroundColor: "#edeeff" })
         },
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/framework", target: "_blank", rel: "noreferrer noopener", children: "AIGNE Framework" }),
-          description: r("products.aigneFramework.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#5086d0", backgroundColor: "#eef4ff" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/framework", children: "AIGNE Framework" }),
+          description: o("products.aigneFramework.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#5086d0", backgroundColor: "#eef4ff" })
         }
       ]
     },
     {
       type: "Group",
-      label: r("groups.modelsAdapters"),
+      label: o("groups.modelsAdapters"),
       children: [
         {
-          label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/hub", target: "_blank", rel: "noreferrer noopener", children: "AIGNE Hub" }),
-          description: r("products.aigneHub.description"),
-          icon: /* @__PURE__ */ e(i, { color: "#e4930b", backgroundColor: "#fbf4d4" })
+          label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/hub", children: "AIGNE Hub" }),
+          description: o("products.aigneHub.description"),
+          icon: /* @__PURE__ */ e(d, { color: "#e4930b", backgroundColor: "#fbf4d4" })
         }
       ]
     }
-  ] : [], [r, t, a]);
-  return /* @__PURE__ */ e(j, { ref: w, className: `is-${u} ${n}`, ...g, children: h.map((c) => /* @__PURE__ */ e(A, { label: c.label, children: /* @__PURE__ */ e(d, { container: !0, columnSpacing: 1, rowSpacing: 1, children: c.children.map((p) => /* @__PURE__ */ e(
-    d,
-    {
-      size: {
-        xs: 12,
-        md: 6,
-        lg: 4
-      },
-      children: /* @__PURE__ */ e(I, { variant: "panel", style: { padding: "8px" }, ...p })
-    },
-    p.description
-  )) }) }, c.label)) });
+  ] : [], [o, i, g]);
+  return /* @__PURE__ */ e(ee, { ref: a, className: `nav-menu-products is-${w} ${r}`, ...l, children: x.map((c) => /* @__PURE__ */ e(B, { label: c.label, children: /* @__PURE__ */ e(oe, { maxContent: y, children: c.children.map((s) => /* @__PURE__ */ e(T, { variant: "panel", style: { padding: "8px" }, ...s })) }) }, c.label)) });
 }
 export {
-  Ie as default
+  $e as default
 };

package/lib/NavMenu/sub-item-group.js

@@ -19,7 +19,13 @@ const u = l(r)`
     padding: 0;
   }
 `;
-function d({ label: o, children: a, className: n, sx: t, ...p }) {
+function d({
+  label: o,
+  children: a,
+  className: n = "",
+  sx: t,
+  ...p
+}) {
   return /* @__PURE__ */ s(u, { className: `nav-menu-sub-item-group ${n}`, sx: { ...t }, ...p, children: [
     /* @__PURE__ */ e(r, { className: "group-label", children: o }),
     /* @__PURE__ */ e(r, { component: "ul", className: "nav", children: a })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.41",
+  "version": "3.0.43",
   "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": "e4bf7c421b39bfc7b969653e580047629e5338b5",
+  "gitHead": "8c5736c8aa0cde4ebebc4c5e7c666034bbdded65",
   "dependencies": {
-    "@arcblock/bridge": "3.0.41",
+    "@arcblock/bridge": "3.0.43",
     "@arcblock/did": "^1.21.0",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.41",
-    "@arcblock/nft-display": "3.0.41",
-    "@arcblock/react-hooks": "3.0.41",
+    "@arcblock/icons": "3.0.43",
+    "@arcblock/nft-display": "3.0.43",
+    "@arcblock/react-hooks": "3.0.43",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.41",
+    "@blocklet/theme": "3.0.43",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/NavMenu/images/did.svg

@@ -1,3 +1,5 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.32886 15.6177C5.22429 15.6177 4.32886 16.5131 4.32886 17.6177V20.7634H0.328857V17.6177C0.328857 14.304 3.01515 11.6177 6.32886 11.6177H69.2574C72.5711 11.6177 75.2574 14.304 75.2574 17.6177V59.4747C75.2574 62.7884 72.5712 65.4747 69.2574 65.4747H6.32887C3.01516 65.4747 0.328857 62.7884 0.328857 59.4747V56.5595H4.32886V59.4747C4.32886 60.5792 5.22429 61.4747 6.32887 61.4747H69.2574C70.362 61.4747 71.2574 60.5793 71.2574 59.4747V17.6177C71.2574 16.5131 70.362 15.6177 69.2574 15.6177H6.32886ZM40.4578 27.3455C42.8218 27.3455 44.8692 27.8372 46.6 28.8205C48.3519 29.7815 49.7133 31.1448 50.6842 32.9104C51.6552 34.6759 52.1407 36.7544 52.1407 39.1457C52.1407 41.5147 51.6552 43.5708 50.6842 45.314C49.7133 47.0572 48.3519 48.4093 46.6 49.3703C44.8692 50.3313 42.8218 50.8118 40.4578 50.8118H32.1943V27.3455H40.4578ZM40.3311 47.0237C42.7162 47.0237 44.5526 46.3309 45.8401 44.9452C47.1277 43.5373 47.7714 41.6041 47.7714 39.1457C47.7714 36.665 47.1277 34.7095 45.8401 33.2791C44.5526 31.8488 42.7162 31.1336 40.3311 31.1336H36.4685V47.0237H40.3311ZM27.501 27.3455H23.9811V50.8118H27.501V27.3455ZM8.77824 27.3455C11.1423 27.3455 13.1897 27.8372 14.9205 28.8205C16.6724 29.7815 18.0338 31.1448 19.0047 32.9104C19.9757 34.6759 20.4611 36.7544 20.4611 39.1457C20.4611 41.5147 19.9757 43.5708 19.0047 45.314C18.0338 47.0572 16.6724 48.4093 14.9205 49.3703C13.1897 50.3313 11.1423 50.8118 8.77824 50.8118H0.514743V27.3455H8.77824ZM8.6516 47.0237C11.0367 47.0237 12.8731 46.3309 14.1606 44.9452C15.4481 43.5373 16.0919 41.6041 16.0919 39.1457C16.0919 36.665 15.4481 34.7095 14.1606 33.2791C12.8731 31.8488 11.0367 31.1336 8.6516 31.1336H4.78897V47.0237H8.6516ZM62.2973 30.6486C62.2973 32.1114 61.1115 33.2972 59.6487 33.2972C58.186 33.2972 57.0001 32.1114 57.0001 30.6486C57.0001 29.1858 58.186 28 59.6487 28C61.1115 28 62.2973 29.1858 62.2973 30.6486ZM62.2972 46.5402C62.2972 48.003 61.1114 49.1888 59.6486 49.1888C58.1858 49.1888 57 48.003 57 46.5402C57 45.0774 58.1858 43.8916 59.6486 43.8916C61.1114 43.8916 62.2972 45.0774 62.2972 46.5402Z" fill="#4598FA"></path>
-</svg>
+<svg viewBox="0 0 90 65" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M79.4248 0.700195C85.1132 0.700234 89.7244 5.31169 89.7246 11V54.2344C89.7244 59.9227 85.1132 64.5341 79.4248 64.5342H11.1562C5.46786 64.5342 0.856682 59.9227 0.856445 54.2344V54.0186H5.45605V54.2344C5.45629 57.3822 8.00837 59.9336 11.1562 59.9336H79.4248C82.5726 59.9336 85.1248 57.3822 85.125 54.2344V11C85.1248 7.8522 82.5727 5.29984 79.4248 5.2998H11.1562C8.00837 5.2998 5.45629 7.85217 5.45605 11V11.4893H0.856445V11C0.856676 5.31166 5.46786 0.700195 11.1562 0.700195H79.4248ZM11.293 17.6914C14.2375 17.6914 16.7876 18.3114 18.9434 19.5508C21.1254 20.762 22.8219 22.4798 24.0312 24.7051C25.2406 26.9304 25.8447 29.5504 25.8447 32.5645C25.8447 35.5502 25.2405 38.1418 24.0312 40.3389C22.8219 42.536 21.1255 44.2399 18.9434 45.4512C16.7875 46.6624 14.2375 47.2686 11.293 47.2686H1V17.6914H11.293ZM35.2061 47.2686H29.8818V17.6914H35.2061V47.2686ZM50.8828 17.6914C53.8272 17.6914 56.3774 18.3114 58.5332 19.5508C60.7151 20.7619 62.4108 22.48 63.6201 24.7051C64.8295 26.9304 65.4346 29.5505 65.4346 32.5645C65.4346 35.5503 64.8295 38.1417 63.6201 40.3389C62.4108 42.5359 60.7152 44.2399 58.5332 45.4512C56.3774 46.6624 53.8272 47.2685 50.8828 47.2686H40.5898V17.6914H50.8828ZM73.4785 36.7568C75.1235 36.7568 76.457 38.0913 76.457 39.7363C76.4568 41.3811 75.1234 42.7148 73.4785 42.7148C71.8338 42.7147 70.5003 41.381 70.5 39.7363C70.5 38.0914 71.8336 36.757 73.4785 36.7568ZM6.32422 42.4941H11.1357C14.1064 42.4941 16.3934 41.6204 17.9971 39.874C19.6008 38.0994 20.4023 35.663 20.4023 32.5645C20.4023 29.4378 19.6008 26.9727 17.9971 25.1699C16.3934 23.3674 14.1063 22.4659 11.1357 22.4658H6.32422V42.4941ZM45.9141 42.4941H50.7246C53.6954 42.4941 55.9832 41.6205 57.5869 39.874C59.1905 38.0994 59.9922 35.6628 59.9922 32.5645C59.9922 29.4378 59.1906 26.9727 57.5869 25.1699C55.9832 23.3672 53.6954 22.4658 50.7246 22.4658H45.9141V42.4941ZM73.4785 22.8574C75.1235 22.8574 76.457 24.1909 76.457 25.8359C76.457 27.4809 75.1235 28.8145 73.4785 28.8145C71.8336 28.8143 70.5 27.4808 70.5 25.8359C70.5 24.191 71.8337 22.8576 73.4785 22.8574Z"
+        fill="currentColor" />
+</svg>

package/src/NavMenu/products.tsx

@@ -1,16 +1,14 @@
-import { useRef } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, BoxProps, Grid, useTheme } from '@mui/material';
+import { Box, BoxProps, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
 import { useNavMenuContext } from './nav-menu-context';
 import { translate } from '../Locale/util';
 import { useLocaleContext } from '../Locale/context';
-
 // Arcblock Icons
-import AIKitSvg from './images/ai-kit.svg?react';
 import NftStudioSvg from './images/nft-studio.svg?react';
 import CreatorStudioSvg from './images/creator-studio.svg?react';
 import BlockletLauncherSvg from './images/blocklet-launcher.svg?react';
@@ -22,16 +20,15 @@ import BlockletServerSvg from './images/blocklet-server.svg?react';
 import OCAPSvg from './images/OCAP.svg?react';
 import DidSvg from './images/did.svg?react';
 import DidWalletSvg from './images/did-wallet.svg?react';
-import DidNameServiceSvg from './images/did-name-service.svg?react';
 import VCSvg from './images/vc.svg?react';
-import DidConnectSvg from './images/did-connect.svg?react';
 import PaymentKitPng from './images/payment-kit.png';
-
 // AIGNE Icons
 import AigneSvg from './images/aigne.svg?react';
 import ArcSphereSvg from './images/arcsphere.svg?react';
 import AistroPng from './images/aistro.png';
 
+const MIN_ITEM_CONTENT_WIDTH = 260;
+
 const translations = {
   en: {
     groups: {
@@ -228,8 +225,6 @@ const translations = {
 };
 
 const Wrapper = styled(Box)`
-  width: 80vw;
-  max-width: 900px;
   padding: 8px;
   background: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 8px;
@@ -252,7 +247,28 @@ const Wrapper = styled(Box)`
   }
 `;
 
-function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+const GridBox = styled(Box, { shouldForwardProp: (prop) => prop !== 'maxContent' })<{ maxContent: number }>(
+  ({ theme, maxContent }) => ({
+    display: 'grid',
+    gap: theme.spacing(1),
+    gridTemplateColumns: `repeat(1, ${maxContent}px)`,
+
+    [theme.breakpoints.up('md')]: {
+      gridTemplateColumns: `repeat(2, ${maxContent}px)`,
+    },
+
+    [theme.breakpoints.up('lg')]: {
+      gridTemplateColumns: `repeat(3, ${maxContent}px)`,
+    },
+  })
+);
+
+interface IconWrapperProps {
+  color?: string;
+  backgroundColor?: string;
+  children: React.ReactNode;
+}
+function IconWrapper({ color = 'black', backgroundColor = 'transparent', children }: IconWrapperProps) {
   return (
     <Box
       component="span"
@@ -264,22 +280,117 @@ function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color
         backgroundColor,
         borderRadius: '4px',
       }}>
-      <AigneSvg />
+      {children}
     </Box>
   );
 }
 
+function DIDIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+  return (
+    <IconWrapper color={color} backgroundColor={backgroundColor}>
+      <DidSvg style={{ width: '100%' }} />
+    </IconWrapper>
+  );
+}
+
+function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+  return (
+    <IconWrapper color={color} backgroundColor={backgroundColor}>
+      <AigneSvg style={{ width: '100%', height: '100%' }} />
+    </IconWrapper>
+  );
+}
+
+// 智能 Link 组件，根据 URL origin 决定是否在新标签页打开
+interface SmartLinkProps {
+  to: string;
+  children: React.ReactNode;
+  className?: string;
+}
+function SmartLink({ to, children, className = '' }: SmartLinkProps) {
+  const isExternal = () => {
+    try {
+      const url = new URL(to);
+      return url.origin !== window.location.origin;
+    } catch {
+      // 如果 to 不是有效的 URL，则认为是内部链接
+      return false;
+    }
+  };
+
+  if (isExternal()) {
+    return (
+      <Link to={to} target="_blank" rel="noreferrer noopener" className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <Link to={to} className={className}>
+      {children}
+    </Link>
+  );
+}
+
 export type ProductsType = 'AIGNE' | 'ARCBLOCK';
 export interface ProductsProps extends BoxProps {
   type: ProductsType;
 }
-export default function Products({ className, type, ...rest }: ProductsProps) {
+export default function Products({ className = '', type, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
-  const { palette } = useTheme();
-  const wrapperRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
   const { locale = 'en' } = useLocaleContext() || {};
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { palette } = theme;
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
 
+  // 添加状态来存储最大内容宽度
+  const [maxContentWidth, setMaxContentWidth] = useState(MIN_ITEM_CONTENT_WIDTH);
+
+  // 计算 item 最大宽度
+  const calculateMaxContentWidth = useMemoizedFn(() => {
+    if (!wrapperRef.current) return;
+
+    const contentElements = wrapperRef.current.querySelectorAll('.navmenu-item__content');
+    let maxWidth = MIN_ITEM_CONTENT_WIDTH; // 默认最小宽度
+
+    contentElements.forEach((element) => {
+      const curWidth = element.getBoundingClientRect().width + 64; // 增加 icon 以及 padding 的宽度
+      if (curWidth > maxWidth) {
+        maxWidth = curWidth;
+      }
+    });
+
+    setMaxContentWidth(maxWidth);
+  });
+
+  // 监听主题、语言、类型变化时重新计算最大宽度
+  useEffect(() => {
+    calculateMaxContentWidth();
+  }, [theme, locale, type, calculateMaxContentWidth]);
+
+  // 监听 navmenu-item__content 元素宽度变化
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const itemContent = wrapperRef.current.querySelector('.navmenu-item__content');
+    if (!itemContent) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxContentWidth();
+    });
+
+    // 监听 item 内容宽度变化（字体改变引起）
+    resizeObserver.observe(itemContent);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [calculateMaxContentWidth]);
+
   const groups = useCreation(() => {
     if (type === 'ARCBLOCK') {
       return [
@@ -288,11 +399,7 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.applications'),
           children: [
             {
-              label: (
-                <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                  NFT Studio
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.nftstudio.rocks/${locale}`}>NFT Studio</SmartLink>,
               description: t('products.nftStudio.description'),
               icon: <NftStudioSvg />,
             },
@@ -309,20 +416,12 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
               icon: <CreatorStudioSvg />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
-                  AIGNE
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/">AIGNE</SmartLink>,
               description: t('products.aigne.description'),
               icon: <AigneIcon color={palette.mode === 'dark' ? 'white' : 'black'} />,
             },
             {
-              label: (
-                <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  ArcSphere
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.arcsphere.io/${locale}`}>ArcSphere</SmartLink>,
               description: t('products.arcsphere.description'),
               icon: <ArcSphereSvg />,
             },
@@ -333,47 +432,22 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.components'),
           children: [
             {
-              label: (
-                <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Blocklet Launcher
-                </Link>
-              ),
+              label: <SmartLink to={`https://launcher.arcblock.io/${locale}`}>Blocklet Launcher</SmartLink>,
               description: t('products.blockletLauncher.description'),
               icon: <BlockletLauncherSvg />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/hub" target="_blank" rel="noreferrer noopener">
-                  AI Kit
-                </Link>
-              ),
-              description: t('products.aiKit.description'),
-              icon: <AIKitSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
-                  Payment Kit
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.blocklet.io/${locale}/payment-kit`}>Payment Kit</SmartLink>,
               description: t('products.paymentKit.description'),
               icon: <img src={PaymentKitPng} alt="Payment Kit" />,
             },
             {
-              label: (
-                <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
-                  Blocklet Store
-                </Link>
-              ),
+              label: <SmartLink to={`https://store.blocklet.dev/?locale=${locale}`}>Blocklet Store</SmartLink>,
               description: t('products.blockletStore.description'),
               icon: <BlockletStoreSvg />,
             },
             {
-              label: (
-                <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Web3 Kit
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.web3kit.rocks/${locale}`}>Web3 Kit</SmartLink>,
               description: t('products.web3Kit.description'),
               icon: <Web3KitSvg />,
             },
@@ -402,7 +476,7 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
                 </Link>
               ),
               description: t('products.didSpaces.description'),
-              icon: <DidSvg />,
+              icon: <DIDIcon color="#876bf4" />,
             },
             {
               label: (
@@ -414,26 +488,12 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
               icon: <AbtNetworkSvg />,
             },
             {
-              label: (
-                <Link
-                  to={`https://www.blocklet.io/${locale}/blocklet-server`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  Blocklet Server
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.blocklet.io/${locale}/blocklet-server`}>Blocklet Server</SmartLink>,
               description: t('products.blockletServer.description'),
               icon: <BlockletServerSvg />,
             },
             {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  ОСАР
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/ocap`}>ОСАР</SmartLink>,
               description: t('products.ocap.description'),
               icon: <OCAPSvg />,
             },
@@ -444,23 +504,12 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.identity'),
           children: [
             {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/did`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  DID
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/did`}>DID</SmartLink>,
               description: t('products.did.description'),
-              icon: <DidSvg />,
+              icon: <DIDIcon color="#5b96f3" />,
             },
             {
-              label: (
-                <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Wallet
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.didwallet.io/${locale}`}>DID Wallet</SmartLink>,
               description: t('products.didWallet.description'),
               icon: <DidWalletSvg />,
             },
@@ -471,28 +520,21 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
                 </Link>
               ),
               description: t('products.didNameService.description'),
-              icon: <DidNameServiceSvg />,
+              icon: <DIDIcon color="#678ab0" />,
             },
             {
               label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
-                  target="_blank"
-                  rel="noreferrer noopener">
+                <SmartLink to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}>
                   VC
-                </Link>
+                </SmartLink>
               ),
               description: t('products.vc.description'),
               icon: <VCSvg />,
             },
             {
-              label: (
-                <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Connect
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.didconnect.io/${locale}`}>DID Connect</SmartLink>,
               description: t('products.didConnect.description'),
-              icon: <DidConnectSvg />,
+              icon: <DIDIcon color="#5bbec5" />,
             },
           ],
         },
@@ -506,47 +548,27 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.applications'),
           children: [
             {
-              label: (
-                <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  ArcSphere
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.arcsphere.io/${locale}`}>ArcSphere</SmartLink>,
               description: t('products.arcsphere.description'),
               icon: <ArcSphereSvg />,
             },
             {
-              label: (
-                <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Aistro
-                </Link>
-              ),
+              label: <SmartLink to={`https://www.aistro.io/${locale}`}>Aistro</SmartLink>,
               description: t('products.aistro.description'),
               icon: <img src={AistroPng} alt="Aistro" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/doc-smith" target="_blank" rel="noreferrer noopener">
-                  AIGNE CodeSmith
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/doc-smith">AIGNE CodeSmith</SmartLink>,
               description: t('products.aigneCodeSmith.description'),
               icon: <AigneIcon color="#56a596" backgroundColor="#e9fcf6" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/code-smith" target="_blank" rel="noreferrer noopener">
-                  AIGNE DocSmith
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/code-smith">AIGNE DocSmith</SmartLink>,
               description: t('products.aigneDocSmith.description'),
               icon: <AigneIcon color="#e46f38" backgroundColor="#f7e0d7" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/web-smith" target="_blank" rel="noreferrer noopener">
-                  AIGNE WebSmith
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/web-smith">AIGNE WebSmith</SmartLink>,
               description: t('products.aigneWebSmith.description'),
               icon: <AigneIcon color="#7c45eb" backgroundColor="#f0e9ff" />,
             },
@@ -557,38 +579,22 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.frameworkTools'),
           children: [
             {
-              label: (
-                <Link to="https://www.aigne.io/cli" target="_blank" rel="noreferrer noopener">
-                  AIGNE CLI
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/cli">AIGNE CLI</SmartLink>,
               description: t('products.aigneCLI.description'),
               icon: <AigneIcon color="#d05d4e" backgroundColor="#faeaea" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/observability" target="_blank" rel="noreferrer noopener">
-                  AIGNE Observability
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/observability">AIGNE Observability</SmartLink>,
               description: t('products.aigneObservability.description'),
               icon: <AigneIcon color="#6ba456" backgroundColor="#edfae8" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/studio" target="_blank" rel="noreferrer noopener">
-                  AIGNE Studio
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/studio">AIGNE Studio</SmartLink>,
               description: t('products.aigneStudio.description'),
               icon: <AigneIcon color="#676cbf" backgroundColor="#edeeff" />,
             },
             {
-              label: (
-                <Link to="https://www.aigne.io/framework" target="_blank" rel="noreferrer noopener">
-                  AIGNE Framework
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/framework">AIGNE Framework</SmartLink>,
               description: t('products.aigneFramework.description'),
               icon: <AigneIcon color="#5086d0" backgroundColor="#eef4ff" />,
             },
@@ -599,11 +605,7 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
           label: t('groups.modelsAdapters'),
           children: [
             {
-              label: (
-                <Link to="https://www.aigne.io/hub" target="_blank" rel="noreferrer noopener">
-                  AIGNE Hub
-                </Link>
-              ),
+              label: <SmartLink to="https://www.aigne.io/hub">AIGNE Hub</SmartLink>,
               description: t('products.aigneHub.description'),
               icon: <AigneIcon color="#e4930b" backgroundColor="#fbf4d4" />,
             },
@@ -616,22 +618,14 @@ export default function Products({ className, type, ...rest }: ProductsProps) {
   }, [t, locale, palette]);
 
   return (
-    <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
+    <Wrapper ref={wrapperRef} className={`nav-menu-products is-${mode} ${className}`} {...rest}>
       {groups.map((group) => (
         <SubItemGroup key={group.label} label={group.label}>
-          <Grid container columnSpacing={1} rowSpacing={1}>
+          <GridBox maxContent={maxContentWidth}>
             {group.children.map((item) => (
-              <Grid
-                key={item.description}
-                size={{
-                  xs: 12,
-                  md: 6,
-                  lg: 4,
-                }}>
-                <Item variant="panel" style={{ padding: '8px' }} {...item} />
-              </Grid>
+              <Item variant="panel" style={{ padding: '8px' }} {...item} />
             ))}
-          </Grid>
+          </GridBox>
         </SubItemGroup>
       ))}
     </Wrapper>

package/src/NavMenu/sub-item-group.tsx

@@ -24,7 +24,13 @@ export interface NavMenuSubItemGroupProps extends BoxProps {
   label: React.ReactNode;
 }
 
-export default function NavMenuSubItemGroup({ label, children, className, sx, ...rest }: NavMenuSubItemGroupProps) {
+export default function NavMenuSubItemGroup({
+  label,
+  children,
+  className = '',
+  sx,
+  ...rest
+}: NavMenuSubItemGroupProps) {
   return (
     <Group className={`nav-menu-sub-item-group ${className}`} sx={{ ...sx }} {...rest}>
       <Box className="group-label">{label}</Box>

package/lib/NavMenu/images/ai-kit.svg.js

@@ -1,7 +0,0 @@
-import * as e from "react";
-const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_697_8408)" }, /* @__PURE__ */ e.createElement("g", { filter: "url(#filter0_i_697_8408)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.6107 0H11.3921V2.15049H10.3086V0H9.08994V2.15049H8.0064V0H6.78779V2.15049H5.70689V0H4.48828V2.18296C3.30266 2.36596 2.36589 3.30282 2.18301 4.48848H0V5.70709H2.15059V6.78779H0V8.0064H2.15059V9.08994H0V10.3086H2.15059V11.3921H0V12.6107H2.15059V13.6942H0V14.9128H2.15059V15.9936H0V17.2122H2.15059V18.2957H0V19.5143H2.18344C2.36736 20.6987 3.30359 21.6342 4.48828 21.817V24H5.70689V21.8495H6.78779V24H8.0064V21.8495H9.08994V24H10.3086V21.8495H11.3921V24H12.6107V21.8495H13.6942V24H14.9128V21.8495H15.9936V24H17.2122V21.8495H18.2956V24H19.5142V21.8167C20.6978 21.633 21.633 20.6979 21.8168 19.5143H24.0002V18.2957H21.8496V17.2122H24.0002V15.9936H21.8496V14.9128H24.0002V13.6942H21.8496V12.6107H24.0002V11.3921H21.8496V10.3086H24.0002V9.08994H21.8496V8.0064H24.0002V6.78779H21.8496V5.70709H24.0002V4.48848H21.8172C21.6344 3.30358 20.6987 2.36717 19.5142 2.18331V0H18.2956V2.15049H17.2122V0H15.9936V2.15049H14.9128V0H13.6942V2.15049H12.6107V0Z", fill: "#1D9BF0" })), /* @__PURE__ */ e.createElement("path", { d: "M17.1019 4.91309H6.90091C5.80307 4.91309 4.91309 5.80306 4.91309 6.90091V17.1019C4.91309 18.1998 5.80307 19.0898 6.90091 19.0898H17.1019C18.1998 19.0898 19.0898 18.1998 19.0898 17.1019V6.90091C19.0898 5.80306 18.1998 4.91309 17.1019 4.91309Z", fill: "url(#paint0_linear_697_8408)" }), /* @__PURE__ */ e.createElement("path", { d: "M8.38712 7.91833C8.3866 7.74758 8.33623 7.58069 8.24219 7.43817C8.14815 7.29565 8.01455 7.18368 7.85777 7.11603V4.9104H7.16851V7.11603C7.02346 7.17827 6.89798 7.27862 6.80538 7.40644C6.71278 7.53426 6.65652 7.68477 6.64258 7.84199C6.62863 7.99921 6.65753 8.15727 6.72619 8.29939C6.79485 8.44151 6.90071 8.56238 7.03254 8.64917C7.16437 8.73596 7.31725 8.78544 7.47493 8.79234C7.63262 8.79924 7.78923 8.76331 7.92814 8.68836C8.06704 8.61342 8.18306 8.50225 8.26388 8.36667C8.34469 8.23109 8.38728 8.07616 8.38712 7.91833Z", fill: "#3AC8A0" }), /* @__PURE__ */ e.createElement("path", { d: "M8.38691 11.1301C8.18179 11.1294 7.98299 11.2011 7.82554 11.3325C7.66808 11.464 7.56206 11.6468 7.52615 11.8488C7.49024 12.0507 7.52674 12.2589 7.62923 12.4366C7.73171 12.6143 7.8936 12.7501 8.08639 12.8201V19.0896H8.77841V12.7788C8.95621 12.6921 9.0992 12.5474 9.18387 12.3686C9.26854 12.1899 9.28985 11.9876 9.24429 11.7951C9.19873 11.6026 9.08902 11.4313 8.9332 11.3095C8.77737 11.1876 8.58472 11.1224 8.38691 11.1246V11.1301Z", fill: "#E85F3D" }), /* @__PURE__ */ e.createElement("path", { d: "M11.9436 14.6729C11.7424 14.6727 11.5474 14.7419 11.3914 14.8688C11.2353 14.9957 11.1278 15.1725 11.087 15.3695C11.0462 15.5664 11.0746 15.7714 11.1673 15.9499C11.2601 16.1283 11.4116 16.2694 11.5962 16.3491V19.0896H12.2882V16.3491C12.4726 16.2695 12.624 16.1287 12.7167 15.9505C12.8095 15.7723 12.8381 15.5676 12.7976 15.3708C12.7572 15.1741 12.6502 14.9972 12.4946 14.8701C12.3391 14.743 12.1445 14.6733 11.9436 14.6729Z", fill: "#3AC8A0" }), /* @__PURE__ */ e.createElement("path", { d: "M17.3056 10.4823C17.1528 10.4814 17.0025 10.5208 16.8699 10.5965C16.7372 10.6722 16.6268 10.7816 16.5499 10.9136C16.473 11.0456 16.4323 11.1955 16.4319 11.3483C16.4314 11.501 16.4713 11.6512 16.5474 11.7837L15.02 13.8073V19.0898H15.7093V14.0389L17.0878 12.2027C17.1557 12.2181 17.225 12.2264 17.2946 12.2275C17.4133 12.2342 17.5321 12.2166 17.6438 12.1758C17.7555 12.1349 17.8576 12.0717 17.944 11.99C18.0304 11.9084 18.0993 11.8099 18.1463 11.7007C18.1934 11.5915 18.2176 11.4738 18.2176 11.3549C18.2176 11.236 18.1934 11.1184 18.1463 11.0092C18.0993 10.9 18.0304 10.8015 17.944 10.7198C17.8576 10.6381 17.7555 10.575 17.6438 10.5341C17.5321 10.4933 17.4133 10.4757 17.2946 10.4823H17.3056Z", fill: "#E85F3D" }), /* @__PURE__ */ e.createElement("path", { d: "M12.8728 10.2452C12.8117 10.246 12.7508 10.2525 12.6908 10.2645L11.3123 8.43658V4.91309H10.623V8.67644L12.1311 10.6753C12.0318 10.8403 11.9899 11.0335 12.0121 11.2248C12.0342 11.416 12.119 11.5946 12.2534 11.7325C12.3877 11.8705 12.564 11.96 12.7546 11.9872C12.9453 12.0144 13.1395 11.9776 13.307 11.8827C13.4746 11.7877 13.6059 11.64 13.6806 11.4625C13.7552 11.285 13.769 11.0878 13.7197 10.9016C13.6704 10.7155 13.5608 10.5509 13.4081 10.4337C13.2554 10.3164 13.0681 10.253 12.8755 10.2535L12.8728 10.2452Z", fill: "#E85F3D" }), /* @__PURE__ */ e.createElement("path", { d: "M15.682 9.66621C15.8829 9.66575 16.0775 9.5961 16.2331 9.46897C16.3886 9.34185 16.4956 9.16502 16.5361 8.96824C16.5766 8.77146 16.548 8.56675 16.4552 8.38857C16.3624 8.21039 16.2111 8.06962 16.0267 7.98994V4.91309H15.3374V7.98994C15.153 8.06962 15.0016 8.21039 14.9089 8.38857C14.8161 8.56675 14.7875 8.77146 14.828 8.96824C14.8684 9.16502 14.9754 9.34185 15.131 9.46897C15.2865 9.5961 15.4811 9.66575 15.682 9.66621Z", fill: "#3AC8A0" }), /* @__PURE__ */ e.createElement("mask", { id: "mask0_697_8408", style: {
-  maskType: "luminance"
-}, maskUnits: "userSpaceOnUse", x: 6, y: 7, width: 12, height: 10 }, /* @__PURE__ */ e.createElement("path", { d: "M15.25 10.5H8.75C8.47386 10.5 8.25 10.7239 8.25 11V16C8.25 16.2761 8.47386 16.5 8.75 16.5H15.25C15.5261 16.5 15.75 16.2761 15.75 16V11C15.75 10.7239 15.5261 10.5 15.25 10.5Z", fill: "white" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.75 11C7.75 10.4477 8.19772 10 8.75 10H15.25C15.8023 10 16.25 10.4477 16.25 11V16C16.25 16.5523 15.8023 17 15.25 17H8.75C8.19772 17 7.75 16.5523 7.75 16V11ZM15.25 11H8.75V16H15.25V11Z", fill: "white" }), /* @__PURE__ */ e.createElement("path", { d: "M10.25 13C10.5261 13 10.75 12.7761 10.75 12.5C10.75 12.2239 10.5261 12 10.25 12C9.97386 12 9.75 12.2239 9.75 12.5C9.75 12.7761 9.97386 13 10.25 13Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M13.75 13C14.0261 13 14.25 12.7761 14.25 12.5C14.25 12.2239 14.0261 12 13.75 12C13.4739 12 13.25 12.2239 13.25 12.5C13.25 12.7761 13.4739 13 13.75 13Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M11 14C10.8674 14 10.7402 14.0527 10.6464 14.1464C10.5527 14.2402 10.5 14.3674 10.5 14.5C10.5 14.6326 10.5527 14.7598 10.6464 14.8536C10.7402 14.9473 10.8674 15 11 15V14ZM13 15C13.1326 15 13.2598 14.9473 13.3536 14.8536C13.4473 14.7598 13.5 14.6326 13.5 14.5C13.5 14.3674 13.4473 14.2402 13.3536 14.1464C13.2598 14.0527 13.1326 14 13 14V15ZM11 15H13V14H11V15Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 8C12.2761 8 12.5 8.22386 12.5 8.5V10.5C12.5 10.7761 12.2761 11 12 11C11.7239 11 11.5 10.7761 11.5 10.5V8.5C11.5 8.22386 11.7239 8 12 8ZM7 12C7.27614 12 7.5 12.2239 7.5 12.5V14.5C7.5 14.7761 7.27614 15 7 15C6.72386 15 6.5 14.7761 6.5 14.5V12.5C6.5 12.2239 6.72386 12 7 12ZM17 12C17.2761 12 17.5 12.2239 17.5 12.5V14.5C17.5 14.7761 17.2761 15 17 15C16.7239 15 16.5 14.7761 16.5 14.5V12.5C16.5 12.2239 16.7239 12 17 12Z", fill: "white" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8Z", fill: "white" })), /* @__PURE__ */ e.createElement("g", { mask: "url(#mask0_697_8408)" }, /* @__PURE__ */ e.createElement("path", { d: "M6 6H18V18H6V6Z", fill: "white" }))), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("filter", { id: "filter0_i_697_8408", x: 0, y: 0, width: 24.4, height: 24.4, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feMorphology", { radius: 0.8, operator: "erode", in: "SourceAlpha", result: "effect1_innerShadow_697_8408" }), /* @__PURE__ */ e.createElement("feOffset", { dx: 0.4, dy: 0.4 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 0.6 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: -1, k3: 1 }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_697_8408" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint0_linear_697_8408", x1: 16.0831, y1: 19.9581, x2: 16.1471, y2: 6.2774, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#369CFC" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#1E65B5" })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_697_8408" }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, fill: "white" }))));
-export {
-  l as default
-};

package/lib/NavMenu/images/did-connect.svg.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 120, height: 120, viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_3296_9140)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M101.959 20.8735L72.662 3.82938C64.8959 -0.688569 55.331 -0.688569 47.5649 3.82938L18.2682 20.8735C10.4948 25.3958 5.70551 33.7578 5.70551 42.8072V76.8629C5.70551 85.9123 10.4948 94.2743 18.2682 98.7966L47.5649 115.841C55.331 120.359 64.8959 120.359 72.662 115.841L101.959 98.7966C109.732 94.2743 114.521 85.9123 114.521 76.8629V42.8072C114.521 33.7578 109.732 25.3958 101.959 20.8735ZM50.8097 9.40691L21.513 26.451L21.513 26.451C15.7411 29.8089 12.1582 36.0376 12.1582 42.8072V76.8629C12.1582 83.6325 15.7411 89.8612 21.513 93.2191L50.8098 110.263L50.8099 110.263C56.57 113.614 63.6569 113.614 69.4171 110.263L69.4172 110.263L98.7138 93.2191L101.959 98.7966L98.7139 93.2191C104.486 89.8612 108.069 83.6325 108.069 76.8629V42.8072C108.069 36.0376 104.486 29.8089 98.7139 26.451L98.7138 26.4509L69.4172 9.40691C69.4172 9.40689 69.4172 9.40688 69.4171 9.40686C63.6569 6.05586 56.57 6.05587 50.8098 9.40687C50.8098 9.40688 50.8097 9.40689 50.8097 9.40691Z", fill: "#1DC1C7", fillOpacity: 0.2 }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M82.0826 102.666L99.4114 92.4231C104.932 89.16 108.284 83.1918 108.197 76.7797L107.911 55.6256L114.364 55.5385L114.649 76.6925C114.767 85.4173 110.206 93.5379 102.695 97.978L85.3661 108.221L82.0826 102.666Z", fill: "url(#paint0_linear_3296_9140)" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M90.3926 21.8192L69.4215 9.54234C63.9043 6.31251 57.0831 6.27189 51.5278 9.4358L33.1066 19.9274L29.9132 14.3204L48.3344 3.82874C55.8931 -0.476256 65.1745 -0.420993 72.6814 3.9737L93.6526 16.2506L90.3926 21.8192Z", fill: "url(#paint1_linear_3296_9140)" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.7856 100.9L21.0133 92.255C15.5288 89.0455 12.1582 83.1677 12.1582 76.8131L12.1582 55.2889L5.7055 55.2889L5.7055 76.8131C5.7055 85.4596 10.2917 93.4572 17.7543 97.8242L32.5265 106.469L35.7856 100.9Z", fill: "url(#paint2_linear_3296_9140)" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M51.6013 20.4789C56.9601 17.3635 63.5602 17.3635 68.9189 20.4789L89.1344 32.2319C94.4984 35.3503 97.8031 41.1164 97.8031 47.3565V70.8401C97.8031 77.0802 94.4984 82.8463 89.1344 85.9647L68.9189 97.7176C63.5602 100.833 56.9601 100.833 51.6013 97.7176L31.3857 85.9647C26.0219 82.8463 22.7172 77.0802 22.7172 70.8401V47.3565C22.7172 41.1164 26.0219 35.3503 31.3857 32.2319L51.6013 20.4789ZM62.9873 43.3996L66.2716 41.5034H78.2272V76.584H66.5396C66.364 76.584 66.1916 76.5378 66.0396 76.45L53.4206 69.1644V48.9229L54.9435 48.0437L57.6252 49.5919L56.1022 50.4712V67.6162L66.9902 73.9023H75.5456V44.185H66.9902L65.669 44.9478L62.9873 43.3996ZM64.4937 50.4712V67.6162L62.9748 68.4931L65.6565 70.0413L67.1753 69.1644V48.9229L54.3243 41.5034H42.3687V76.584H54.3243L57.6126 74.6854L54.931 73.1372L53.6057 73.9023H45.0503V44.185H53.6057L64.4937 50.4712Z", fill: "#1DC1C7" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("linearGradient", { id: "paint0_linear_3296_9140", x1: 101.68, y1: 65.2004, x2: 102.525, y2: 103.38, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#1DC1C7" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#1DC1C7", stopOpacity: 0 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint1_linear_3296_9140", x1: 55.5247, y1: 3.3569, x2: 87.5637, y2: 21.4236, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#1DC1C7" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#1DC1C7", stopOpacity: 0 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint2_linear_3296_9140", x1: 17.7504, y1: 54.493, x2: 18.9074, y2: 101.333, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#1DC1C7", stopOpacity: 0 }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#1DC1C7" })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3296_9140" }, /* @__PURE__ */ e.createElement("rect", { width: 120, height: 120, fill: "white" }))));
-export {
-  l as default
-};

package/lib/NavMenu/images/did-name-service.svg.js

@@ -1,5 +0,0 @@
-import * as C from "react";
-const L = (e) => /* @__PURE__ */ C.createElement("svg", { width: 512, height: 512, viewBox: "0 0 512 512", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M255.755 462.967C299.832 442.833 336.333 409.027 359.852 366.983C327.934 353.201 292.741 345.565 255.755 345.565C247.188 345.565 238.717 345.975 230.361 346.776L167.308 360.816C162.011 362.708 156.792 364.766 151.658 366.983C175.177 409.027 211.678 442.833 255.755 462.967ZM255.755 153.973C290.371 153.973 323.417 147.285 353.676 135.129C330.169 97.9025 296.143 67.9742 255.755 49.5256C215.367 67.9743 181.341 97.9025 157.834 135.129C188.092 147.285 221.137 153.973 255.755 153.973ZM307.765 54.5489C334.213 73.7632 356.736 98.0527 373.902 125.987C383.969 120.912 393.665 115.208 402.939 108.928C377.033 83.0455 344.343 63.9534 307.765 54.5489ZM256.835 26.0038C256.476 25.8547 256.116 25.7064 255.755 25.559C255.394 25.7064 255.034 25.8547 254.675 26.0038C128.011 26.5856 25.5098 129.446 25.5098 256.246C25.5098 383.047 128.011 485.907 254.675 486.489C255.034 486.638 255.394 486.786 255.755 486.934C256.115 486.786 256.476 486.638 256.835 486.489C383.499 485.907 486 383.047 486 256.246C486 129.446 383.499 26.5858 256.835 26.0038ZM307.765 457.944C347.911 447.622 383.375 425.63 410.324 395.799C400.599 388.715 390.369 382.282 379.699 376.565C361.946 408.694 337.304 436.484 307.765 457.944ZM424.211 378.699C449.236 344.332 464 302.013 464 256.246C464 206.69 446.69 161.177 417.786 125.423C407.218 132.746 396.13 139.372 384.588 145.235C401.252 178.661 410.626 216.359 410.626 256.246C410.626 292.046 403.075 326.082 389.48 356.848C401.606 363.308 413.21 370.618 424.211 378.699ZM203.745 457.944C174.206 436.484 149.564 408.694 131.811 376.565C121.141 382.282 110.911 388.715 101.185 395.799C128.135 425.63 163.599 447.622 203.745 457.944ZM87.299 378.7C98.3002 370.618 109.904 363.308 122.03 356.848C108.435 326.081 100.884 292.046 100.884 256.246C100.884 216.359 110.258 178.661 126.922 145.235C115.38 139.372 104.292 132.746 93.7235 125.423C64.8199 161.177 47.5098 206.69 47.5098 256.246C47.5098 302.013 62.2738 344.332 87.299 378.7ZM108.571 108.927C134.477 83.0454 167.167 63.9532 203.745 54.5488C177.297 73.7632 154.774 98.0527 137.608 125.987C127.541 120.912 117.845 115.208 108.571 108.927ZM269.649 193.786L282.837 186.172H330.843V327.034H283.105C282.929 327.034 282.757 326.988 282.605 326.9L231.235 297.242V215.965L237.351 212.434L248.118 218.651L242.003 222.181V291.025L285.722 316.266H320.075V196.94H285.722L280.417 200.003L269.649 193.786ZM275.698 222.181V291.025L269.599 294.546L280.367 300.763L286.466 297.242V215.965L234.864 186.172H186.858V327.034H234.864L248.068 319.411L237.3 313.194L231.979 316.266H197.626V196.94H231.979L275.698 222.181Z", fill: "#3773F2" }));
-export {
-  L as default
-};

package/src/NavMenu/images/did-connect.svg

@@ -1,26 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3296_9140)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M101.959 20.8735L72.662 3.82938C64.8959 -0.688569 55.331 -0.688569 47.5649 3.82938L18.2682 20.8735C10.4948 25.3958 5.70551 33.7578 5.70551 42.8072V76.8629C5.70551 85.9123 10.4948 94.2743 18.2682 98.7966L47.5649 115.841C55.331 120.359 64.8959 120.359 72.662 115.841L101.959 98.7966C109.732 94.2743 114.521 85.9123 114.521 76.8629V42.8072C114.521 33.7578 109.732 25.3958 101.959 20.8735ZM50.8097 9.40691L21.513 26.451L21.513 26.451C15.7411 29.8089 12.1582 36.0376 12.1582 42.8072V76.8629C12.1582 83.6325 15.7411 89.8612 21.513 93.2191L50.8098 110.263L50.8099 110.263C56.57 113.614 63.6569 113.614 69.4171 110.263L69.4172 110.263L98.7138 93.2191L101.959 98.7966L98.7139 93.2191C104.486 89.8612 108.069 83.6325 108.069 76.8629V42.8072C108.069 36.0376 104.486 29.8089 98.7139 26.451L98.7138 26.4509L69.4172 9.40691C69.4172 9.40689 69.4172 9.40688 69.4171 9.40686C63.6569 6.05586 56.57 6.05587 50.8098 9.40687C50.8098 9.40688 50.8097 9.40689 50.8097 9.40691Z" fill="#1DC1C7" fill-opacity="0.2"></path>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.0826 102.666L99.4114 92.4231C104.932 89.16 108.284 83.1918 108.197 76.7797L107.911 55.6256L114.364 55.5385L114.649 76.6925C114.767 85.4173 110.206 93.5379 102.695 97.978L85.3661 108.221L82.0826 102.666Z" fill="url(#paint0_linear_3296_9140)"></path>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M90.3926 21.8192L69.4215 9.54234C63.9043 6.31251 57.0831 6.27189 51.5278 9.4358L33.1066 19.9274L29.9132 14.3204L48.3344 3.82874C55.8931 -0.476256 65.1745 -0.420993 72.6814 3.9737L93.6526 16.2506L90.3926 21.8192Z" fill="url(#paint1_linear_3296_9140)"></path>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7856 100.9L21.0133 92.255C15.5288 89.0455 12.1582 83.1677 12.1582 76.8131L12.1582 55.2889L5.7055 55.2889L5.7055 76.8131C5.7055 85.4596 10.2917 93.4572 17.7543 97.8242L32.5265 106.469L35.7856 100.9Z" fill="url(#paint2_linear_3296_9140)"></path>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M51.6013 20.4789C56.9601 17.3635 63.5602 17.3635 68.9189 20.4789L89.1344 32.2319C94.4984 35.3503 97.8031 41.1164 97.8031 47.3565V70.8401C97.8031 77.0802 94.4984 82.8463 89.1344 85.9647L68.9189 97.7176C63.5602 100.833 56.9601 100.833 51.6013 97.7176L31.3857 85.9647C26.0219 82.8463 22.7172 77.0802 22.7172 70.8401V47.3565C22.7172 41.1164 26.0219 35.3503 31.3857 32.2319L51.6013 20.4789ZM62.9873 43.3996L66.2716 41.5034H78.2272V76.584H66.5396C66.364 76.584 66.1916 76.5378 66.0396 76.45L53.4206 69.1644V48.9229L54.9435 48.0437L57.6252 49.5919L56.1022 50.4712V67.6162L66.9902 73.9023H75.5456V44.185H66.9902L65.669 44.9478L62.9873 43.3996ZM64.4937 50.4712V67.6162L62.9748 68.4931L65.6565 70.0413L67.1753 69.1644V48.9229L54.3243 41.5034H42.3687V76.584H54.3243L57.6126 74.6854L54.931 73.1372L53.6057 73.9023H45.0503V44.185H53.6057L64.4937 50.4712Z" fill="#1DC1C7"></path>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3296_9140" x1="101.68" y1="65.2004" x2="102.525" y2="103.38" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1DC1C7"></stop>
-<stop offset="1" stop-color="#1DC1C7" stop-opacity="0"></stop>
-</linearGradient>
-<linearGradient id="paint1_linear_3296_9140" x1="55.5247" y1="3.3569" x2="87.5637" y2="21.4236" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1DC1C7"></stop>
-<stop offset="1" stop-color="#1DC1C7" stop-opacity="0"></stop>
-</linearGradient>
-<linearGradient id="paint2_linear_3296_9140" x1="17.7504" y1="54.493" x2="18.9074" y2="101.333" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1DC1C7" stop-opacity="0"></stop>
-<stop offset="1" stop-color="#1DC1C7"></stop>
-</linearGradient>
-<clipPath id="clip0_3296_9140">
-<rect width="120" height="120" fill="white"></rect>
-</clipPath>
-</defs>
-</svg>

package/src/NavMenu/images/did-name-service.svg

@@ -1,3 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M255.755 462.967C299.832 442.833 336.333 409.027 359.852 366.983C327.934 353.201 292.741 345.565 255.755 345.565C247.188 345.565 238.717 345.975 230.361 346.776L167.308 360.816C162.011 362.708 156.792 364.766 151.658 366.983C175.177 409.027 211.678 442.833 255.755 462.967ZM255.755 153.973C290.371 153.973 323.417 147.285 353.676 135.129C330.169 97.9025 296.143 67.9742 255.755 49.5256C215.367 67.9743 181.341 97.9025 157.834 135.129C188.092 147.285 221.137 153.973 255.755 153.973ZM307.765 54.5489C334.213 73.7632 356.736 98.0527 373.902 125.987C383.969 120.912 393.665 115.208 402.939 108.928C377.033 83.0455 344.343 63.9534 307.765 54.5489ZM256.835 26.0038C256.476 25.8547 256.116 25.7064 255.755 25.559C255.394 25.7064 255.034 25.8547 254.675 26.0038C128.011 26.5856 25.5098 129.446 25.5098 256.246C25.5098 383.047 128.011 485.907 254.675 486.489C255.034 486.638 255.394 486.786 255.755 486.934C256.115 486.786 256.476 486.638 256.835 486.489C383.499 485.907 486 383.047 486 256.246C486 129.446 383.499 26.5858 256.835 26.0038ZM307.765 457.944C347.911 447.622 383.375 425.63 410.324 395.799C400.599 388.715 390.369 382.282 379.699 376.565C361.946 408.694 337.304 436.484 307.765 457.944ZM424.211 378.699C449.236 344.332 464 302.013 464 256.246C464 206.69 446.69 161.177 417.786 125.423C407.218 132.746 396.13 139.372 384.588 145.235C401.252 178.661 410.626 216.359 410.626 256.246C410.626 292.046 403.075 326.082 389.48 356.848C401.606 363.308 413.21 370.618 424.211 378.699ZM203.745 457.944C174.206 436.484 149.564 408.694 131.811 376.565C121.141 382.282 110.911 388.715 101.185 395.799C128.135 425.63 163.599 447.622 203.745 457.944ZM87.299 378.7C98.3002 370.618 109.904 363.308 122.03 356.848C108.435 326.081 100.884 292.046 100.884 256.246C100.884 216.359 110.258 178.661 126.922 145.235C115.38 139.372 104.292 132.746 93.7235 125.423C64.8199 161.177 47.5098 206.69 47.5098 256.246C47.5098 302.013 62.2738 344.332 87.299 378.7ZM108.571 108.927C134.477 83.0454 167.167 63.9532 203.745 54.5488C177.297 73.7632 154.774 98.0527 137.608 125.987C127.541 120.912 117.845 115.208 108.571 108.927ZM269.649 193.786L282.837 186.172H330.843V327.034H283.105C282.929 327.034 282.757 326.988 282.605 326.9L231.235 297.242V215.965L237.351 212.434L248.118 218.651L242.003 222.181V291.025L285.722 316.266H320.075V196.94H285.722L280.417 200.003L269.649 193.786ZM275.698 222.181V291.025L269.599 294.546L280.367 300.763L286.466 297.242V215.965L234.864 186.172H186.858V327.034H234.864L248.068 319.411L237.3 313.194L231.979 316.266H197.626V196.94H231.979L275.698 222.181Z" fill="#3773F2"></path>
-</svg>