@arcblock/ux 2.11.50 → 2.12.1

package/lib/NavMenu/images/blocklet-launcher.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2472 20.6709L6.42292 19.0155C5.87463 18.7948 5.55251 18.3946 5.45656 17.8152C5.36061 17.2358 5.51824 16.7393 5.92945 16.3254L11.1107 11.1106C11.4945 10.7243 11.9469 10.4484 12.4678 10.2828C12.9886 10.1173 13.5232 10.0897 14.0716 10.2001L16.2098 10.6553C14.757 12.3936 13.5987 13.9731 12.7351 15.3941C11.8716 16.8151 11.0423 18.574 10.2472 20.6709ZM34.4268 4.53006C34.646 4.53006 34.8654 4.58523 35.0847 4.6956C35.3041 4.80596 35.496 4.94392 35.6604 5.10947C35.8249 5.27502 35.962 5.46816 36.0717 5.68889C36.1814 5.90962 36.2361 6.13035 36.2361 6.35108C36.3458 8.91707 35.8043 11.5796 34.6118 14.3387C33.4193 17.0979 31.7402 19.5673 29.5744 21.747C28.0941 23.237 26.6685 24.4302 25.2978 25.327C23.9271 26.2237 22.3096 27.0721 20.4454 27.8723C20.0891 28.0103 19.7258 28.0792 19.3557 28.0792C18.9855 28.0792 18.6634 27.9413 18.3893 27.6654L13.2491 22.492C12.975 22.216 12.8378 21.8919 12.8378 21.5194C12.8378 21.1469 12.9064 20.7813 13.0435 20.4226C13.8386 18.574 14.6815 16.9531 15.5725 15.5596C16.4635 14.1663 17.6491 12.7246 19.1296 11.2347C21.2952 9.05503 23.7488 7.36506 26.4903 6.16484C29.2317 4.96462 31.8772 4.41969 34.4268 4.53006ZM23.9819 16.8634C24.6124 17.4979 25.3868 17.8152 26.3052 17.8152C27.2236 17.8152 27.9981 17.4979 28.6286 16.8634C29.2592 16.2287 29.5744 15.4494 29.5744 14.525C29.5744 13.6007 29.2592 12.8212 28.6286 12.1866C27.9981 11.552 27.2236 11.2347 26.3052 11.2347C25.3868 11.2347 24.6124 11.552 23.9819 12.1866C23.3514 12.8212 23.0361 13.6007 23.0361 14.525C23.0361 15.4494 23.3514 16.2287 23.9819 16.8634ZM20.1987 30.6866C22.2822 29.8864 24.0367 29.0518 25.4623 28.1827C26.8878 27.3136 28.4641 26.1478 30.1912 24.6856L30.6025 26.8376C30.7121 27.3895 30.6847 27.9343 30.5202 28.4724C30.3558 29.0104 30.0816 29.4726 29.6978 29.8589L24.5164 35.0736C24.1052 35.4875 23.6118 35.6392 23.0361 35.5289C22.4604 35.4185 22.0628 35.0874 21.8435 34.5356L20.1987 30.6866ZM6.83413 27.1274C7.78898 26.1617 8.95526 25.6719 10.333 25.6581C11.7107 25.6443 12.877 26.1203 13.8318 27.086C14.7867 28.0517 15.2641 29.2242 15.2641 30.6038C15.2641 31.9834 14.7843 33.156 13.8248 34.1217C13.1394 34.8115 11.9949 35.4047 10.3912 35.9013C8.78742 36.398 6.57369 36.8395 3.75 37.2258C4.13381 34.3838 4.57244 32.1614 5.0659 30.5586C5.55936 28.9558 6.14877 27.8121 6.83413 27.1274Z" fill="url(#paint0_linear_3296_9219)"></path>
+<defs>
+<linearGradient id="paint0_linear_3296_9219" x1="34.187" y1="7.48682" x2="7.29238" y2="34.0822" gradientUnits="userSpaceOnUse">
+<stop stop-color="#74D5D6"></stop>
+<stop offset="1" stop-color="#56AFBE"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/blocklet-server.svg

@@ -0,0 +1,19 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3296_9260)">
+<mask id="mask0_3296_9260" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<path d="M40 0H0V40H40V0Z" fill="#D9D9D9"></path>
+</mask>
+<g mask="url(#mask0_3296_9260)">
+<path d="M11.9167 8.27779C11.1837 8.27779 10.5606 8.53434 10.0475 9.04747C9.53434 9.56059 9.27779 10.1837 9.27779 10.9167C9.27779 11.6497 9.53434 12.2728 10.0475 12.7859C10.5606 13.299 11.1837 13.5556 11.9167 13.5556C12.6497 13.5556 13.2728 13.299 13.7859 12.7859C14.299 12.2728 14.5556 11.6497 14.5556 10.9167C14.5556 10.1837 14.299 9.56059 13.7859 9.04747C13.2728 8.53434 12.6497 8.27779 11.9167 8.27779ZM11.9167 25.8704C11.1837 25.8704 10.5606 26.1269 10.0475 26.6401C9.53434 27.1533 9.27779 27.7762 9.27779 28.5093C9.27779 29.2424 9.53434 29.8654 10.0475 30.3785C10.5606 30.8917 11.1837 31.1482 11.9167 31.1482C12.6497 31.1482 13.2728 30.8917 13.7859 30.3785C14.299 29.8654 14.5556 29.2424 14.5556 28.5093C14.5556 27.7762 14.299 27.1533 13.7859 26.6401C13.2728 26.1269 12.6497 25.8704 11.9167 25.8704ZM5.75926 3H33.9075C34.4059 3 34.8237 3.16859 35.161 3.50579C35.4982 3.84299 35.6667 4.26081 35.6667 4.75926V17.0741C35.6667 17.5725 35.4982 17.9903 35.161 18.3276C34.8237 18.6648 34.4059 18.8334 33.9075 18.8334H5.75926C5.26081 18.8334 4.84299 18.6648 4.50579 18.3276C4.16859 17.9903 4 17.5725 4 17.0741V4.75926C4 4.26081 4.16859 3.84299 4.50579 3.50579C4.84299 3.16859 5.26081 3 5.75926 3ZM5.75926 20.5926H33.9075C34.4059 20.5926 34.8237 20.7612 35.161 21.0984C35.4982 21.4357 35.6667 21.8535 35.6667 22.3519V34.6667C35.6667 35.1651 35.4982 35.583 35.161 35.9202C34.8237 36.2575 34.4059 36.426 33.9075 36.426H5.75926C5.26081 36.426 4.84299 36.2575 4.50579 35.9202C4.16859 35.583 4 35.1651 4 34.6667V22.3519C4 21.8535 4.16859 21.4357 4.50579 21.0984C4.84299 20.7612 5.26081 20.5926 5.75926 20.5926Z" fill="url(#paint0_linear_3296_9260)"></path>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_3296_9260" x1="4" y1="19.713" x2="35.6667" y2="19.713" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2FD99C"></stop>
+<stop offset="1" stop-color="#8CE598"></stop>
+</linearGradient>
+<clipPath id="clip0_3296_9260">
+<rect width="40" height="40" fill="white"></rect>
+</clipPath>
+</defs>
+</svg>

package/lib/NavMenu/images/blocklet-store.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.17117 36C8.2991 36 7.55256 35.6923 6.93153 35.0768C6.31051 34.4613 6 33.7214 6 32.8571V14C6 13.1357 6.31051 12.3958 6.93153 11.7804C7.55256 11.1649 8.2991 10.8571 9.17117 10.8571H12.3423C12.3423 8.68334 13.1153 6.83036 14.6613 5.29821C16.2072 3.76607 18.0769 3 20.2703 3C22.4636 3 24.3333 3.76607 25.8793 5.29821C27.4252 6.83036 28.1982 8.68334 28.1982 10.8571H31.3694C32.2414 10.8571 32.9879 11.1649 33.609 11.7804C34.2301 12.3958 34.5405 13.1357 34.5405 14V32.8571C34.5405 33.7214 34.2301 34.4613 33.609 35.0768C32.9879 35.6923 32.2414 36 31.3694 36H9.17117ZM15.5135 10.8571H25.027C25.027 9.54762 24.5645 8.43452 23.6396 7.51786C22.7148 6.6012 21.5915 6.14286 20.2703 6.14286C18.949 6.14286 17.8258 6.6012 16.9009 7.51786C15.976 8.43452 15.5135 9.54762 15.5135 10.8571ZM20.2306 23.4286C22.1861 23.4286 23.9568 22.787 25.5423 21.5036C27.1279 20.2202 27.9076 18.7798 27.8811 17.1821C27.8811 16.7369 27.7357 16.3571 27.445 16.0429C27.1544 15.7286 26.7843 15.5714 26.3351 15.5714C25.9652 15.5714 25.6348 15.6893 25.3441 15.925C25.0535 16.1607 24.842 16.5143 24.7099 16.9857C24.4193 17.9809 23.851 18.7798 23.0054 19.3821C22.1598 19.9845 21.2348 20.2857 20.2306 20.2857C19.2265 20.2857 18.2949 19.9845 17.436 19.3821C16.5772 18.7798 16.0156 17.9809 15.7514 16.9857C15.6192 16.4881 15.421 16.128 15.1568 15.9054C14.8925 15.6827 14.5754 15.5714 14.2054 15.5714C13.7562 15.5714 13.3796 15.7286 13.0757 16.0429C12.7718 16.3571 12.6198 16.7369 12.6198 17.1821C12.6198 18.7798 13.3994 20.2202 14.9586 21.5036C16.5177 22.787 18.2751 23.4286 20.2306 23.4286Z" fill="url(#paint0_linear_3296_9221)"></path>
+<defs>
+<linearGradient id="paint0_linear_3296_9221" x1="12.3423" y1="13.2143" x2="36.6849" y2="39.3608" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF73B2"></stop>
+<stop offset="0.333419" stop-color="#E9ED7D"></stop>
+<stop offset="0.556971" stop-color="#74E583"></stop>
+<stop offset="1" stop-color="#01ACC8"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/creator-studio.svg

@@ -0,0 +1,42 @@
+<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_9356)">
+<rect width="98" height="98" rx="16" transform="matrix(1 0 0 -1 11 109)" fill="url(#paint0_linear_3296_9356)"></rect>
+<g filter="url(#filter0_bdd_3296_9356)">
+<path d="M60 80V40C48.96 40 40 48.96 40 60C40 71.04 48.96 80 60 80Z" fill="white" fill-opacity="0.36" shape-rendering="crispEdges"></path>
+</g>
+<path d="M60 100C37.92 100 20 82.08 20 60C20 37.92 37.92 20 60 20C82.08 20 100 37.92 100 60C100 82.08 82.08 100 60 100ZM60 40C48.96 40 40 48.96 40 60C40 71.04 48.96 80 60 80C71.04 80 80 71.04 80 60C80 48.96 71.04 40 60 40Z" fill="url(#paint1_linear_3296_9356)" style="mix-blend-mode:plus-lighter"></path>
+</g>
+<defs>
+<filter id="filter0_bdd_3296_9356" x="-20" y="-20" width="140" height="160" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="30"></feGaussianBlur>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3296_9356"></feComposite>
+<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"></feColorMatrix>
+<feOffset dx="20"></feOffset>
+<feGaussianBlur stdDeviation="20"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="out"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.404508 0 0 0 0 0.283156 0 0 0 0.2 0"></feColorMatrix>
+<feBlend mode="normal" in2="effect1_backgroundBlur_3296_9356" result="effect2_dropShadow_3296_9356"></feBlend>
+<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"></feColorMatrix>
+<feOffset dx="10"></feOffset>
+<feGaussianBlur stdDeviation="10"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="out"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.404508 0 0 0 0 0.283156 0 0 0 0.05 0"></feColorMatrix>
+<feBlend mode="normal" in2="effect2_dropShadow_3296_9356" result="effect3_dropShadow_3296_9356"></feBlend>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_3296_9356" result="shape"></feBlend>
+</filter>
+<linearGradient id="paint0_linear_3296_9356" x1="7.27344" y1="7.27344" x2="90.1523" y2="90.1523" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2563EB"></stop>
+<stop offset="0.333333" stop-color="#2998FF"></stop>
+<stop offset="0.666667" stop-color="#48E0A1"></stop>
+<stop offset="1" stop-color="#9BEF2F"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9356" x1="60" y1="100" x2="60" y2="20" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C4C4C4"></stop>
+<stop offset="1" stop-color="#7D7D7D"></stop>
+</linearGradient>
+<clipPath id="clip0_3296_9356">
+<rect width="98" height="98" rx="16" transform="matrix(1 0 0 -1 11 109)" fill="white"></rect>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,26 @@
+<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/lib/NavMenu/images/did-name-service.svg

@@ -0,0 +1,3 @@
+<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>

package/lib/NavMenu/images/did-wallet.svg

@@ -0,0 +1,33 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="url(#paint0_linear_3301_9425)"></rect>
+<mask id="mask0_3301_9425" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="9" y="9" width="102" height="102">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="white"></rect>
+</mask>
+<g mask="url(#mask0_3301_9425)">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="url(#paint1_linear_3301_9425)"></rect>
+<path d="M20.22 32.2688C20.22 27.8678 23.7877 24.3 28.1887 24.3H91.8112C96.2122 24.3 99.78 27.8678 99.78 32.2688V71.4113C99.78 75.8123 96.2122 79.3801 91.8112 79.3801H28.1887C23.7877 79.3801 20.22 75.8123 20.22 71.4113V32.2688Z" fill="#9FCBFF"></path>
+<path d="M17.16 38.3888C17.16 33.9878 20.7278 30.42 25.1288 30.42H94.8713C99.2723 30.42 102.84 33.9878 102.84 38.3888V82.1213C102.84 86.5223 99.2723 90.09 94.8713 90.09H25.1288C20.7278 90.09 17.16 86.5223 17.16 82.1213V38.3888Z" fill="url(#paint2_linear_3301_9425)"></path>
+<path d="M9 80.145L111 60.51V99C111 105.627 105.627 111 99 111H21C14.3726 111 9 105.627 9 99V80.145Z" fill="url(#paint3_linear_3301_9425)"></path>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8401 54.1526V39.4412H29.6212C31.6012 39.577 33.1488 41.2274 33.1488 43.2234V50.3614C33.1488 52.4552 31.4515 54.1526 29.3576 54.1526H21.8401ZM38.0412 39.4412H36.0209V54.175H38.0412V39.4412ZM23.8604 52.1323V41.4524H29.3576C30.3356 41.4524 31.1285 42.2453 31.1285 43.2233V50.3613C31.1285 51.3394 30.3356 52.1323 29.3576 52.1323H23.8604ZM40.8792 39.4412V54.1526H48.3967C50.4906 54.1526 52.188 52.4552 52.188 50.3614V43.2234C52.188 41.2274 50.6404 39.577 48.6603 39.4412H40.8792ZM54.759 42.8551H57.0177V45.1138H54.759V42.8551ZM57.0177 48.5023H54.759V50.761H57.0177V48.5023ZM42.8995 41.4524V52.1323H48.3967C49.3748 52.1323 50.1676 51.3394 50.1676 50.3613V43.2233C50.1676 42.2453 49.3748 41.4524 48.3967 41.4524H42.8995Z" fill="#4598FA"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6519 87.2083V96.4742L91.8311 96.9482L93.2804 97.7849L94.1012 97.311V86.3716L87.1559 82.3617H80.6946V101.321H87.1559L88.9331 100.295L87.4838 99.458L86.7676 99.8716H82.1439V83.811H86.7676L92.6519 87.2083ZM93.6127 82.3617L91.8377 83.3865L93.287 84.2232L94.001 83.811H98.6248V99.8716H94.001L88.1167 96.4742V87.2083L88.9398 86.7331L87.4905 85.8964L86.6674 86.3716V97.311L93.3737 101.183C93.5303 101.273 93.7079 101.321 93.8887 101.321H100.074V82.3617H93.6127Z" fill="white"></path>
+<defs>
+<linearGradient id="paint0_linear_3301_9425" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#0A79F8"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3301_9425" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#0A79F8"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3301_9425" x1="17.16" y1="30.42" x2="17.16" y2="90.09" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"></stop>
+<stop offset="1" stop-color="#ECEFFF"></stop>
+</linearGradient>
+<linearGradient id="paint3_linear_3301_9425" x1="20.1562" y1="77.5313" x2="26.7305" y2="110.104" gradientUnits="userSpaceOnUse">
+<stop offset="0.00694981" stop-color="#77B2F6"></stop>
+<stop offset="0.206385" stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#4598FA"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/did.svg

@@ -0,0 +1,3 @@
+<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>

package/lib/NavMenu/images/nft-studio.svg

@@ -0,0 +1,19 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.8" d="M14.2915 102.867C14.2915 106.298 17.8809 108.047 20.0301 105.663L74.8921 44.8061L59.56 13.3167L14.2915 13.3167L14.2915 102.867Z" fill="url(#paint0_linear_3296_9308)"></path>
+<path opacity="0.8" d="M105.709 17.8485C105.709 14.4202 102.124 12.6709 99.9734 15.0499L45.1025 75.758L60.4403 107.247H105.709V17.8485Z" fill="url(#paint1_linear_3296_9308)"></path>
+<path opacity="0.8" d="M105.709 107.247L59.8421 13.3167L14.2915 13.3167L60.4403 107.247H105.709Z" fill="url(#paint2_linear_3296_9308)"></path>
+<defs>
+<linearGradient id="paint0_linear_3296_9308" x1="58.9505" y1="13.5628" x2="1.14816" y2="99.881" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF44B4"></stop>
+<stop offset="1" stop-color="#FFAB48"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9308" x1="105.788" y1="13.5629" x2="48.8613" y2="100.72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44B3FF"></stop>
+<stop offset="1" stop-color="#A448FF"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3296_9308" x1="38.6355" y1="11.2955" x2="95.5184" y2="102.845" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF44A9"></stop>
+<stop offset="1" stop-color="#7452FA"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/vc.svg

@@ -0,0 +1,7 @@
+<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 15C4.89543 15 4 15.8954 4 17V20.1761H0V17C0 13.6863 2.68629 11 6 11H69.23C72.5437 11 75.23 13.6863 75.23 17V59.0689C75.23 62.3826 72.5437 65.0689 69.23 65.0689H6C2.6863 65.0689 0 62.3826 0 59.0689V56.1243H4V59.0689C4 60.1735 4.89543 61.0689 6 61.0689H69.23C70.3346 61.0689 71.23 60.1735 71.23 59.0689V17C71.23 15.8954 70.3346 15 69.23 15H6Z" fill="#4598FA"></path>
+<circle cx="32" cy="31" r="10" stroke="#4598FA" stroke-width="4"></circle>
+<path d="M40.6875 48.384L46.29 53.9864L56.633 43.6434" stroke="#4598FA" stroke-width="4"></path>
+<path d="M49.6667 38.5692C52.9205 38.5692 55.5583 35.4039 55.5583 31.4994C55.5583 27.5948 52.9205 24.4295 49.6667 24.4295" stroke="#4598FA" stroke-width="4"></path>
+<path d="M32 41L24.8527 41C20.9867 41 17.8527 44.134 17.8527 48L17.8527 55.0654" stroke="#4598FA" stroke-width="4"></path>
+</svg>

package/lib/NavMenu/images/web3-kit.svg

@@ -0,0 +1,56 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3296_9286" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+<rect width="119.883" height="119.883" fill="white"></rect>
+</mask>
+<g mask="url(#mask0_3296_9286)">
+<path d="M62.0254 14.05C62.0254 11.261 64.2864 9 67.0754 9H91.0629C93.8519 9 96.1129 11.261 96.1129 14.05V74.65C96.1129 77.439 93.8519 79.7 91.0629 79.7H67.0754C64.2864 79.7 62.0254 77.439 62.0254 74.65V14.05Z" fill="url(#paint0_linear_3296_9286)"></path>
+<path d="M24.1504 32.9875C24.1504 30.1985 26.4114 27.9375 29.2004 27.9375H69.6004C72.3894 27.9375 74.6504 30.1985 74.6504 32.9875V74.65C74.6504 77.439 72.3894 79.7 69.6004 79.7H29.2004C26.4114 79.7 24.1504 77.439 24.1504 74.65V32.9875Z" fill="url(#paint1_linear_3296_9286)"></path>
+<g filter="url(#filter0_i_3296_9286)">
+<path d="M16.5752 64.55C16.5752 58.9719 21.0971 54.45 26.6752 54.45H91.0627C96.6408 54.45 101.163 58.9719 101.163 64.55V99.8999C101.163 105.478 96.6408 110 91.0627 110H26.6752C21.0971 110 16.5752 105.478 16.5752 99.8999V64.55Z" fill="url(#paint2_linear_3296_9286)"></path>
+</g>
+<g filter="url(#filter1_i_3296_9286)">
+<path d="M10.2627 55.7125C10.2627 51.5289 13.6541 48.1375 17.8377 48.1375H99.9002C104.084 48.1375 107.475 51.5289 107.475 55.7125V65.8124C107.475 69.996 104.084 73.3874 99.9002 73.3874H17.8377C13.6541 73.3874 10.2627 69.996 10.2627 65.8124V55.7125Z" fill="url(#paint3_linear_3296_9286)"></path>
+</g>
+<circle cx="58.869" cy="87.9063" r="6.94375" fill="#6BADFF"></circle>
+</g>
+<defs>
+<filter id="filter0_i_3296_9286" x="16.5752" y="54.45" width="86.5874" height="57.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<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"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<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"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<filter id="filter1_i_3296_9286" x="10.2627" y="48.1375" width="99.2124" height="27.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<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"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<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"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<linearGradient id="paint0_linear_3296_9286" x1="86.0129" y1="9" x2="86.6441" y2="46.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7575"></stop>
+<stop offset="1" stop-color="#C91C1C"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9286" x1="49.4004" y1="56.975" x2="49.4004" y2="27.9375" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7F1A"></stop>
+<stop offset="1" stop-color="#FFE074"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3296_9286" x1="16.5752" y1="75.2812" x2="101.163" y2="114.419" gradientUnits="userSpaceOnUse">
+<stop stop-color="#54A0FD"></stop>
+<stop offset="1" stop-color="#136EDE"></stop>
+</linearGradient>
+<linearGradient id="paint3_linear_3296_9286" x1="16.5752" y1="55.7124" x2="58.7889" y2="111.945" gradientUnits="userSpaceOnUse">
+<stop stop-color="#83BAFF"></stop>
+<stop offset="1" stop-color="#2482F6"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/index.d.ts

@@ -1 +1,2 @@
 export { default } from './nav-menu';
+export { default as Products } from './products';

package/lib/NavMenu/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
-export { default } from './nav-menu';
+export { default } from './nav-menu';
+export { default as Products } from './products';

package/lib/NavMenu/nav-menu-context.d.ts

@@ -0,0 +1,17 @@
+export type NavMenuContextValue = {
+    activeId: string | null;
+    openedIds: string[];
+    hiddenItemCount: number;
+    mode: 'horizontal' | 'vertical' | 'inline';
+    textColor: string;
+    activeTextColor: string;
+    bgColor: string;
+    activate: (id: string) => void;
+    open: (id: string) => void;
+    close: (id: string) => void;
+};
+export declare function NavMenuProvider({ value, children }: {
+    value: NavMenuContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNavMenuContext(): NavMenuContextValue;

package/lib/NavMenu/nav-menu-context.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const NavMenuContext = /*#__PURE__*/createContext(null);
+export function NavMenuProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useNavMenuContext() {
+  const context = useContext(NavMenuContext);
+  if (!context) {
+    throw new Error('NavMenuContext is not found');
+  }
+  return context;
+}

package/lib/NavMenu/nav-menu.d.ts

@@ -3,7 +3,9 @@ export type ItemOptions = {
     id?: string;
     icon?: React.ReactNode;
     label?: React.ReactNode;
+    description?: React.ReactNode;
     active?: boolean;
+    variant?: 'default' | 'panel';
     children?: ItemOptions[];
 };
 export interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
@@ -29,16 +31,19 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
     id?: string;
     icon?: React.ReactNode;
     label?: React.ReactNode;
+    description?: React.ReactNode;
     active?: boolean;
+    variant?: 'default' | 'panel';
     onClick?: () => void;
 }
-export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
-    id?: string;
-    icon?: React.ReactNode;
-    label?: React.ReactNode;
-    children?: Array<React.ReactElement>;
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
+    children?: Array<React.ReactElement> | ((props: {
+        isOpen: boolean;
+    }) => React.ReactElement | null);
     expandIcon?: React.ReactNode | ((props: {
         isOpen: boolean;
     }) => React.ReactNode);
 }
+export declare const Sub: import("react").ForwardRefExoticComponent<SubProps & import("react").RefAttributes<HTMLLIElement>>;
 export default NavMenu;

package/lib/NavMenu/nav-menu.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
+import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
-import { HorizontalStyle, InlineStyle } from './style';
-const NavMenuContext = /*#__PURE__*/createContext(null);
+import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
+import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
@@ -61,11 +62,14 @@ function NavMenu({
     return {
       ...currentState,
       mode,
+      textColor,
+      activeTextColor,
+      bgColor,
       activate,
       open,
       close
     };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, textColor, activeTextColor, bgColor, activate, open, close]);
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
@@ -147,10 +151,14 @@ function NavMenu({
         id: item.id,
         icon: item.icon,
         label: item.label,
+        variant: isTopLevel ? 'default' : 'panel',
         ref: isTopLevel ? el => {
           itemRefs.current[index] = el;
         } : undefined,
-        children: item.children.map((childItem, childIndex) => renderItem(childItem, childIndex, false))
+        children: typeof item.children === 'function' ? item.children : item.children.map((childItem, childIndex) => renderItem({
+          ...childItem,
+          variant: 'panel'
+        }, childIndex, false))
       }, item.id);
     }
 
@@ -159,24 +167,24 @@ function NavMenu({
       id: item.id,
       icon: item.icon,
       label: item.label,
+      description: item.description,
       active: item.active,
+      variant: item.variant,
       ref: isTopLevel ? el => {
         itemRefs.current[index] = el;
       } : undefined
     }, item.id);
   };
   const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
-  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
-  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
+  return /*#__PURE__*/_jsx(NavMenuProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StyledRoot, {
+    children: /*#__PURE__*/_jsx(NavMenuRoot, {
       ...rest,
       className: classes,
       $textColor: textColor,
-      $activeTextColor: activeTextColor,
       $bgColor: bgColor,
-      children: /*#__PURE__*/_jsxs("ul", {
-        className: "navmenu-root",
+      children: /*#__PURE__*/_jsxs(NavMenuList, {
+        className: clsx('navmenu-list', `navmenu-list--${mode}`),
         ref: navMenuRef,
         children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
@@ -190,22 +198,26 @@ function NavMenu({
     })
   });
 }
-const Item = /*#__PURE__*/forwardRef(({
+export const Item = /*#__PURE__*/forwardRef(({
   id: _id = '',
   icon = null,
   label = '',
+  description,
   active = false,
+  variant = 'default',
   onClick = null,
   ...rest
 }, ref) => {
   const id = useUniqueId(_id);
   const {
+    mode,
     activeId,
-    activate
-  } = useContext(NavMenuContext) || {};
+    activate,
+    activeTextColor
+  } = useNavMenuContext();
   const classes = clsx('navmenu-item', {
     'navmenu-item--active': activeId === id
-  }, rest.className);
+  }, `navmenu-item--${mode}`, `navmenu-item--${variant}`, rest.className);
   useEffect(() => {
     if (active) {
       activate?.(id);
@@ -219,25 +231,37 @@ const Item = /*#__PURE__*/forwardRef(({
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsxs("li", {
+    _jsxs(NavMenuItem, {
       ...rest,
       className: classes,
-      onClick: handleClick,
       ref: ref,
+      $activeTextColor: activeTextColor,
+      onClick: handleClick,
       children: [icon && /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item-icon",
+        className: "navmenu-item__icon",
         children: icon
-      }), /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item-label",
-        children: label
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "navmenu-item__content",
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "navmenu-item__label",
+          children: [label, " ", /*#__PURE__*/_jsx(ArrowForwardIcon, {
+            className: "navmenu-item__label-arrow"
+          })]
+        }), description && /*#__PURE__*/_jsx("span", {
+          className: "navmenu-item__desc",
+          children: description
+        })]
       })]
     })
   );
 });
-const Sub = /*#__PURE__*/forwardRef(({
+Item.displayName = 'NavMenu.Item';
+export const Sub = /*#__PURE__*/forwardRef(({
   id: _id = '',
   icon = null,
   label = null,
+  description,
+  variant = 'default',
   children,
   expandIcon = ({
     isOpen
@@ -253,13 +277,18 @@ const Sub = /*#__PURE__*/forwardRef(({
     openedIds,
     open,
     close,
-    mode
-  } = useContext(NavMenuContext) || {};
+    mode,
+    activeTextColor
+  } = useNavMenuContext();
   const isOpen = openedIds?.includes(id) ?? false;
-  const classes = clsx('navmenu-sub', {
-    'navmenu-sub--opened': isOpen
-  }, rest.className);
   const isInlineMode = mode === 'inline';
+  const classes = clsx('navmenu-sub', 'navmenu-item', {
+    'navmenu-item--panel': variant === 'panel'
+  }, {
+    'navmenu-sub--opened': isOpen,
+    'navmenu-item--inline': isInlineMode
+  }, rest.className);
+
   // inline mode 时使用 click 事件控制收缩/伸展子菜单
   const props = isInlineMode ? {
     onClick: () => {
@@ -277,32 +306,43 @@ const Sub = /*#__PURE__*/forwardRef(({
   const containerProps = isInlineMode ? {
     onClick: e => e.stopPropagation()
   } : {};
-  return /*#__PURE__*/_jsxs("li", {
+  return /*#__PURE__*/_jsxs(NavMenuSub, {
     ...rest,
     className: classes,
     ...props,
     ref: ref,
+    $activeTextColor: activeTextColor,
     children: [icon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-icon",
+      className: "navmenu-item__icon",
       children: icon
-    }), /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-label",
-      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "navmenu-item__content",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "navmenu-item__label",
+        children: label
+      }), description && /*#__PURE__*/_jsx("span", {
+        className: "navmenu-item__desc",
+        children: description
+      })]
     }), expandIcon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-expand-icon",
+      className: "navmenu-sub__expand-icon",
       children: typeof expandIcon === 'function' ? expandIcon({
         isOpen
       }) : expandIcon
     }), /*#__PURE__*/_jsx("div", {
-      className: "navmenu-sub-container",
+      className: "navmenu-sub__container",
       ...containerProps,
-      children: /*#__PURE__*/_jsx("ul", {
-        className: "navmenu-sub-list",
+      children: typeof children === 'function' ? children({
+        isOpen
+      }) // 自定义渲染
+      : /*#__PURE__*/_jsx(NavMenuSubList, {
+        className: "navmenu-sub__list",
         children: filterItems(children)
       })
     })]
   });
 });
+Sub.displayName = 'NavMenu.Sub';
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 export default NavMenu;

package/lib/NavMenu/products.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+export interface ProductsProps extends BoxProps {
+    isOpen?: boolean;
+}
+export default function Products({ className, isOpen, ...rest }: ProductsProps): import("react/jsx-runtime").JSX.Element;