@arcblock/ux 2.12.0 → 2.12.2

package/lib/NavMenu/style.d.ts

@@ -1,8 +1,13 @@
-type NavMenuBaseProps = {
+type NavMenuProps = {
     $bgColor: string;
     $textColor: string;
+};
+export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const NavMenuList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+type NavMenuItemProps = {
     $activeTextColor: string;
 };
-export declare const HorizontalStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
-export declare const InlineStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
+export declare const NavMenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const NavMenuSub: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, {}, {}>;
+export declare const NavMenuSubList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export {};

package/lib/NavMenu/style.js

@@ -1,185 +1,225 @@
 import { styled } from '../Theme';
-const NavMenuBase = styled('nav', {
-  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor' && prop !== '$activeTextColor'
-})`
-  background-color: ${props => props.$bgColor};
-  font-size: 16px;
-  // width: 100%;
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    display: flex;
-    align-items: center;
-  }
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  /* active/hover */
-  .navmenu-item,
-  .navmenu-sub {
-    color: ${props => props.$textColor};
-  }
-  .navmenu-item--active,
-  .navmenu-item:hover,
-  .navmenu-sub--opened {
-    color: ${props => props.$activeTextColor};
-  }
-
-  .navmenu-item {
-    position: relative;
-    cursor: pointer;
-    transition: color 0.2s ease-in-out;
-    a {
-      white-space: nowrap;
-    }
-    a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
-  }
-
-  .navmenu-sub {
-    position: relative;
-    cursor: pointer;
-  }
-  /* icon & expand icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon,
-  .navmenu-sub-expand-icon {
-    display: flex;
-    line-height: 1;
-  }
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    margin-right: 4px;
-  }
-  .navmenu-item-icon > *,
-  .navmenu-sub-icon > * {
-    width: auto;
-    height: 22px;
-    max-height: 22px;
-    font-size: 1.5em;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: 8px;
-    > * {
-      width: 0.8em;
-      height: 0.8em;
-      transition: transform 0.2s ease-in-out;
-    }
-  }
-`;
-export const HorizontalStyle = styled(NavMenuBase)`
-  padding: 8px 16px;
-  min-width: 50px;
+// .navmenu-root
+export const NavMenuRoot = styled('nav', {
+  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
+})(({
+  $bgColor,
+  $textColor
+}) => ({
+  padding: '8px 16px',
+  minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
-  flex-grow: 100;
+  flexGrow: 100,
+  backgroundColor: $bgColor,
+  color: $textColor,
+  fontSize: '16px'
+}));
 
-  .navmenu-root {
-    display: flex;
-    align-items: center;
-  }
-  /* 顶级菜单间隔 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    margin-left: 24px;
-    white-space: nowrap;
-  }
-  .navmenu-root > .navmenu-item:first-of-type,
-  .navmenu-root > .navmenu-sub:first-of-type {
-    margin-left: 0;
-  }
-
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    position: absolute;
-    top: 100%;
-  }
-  .navmenu-sub-list {
-    padding: 16px;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    .navmenu-item + .navmenu-item {
-      margin-top: 8px;
+// .navmenu-list
+export const NavMenuList = styled('ul')(() => ({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  // inline 布局
+  '&.navmenu-list--inline ': {
+    flexDirection: 'column',
+    alignItems: 'stretch'
+  }
+}));
+// 菜单项 .navmenu-item
+export const NavMenuItem = styled('li', {
+  shouldForwardProp: prop => prop !== '$activeTextColor'
+})(({
+  $activeTextColor
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  padding: '0 12px',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  transition: 'color 0.2s ease-in-out',
+  // 间距调整
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-of-type': {
+    paddingRight: 0
+  },
+  // 内部链接
+  a: {
+    whiteSpace: 'nowrap',
+    color: 'inherit',
+    textDecoration: 'none',
+    // 扩大点击区域
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      backgroundColor: 'transparent',
+      content: '""'
     }
-  }
-  /* 二级 sub menu */
-  .navmenu-root > .navmenu-sub {
-    white-space: nowrap;
-    > .navmenu-sub-container {
-      left: 50%;
-      transform: translateX(-50%);
-      padding-top: 16px;
+  },
+  // 图标
+  '.navmenu-item__icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '4px',
+    '& > *': {
+      width: 'auto',
+      height: '22px',
+      maxHeight: '22px',
+      fontSize: '1.5em'
     }
-    &.navmenu-sub--opened > .navmenu-sub-container {
-      display: block;
+  },
+  // 右侧内容
+  '.navmenu-item__content': {
+    height: '32px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    gap: '5px'
+  },
+  '.navmenu-item__label': {
+    display: 'flex',
+    alignItems: 'center',
+    '&-arrow': {
+      marginLeft: '6px',
+      fontSize: '14px',
+      opacity: 0,
+      transition: 'opacity 0.2s ease-in-out'
     }
-  }
-`;
+  },
+  '.navmenu-item__desc': {
+    fontSize: '14px'
+  },
+  // 悬停状态下
+  '&:hover': {
+    color: $activeTextColor
+  },
+  // 选中状态下
+  '&.navmenu-item--active': {
+    color: $activeTextColor
+  },
+  // Panel 形态下
+  '&.navmenu-item--panel': {
+    padding: '8px 16px',
+    borderRadius: '8px',
+    '.navmenu-item__icon': {
+      width: '32px',
+      height: '32px',
+      marginRight: '16px',
+      border: '1px solid #eff1f5',
+      borderRadius: '4px',
+      color: '#9497a0'
+    },
+    '.navmenu-item__label': {
+      fontSize: '14px',
+      lineHeight: 1,
+      color: '#26292e'
+    },
+    '.navmenu-item__desc': {
+      fontSize: '12px',
+      lineHeight: 1,
+      color: '#9497a0'
+    },
+    '&:hover': {
+      background: '#f9f9fb',
+      transition: 'background 0.2s ease-in-out',
+      '.navmenu-item__label-arrow': {
+        opacity: 1
+      },
+      '.navmenu-item__desc': {
+        color: '#26292e',
+        transition: 'color 0.2s ease-in-out'
+      }
+    },
+    '&.navmenu-item--active': {
+      background: '#f9f9fb'
+    }
+  },
+  // inline 布局中
+  '&.navmenu-item--inline': {
+    margin: 0,
+    padding: '0 16px',
+    minHeight: '48px',
+    lineHeight: '48px',
+    flexWrap: 'wrap'
+  }
+}));
 
-/* inline mode */
-export const InlineStyle = styled(NavMenuBase)`
-  font-size: 16px;
-  .navmenu-root {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    padding: 0 16px;
-  }
-  & .navmenu-sub {
-    flex-wrap: wrap;
-  }
-  /* 顶级 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    line-height: 48px;
-    border-bottom: 1px solid #eee;
-  }
-  /* icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    width: 30px;
-    margin: 0;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: auto;
-  }
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    flex: 1 0 100%;
-    margin: 0 -16px;
-    padding-bottom: 8px;
-    .navmenu-item,
-    .navmenu-sub {
-      line-height: 32px;
+// 包含子菜单的导航项 .navmenu-item .navmenu-sub
+export const NavMenuSub = styled(NavMenuItem)(() => ({
+  '.navmenu-item': {
+    marginLeft: 0
+  },
+  '& .navmenu-sub__container': {
+    visibility: 'hidden',
+    opacity: 0,
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    zIndex: 1,
+    transform: 'translateX(-50%)',
+    paddingTop: '16px',
+    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out'
+  },
+  '&.navmenu-sub--opened > .navmenu-sub__container': {
+    visibility: 'visible',
+    opacity: 1
+  },
+  // 扩展图标
+  '.navmenu-sub__expand-icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: '8px',
+    '& > *': {
+      width: '0.8em',
+      height: '0.8em',
+      transition: 'transform 0.2s ease-in-out'
+    },
+    '.navmenu-item--inline &': {
+      marginLeft: 'auto'
     }
-  }
-  .navmenu-sub-list {
-    padding-left: 16px;
-    .navmenu-item,
-    .navmenu-sub {
-      padding-left: 30px;
-      font-size: 13px;
+  },
+  // inline 布局
+  '&.navmenu-item--inline': {
+    '.navmenu-sub__container': {
+      position: 'static',
+      transform: 'none',
+      flex: '1 0 100%',
+      margin: '0 -16px',
+      padding: 0,
+      height: 0,
+      overflow: 'hidden',
+      transition: 'height 0.2s ease-in-out'
+    },
+    '&.navmenu-sub--opened > .navmenu-sub__container': {
+      height: 'auto'
+    },
+    '.navmenu-sub__list': {
+      padding: 0,
+      paddingLeft: '16px',
+      boxShadow: 'none'
     }
   }
-  /* 二级 menu */
-  .navmenu-sub--opened > .navmenu-sub-container {
-    display: block;
-  }
-`;
+}));
+
+// 下拉子菜单 .navmenu-sub-list
+export const NavMenuSubList = styled('ul')(() => ({
+  margin: 0,
+  padding: '16px',
+  borderRadius: '4px',
+  background: '#fff',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  '& .navmenu-item + .navmenu-item': {
+    marginTop: '8px'
+  }
+}));

package/lib/NavMenu/sub-item-group.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+export interface NavMenuSubItemGroupProps extends BoxProps {
+    label: React.ReactNode;
+}
+export default function NavMenuSubItemGroup({ label, children, className, sx, ...rest }: NavMenuSubItemGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { styled } from '../Theme';
+const Group = styled(Box)`
+  padding: 16px 24px;
+  border-radius: 8px;
+  background-color: white;
+  cursor: auto;
+
+  .group-label {
+    margin-bottom: 8px;
+    color: #71717b;
+    font-size: 12px;
+  }
+
+  .nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+export default function NavMenuSubItemGroup({
+  label,
+  children,
+  className,
+  sx,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Group, {
+    className: `nav-menu-sub-item-group ${className}`,
+    sx: {
+      ...sx
+    },
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "group-label",
+      children: label
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "ul",
+      className: "nav",
+      children: children
+    })]
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "ce9042b3a31a06b60ab4d3b923e8b5903bbbf106",
+  "gitHead": "4dc132cab82765eef5194cf00075a13bd5d8e458",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.0",
-    "@arcblock/nft-display": "^2.12.0",
-    "@arcblock/react-hooks": "^2.12.0",
+    "@arcblock/icons": "^2.12.2",
+    "@arcblock/nft-display": "^2.12.2",
+    "@arcblock/react-hooks": "^2.12.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Address/responsive-did-address.tsx

@@ -1,4 +1,4 @@
-import { useLatest, useSize } from 'ahooks';
+import { useDebounceFn, useLatest } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -12,18 +12,20 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', ...rest }, ref) => {
+  ({ style, className, component = 'span', size, ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
     const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
     const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
+    const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
+    const [loading, setLoading] = useState(true);
+    const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
+      wait: 50,
+    });
     const containerRef = useRef<HTMLDivElement>(null);
     const innerRef = useRef<HTMLDidAddressElement>(null);
-    const size = useSize(containerRef);
-    const containerWidth = size?.width || 0;
 
     useImperativeHandle(
       ref,
@@ -41,22 +43,32 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     // 存储完整显示时 address 组件的宽度
     useEffect(() => {
       const innerWidth = innerRef.current?.offsetWidth || 0;
-      let resizeObserver: ResizeObserver | null = null;
+      let innerObserver: ResizeObserver | null = null;
+      let containerObserver: ResizeObserver | null = null;
 
+      // 初始化宽度
       setAddressFullWidth(innerWidth);
+      setContainerWidth(containerRef.current?.offsetWidth);
 
       // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-      resizeObserver = new ResizeObserver(() => {
+      innerObserver = new ResizeObserver(() => {
         if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
           setAddressFullWidth(innerRef.current?.offsetWidth);
+          delaySetLoadingFalse();
         }
       });
+      containerObserver = new ResizeObserver(() => {
+        setContainerWidth(containerRef.current?.offsetWidth);
+      });
 
-      if (innerRef.current) {
-        resizeObserver.observe(innerRef.current.getEl());
-      }
+      innerObserver.observe(innerRef.current!.getEl());
+      containerObserver.observe(containerRef.current!);
+      delaySetLoadingFalse();
 
-      return () => resizeObserver.disconnect();
+      return () => {
+        innerObserver?.disconnect();
+        containerObserver?.disconnect();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -65,9 +77,23 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
         setCompact(containerWidth < addressFullWidth);
       }
     }, [containerWidth, addressFullWidth]);
+
     return (
       <Root as={component} ref={containerRef} style={style} className={className}>
-        <StyledDidAddress {...rest} component={component} inline compact={compact} ref={innerRef} />
+        <StyledDidAddress
+          style={{
+            position: loading ? 'absolute' : 'static',
+            left: loading ? '-99999px' : 'auto',
+          }}
+          {...rest}
+          size={size}
+          component={component}
+          inline
+          compact={compact}
+          ref={innerRef}
+        />
+        {/* placeholder */}
+        {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
       </Root>
     );
   }
@@ -83,6 +109,8 @@ export interface IResponsiveDidAddressProps extends IDidAddressProps {
 
 const Root = styled(Box)`
   display: block;
+  width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
+  font-size: 0;
   overflow: hidden;
   ${({ inline }: any) =>
     inline &&

package/src/NavMenu/images/OCAP.svg

@@ -0,0 +1,16 @@
+<svg width="420" height="420" viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M210.205 17.1428V113.571V210M210.205 210L376.872 306.19M210.205 210L44.9668 305.238" stroke="url(#paint0_linear_3296_9216)" stroke-opacity="0.6" stroke-width="18"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.638 178.49L210.205 200.103L172.921 178.576L200.337 130.776L201.634 128.516L210.205 113.571L218.776 128.437L220.113 130.753L247.638 178.49ZM262.484 169.919L225.056 105.008L210.166 79.1841L195.334 105.042L158.074 170.005L62.7143 114.949L210.205 29.7949L357.695 114.949L262.484 169.919ZM256.201 193.342L218.776 214.949V301.244L284.965 263.044L293.538 258.095L284.986 243.263L256.201 193.342ZM218.776 321.036L302.108 272.943L316.949 264.377L308.389 249.532L271.047 184.77L366.267 129.795V300.103L218.776 385.256V321.036ZM201.634 301.151V214.949L164.392 193.448L136.062 242.84L127.586 257.619L136.083 262.614L201.634 301.151ZM149.546 184.876L112.715 249.09L104.277 263.802L118.898 272.397L201.517 320.969L201.634 321.037V385.256L54.1429 300.103V129.795L149.546 184.876ZM210.205 10L45.5714 105.051L37 110V119.897V310L201.634 405.051L210.205 410L218.776 405.051L383.41 310V119.897V110L374.838 105.051L210.205 10Z" fill="url(#paint1_linear_3296_9216)"></path>
+<defs>
+<linearGradient id="paint0_linear_3296_9216" x1="632.433" y1="166.456" x2="334.741" y2="-292.388" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4EF1BA"></stop>
+<stop offset="0.501904" stop-color="#16CED1"></stop>
+<stop offset="1" stop-color="#3773F2"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9216" x1="210.205" y1="-190" x2="-189.795" y2="210" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4EF1BA"></stop>
+<stop offset="0.501904" stop-color="#16CED1"></stop>
+<stop offset="1" stop-color="#3773F2"></stop>
+</linearGradient>
+</defs>
+</svg>

package/src/NavMenu/images/abt-network.svg

@@ -0,0 +1,18 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3296_9227" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="8" y="8" width="184" height="184">
+<path d="M192 100C192 49.1898 150.81 8 100 8C49.1898 8 8 49.1898 8 100C8 150.81 49.1898 192 100 192C150.81 192 192 150.81 192 100Z" fill="white"></path>
+</mask>
+<g mask="url(#mask0_3296_9227)">
+<path d="M192 100C192 49.1898 150.81 8 100 8C49.1898 8 8 49.1898 8 100C8 150.81 49.1898 192 100 192C150.81 192 192 150.81 192 100Z" fill="white"></path>
+<path d="M192 8H8V192H192V8Z" fill="url(#paint0_linear_3296_9227)"></path>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M98.0594 97.0743V99.3038L96.1184 100.419L40.2002 132.536L42.141 135.88L100 102.648L157.859 135.88L159.8 132.536L103.882 100.419L101.941 99.3038V97.0743V32.84H98.0594V97.0743Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.404 28.6202L162.56 64.5058V136.277L100.404 172.163L38.2485 136.277V64.5058L100.404 28.6202ZM44.0759 65.6272L82.729 87.9437L100.405 57.3287L118.08 87.9435L156.733 65.6272L100.404 33.1061L44.0759 65.6272ZM158.675 68.9914L120.022 91.3078L137.698 121.923L102.347 142.333V166.556L158.675 134.034V68.9914ZM98.4619 166.556V142.333L63.1111 121.923L80.7866 91.3079L42.1332 68.9914V134.034L98.4619 166.556ZM84.1505 93.2501L68.4172 120.501L98.4619 137.847V103.755V101.512L96.5196 100.391L84.1505 93.2501ZM102.347 137.847L132.39 120.501L116.657 93.2503L104.289 100.391L102.347 101.512V103.755V137.847ZM114.715 89.8861L100.404 65.0982L86.0929 89.8858L100.404 98.1485L114.715 89.8861Z" fill="white"></path>
+</g>
+<defs>
+<linearGradient id="paint0_linear_3296_9227" x1="100" y1="-84" x2="-84" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4EF1BA"></stop>
+<stop offset="0.501904" stop-color="#16CED1"></stop>
+<stop offset="1" stop-color="#3773F2"></stop>
+</linearGradient>
+</defs>
+</svg>