@arcblock/ux 2.11.50 → 2.12.1

package/lib/SessionUser/components/un-login.js

@@ -1,53 +1,196 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, CircularProgress, IconButton } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, CircularProgress, Divider, Fade, IconButton, LinearProgress, MenuItem, MenuList, Paper, Popper } from '@mui/material';
 import { Icon } from '@iconify/react';
 import UserIcon from '@iconify-icons/tabler/user';
-import { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
+import DIDWalletIcon from '@arcblock/icons/lib/DidWallet';
+import { temp as colors, didConnectColors } from '../../Colors';
+import CloseButton from '../../CloseButton';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import Typography from '../../Typography';
+import QuickLoginItem from './quick-login-item';
 export default function UnLogin({
   session,
   onLogin = noop,
   size = 24,
-  dark = false
+  dark = false,
+  locale = 'en'
 }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+    userSessions: [],
+    loadingSessionId: null
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
   const _onLogin = useMemoizedFn(() => {
     if (isFirstLoading) {
       return;
     }
     session.login(onLogin);
   });
-  return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(IconButton, {
-      ref: userAnchorRef,
-      onClick: _onLogin,
-      "data-cy": "sessionManager-login",
-      className: "arc-session-user-unlogin",
-      size: "medium",
-      "aria-label": "Login button",
-      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-        width: size,
-        height: size,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(CircularProgress, {
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      currentState.userSessions = await session.getUserSessions();
+      if (currentState.userSessions.length > 0) {
+        currentState.open = true;
+      }
+    }, 1500);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleLogin = useMemoizedFn(async userSession => {
+    currentState.loadingSessionId = userSession.id;
+    try {
+      await session.loginUserSession({
+        ...userSession,
+        appPid: blocklet?.appPid
+      });
+    } catch (err) {
+      console.error('session.loginUserSession.error', err);
+    } finally {
+      currentState.loadingSessionId = null;
+    }
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        ref: userAnchorRef,
+        onClick: _onLogin,
+        "data-cy": "sessionManager-login",
+        className: "arc-session-user-unlogin",
+        size: "medium",
+        "aria-label": "Login button",
+        children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
+          width: size,
+          height: size,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          children: /*#__PURE__*/_jsx(CircularProgress, {
+            style: {
+              width: size - 4,
+              height: size - 4,
+              color: dark ? '#fff' : ''
+            }
+          })
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: UserIcon,
+          fontSize: size,
+          color: dark ? '#fff' : 'inherit',
           style: {
-            width: size - 4,
-            height: size - 4,
-            color: dark ? '#fff' : ''
+            transform: 'scale(1.25)'
           }
         })
-      }) : /*#__PURE__*/_jsx(Icon, {
-        icon: UserIcon,
-        fontSize: size,
-        color: dark ? '#fff' : 'inherit',
-        style: {
-          transform: 'scale(1.25)'
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: currentState.open,
+      anchorEl: userAnchorRef.current
+      // @ts-expect-error
+      ,
+      dark: dark,
+      transition: true,
+      placement: "bottom-end",
+      sx: {
+        zIndex: 1100
+      },
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 10] // [水平偏移, 垂直偏移]
         }
+      }],
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        children: /*#__PURE__*/_jsxs(Paper, {
+          variant: "outlined",
+          sx: {
+            borderRadius: 2,
+            width: 400,
+            maxWidth: '90vw',
+            borderColor: colors.lineStep,
+            border: '0 !important',
+            boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+          },
+          children: [/*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              p: 2,
+              borderBottom: '1px solid #eee'
+            },
+            children: [/*#__PURE__*/_jsx(DIDWalletIcon, {
+              width: 24,
+              height: 24
+            }), /*#__PURE__*/_jsx(Typography, {
+              fontSize: "auto",
+              sx: {
+                fontSize: '16',
+                flex: 1,
+                color: didConnectColors.text.secondary
+              },
+              children: t('useQuickLogin')
+            }), /*#__PURE__*/_jsx(CloseButton, {
+              onClose: () => onTogglePopper(false)
+            })]
+          }), /*#__PURE__*/_jsx(MenuList, {
+            sx: {
+              p: 0,
+              overflow: 'hidden'
+            },
+            children: currentState.userSessions.map((userSessionItem, index) => {
+              const isLoading = currentState.loadingSessionId === userSessionItem.id;
+              return /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsxs(MenuItem, {
+                  sx: {
+                    overflow: 'hidden',
+                    position: 'relative',
+                    p: 0,
+                    '&:hover': {
+                      backgroundColor: `${colors.surfacePrimarySubtitle} !important`
+                    }
+                  },
+                  onClick: () => {
+                    handleLogin(userSessionItem);
+                  },
+                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
+                    sx: {
+                      height: '2px',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0
+                    }
+                  }), /*#__PURE__*/_jsx(QuickLoginItem, {
+                    userSession: userSessionItem,
+                    locale: locale
+                  })]
+                }, userSessionItem.id), index < currentState.userSessions.length - 1 ? /*#__PURE__*/_jsx(Divider, {
+                  sx: {
+                    mx: 2,
+                    my: '0px !important',
+                    borderColor: '#e4e4e7'
+                  }
+                }) : null]
+              });
+            })
+          })]
+        })
       })
-    })
+    })]
   });
 }

package/lib/SessionUser/index.js

@@ -23,6 +23,7 @@ export default function SessionUser({
   }
   return /*#__PURE__*/_jsx(UnLogin, {
     session: session,
+    locale: locale,
     size: size
   });
 }

package/lib/SessionUser/libs/translation.js

@@ -10,7 +10,8 @@ export const translations = {
     dashboard: 'Dashboard',
     logout: 'Sign Out',
     addAnotherAccount: 'Add another account',
-    disconnected: 'Disconnected'
+    disconnected: 'Disconnected',
+    useQuickLogin: 'Use DID Connect account to login quickly'
   },
   zh: {
     connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
@@ -21,6 +22,7 @@ export const translations = {
     dashboard: '控制台',
     logout: '退出登录',
     addAnotherAccount: '添加账户',
-    disconnected: '未连接'
+    disconnected: '未连接',
+    useQuickLogin: '使用 DID Connect 账号快速登录'
   }
 };

package/lib/Typography/index.js

@@ -95,7 +95,9 @@ export default function Typography({
       ...rest,
       sx: {
         ...sx,
-        fontSize: `${state.fontSize}px !important`,
+        ...(state.fontSize ? {
+          fontSize: `${state.fontSize}px !important`
+        } : {}),
         position: 'fixed',
         top: -1000,
         left: -1000
@@ -107,7 +109,9 @@ export default function Typography({
     ...rest,
     sx: {
       ...sx,
-      fontSize: `${state.fontSize}px !important`
+      ...(state.fontSize ? {
+        fontSize: `${state.fontSize}px !important`
+      } : {})
     },
     children: children
   });

package/lib/Util/style.d.ts

@@ -0,0 +1,2 @@
+import type { SxProps } from '@mui/material';
+export declare const mergeSx: (...sxList: Array<SxProps | undefined | null>) => SxProps;

package/lib/Util/style.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+
+export const mergeSx = (...sxList) => {
+  const mergedSx = sxList.reduce((acc, sx) => {
+    if (!sx) {
+      return acc;
+    }
+    if (Array.isArray(sx)) {
+      return acc.concat(sx);
+    }
+    return acc.concat([sx]);
+  }, []);
+  return mergedSx;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.50",
+  "version": "2.12.1",
   "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": "f969739a55ab3a6c178b15b8e2aa736ef4956fd0",
+  "gitHead": "f354d93f7db5e2e0547b75a05b5e47fd9a9587ac",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.50",
-    "@arcblock/nft-display": "^2.11.50",
-    "@arcblock/react-hooks": "^2.11.50",
+    "@arcblock/icons": "^2.12.1",
+    "@arcblock/nft-display": "^2.12.1",
+    "@arcblock/react-hooks": "^2.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/CloseButton/index.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@mui/material';
+import type { SxProps } from '@mui/material';
+import { Icon } from '@iconify/react';
+import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
+import noop from 'lodash/noop';
+
+import { temp as colors } from '../Colors';
+import { mergeSx } from '../Util/style';
+
+export default function CloseButton({ onClose = noop, sx }: { onClose?: () => void; sx?: SxProps }) {
+  return (
+    <Box
+      onClick={onClose}
+      sx={mergeSx(
+        {
+          fontSize: 0,
+          cursor: 'pointer',
+          color: colors.foregroundsFgSubtile,
+          transition: 'transform 0.25s ease-in-out 0s',
+          transformOrigin: 'center',
+          '&:hover': {
+            transform: 'rotate(90deg)',
+          },
+        },
+        sx
+      )}>
+      <Icon icon={CloseRoundedIcon} fontSize={20} />
+    </Box>
+  );
+}

package/src/Colors/index.ts

@@ -1,3 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './themes/default';
 export { default as temp } from './themes/temp';
+export { default as didConnectColors } from './themes/did-connect';

package/src/Colors/themes/did-connect.ts

@@ -0,0 +1,56 @@
+const colors = {
+  background: {
+    overlay: 'rgba(15, 23, 42, 0.5)',
+    default: 'white',
+    paper0: 'white',
+    paper1: '#FAFAFA',
+    paper2: '#F4F4F5',
+  },
+  text: {
+    primary: '#18181B',
+    secondary: '#71717B',
+    disable: '#D4D4D8',
+    hint: '#D4D4D8',
+  },
+  state: {
+    hover: '#FAFAFA',
+    selected: '#F4F4F5',
+    item: '#F4F4F5',
+    itemSelected: '#E4E4E7',
+  },
+  primary: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC',
+  },
+  secondary: {
+    main: '#615FFF',
+    light: '#7C86FF',
+    dark: '#4F39F6',
+  },
+  error: {
+    main: '#FB2C36',
+    light: '#FF6467',
+    dark: '#E7000B',
+  },
+  warning: {
+    main: '#FF6900',
+    light: '#FF8904',
+    dark: '#F54900',
+  },
+  info: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC',
+  },
+  success: {
+    main: '#00C950',
+    light: '#05DF72',
+    dark: '#00A63E',
+  },
+  divider: {
+    main: '#F4F4F5',
+  },
+};
+
+export default colors;

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>

package/src/NavMenu/images/ai-kit.svg

@@ -0,0 +1,46 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_697_8408)">
+<g filter="url(#filter0_i_697_8408)">
+<path fill-rule="evenodd" clip-rule="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"/>
+</g>
+<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)"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<mask id="mask0_697_8408" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="7" width="12" height="10">
+<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"/>
+<path fill-rule="evenodd" clip-rule="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"/>
+<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"/>
+<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"/>
+<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"/>
+<path fill-rule="evenodd" clip-rule="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"/>
+<path fill-rule="evenodd" clip-rule="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"/>
+</mask>
+<g mask="url(#mask0_697_8408)">
+<path d="M6 6H18V18H6V6Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_697_8408" x="0" y="0" width="24.4" height="24.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<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"/>
+<feMorphology radius="0.8" operator="erode" in="SourceAlpha" result="effect1_innerShadow_697_8408"/>
+<feOffset dx="0.4" dy="0.4"/>
+<feGaussianBlur stdDeviation="0.6"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<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"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_697_8408"/>
+</filter>
+<linearGradient id="paint0_linear_697_8408" x1="16.0831" y1="19.9581" x2="16.1471" y2="6.2774" gradientUnits="userSpaceOnUse">
+<stop stop-color="#369CFC"/>
+<stop offset="1" stop-color="#1E65B5"/>
+</linearGradient>
+<clipPath id="clip0_697_8408">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/NavMenu/images/aigne.svg

@@ -0,0 +1,8 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2456_413" 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_2456_413)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2632 28.4408H98.4079C102.728 28.4408 106.23 31.943 106.23 36.2632V83.7368C106.23 88.057 102.728 91.5592 98.4079 91.5592H21.2632C16.943 91.5592 13.4408 88.057 13.4408 83.7368V36.2632C13.4408 31.943 16.943 28.4408 21.2632 28.4408ZM4 36.2632C4 26.729 11.729 19 21.2632 19H98.4079C107.942 19 115.671 26.729 115.671 36.2632V83.7368C115.671 93.271 107.942 101 98.4079 101H21.2632C11.729 101 4 93.271 4 83.7368V36.2632ZM50.2836 59.8795C50.2836 67.5608 46.7456 73.7878 42.3812 73.7878C38.0168 73.7878 34.4787 67.5608 34.4787 59.8795C34.4787 52.1981 38.0168 45.9712 42.3812 45.9712C46.7456 45.9712 50.2836 52.1981 50.2836 59.8795ZM85.0609 59.8795C85.0609 67.5608 81.5228 73.7878 77.1584 73.7878C72.794 73.7878 69.256 67.5608 69.256 59.8795C69.256 52.1981 72.794 45.9712 77.1584 45.9712C81.5228 45.9712 85.0609 52.1981 85.0609 59.8795Z" fill="black"></path>
+</g>
+</svg>