milestone: publish alpha version (#637)

- document folder - full-text search - blob storage - basic edgeless support Co-authored-by: tzhangchi <terry.zhangchi@outlook.com> Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com> Co-authored-by: DiamondThree <diamond.shx@gmail.com> Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com> Co-authored-by: JimmFly <yangjinfei001@gmail.com> Co-authored-by: Yifeng Wang <doodlewind@toeverything.info> Co-authored-by: Himself65 <himself65@outlook.com> Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com> Co-authored-by: Qi <474021214@qq.com>
2026-02-14 21:27:20 +00:00 · 2022-12-30 21:40:15 +08:00
parent cc790dcbc2
commit 6c2c7dcd48
296 changed files with 16139 additions and 2072 deletions
--- a/packages/app/src/ui/button/Button.tsx
+++ b/packages/app/src/ui/button/Button.tsx
@@ -0,0 +1,62 @@
+import { cloneElement, Children, forwardRef } from 'react';
+import { StyledButton } from './styles';
+
+import { ButtonProps } from './interface';
+import { getSize } from './utils';
+import { Loading } from './Loading';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = 'default',
+      disabled = false,
+      hoverBackground,
+      hoverColor,
+      hoverStyle,
+      shape = 'default',
+      icon,
+      type = 'default',
+      children,
+      bold = false,
+      loading = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { iconSize } = getSize(size);
+
+    return (
+      <StyledButton
+        ref={ref}
+        disabled={disabled}
+        size={size}
+        shape={shape}
+        hoverBackground={hoverBackground}
+        hoverColor={hoverColor}
+        hoverStyle={hoverStyle}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        type={type}
+        bold={bold}
+        {...props}
+      >
+        {loading ? (
+          <Loading type={type}></Loading>
+        ) : (
+          <>
+            {icon &&
+              cloneElement(Children.only(icon), {
+                width: iconSize,
+                height: iconSize,
+                className: `affine-button-icon ${icon.props.className ?? ''}`,
+              })}
+            {children && <span>{children}</span>}
+          </>
+        )}
+      </StyledButton>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export default Button;
--- a/packages/app/src/ui/button/IconButton.tsx
+++ b/packages/app/src/ui/button/IconButton.tsx
@@ -0,0 +1,86 @@
+import {
+  HTMLAttributes,
+  cloneElement,
+  ReactElement,
+  Children,
+  CSSProperties,
+  forwardRef,
+} from 'react';
+import { StyledIconButton } from './styles';
+
+const SIZE_SMALL = 'small' as const;
+const SIZE_MIDDLE = 'middle' as const;
+const SIZE_NORMAL = 'normal' as const;
+// TODO: IconButton should merge into Button, but it has not been designed yet
+const SIZE_CONFIG = {
+  [SIZE_SMALL]: {
+    iconSize: 16,
+    areaSize: 24,
+  },
+  [SIZE_MIDDLE]: {
+    iconSize: 20,
+    areaSize: 28,
+  },
+  [SIZE_NORMAL]: {
+    iconSize: 24,
+    areaSize: 32,
+  },
+} as const;
+
+export type IconButtonProps = {
+  size?:
+    | typeof SIZE_SMALL
+    | typeof SIZE_MIDDLE
+    | typeof SIZE_NORMAL
+    | [number, number];
+  iconSize?:
+    | typeof SIZE_SMALL
+    | typeof SIZE_MIDDLE
+    | typeof SIZE_NORMAL
+    | [number, number];
+  disabled?: boolean;
+  hoverBackground?: CSSProperties['background'];
+  hoverColor?: string;
+  hoverStyle?: CSSProperties;
+  children: ReactElement<HTMLAttributes<SVGElement>, 'svg'>;
+  darker?: boolean;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      size = 'normal',
+      iconSize = 'normal',
+      disabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [width, height] = Array.isArray(size)
+      ? size
+      : [SIZE_CONFIG[size]['areaSize'], SIZE_CONFIG[size]['areaSize']];
+    const [iconWidth, iconHeight] = Array.isArray(iconSize)
+      ? iconSize
+      : [SIZE_CONFIG[iconSize]['iconSize'], SIZE_CONFIG[iconSize]['iconSize']];
+
+    return (
+      <StyledIconButton
+        ref={ref}
+        disabled={disabled}
+        width={width}
+        height={height}
+        borderRadius={iconWidth / 4}
+        {...props}
+      >
+        {cloneElement(Children.only(children), {
+          width: iconWidth,
+          height: iconHeight,
+        })}
+      </StyledIconButton>
+    );
+  }
+);
+IconButton.displayName = 'IconButton';
+
+export default IconButton;
--- a/packages/app/src/ui/button/Loading.tsx
+++ b/packages/app/src/ui/button/Loading.tsx
@@ -0,0 +1,60 @@
+import { styled } from '@/styles';
+import { ButtonProps } from './interface';
+import { getButtonColors } from './utils';
+
+export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
+  ({ theme, type = 'default' }) => {
+    const { color } = getButtonColors(theme, type);
+    return `
+    margin: 0px auto;
+    width: 38px;
+    text-align: center;
+    .load {
+        width: 8px;
+        height: 8px;
+        background-color: ${color};
+
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+        animation: bouncedelay 1.4s infinite ease-in-out;
+        /* Prevent first frame from flickering when animation starts */
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+    .load1 {
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+    }
+    .load2 {
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+    }
+
+    @-webkit-keyframes bouncedelay {
+      0%, 80%, 100% { -webkit-transform: scale(0) }
+      40% { -webkit-transform: scale(1.0) }
+    }
+
+    @keyframes bouncedelay {
+      0%, 80%, 100% {
+        transform: scale(0);
+        -webkit-transform: scale(0);
+      } 40% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+      }
+    }
+  `;
+  }
+);
+
+export const Loading = ({ type }: Pick<ButtonProps, 'type'>) => {
+  return (
+    <LoadingContainer type={type} className="load-container">
+      <div className="load load1"></div>
+      <div className="load load2"></div>
+      <div className="load"></div>
+    </LoadingContainer>
+  );
+};
--- a/packages/app/src/ui/button/TextButton.tsx
+++ b/packages/app/src/ui/button/TextButton.tsx
@@ -0,0 +1,54 @@
+import { cloneElement, Children, forwardRef } from 'react';
+import { StyledTextButton } from './styles';
+
+import { ButtonProps } from './interface';
+import { getSize } from './utils';
+
+export const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = 'default',
+      disabled = false,
+      hoverBackground,
+      hoverColor,
+      hoverStyle,
+      shape = 'default',
+      icon,
+      type = 'default',
+      children,
+      bold = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { iconSize } = getSize(size);
+
+    return (
+      <StyledTextButton
+        ref={ref}
+        disabled={disabled}
+        size={size}
+        shape={shape}
+        hoverBackground={hoverBackground}
+        hoverColor={hoverColor}
+        hoverStyle={hoverStyle}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        type={type}
+        bold={bold}
+        {...props}
+      >
+        {icon &&
+          cloneElement(Children.only(icon), {
+            width: iconSize,
+            height: iconSize,
+            className: `affine-button-icon ${icon.props.className ?? ''}`,
+          })}
+        {children && <span>{children}</span>}
+      </StyledTextButton>
+    );
+  }
+);
+TextButton.displayName = 'TextButton';
+
+export default TextButton;
--- a/packages/app/src/ui/button/index.ts
+++ b/packages/app/src/ui/button/index.ts
@@ -0,0 +1,3 @@
+export * from './IconButton';
+export * from './Button';
+export * from './TextButton';
--- a/packages/app/src/ui/button/interface.ts
+++ b/packages/app/src/ui/button/interface.ts
@@ -0,0 +1,24 @@
+import {
+  CSSProperties,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+
+export const SIZE_SMALL = 'small' as const;
+export const SIZE_MIDDLE = 'middle' as const;
+export const SIZE_DEFAULT = 'default' as const;
+
+export type ButtonProps = PropsWithChildren &
+  Omit<HTMLAttributes<HTMLButtonElement>, 'type'> & {
+    size?: typeof SIZE_SMALL | typeof SIZE_MIDDLE | typeof SIZE_DEFAULT;
+    disabled?: boolean;
+    hoverBackground?: CSSProperties['background'];
+    hoverColor?: CSSProperties['color'];
+    hoverStyle?: CSSProperties;
+    icon?: ReactElement;
+    shape?: 'default' | 'round' | 'circle';
+    type?: 'primary' | 'warning' | 'danger' | 'default';
+    bold?: boolean;
+    loading?: boolean;
+  };
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -0,0 +1,226 @@
+import { absoluteCenter, displayInlineFlex, styled } from '@/styles';
+import { CSSProperties } from 'react';
+import { ButtonProps } from '@/ui/button/interface';
+import { getSize, getButtonColors } from './utils';
+
+export const StyledIconButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+      'darker',
+    ].includes(prop);
+  },
+})<{
+  width: number;
+  height: number;
+  borderRadius: number;
+  disabled?: boolean;
+  hoverBackground?: CSSProperties['background'];
+  hoverColor?: string;
+  hoverStyle?: CSSProperties;
+  // In some cases, button is in a normal hover status, it should be darkened
+  darker?: boolean;
+}>(
+  ({
+    theme,
+    width,
+    height,
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+    darker = false,
+  }) => {
+    return {
+      width,
+      height,
+      color: theme.colors.iconColor,
+      ...displayInlineFlex('center', 'center'),
+      position: 'relative',
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      transition: 'background .15s',
+
+      // TODO: we need to add @emotion/babel-plugin
+      '::after': {
+        content: '""',
+        width,
+        height,
+        borderRadius: width / 5,
+        transition: 'background .15s',
+        ...absoluteCenter({ horizontal: true, vertical: true }),
+      },
+
+      svg: {
+        position: 'relative',
+        zIndex: 1,
+      },
+
+      ':hover': {
+        color: hoverColor ?? theme.colors.primaryColor,
+        '::after': {
+          background:
+            hoverBackground ?? darker
+              ? theme.colors.innerHoverBackground
+              : theme.colors.hoverBackground,
+        },
+        ...(hoverStyle ?? {}),
+      },
+    };
+  }
+);
+
+export const StyledTextButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+      'bold',
+    ].includes(prop);
+  },
+})<
+  Pick<
+    ButtonProps,
+    | 'size'
+    | 'disabled'
+    | 'hoverBackground'
+    | 'hoverColor'
+    | 'hoverStyle'
+    | 'shape'
+    | 'type'
+    | 'bold'
+  >
+>(
+  ({
+    theme,
+    size = 'default',
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+    bold = false,
+    shape = 'default',
+    // TODO: Implement type
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    type = 'default',
+  }) => {
+    const { fontSize, borderRadius, padding, height } = getSize(size);
+    console.log('size', size, height);
+
+    return {
+      height,
+      paddingLeft: padding,
+      paddingRight: padding,
+      ...displayInlineFlex('flex-start', 'center'),
+      position: 'relative',
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      transition: 'background .15s',
+      // TODO: Implement circle shape
+      borderRadius: shape === 'default' ? borderRadius : height / 2,
+      fontSize,
+      fontWeight: bold ? '500' : '400',
+
+      ':hover': {
+        color: hoverColor ?? theme.colors.primaryColor,
+        background: hoverBackground ?? theme.colors.hoverBackground,
+        ...(hoverStyle ?? {}),
+      },
+    };
+  }
+);
+
+export const StyledButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+      'type',
+      'bold',
+    ].includes(prop);
+  },
+})<
+  Pick<
+    ButtonProps,
+    | 'size'
+    | 'disabled'
+    | 'hoverBackground'
+    | 'hoverColor'
+    | 'hoverStyle'
+    | 'shape'
+    | 'type'
+    | 'bold'
+  >
+>(
+  ({
+    theme,
+    size = 'default',
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+    bold = false,
+    shape = 'default',
+    type = 'default',
+  }) => {
+    const { fontSize, borderRadius, padding, height } = getSize(size);
+
+    return {
+      height,
+      paddingLeft: padding,
+      paddingRight: padding,
+      border: '1px solid',
+      ...displayInlineFlex('flex-start', 'center'),
+      position: 'relative',
+      // TODO: disabled color is not decided
+      ...(disabled
+        ? {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            color: theme.colors.borderColor,
+          }
+        : {}),
+      transition: 'background .15s',
+      // TODO: Implement circle shape
+      borderRadius: shape === 'default' ? borderRadius : height / 2,
+      fontSize,
+      fontWeight: bold ? '500' : '400',
+      '.affine-button-icon': {
+        color: theme.colors.iconColor,
+      },
+      '>span': {
+        marginLeft: '5px',
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...getButtonColors(theme, type, {
+        hoverBackground,
+        hoverColor,
+        hoverStyle,
+      }),
+
+      // TODO: disabled hover should be implemented
+      //
+      // ':hover': {
+      //   color: hoverColor ?? theme.colors.primaryColor,
+      //   background: hoverBackground ?? theme.colors.hoverBackground,
+      //   '.affine-button-icon':{
+      //
+      //   }
+      //   ...(hoverStyle ?? {}),
+      // },
+    };
+  }
+);
--- a/packages/app/src/ui/button/utils.ts
+++ b/packages/app/src/ui/button/utils.ts
@@ -0,0 +1,104 @@
+import { AffineTheme } from '@/styles';
+import {
+  SIZE_SMALL,
+  SIZE_MIDDLE,
+  SIZE_DEFAULT,
+  ButtonProps,
+} from './interface';
+
+// TODO: Designer is not sure about the size, Now, is just use default size
+export const SIZE_CONFIG = {
+  [SIZE_SMALL]: {
+    iconSize: 16,
+    fontSize: 16,
+    borderRadius: 6,
+    height: 26,
+    padding: 24,
+  },
+  [SIZE_MIDDLE]: {
+    iconSize: 20,
+    fontSize: 16,
+    borderRadius: 6,
+    height: 32,
+    padding: 24,
+  },
+  [SIZE_DEFAULT]: {
+    iconSize: 24,
+    fontSize: 16,
+    height: 38,
+    padding: 24,
+    borderRadius: 6,
+  },
+} as const;
+
+export const getSize = (
+  size: typeof SIZE_SMALL | typeof SIZE_MIDDLE | typeof SIZE_DEFAULT
+) => {
+  return SIZE_CONFIG[size];
+};
+
+export const getButtonColors = (
+  theme: AffineTheme,
+  type: ButtonProps['type'],
+  extend?: {
+    hoverBackground: ButtonProps['hoverBackground'];
+    hoverColor: ButtonProps['hoverColor'];
+    hoverStyle: ButtonProps['hoverStyle'];
+  }
+) => {
+  switch (type) {
+    case 'primary':
+      return {
+        background: theme.colors.primaryColor,
+        color: '#fff',
+        borderColor: theme.colors.primaryColor,
+        '.affine-button-icon': {
+          color: '#fff',
+        },
+      };
+    case 'warning':
+      return {
+        background: theme.colors.warningBackground,
+        color: theme.colors.warningColor,
+        borderColor: theme.colors.warningBackground,
+        '.affine-button-icon': {
+          color: theme.colors.warningColor,
+        },
+        ':hover': {
+          borderColor: theme.colors.warningColor,
+          color: extend?.hoverColor,
+          background: extend?.hoverBackground,
+          ...extend?.hoverStyle,
+        },
+      };
+    case 'danger':
+      return {
+        background: theme.colors.errorBackground,
+        color: theme.colors.errorColor,
+        borderColor: theme.colors.errorBackground,
+        '.affine-button-icon': {
+          color: theme.colors.errorColor,
+        },
+        ':hover': {
+          borderColor: theme.colors.errorColor,
+          color: extend?.hoverColor,
+          background: extend?.hoverBackground,
+          ...extend?.hoverStyle,
+        },
+      };
+    default:
+      return {
+        color: theme.colors.popoverColor,
+        borderColor: theme.colors.borderColor,
+        ':hover': {
+          borderColor: theme.colors.primaryColor,
+          color: extend?.hoverColor ?? theme.colors.primaryColor,
+          '.affine-button-icon': {
+            color: extend?.hoverColor ?? theme.colors.primaryColor,
+            background: extend?.hoverBackground,
+            ...extend?.hoverStyle,
+          },
+        },
+      };
+  }
+};
--- a/packages/app/src/ui/confirm/Confirm.tsx
+++ b/packages/app/src/ui/confirm/Confirm.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { Modal, ModalCloseButton, ModalProps } from '../modal';
+import {
+  StyledButtonWrapper,
+  StyledConfirmContent,
+  StyledConfirmTitle,
+  StyledModalWrapper,
+} from '@/ui/confirm/styles';
+import { Button } from '@/ui/button';
+export type ConfirmProps = {
+  title?: string;
+  content?: string;
+  confirmText?: string;
+  // TODO: Confirm button's color should depend on confirm type
+  confirmType?: 'primary' | 'warning' | 'danger';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+} & Omit<ModalProps, 'open' | 'children'>;
+
+export const Confirm = ({
+  title,
+  content,
+  confirmText,
+  confirmType,
+  onConfirm,
+  onCancel,
+}: ConfirmProps) => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Modal open={open}>
+      <StyledModalWrapper>
+        <ModalCloseButton
+          onClick={() => {
+            setOpen(false);
+            onCancel?.();
+          }}
+        />
+        <StyledConfirmTitle>{title}</StyledConfirmTitle>
+        <StyledConfirmContent>{content}</StyledConfirmContent>
+
+        <StyledButtonWrapper>
+          <Button
+            shape="round"
+            bold={true}
+            onClick={() => {
+              setOpen(false);
+              onCancel?.();
+            }}
+            style={{ marginRight: '24px' }}
+          >
+            Cancel
+          </Button>
+          <Button
+            type={confirmType}
+            shape="round"
+            bold={true}
+            onClick={() => {
+              setOpen(false);
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </Button>
+        </StyledButtonWrapper>
+      </StyledModalWrapper>
+    </Modal>
+  );
+};
+
+export default Confirm;
--- a/packages/app/src/ui/confirm/index.ts
+++ b/packages/app/src/ui/confirm/index.ts
@@ -0,0 +1 @@
+export * from './Confirm';
--- a/packages/app/src/ui/confirm/styles.ts
+++ b/packages/app/src/ui/confirm/styles.ts
@@ -0,0 +1,34 @@
+import { displayFlex, styled } from '@/styles';
+import { ModalWrapper } from '@/ui/modal';
+
+export const StyledModalWrapper = styled(ModalWrapper)(() => {
+  return {
+    width: '460px',
+    padding: '46px 60px 32px',
+  };
+});
+
+export const StyledConfirmTitle = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.h6,
+    fontWeight: 600,
+    textAlign: 'center',
+    color: theme.colors.popoverColor,
+  };
+});
+
+export const StyledConfirmContent = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.base,
+    textAlign: 'center',
+    marginTop: '12px',
+    color: theme.colors.textColor,
+  };
+});
+
+export const StyledButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    marginTop: '32px',
+  };
+});
--- a/packages/app/src/ui/divider/index.ts
+++ b/packages/app/src/ui/divider/index.ts
@@ -0,0 +1,8 @@
+import MuiDivider from '@mui/material/Divider';
+import { styled } from '@/styles';
+
+export const Divider = styled(MuiDivider)(({ theme }) => {
+  return {
+    borderColor: theme.colors.borderColor,
+  };
+});
--- a/packages/app/src/ui/empty/Empty.tsx
+++ b/packages/app/src/ui/empty/Empty.tsx
@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { EmptySVG } from './EmptySVG';
+import { styled } from '@/styles';
+
+export type ContentProps = {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  fontSize?: CSSProperties['fontSize'];
+};
+export const Empty = styled(EmptySVG)<ContentProps>(
+  ({ fontSize, width, height }) => {
+    return {
+      width,
+      height,
+      fontSize,
+    };
+  }
+);
+
+export default Empty;
--- a/packages/app/src/ui/empty/EmptySVG.tsx
+++ b/packages/app/src/ui/empty/EmptySVG.tsx
@@ -0,0 +1,87 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export const EmptySVG = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      width="330"
+      height="330"
+      viewBox="0 0 330 330"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M210.87 30.7563C211.137 30.8637 211.424 30.9174 211.711 30.9141C212 30.9108 212.285 30.8507 212.549 30.7374C212.815 30.624 213.056 30.4595 213.257 30.2533C213.459 30.047 213.617 29.803 213.724 29.5353C214.896 26.5818 219.499 23.6118 224.202 22.7703C226.561 22.3413 230.95 22.1268 233.854 25.3443C234.1 25.637 234.417 25.8613 234.775 25.9951C235.131 26.1289 235.517 26.1677 235.895 26.108C236.273 26.0481 236.628 25.8916 236.927 25.6537C237.225 25.4158 237.458 25.1046 237.6 24.7503C240.735 17.1603 249.051 12.6888 257.053 12.6888C267.036 12.6888 270.963 16.9128 275.451 25.7238C275.583 25.9817 275.763 26.2112 275.982 26.3992C276.201 26.5873 276.457 26.7302 276.731 26.8199C277.007 26.9095 277.297 26.944 277.586 26.9216C277.873 26.8991 278.155 26.8203 278.413 26.6891C278.67 26.5581 278.899 26.3774 279.087 26.1576C279.275 25.9378 279.419 25.6831 279.508 25.4082C279.599 25.1331 279.633 24.8431 279.61 24.5546C279.587 24.2664 279.51 23.9852 279.378 23.7273C274.428 13.9593 269.131 8.28334 257.037 8.28334C252.61 8.22702 248.242 9.31167 244.355 11.4328C240.467 13.554 237.192 16.6403 234.844 20.3943C226.594 14.8668 212.668 20.5098 209.715 27.9348C209.504 28.4632 209.507 29.0525 209.723 29.5789C209.938 30.1052 210.35 30.5273 210.87 30.7563Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M304.606 307.362C300.993 310.86 296.356 313.764 295.201 313.302C291.159 311.834 286.638 305.828 280.846 305.828C277.183 305.828 273.85 308.567 270.946 310.992C269.788 312.08 268.476 312.992 267.052 313.698C265.518 313.83 262.96 312.18 260.683 310.794C251.229 305.036 249.232 305.745 241.84 310.794C239.481 312.444 236.89 314.292 235.026 314.375C228.013 314.738 218.526 298.634 207.949 298.782C195.574 298.782 186.499 316.338 173.827 317.279C171.055 317.444 166.732 313.979 162.508 310.53C146.652 297.66 141.834 297.528 124.905 308.369C120.796 310.992 116.655 313.682 114.114 313.55C111.573 313.418 108.487 311.669 105.369 309.986C95.1389 304.491 93.2579 304.92 85.7339 310.2C84.0839 311.372 80.6519 313.88 78.6554 313.781C74.3159 313.566 70.2734 306.075 63.2279 306.323C56.9909 306.587 53.4104 313.814 48.3779 314.028C44.8139 314.177 39.5339 308.682 37.0094 305.184C36.8404 304.95 36.6269 304.752 36.3812 304.6C36.1355 304.448 35.8624 304.348 35.5775 304.302C35.2925 304.255 35.0011 304.265 34.7203 304.333C34.4395 304.399 34.1745 304.521 33.9404 304.689C33.7064 304.858 33.5079 305.072 33.3564 305.318C33.205 305.564 33.1033 305.836 33.0573 306.121C33.0114 306.407 33.022 306.697 33.0886 306.978C33.1551 307.26 33.2764 307.524 33.4454 307.758C34.2374 308.864 41.3159 318.434 48.2954 318.434C55.2749 318.434 59.3504 310.893 63.5249 310.728C68.4749 310.464 72.3359 318.186 78.8204 318.186C84.7109 318.186 90.5849 310.893 94.4624 310.464C98.8679 309.986 107.332 317.526 113.932 317.939C121.654 318.434 132.709 306.026 142.477 304.986C148.054 304.392 154.324 309.474 159.852 313.946C164.043 317.361 169.422 322.014 174.256 321.668C181.846 321.09 188.133 315.86 193.66 311.256C206.761 300.333 209.418 300.762 221.05 310.877C225.852 315.068 230.406 319.127 235.339 318.78C240.834 318.5 247.45 311.075 250.717 311.075C252.912 311.075 255.667 312.807 258.489 314.49C266.92 319.605 268.224 318.912 273.834 314.325C280.434 308.946 281.407 308.864 287.859 313.698C289.669 315.206 291.685 316.446 293.848 317.378C298.452 319.028 305.712 312.428 307.807 310.464C308.228 310.06 308.469 309.504 308.481 308.922C308.492 308.337 308.269 307.775 307.865 307.354C307.461 306.933 306.905 306.692 306.322 306.681C305.738 306.671 305.176 306.892 304.755 307.296L304.606 307.362Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M312.988 178.827C311.255 165.495 304.738 156.849 293.089 152.427C286.122 149.581 278.324 149.536 271.327 152.304C264.329 155.071 258.67 160.436 255.535 167.277C250.09 164.621 241.097 165 235.949 169.769C232.088 173.333 229.052 176.154 229.052 183.596C229.026 183.901 229.064 184.208 229.161 184.498C229.26 184.789 229.418 185.054 229.625 185.28C229.833 185.507 230.085 185.688 230.365 185.81C230.646 185.934 230.948 185.998 231.255 185.998C231.562 185.998 231.864 185.934 232.144 185.81C232.425 185.688 232.677 185.507 232.885 185.28C233.091 185.054 233.25 184.789 233.349 184.498C233.446 184.208 233.484 183.901 233.458 183.596C233.458 178.085 235.289 176.385 238.985 172.953C243.127 169.109 251.806 169.241 255.007 172.145C255.271 172.379 255.586 172.547 255.929 172.635C256.27 172.722 256.629 172.727 256.973 172.648C257.317 172.569 257.637 172.409 257.906 172.181C258.176 171.952 258.386 171.663 258.521 171.336C264.164 157.41 277.744 151.355 291.521 156.602C297.907 159.027 306.619 164.043 308.615 179.454C308.729 179.999 309.044 180.481 309.498 180.802C309.95 181.126 310.509 181.266 311.06 181.195C311.613 181.124 312.118 180.847 312.474 180.421C312.832 179.994 313.016 179.449 312.988 178.893V178.827Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M306.108 287.991C302.989 290.961 297.264 294.921 294.904 293.997C290.68 292.347 285.565 286.935 279.873 286.935C276.424 286.935 274.197 289.113 272.217 291.027C267.976 295.152 267.151 294.739 262.317 290.812C259.677 288.684 256.674 286.258 253.159 286.143C245.157 285.829 241.807 294.789 235.29 294.393C228.145 293.964 216.81 276.919 206.134 276.936C193.809 276.936 183.793 294.838 171.484 293.848C159.555 292.891 151.453 277.48 140.134 278.751C134.128 279.427 127.858 284.262 122.331 288.535C118.288 291.637 113.734 295.135 111.408 295.02C106.458 294.706 102.184 285.351 92.2349 286.473C86.2949 287.166 85.0079 295.036 78.3089 294.855C74.1674 294.756 70.4879 286.885 63.4589 287.182C57.2549 287.446 52.9814 294.772 47.8334 294.987C44.3354 295.102 39.0224 289.41 36.4979 285.763C36.1675 285.281 35.6593 284.951 35.0853 284.844C34.5114 284.738 33.9184 284.864 33.4371 285.194C32.9558 285.524 32.6253 286.032 32.5186 286.606C32.4118 287.18 32.5375 287.773 32.8679 288.255C33.6764 289.426 41.0024 299.64 48.0149 299.376C55.0274 299.112 59.4164 291.769 63.6569 291.571C68.4584 291.34 71.9069 299.112 78.2429 299.26C86.8889 299.409 89.6279 291.208 92.7794 290.845C100.848 289.905 104.329 299.425 111.556 299.425C119.295 299.425 131.356 284.179 140.662 283.123C149.391 282.15 157.707 297.165 171.154 298.237C185.592 299.392 196.119 281.341 206.217 281.325C214.797 281.325 225.769 298.221 235.108 298.782C243.837 299.293 247.335 290.433 253.077 290.614C257.565 290.779 262.317 298.65 267.927 298.419C274.015 298.204 276.342 291.423 280.071 291.423C283.8 291.423 288.964 296.373 293.469 298.155C299.277 300.465 307.708 292.809 309.342 291.258C309.551 291.058 309.718 290.82 309.835 290.555C309.952 290.291 310.017 290.007 310.023 289.718C310.03 289.429 309.98 289.142 309.876 288.872C309.772 288.603 309.616 288.357 309.416 288.147C309.216 287.938 308.979 287.771 308.715 287.654C308.449 287.537 308.165 287.472 307.876 287.466C307.588 287.459 307.301 287.509 307.03 287.613C306.761 287.717 306.515 287.873 306.306 288.073L306.108 287.991Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M141.536 218.526C142.707 219.219 152.063 220.044 167.177 220.094C184.337 220.094 207.486 219.318 208.823 218.526C211.496 216.959 211.545 201.284 211.1 191.945C210.275 174.818 213.113 173.217 207.354 173.267C205.44 173.267 202.833 173.267 202.272 174.471C201.711 175.676 201.86 178.349 200.094 178.629C199.599 178.629 189.584 178.299 177.374 178.299C165.164 178.299 150.743 178.712 150.264 178.629C148.499 178.349 148.713 175.725 148.07 174.471C147.426 173.217 144.902 173.283 143.004 173.267C137.262 173.267 140.084 174.653 139.259 191.945C138.813 201.3 138.863 216.959 141.536 218.526ZM200.457 184.536C202.107 184.536 202.833 184.536 202.487 198.842C202.487 200.822 202.487 206.201 202.487 208.445C202.371 211.431 201.794 211.943 200.49 211.745C199.451 211.596 198.609 211.629 198.411 208.28C198.213 204.93 198.675 198.099 198.692 195.08C198.675 187.704 198.081 184.569 200.457 184.536ZM185.607 188.034C185.805 184.734 186.663 184.734 187.686 184.569C190.442 184.157 189.501 187.721 189.732 197.472C190.079 211.794 189.336 211.811 187.686 211.778C185.327 211.778 185.921 208.61 185.888 201.152C185.921 198.215 185.459 191.4 185.657 188.1L185.607 188.034ZM172.803 195.228C172.803 187.77 172.803 184.536 175.08 184.536C177.357 184.536 177.341 184.949 177.011 199.271C177.011 201.267 177.011 205.673 177.011 207.917C176.912 210.903 176.598 211.778 175.097 211.745C174.09 211.745 173.298 211.629 173.1 208.28C172.902 204.93 172.853 198.165 172.853 195.228H172.803ZM162.194 184.536C163.844 184.536 164.57 184.536 164.223 198.842C164.223 200.822 164.223 206.201 164.223 208.445C164.124 211.431 163.53 211.943 162.243 211.745C161.204 211.596 160.346 211.629 160.164 208.28C159.983 204.93 160.428 198.099 160.428 195.08C160.461 187.704 159.867 184.569 162.243 184.536H162.194ZM147.344 188.034C147.542 184.734 148.4 184.734 149.423 184.569C150.726 184.371 151.32 184.883 151.419 187.869C151.419 190.113 151.419 195.492 151.419 197.472C151.766 211.794 151.04 211.811 149.39 211.778C147.014 211.778 147.608 208.61 147.591 201.152C147.707 198.215 147.245 191.4 147.443 188.1L147.344 188.034Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M41.8281 40.7726C42.0619 40.9421 42.3269 41.0638 42.6079 41.1307C42.8889 41.1975 43.1803 41.2082 43.4654 41.1622C43.7506 41.1163 44.0238 41.0145 44.2695 40.8627C44.5152 40.7109 44.7284 40.5121 44.8971 40.2776C49.3521 34.1066 53.7906 30.7406 64.3176 30.9221C70.3731 30.9221 75.2076 34.4861 79.5636 41.9276C79.7126 42.1819 79.9115 42.4033 80.1481 42.579C80.3845 42.7548 80.6541 42.881 80.9406 42.9503C81.2268 43.0196 81.5243 43.0305 81.8151 42.9825C82.1058 42.9343 82.3838 42.828 82.6326 42.6701C91.1961 37.2746 97.6146 38.5781 103.472 46.9271C103.809 47.4041 104.322 47.7277 104.897 47.8267C105.473 47.9257 106.064 47.792 106.541 47.4551C107.018 47.1182 107.342 46.6055 107.441 46.03C107.54 45.4545 107.406 44.8631 107.069 44.3861C100.304 34.7501 91.9386 32.5391 82.2036 37.7861C77.2536 30.2621 71.4621 26.5496 64.3671 26.4671C52.0416 26.3516 46.3821 30.6416 41.2671 37.6541C41.0931 37.8935 40.9693 38.1658 40.9032 38.4542C40.837 38.7428 40.8299 39.0418 40.8824 39.333C40.9347 39.6244 41.0456 39.9021 41.2081 40.1496C41.3706 40.3969 41.5815 40.6089 41.8281 40.7726Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M35.5576 130.201C35.8405 130.249 36.1297 130.239 36.409 130.175C36.6884 130.11 36.9521 129.99 37.185 129.823C37.4182 129.656 37.6159 129.444 37.767 129.201C37.918 128.957 38.0194 128.686 38.0656 128.403C39.1381 122.232 43.2631 118.008 50.6881 115.533C56.2486 113.685 69.2671 116.226 73.0786 125.73C73.21 126.064 73.4214 126.36 73.6939 126.593C73.9665 126.826 74.2921 126.989 74.6422 127.067C74.9923 127.145 75.3561 127.137 75.702 127.042C76.0478 126.946 76.3651 126.768 76.6262 126.522C78.2762 125.004 81.4442 124.789 84.2492 126.01C86.0864 126.811 87.6333 128.157 88.6811 129.865C89.7286 131.574 90.2263 133.563 90.1066 135.564C90.0801 135.869 90.1174 136.177 90.216 136.467C90.3149 136.757 90.4728 137.023 90.6799 137.249C90.8869 137.475 91.1387 137.655 91.4192 137.779C91.6999 137.902 92.0028 137.966 92.3094 137.966C92.6158 137.966 92.9189 137.902 93.1994 137.779C93.4799 137.655 93.7317 137.475 93.9388 137.249C94.146 137.023 94.3039 136.757 94.4026 136.467C94.5013 136.177 94.5386 135.869 94.5122 135.564C94.5122 123.766 83.2096 118.503 76.0156 121.737C70.3726 111.837 56.7271 108.883 49.3021 111.358C41.0521 114.097 36.1021 118.899 34.1716 125.664C30.6586 125.663 27.2151 126.641 24.2276 128.489C21.2399 130.337 18.8268 132.981 17.2591 136.125C17.0565 136.64 17.0542 137.212 17.2525 137.728C17.451 138.244 17.8358 138.667 18.331 138.914C18.8261 139.16 19.3957 139.213 19.9274 139.06C20.459 138.907 20.9139 138.56 21.2026 138.088C22.4829 135.448 24.552 133.271 27.1237 131.858C29.6954 130.445 32.6426 129.866 35.5576 130.201Z"
+        fill="#6880FF"
+      />
+      <path
+        d="M136.191 84.4309C139.491 82.1209 137.973 68.1949 135.746 67.2214C131.489 65.3404 125.598 66.0499 123.948 68.0299C122.678 69.5809 123.222 81.9064 124.278 84.0184C125.648 86.7574 133.073 86.5924 136.191 84.4309ZM127.05 70.5709C129.15 69.9071 131.375 69.7378 133.551 70.0759C134.305 73.6246 134.339 77.2886 133.65 80.8504C129.129 81.9889 127.859 81.5104 127.628 81.3949C126.836 79.7944 126.308 72.4354 127.05 70.5709Z"
+        fill="#001434"
+      />
+      <path
+        d="M265.007 242.551C264.462 238.74 260.057 239.631 260.519 241.726C261.195 245.026 260.832 247.6 257.961 249.531C256.889 247.27 255.371 243.591 253.919 239.928C259.232 237.997 259.776 236.628 258.869 235.374C257.961 234.12 256.641 234.054 252.368 235.803C252.203 235.374 252.054 234.961 251.889 234.549C254.546 232.074 252.285 225.82 248.325 225.738C241.346 224.962 240.57 236.743 247.88 236.413C248.028 236.776 248.16 237.139 248.325 237.535C245.685 238.905 242.105 238.542 242.732 241.842C244.53 244.845 246.197 242.716 249.926 241.627C251.262 245.026 252.731 248.574 253.886 251.049C251.13 251.527 248.936 250.702 246.081 249.613C245.548 249.462 244.976 249.516 244.481 249.765C243.986 250.016 243.601 250.443 243.406 250.961C243.212 251.481 243.218 252.055 243.426 252.57C243.634 253.083 244.028 253.501 244.53 253.738C248.936 255.388 252.912 256.411 257.73 254.58C260.21 253.821 262.324 252.174 263.665 249.955C265.008 247.736 265.485 245.101 265.007 242.551Z"
+        fill="#001434"
+      />
+      <path
+        d="M84.513 217.799C82.3845 221.594 88.539 224.663 89.793 220.456C91.047 216.248 86.196 214.73 84.513 217.799Z"
+        fill="#001434"
+      />
+      <path
+        d="M110.549 94.9242C126.257 97.0362 142.312 90.7497 152.806 97.9932C146.849 108.9 160.214 116.77 170.263 114.345C170.378 118.833 170.263 125.449 170.147 128.716C159.076 127.693 163.201 143.566 170.147 145.315C168.151 153.004 180.509 152.295 175.823 158.713C174.591 158.341 173.273 158.376 172.061 158.812C171.616 158.481 171.293 158.012 171.141 157.478C170.987 156.944 171.015 156.375 171.22 155.859C172.078 152.823 167.095 152.559 166.484 156.238C166.366 157.04 166.425 157.858 166.658 158.634C166.892 159.41 167.295 160.124 167.837 160.726C161.56 164.513 155.65 168.877 150.182 173.761C148.532 170.181 138.22 170.181 137.329 174.355C135.299 183.282 135.299 219.796 140.414 220.423C146.107 223.492 206.843 222.255 209.945 220.423C215.06 219.796 215.093 188.1 213.064 174.355C212.305 169.224 201.299 170.164 200.078 174.075C194.145 168.511 187.423 163.852 180.13 160.248C184.915 149.523 173.332 150.249 174.536 145.398C181.351 145.249 182.588 137.148 181.697 131.373C181.07 128.799 177.688 128.683 174.553 128.568C174.652 125.07 174.784 118.222 174.652 113.718C184.552 109.164 191.152 116.754 200.392 116.077C226.247 114.163 219.961 107.448 202.553 93.3897C211.318 93.7334 220.053 92.1566 228.145 88.7697C242.995 99.6597 279.757 95.8812 249.859 77.8962C254.974 74.1672 258.587 68.3922 252.862 65.2242C249.413 63.3267 269.081 40.9032 254.512 38.5107C228.112 34.2372 230.29 63.5412 206.827 60.6042C213.097 55.2252 217.255 49.4007 214.862 46.2492C213.014 43.7742 206.86 43.2792 196.481 43.4937C184.403 43.7577 166.336 54.0207 156.997 58.3437C132.973 55.5222 121.109 57.0732 112.595 59.2347C98.0425 62.9307 86.7565 71.6757 86.4265 79.6452C86.1295 85.7997 92.779 91.5912 110.549 94.9242ZM200.441 180.807C203.51 180.196 202.834 177.012 204.154 175.725C204.821 175.223 205.622 174.934 206.456 174.896C207.289 174.857 208.114 175.071 208.823 175.51C212.123 178.695 209.962 213.625 207.635 216.562C205.391 217.701 148.235 218.625 142.774 216.661C140.414 214.038 139.474 180.097 141.553 175.51C142.081 174.306 144.77 175.411 146.206 175.725C147.856 181.434 147.41 180.84 156.106 180.675C167.656 180.345 189.749 180.576 200.441 180.807ZM196.118 176.368C185.674 175.972 164.653 176.104 153.73 176.368C171.962 159.819 177.572 160.132 196.118 176.368ZM161.336 107.992C156.947 110.418 154.225 102.102 156.865 99.8577C160.742 101.194 165.94 103.719 161.336 107.992ZM177.539 133.188C178.183 139.425 175.378 142.428 170.444 140.86C168.737 138.778 167.763 136.192 167.672 133.501C170.928 132.907 174.253 132.801 177.539 133.188ZM165.346 110.187C166.648 108.612 167.39 106.651 167.458 104.61C170.642 106.012 173.86 107.431 176.912 108.751C173.154 109.823 169.253 110.307 165.346 110.187ZM202.669 98.9997C218.608 111.507 215.159 109.939 200.557 111.622C187.06 110.649 178.645 103.834 163.91 98.1912C153.763 92.3832 141.305 91.5912 143.896 85.1892C144.803 82.9617 153.796 81.8892 163.135 81.8892C177.638 81.8892 180.014 83.0937 183.248 85.3047C187.06 87.9942 195.821 93.7362 202.669 98.9997ZM255.37 87.4497C256.541 88.3737 254.116 89.2812 252.631 89.5617C239.992 91.8552 228.805 85.0242 219.086 78.1107C217.981 77.3187 218.179 76.6092 219.532 76.4607C228.359 75.8502 236.362 75.7017 240.751 77.6322C245.831 80.5857 250.714 83.8651 255.37 87.4497ZM175.196 54.2847C183.149 50.7702 188.858 47.8497 196.531 47.8497C210.572 48.2127 213.476 47.0247 207.635 53.7237C199.039 64.1847 193.247 60.3237 165.841 58.6737C168.844 57.2712 172.292 55.6212 175.196 54.3342V54.2847ZM92.8615 75.1737C96.013 75.9822 105.665 77.7312 110.912 76.2957C114.344 75.3552 113.734 70.8672 113.354 69.9762C112.777 68.6232 105.731 68.6727 100.88 68.8707C111.605 60.3897 134.557 60.3732 157.228 62.5842C180.872 64.8942 207.338 67.7487 219.301 64.0857C227.551 61.5612 231.907 52.2717 239.596 46.8267C243.82 43.8402 246.047 42.9822 252.565 43.6587C259.082 44.3352 240.206 63.9372 249.1 69.0687C252.796 71.2137 247.318 74.1507 246.014 75.3057C242.252 72.8802 239.315 71.9067 222.914 72.6327C216.314 72.9297 213.014 73.5567 212.173 75.5532C211.331 77.5497 213.179 80.3877 223.063 86.0142C206.464 91.3437 196.877 89.8092 185.113 81.3612C177.803 76.1472 151.981 77.8632 144.308 79.8762C143.292 80.1598 142.358 80.6834 141.585 81.4028C140.812 82.1222 140.223 83.0165 139.867 84.0106C139.512 85.0047 139.4 86.0696 139.541 87.1159C139.682 88.1622 140.072 89.1594 140.678 90.0237C132.791 90.5022 117.232 91.3932 111.127 90.5517C100.649 89.0997 84.595 83.0607 92.8615 75.1737Z"
+        fill="#001434"
+      />
+      <path
+        d="M287.233 215.622C285.352 213.741 282.398 212.982 277.333 213.13C265.403 213.576 243.854 212.668 233.872 213.559C224.599 213.361 224.203 226.38 218.444 230.241C196.186 230.884 146.356 229.696 117.992 229.944C118.091 211.546 118.141 211.299 118.454 191.994C126.704 192.736 127.084 187.044 126.704 179.685C126.44 171.649 127.892 166.732 118.619 167.128C118.801 161.667 113.669 157.624 107.548 158.416C107.548 156.766 107.465 154.737 107.399 152.691C113.306 155.512 122.084 163.449 120.863 145.348C120.863 128.98 114.263 135.036 107.152 140.91C107.071 138.936 107.171 136.959 107.449 135.003C107.547 134.453 107.433 133.887 107.13 133.417C106.828 132.948 106.359 132.611 105.818 132.473C105.277 132.335 104.704 132.407 104.214 132.674C103.723 132.941 103.352 133.384 103.175 133.914C102.334 135.976 102.994 151.47 103.175 158.35C95.0572 157.888 85.0252 159.126 85.5037 167.937C85.6852 171.319 85.8667 188.347 85.9987 194.551C72.7987 194.98 56.3812 191.251 57.3217 204.897C56.0915 204.913 54.8697 205.103 53.6917 205.458C51.6787 206.613 52.7677 209.451 57.1402 209.302C57.0082 214.78 57.1402 222.073 57.4042 229.581C56.1362 229.584 54.8733 229.739 53.6422 230.043C51.8602 231.016 52.2562 234.267 57.5692 233.97C58.0312 245.817 58.5427 254.958 58.9222 261.871C59.3182 270.732 69.7297 273.141 74.6632 278.256C75.1138 278.736 75.4339 279.322 75.5928 279.96C75.7517 280.599 75.7441 281.267 75.5707 281.902C75.5082 282.204 75.3854 282.488 75.2095 282.74C75.0338 282.993 74.8086 283.207 74.5477 283.371C74.0552 283.536 73.6364 283.869 73.3652 284.313C73.0937 284.755 72.9871 285.28 73.0639 285.793C73.1408 286.308 73.396 286.778 73.7849 287.123C74.174 287.466 74.6718 287.664 75.1912 287.677C80.3887 286.836 81.5932 279.097 78.0292 275.418C74.2342 270.6 63.7402 268.125 63.3112 261.64C62.7502 251.625 62.2717 241.675 61.9747 233.97C109.033 234.3 175.247 235.059 218.725 234.696C223.823 234.168 225.193 229.564 226.447 226.974C229.252 221.116 230.456 218.427 234.433 218.014C244.25 217.156 265.783 218.014 277.547 217.602C283.223 217.701 285.319 217.602 284.807 222.552C286.21 231.825 278.768 253.803 266.789 260.848C244.894 273.735 261.988 289.987 261.097 279.18C256.147 267.828 276.442 262.911 280.897 252.631C288.965 238.276 291.539 225.159 287.233 215.622ZM118.669 171.468C120.319 171.468 121.457 171.369 121.82 171.715C123.338 173.233 122.117 178.464 122.233 181.153C122.084 185.394 123.404 188.1 118.471 187.522C118.57 181.5 118.652 175.378 118.669 171.468ZM115.864 139.54C116.468 143.711 116.535 147.942 116.062 152.13C112.91 150.97 109.972 149.298 107.366 147.18C109.667 144.097 112.555 141.501 115.864 139.54ZM113.537 229.944C94.3972 230.109 80.7682 229.581 61.6777 229.498C61.3807 220.699 61.2872 213.922 61.3972 209.17C78.0127 208.774 98.3737 209.797 113.735 209.17C113.653 217.123 113.554 218.245 113.537 229.944ZM113.851 204.765C100.469 205.392 77.4517 204.385 61.6942 204.765C61.1002 194.65 76.5442 198.973 88.2427 198.858C101.063 198.742 115.501 194.271 113.851 204.765ZM114.032 195.112C106.459 192.868 103.258 194.881 90.3547 194.452C90.2227 188.364 90.1567 171.171 89.8432 167.871C89.4307 163.284 94.6447 162.294 98.7367 162.822C102.829 163.35 113.339 159.522 114.148 167.145C107.036 167.541 99.8917 166.435 97.6477 171.468C96.8062 173.283 97.1527 175.857 97.2352 179.718C97.3177 183.579 96.9052 186.054 97.5652 187.968C99.5122 193.545 106.046 192.142 114.164 191.994C114.032 193.05 113.961 194.089 113.95 195.112H114.032ZM114.148 187.506C110.584 187.242 104.776 188.166 101.822 187.39C101.822 170.89 97.1032 171.996 114.346 171.55C114.247 175.461 114.164 181.582 114.065 187.506H114.148Z"
+        fill="#001434"
+      />
+      <path
+        d="M71.2809 216.249C66.9084 216.48 67.1723 221.529 70.5383 222.107C74.8283 222.849 75.6699 216.035 71.2809 216.249Z"
+        fill="#001434"
+      />
+      <path
+        d="M106.259 219.978C106.414 219.627 106.495 219.247 106.498 218.863C106.501 218.478 106.425 218.097 106.275 217.743C106.126 217.388 105.905 217.069 105.627 216.802C105.349 216.536 105.02 216.33 104.66 216.196C104.299 216.063 103.915 216.003 103.532 216.023C103.148 216.043 102.772 216.142 102.427 216.312C102.082 216.482 101.776 216.721 101.527 217.013C101.278 217.307 101.091 217.647 100.979 218.015C99.6752 222.173 105.351 223.856 106.259 219.978Z"
+        fill="#001434"
+      />
+      <path
+        d="M114.065 248.34C97.9446 255.815 117.365 275.664 125.714 261.54C126.437 259.846 126.664 257.981 126.37 256.163C126.077 254.344 125.274 252.645 124.055 251.264C122.836 249.883 121.251 248.875 119.483 248.358C117.715 247.84 115.836 247.834 114.065 248.34ZM121.606 259.989C119.527 263.289 110.93 262.382 112.696 255.435C114.544 248.918 124.889 253.901 121.606 259.989Z"
+        fill="#001434"
+      />
+      <path
+        d="M206.565 248.524C196.285 251.428 200.278 267.977 209.452 266.591C224.236 266.129 219.699 244.465 206.565 248.524ZM213.907 259.694C211.696 263.918 203.463 263.242 204.964 255.866C206.862 249.151 217.108 253.523 213.907 259.694Z"
+        fill="#001434"
+      />
+      <path
+        d="M144.408 248.473C135.877 249.463 136.158 267.299 147.015 266.623C160.545 266.953 158.268 244.876 144.408 248.473ZM150.76 260.699C144.886 266.573 138.567 255.238 145.579 252.779C150.348 251.014 153.78 257.548 150.76 260.699Z"
+        fill="#001434"
+      />
+      <path
+        d="M185.739 253.062C181.581 244.581 164.784 248.112 168.43 260.173C171.912 270.981 190.969 266.097 185.739 253.062ZM181.185 259.992C168.843 268.077 170.295 246.165 181.614 254.629C182.038 255.477 182.223 256.424 182.147 257.37C182.071 258.315 181.739 259.223 181.185 259.992Z"
+        fill="#001434"
+      />
+    </SvgIcon>
+  );
+};
--- a/packages/app/src/ui/empty/emptyPage.svg
+++ b/packages/app/src/ui/empty/emptyPage.svg
@@ -0,0 +1,20 @@
+<svg width="330" height="330" viewBox="0 0 330 330" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M210.87 30.7563C211.137 30.8637 211.424 30.9174 211.711 30.9141C212 30.9108 212.285 30.8507 212.549 30.7374C212.815 30.624 213.056 30.4595 213.257 30.2533C213.459 30.047 213.617 29.803 213.724 29.5353C214.896 26.5818 219.499 23.6118 224.202 22.7703C226.561 22.3413 230.95 22.1268 233.854 25.3443C234.1 25.637 234.417 25.8613 234.775 25.9951C235.131 26.1289 235.517 26.1677 235.895 26.108C236.273 26.0481 236.628 25.8916 236.927 25.6537C237.225 25.4158 237.458 25.1046 237.6 24.7503C240.735 17.1603 249.051 12.6888 257.053 12.6888C267.036 12.6888 270.963 16.9128 275.451 25.7238C275.583 25.9817 275.763 26.2112 275.982 26.3992C276.201 26.5873 276.457 26.7302 276.731 26.8199C277.007 26.9095 277.297 26.944 277.586 26.9216C277.873 26.8991 278.155 26.8203 278.413 26.6891C278.67 26.5581 278.899 26.3774 279.087 26.1576C279.275 25.9378 279.419 25.6831 279.508 25.4082C279.599 25.1331 279.633 24.8431 279.61 24.5546C279.587 24.2664 279.51 23.9852 279.378 23.7273C274.428 13.9593 269.131 8.28334 257.037 8.28334C252.61 8.22702 248.242 9.31167 244.355 11.4328C240.467 13.554 237.192 16.6403 234.844 20.3943C226.594 14.8668 212.668 20.5098 209.715 27.9348C209.504 28.4632 209.507 29.0525 209.723 29.5789C209.938 30.1052 210.35 30.5273 210.87 30.7563Z" fill="#6880FF"/>
+<path d="M304.606 307.362C300.993 310.86 296.356 313.764 295.201 313.302C291.159 311.834 286.638 305.828 280.846 305.828C277.183 305.828 273.85 308.567 270.946 310.992C269.788 312.08 268.476 312.992 267.052 313.698C265.518 313.83 262.96 312.18 260.683 310.794C251.229 305.036 249.232 305.745 241.84 310.794C239.481 312.444 236.89 314.292 235.026 314.375C228.013 314.738 218.526 298.634 207.949 298.782C195.574 298.782 186.499 316.338 173.827 317.279C171.055 317.444 166.732 313.979 162.508 310.53C146.652 297.66 141.834 297.528 124.905 308.369C120.796 310.992 116.655 313.682 114.114 313.55C111.573 313.418 108.487 311.669 105.369 309.986C95.1389 304.491 93.2579 304.92 85.7339 310.2C84.0839 311.372 80.6519 313.88 78.6554 313.781C74.3159 313.566 70.2734 306.075 63.2279 306.323C56.9909 306.587 53.4104 313.814 48.3779 314.028C44.8139 314.177 39.5339 308.682 37.0094 305.184C36.8404 304.95 36.6269 304.752 36.3812 304.6C36.1355 304.448 35.8624 304.348 35.5775 304.302C35.2925 304.255 35.0011 304.265 34.7203 304.333C34.4395 304.399 34.1745 304.521 33.9404 304.689C33.7064 304.858 33.5079 305.072 33.3564 305.318C33.205 305.564 33.1033 305.836 33.0573 306.121C33.0114 306.407 33.022 306.697 33.0886 306.978C33.1551 307.26 33.2764 307.524 33.4454 307.758C34.2374 308.864 41.3159 318.434 48.2954 318.434C55.2749 318.434 59.3504 310.893 63.5249 310.728C68.4749 310.464 72.3359 318.186 78.8204 318.186C84.7109 318.186 90.5849 310.893 94.4624 310.464C98.8679 309.986 107.332 317.526 113.932 317.939C121.654 318.434 132.709 306.026 142.477 304.986C148.054 304.392 154.324 309.474 159.852 313.946C164.043 317.361 169.422 322.014 174.256 321.668C181.846 321.09 188.133 315.86 193.66 311.256C206.761 300.333 209.418 300.762 221.05 310.877C225.852 315.068 230.406 319.127 235.339 318.78C240.834 318.5 247.45 311.075 250.717 311.075C252.912 311.075 255.667 312.807 258.489 314.49C266.92 319.605 268.224 318.912 273.834 314.325C280.434 308.946 281.407 308.864 287.859 313.698C289.669 315.206 291.685 316.446 293.848 317.378C298.452 319.028 305.712 312.428 307.807 310.464C308.228 310.06 308.469 309.504 308.481 308.922C308.492 308.337 308.269 307.775 307.865 307.354C307.461 306.933 306.905 306.692 306.322 306.681C305.738 306.671 305.176 306.892 304.755 307.296L304.606 307.362Z" fill="#6880FF"/>
+<path d="M312.988 178.827C311.255 165.495 304.738 156.849 293.089 152.427C286.122 149.581 278.324 149.536 271.327 152.304C264.329 155.071 258.67 160.436 255.535 167.277C250.09 164.621 241.097 165 235.949 169.769C232.088 173.333 229.052 176.154 229.052 183.596C229.026 183.901 229.064 184.208 229.161 184.498C229.26 184.789 229.418 185.054 229.625 185.28C229.833 185.507 230.085 185.688 230.365 185.81C230.646 185.934 230.948 185.998 231.255 185.998C231.562 185.998 231.864 185.934 232.144 185.81C232.425 185.688 232.677 185.507 232.885 185.28C233.091 185.054 233.25 184.789 233.349 184.498C233.446 184.208 233.484 183.901 233.458 183.596C233.458 178.085 235.289 176.385 238.985 172.953C243.127 169.109 251.806 169.241 255.007 172.145C255.271 172.379 255.586 172.547 255.929 172.635C256.27 172.722 256.629 172.727 256.973 172.648C257.317 172.569 257.637 172.409 257.906 172.181C258.176 171.952 258.386 171.663 258.521 171.336C264.164 157.41 277.744 151.355 291.521 156.602C297.907 159.027 306.619 164.043 308.615 179.454C308.729 179.999 309.044 180.481 309.498 180.802C309.95 181.126 310.509 181.266 311.06 181.195C311.613 181.124 312.118 180.847 312.474 180.421C312.832 179.994 313.016 179.449 312.988 178.893V178.827Z" fill="#6880FF"/>
+<path d="M306.108 287.991C302.989 290.961 297.264 294.921 294.904 293.997C290.68 292.347 285.565 286.935 279.873 286.935C276.424 286.935 274.197 289.113 272.217 291.027C267.976 295.152 267.151 294.739 262.317 290.812C259.677 288.684 256.674 286.258 253.159 286.143C245.157 285.829 241.807 294.789 235.29 294.393C228.145 293.964 216.81 276.919 206.134 276.936C193.809 276.936 183.793 294.838 171.484 293.848C159.555 292.891 151.453 277.48 140.134 278.751C134.128 279.427 127.858 284.262 122.331 288.535C118.288 291.637 113.734 295.135 111.408 295.02C106.458 294.706 102.184 285.351 92.2349 286.473C86.2949 287.166 85.0079 295.036 78.3089 294.855C74.1674 294.756 70.4879 286.885 63.4589 287.182C57.2549 287.446 52.9814 294.772 47.8334 294.987C44.3354 295.102 39.0224 289.41 36.4979 285.763C36.1675 285.281 35.6593 284.951 35.0853 284.844C34.5114 284.738 33.9184 284.864 33.4371 285.194C32.9558 285.524 32.6253 286.032 32.5186 286.606C32.4118 287.18 32.5375 287.773 32.8679 288.255C33.6764 289.426 41.0024 299.64 48.0149 299.376C55.0274 299.112 59.4164 291.769 63.6569 291.571C68.4584 291.34 71.9069 299.112 78.2429 299.26C86.8889 299.409 89.6279 291.208 92.7794 290.845C100.848 289.905 104.329 299.425 111.556 299.425C119.295 299.425 131.356 284.179 140.662 283.123C149.391 282.15 157.707 297.165 171.154 298.237C185.592 299.392 196.119 281.341 206.217 281.325C214.797 281.325 225.769 298.221 235.108 298.782C243.837 299.293 247.335 290.433 253.077 290.614C257.565 290.779 262.317 298.65 267.927 298.419C274.015 298.204 276.342 291.423 280.071 291.423C283.8 291.423 288.964 296.373 293.469 298.155C299.277 300.465 307.708 292.809 309.342 291.258C309.551 291.058 309.718 290.82 309.835 290.555C309.952 290.291 310.017 290.007 310.023 289.718C310.03 289.429 309.98 289.142 309.876 288.872C309.772 288.603 309.616 288.357 309.416 288.147C309.216 287.938 308.979 287.771 308.715 287.654C308.449 287.537 308.165 287.472 307.876 287.466C307.588 287.459 307.301 287.509 307.03 287.613C306.761 287.717 306.515 287.873 306.306 288.073L306.108 287.991Z" fill="#6880FF"/>
+<path d="M141.536 218.526C142.707 219.219 152.063 220.044 167.177 220.094C184.337 220.094 207.486 219.318 208.823 218.526C211.496 216.959 211.545 201.284 211.1 191.945C210.275 174.818 213.113 173.217 207.354 173.267C205.44 173.267 202.833 173.267 202.272 174.471C201.711 175.676 201.86 178.349 200.094 178.629C199.599 178.629 189.584 178.299 177.374 178.299C165.164 178.299 150.743 178.712 150.264 178.629C148.499 178.349 148.713 175.725 148.07 174.471C147.426 173.217 144.902 173.283 143.004 173.267C137.262 173.267 140.084 174.653 139.259 191.945C138.813 201.3 138.863 216.959 141.536 218.526ZM200.457 184.536C202.107 184.536 202.833 184.536 202.487 198.842C202.487 200.822 202.487 206.201 202.487 208.445C202.371 211.431 201.794 211.943 200.49 211.745C199.451 211.596 198.609 211.629 198.411 208.28C198.213 204.93 198.675 198.099 198.692 195.08C198.675 187.704 198.081 184.569 200.457 184.536ZM185.607 188.034C185.805 184.734 186.663 184.734 187.686 184.569C190.442 184.157 189.501 187.721 189.732 197.472C190.079 211.794 189.336 211.811 187.686 211.778C185.327 211.778 185.921 208.61 185.888 201.152C185.921 198.215 185.459 191.4 185.657 188.1L185.607 188.034ZM172.803 195.228C172.803 187.77 172.803 184.536 175.08 184.536C177.357 184.536 177.341 184.949 177.011 199.271C177.011 201.267 177.011 205.673 177.011 207.917C176.912 210.903 176.598 211.778 175.097 211.745C174.09 211.745 173.298 211.629 173.1 208.28C172.902 204.93 172.853 198.165 172.853 195.228H172.803ZM162.194 184.536C163.844 184.536 164.57 184.536 164.223 198.842C164.223 200.822 164.223 206.201 164.223 208.445C164.124 211.431 163.53 211.943 162.243 211.745C161.204 211.596 160.346 211.629 160.164 208.28C159.983 204.93 160.428 198.099 160.428 195.08C160.461 187.704 159.867 184.569 162.243 184.536H162.194ZM147.344 188.034C147.542 184.734 148.4 184.734 149.423 184.569C150.726 184.371 151.32 184.883 151.419 187.869C151.419 190.113 151.419 195.492 151.419 197.472C151.766 211.794 151.04 211.811 149.39 211.778C147.014 211.778 147.608 208.61 147.591 201.152C147.707 198.215 147.245 191.4 147.443 188.1L147.344 188.034Z" fill="#6880FF"/>
+<path d="M41.8281 40.7726C42.0619 40.9421 42.3269 41.0638 42.6079 41.1307C42.8889 41.1975 43.1803 41.2082 43.4654 41.1622C43.7506 41.1163 44.0238 41.0145 44.2695 40.8627C44.5152 40.7109 44.7284 40.5121 44.8971 40.2776C49.3521 34.1066 53.7906 30.7406 64.3176 30.9221C70.3731 30.9221 75.2076 34.4861 79.5636 41.9276C79.7126 42.1819 79.9115 42.4033 80.1481 42.579C80.3845 42.7548 80.6541 42.881 80.9406 42.9503C81.2268 43.0196 81.5243 43.0305 81.8151 42.9825C82.1058 42.9343 82.3838 42.828 82.6326 42.6701C91.1961 37.2746 97.6146 38.5781 103.472 46.9271C103.809 47.4041 104.322 47.7277 104.897 47.8267C105.473 47.9257 106.064 47.792 106.541 47.4551C107.018 47.1182 107.342 46.6055 107.441 46.03C107.54 45.4545 107.406 44.8631 107.069 44.3861C100.304 34.7501 91.9386 32.5391 82.2036 37.7861C77.2536 30.2621 71.4621 26.5496 64.3671 26.4671C52.0416 26.3516 46.3821 30.6416 41.2671 37.6541C41.0931 37.8935 40.9693 38.1658 40.9032 38.4542C40.837 38.7428 40.8299 39.0418 40.8824 39.333C40.9347 39.6244 41.0456 39.9021 41.2081 40.1496C41.3706 40.3969 41.5815 40.6089 41.8281 40.7726Z" fill="#6880FF"/>
+<path d="M35.5576 130.201C35.8405 130.249 36.1297 130.239 36.409 130.175C36.6884 130.11 36.9521 129.99 37.185 129.823C37.4182 129.656 37.6159 129.444 37.767 129.201C37.918 128.957 38.0194 128.686 38.0656 128.403C39.1381 122.232 43.2631 118.008 50.6881 115.533C56.2486 113.685 69.2671 116.226 73.0786 125.73C73.21 126.064 73.4214 126.36 73.6939 126.593C73.9665 126.826 74.2921 126.989 74.6422 127.067C74.9923 127.145 75.3561 127.137 75.702 127.042C76.0478 126.946 76.3651 126.768 76.6262 126.522C78.2762 125.004 81.4442 124.789 84.2492 126.01C86.0864 126.811 87.6333 128.157 88.6811 129.865C89.7286 131.574 90.2263 133.563 90.1066 135.564C90.0801 135.869 90.1174 136.177 90.216 136.467C90.3149 136.757 90.4728 137.023 90.6799 137.249C90.8869 137.475 91.1387 137.655 91.4192 137.779C91.6999 137.902 92.0028 137.966 92.3094 137.966C92.6158 137.966 92.9189 137.902 93.1994 137.779C93.4799 137.655 93.7317 137.475 93.9388 137.249C94.146 137.023 94.3039 136.757 94.4026 136.467C94.5013 136.177 94.5386 135.869 94.5122 135.564C94.5122 123.766 83.2096 118.503 76.0156 121.737C70.3726 111.837 56.7271 108.883 49.3021 111.358C41.0521 114.097 36.1021 118.899 34.1716 125.664C30.6586 125.663 27.2151 126.641 24.2276 128.489C21.2399 130.337 18.8268 132.981 17.2591 136.125C17.0565 136.64 17.0542 137.212 17.2525 137.728C17.451 138.244 17.8358 138.667 18.331 138.914C18.8261 139.16 19.3957 139.213 19.9274 139.06C20.459 138.907 20.9139 138.56 21.2026 138.088C22.4829 135.448 24.552 133.271 27.1237 131.858C29.6954 130.445 32.6426 129.866 35.5576 130.201Z" fill="#6880FF"/>
+<path d="M136.191 84.4309C139.491 82.1209 137.973 68.1949 135.746 67.2214C131.489 65.3404 125.598 66.0499 123.948 68.0299C122.678 69.5809 123.222 81.9064 124.278 84.0184C125.648 86.7574 133.073 86.5924 136.191 84.4309ZM127.05 70.5709C129.15 69.9071 131.375 69.7378 133.551 70.0759C134.305 73.6246 134.339 77.2886 133.65 80.8504C129.129 81.9889 127.859 81.5104 127.628 81.3949C126.836 79.7944 126.308 72.4354 127.05 70.5709Z" fill="#001434"/>
+<path d="M265.007 242.551C264.462 238.74 260.057 239.631 260.519 241.726C261.195 245.026 260.832 247.6 257.961 249.531C256.889 247.27 255.371 243.591 253.919 239.928C259.232 237.997 259.776 236.628 258.869 235.374C257.961 234.12 256.641 234.054 252.368 235.803C252.203 235.374 252.054 234.961 251.889 234.549C254.546 232.074 252.285 225.82 248.325 225.738C241.346 224.962 240.57 236.743 247.88 236.413C248.028 236.776 248.16 237.139 248.325 237.535C245.685 238.905 242.105 238.542 242.732 241.842C244.53 244.845 246.197 242.716 249.926 241.627C251.262 245.026 252.731 248.574 253.886 251.049C251.13 251.527 248.936 250.702 246.081 249.613C245.548 249.462 244.976 249.516 244.481 249.765C243.986 250.016 243.601 250.443 243.406 250.961C243.212 251.481 243.218 252.055 243.426 252.57C243.634 253.083 244.028 253.501 244.53 253.738C248.936 255.388 252.912 256.411 257.73 254.58C260.21 253.821 262.324 252.174 263.665 249.955C265.008 247.736 265.485 245.101 265.007 242.551Z" fill="#001434"/>
+<path d="M84.513 217.799C82.3845 221.594 88.539 224.663 89.793 220.456C91.047 216.248 86.196 214.73 84.513 217.799Z" fill="#001434"/>
+<path d="M110.549 94.9242C126.257 97.0362 142.312 90.7497 152.806 97.9932C146.849 108.9 160.214 116.77 170.263 114.345C170.378 118.833 170.263 125.449 170.147 128.716C159.076 127.693 163.201 143.566 170.147 145.315C168.151 153.004 180.509 152.295 175.823 158.713C174.591 158.341 173.273 158.376 172.061 158.812C171.616 158.481 171.293 158.012 171.141 157.478C170.987 156.944 171.015 156.375 171.22 155.859C172.078 152.823 167.095 152.559 166.484 156.238C166.366 157.04 166.425 157.858 166.658 158.634C166.892 159.41 167.295 160.124 167.837 160.726C161.56 164.513 155.65 168.877 150.182 173.761C148.532 170.181 138.22 170.181 137.329 174.355C135.299 183.282 135.299 219.796 140.414 220.423C146.107 223.492 206.843 222.255 209.945 220.423C215.06 219.796 215.093 188.1 213.064 174.355C212.305 169.224 201.299 170.164 200.078 174.075C194.145 168.511 187.423 163.852 180.13 160.248C184.915 149.523 173.332 150.249 174.536 145.398C181.351 145.249 182.588 137.148 181.697 131.373C181.07 128.799 177.688 128.683 174.553 128.568C174.652 125.07 174.784 118.222 174.652 113.718C184.552 109.164 191.152 116.754 200.392 116.077C226.247 114.163 219.961 107.448 202.553 93.3897C211.318 93.7334 220.053 92.1566 228.145 88.7697C242.995 99.6597 279.757 95.8812 249.859 77.8962C254.974 74.1672 258.587 68.3922 252.862 65.2242C249.413 63.3267 269.081 40.9032 254.512 38.5107C228.112 34.2372 230.29 63.5412 206.827 60.6042C213.097 55.2252 217.255 49.4007 214.862 46.2492C213.014 43.7742 206.86 43.2792 196.481 43.4937C184.403 43.7577 166.336 54.0207 156.997 58.3437C132.973 55.5222 121.109 57.0732 112.595 59.2347C98.0425 62.9307 86.7565 71.6757 86.4265 79.6452C86.1295 85.7997 92.779 91.5912 110.549 94.9242ZM200.441 180.807C203.51 180.196 202.834 177.012 204.154 175.725C204.821 175.223 205.622 174.934 206.456 174.896C207.289 174.857 208.114 175.071 208.823 175.51C212.123 178.695 209.962 213.625 207.635 216.562C205.391 217.701 148.235 218.625 142.774 216.661C140.414 214.038 139.474 180.097 141.553 175.51C142.081 174.306 144.77 175.411 146.206 175.725C147.856 181.434 147.41 180.84 156.106 180.675C167.656 180.345 189.749 180.576 200.441 180.807ZM196.118 176.368C185.674 175.972 164.653 176.104 153.73 176.368C171.962 159.819 177.572 160.132 196.118 176.368ZM161.336 107.992C156.947 110.418 154.225 102.102 156.865 99.8577C160.742 101.194 165.94 103.719 161.336 107.992ZM177.539 133.188C178.183 139.425 175.378 142.428 170.444 140.86C168.737 138.778 167.763 136.192 167.672 133.501C170.928 132.907 174.253 132.801 177.539 133.188ZM165.346 110.187C166.648 108.612 167.39 106.651 167.458 104.61C170.642 106.012 173.86 107.431 176.912 108.751C173.154 109.823 169.253 110.307 165.346 110.187ZM202.669 98.9997C218.608 111.507 215.159 109.939 200.557 111.622C187.06 110.649 178.645 103.834 163.91 98.1912C153.763 92.3832 141.305 91.5912 143.896 85.1892C144.803 82.9617 153.796 81.8892 163.135 81.8892C177.638 81.8892 180.014 83.0937 183.248 85.3047C187.06 87.9942 195.821 93.7362 202.669 98.9997ZM255.37 87.4497C256.541 88.3737 254.116 89.2812 252.631 89.5617C239.992 91.8552 228.805 85.0242 219.086 78.1107C217.981 77.3187 218.179 76.6092 219.532 76.4607C228.359 75.8502 236.362 75.7017 240.751 77.6322C245.831 80.5857 250.714 83.8651 255.37 87.4497ZM175.196 54.2847C183.149 50.7702 188.858 47.8497 196.531 47.8497C210.572 48.2127 213.476 47.0247 207.635 53.7237C199.039 64.1847 193.247 60.3237 165.841 58.6737C168.844 57.2712 172.292 55.6212 175.196 54.3342V54.2847ZM92.8615 75.1737C96.013 75.9822 105.665 77.7312 110.912 76.2957C114.344 75.3552 113.734 70.8672 113.354 69.9762C112.777 68.6232 105.731 68.6727 100.88 68.8707C111.605 60.3897 134.557 60.3732 157.228 62.5842C180.872 64.8942 207.338 67.7487 219.301 64.0857C227.551 61.5612 231.907 52.2717 239.596 46.8267C243.82 43.8402 246.047 42.9822 252.565 43.6587C259.082 44.3352 240.206 63.9372 249.1 69.0687C252.796 71.2137 247.318 74.1507 246.014 75.3057C242.252 72.8802 239.315 71.9067 222.914 72.6327C216.314 72.9297 213.014 73.5567 212.173 75.5532C211.331 77.5497 213.179 80.3877 223.063 86.0142C206.464 91.3437 196.877 89.8092 185.113 81.3612C177.803 76.1472 151.981 77.8632 144.308 79.8762C143.292 80.1598 142.358 80.6834 141.585 81.4028C140.812 82.1222 140.223 83.0165 139.867 84.0106C139.512 85.0047 139.4 86.0696 139.541 87.1159C139.682 88.1622 140.072 89.1594 140.678 90.0237C132.791 90.5022 117.232 91.3932 111.127 90.5517C100.649 89.0997 84.595 83.0607 92.8615 75.1737Z" fill="#001434"/>
+<path d="M287.233 215.622C285.352 213.741 282.398 212.982 277.333 213.13C265.403 213.576 243.854 212.668 233.872 213.559C224.599 213.361 224.203 226.38 218.444 230.241C196.186 230.884 146.356 229.696 117.992 229.944C118.091 211.546 118.141 211.299 118.454 191.994C126.704 192.736 127.084 187.044 126.704 179.685C126.44 171.649 127.892 166.732 118.619 167.128C118.801 161.667 113.669 157.624 107.548 158.416C107.548 156.766 107.465 154.737 107.399 152.691C113.306 155.512 122.084 163.449 120.863 145.348C120.863 128.98 114.263 135.036 107.152 140.91C107.071 138.936 107.171 136.959 107.449 135.003C107.547 134.453 107.433 133.887 107.13 133.417C106.828 132.948 106.359 132.611 105.818 132.473C105.277 132.335 104.704 132.407 104.214 132.674C103.723 132.941 103.352 133.384 103.175 133.914C102.334 135.976 102.994 151.47 103.175 158.35C95.0572 157.888 85.0252 159.126 85.5037 167.937C85.6852 171.319 85.8667 188.347 85.9987 194.551C72.7987 194.98 56.3812 191.251 57.3217 204.897C56.0915 204.913 54.8697 205.103 53.6917 205.458C51.6787 206.613 52.7677 209.451 57.1402 209.302C57.0082 214.78 57.1402 222.073 57.4042 229.581C56.1362 229.584 54.8733 229.739 53.6422 230.043C51.8602 231.016 52.2562 234.267 57.5692 233.97C58.0312 245.817 58.5427 254.958 58.9222 261.871C59.3182 270.732 69.7297 273.141 74.6632 278.256C75.1138 278.736 75.4339 279.322 75.5928 279.96C75.7517 280.599 75.7441 281.267 75.5707 281.902C75.5082 282.204 75.3854 282.488 75.2095 282.74C75.0338 282.993 74.8086 283.207 74.5477 283.371C74.0552 283.536 73.6364 283.869 73.3652 284.313C73.0937 284.755 72.9871 285.28 73.0639 285.793C73.1408 286.308 73.396 286.778 73.7849 287.123C74.174 287.466 74.6718 287.664 75.1912 287.677C80.3887 286.836 81.5932 279.097 78.0292 275.418C74.2342 270.6 63.7402 268.125 63.3112 261.64C62.7502 251.625 62.2717 241.675 61.9747 233.97C109.033 234.3 175.247 235.059 218.725 234.696C223.823 234.168 225.193 229.564 226.447 226.974C229.252 221.116 230.456 218.427 234.433 218.014C244.25 217.156 265.783 218.014 277.547 217.602C283.223 217.701 285.319 217.602 284.807 222.552C286.21 231.825 278.768 253.803 266.789 260.848C244.894 273.735 261.988 289.987 261.097 279.18C256.147 267.828 276.442 262.911 280.897 252.631C288.965 238.276 291.539 225.159 287.233 215.622ZM118.669 171.468C120.319 171.468 121.457 171.369 121.82 171.715C123.338 173.233 122.117 178.464 122.233 181.153C122.084 185.394 123.404 188.1 118.471 187.522C118.57 181.5 118.652 175.378 118.669 171.468ZM115.864 139.54C116.468 143.711 116.535 147.942 116.062 152.13C112.91 150.97 109.972 149.298 107.366 147.18C109.667 144.097 112.555 141.501 115.864 139.54ZM113.537 229.944C94.3972 230.109 80.7682 229.581 61.6777 229.498C61.3807 220.699 61.2872 213.922 61.3972 209.17C78.0127 208.774 98.3737 209.797 113.735 209.17C113.653 217.123 113.554 218.245 113.537 229.944ZM113.851 204.765C100.469 205.392 77.4517 204.385 61.6942 204.765C61.1002 194.65 76.5442 198.973 88.2427 198.858C101.063 198.742 115.501 194.271 113.851 204.765ZM114.032 195.112C106.459 192.868 103.258 194.881 90.3547 194.452C90.2227 188.364 90.1567 171.171 89.8432 167.871C89.4307 163.284 94.6447 162.294 98.7367 162.822C102.829 163.35 113.339 159.522 114.148 167.145C107.036 167.541 99.8917 166.435 97.6477 171.468C96.8062 173.283 97.1527 175.857 97.2352 179.718C97.3177 183.579 96.9052 186.054 97.5652 187.968C99.5122 193.545 106.046 192.142 114.164 191.994C114.032 193.05 113.961 194.089 113.95 195.112H114.032ZM114.148 187.506C110.584 187.242 104.776 188.166 101.822 187.39C101.822 170.89 97.1032 171.996 114.346 171.55C114.247 175.461 114.164 181.582 114.065 187.506H114.148Z" fill="#001434"/>
+<path d="M71.2809 216.249C66.9084 216.48 67.1723 221.529 70.5383 222.107C74.8283 222.849 75.6699 216.035 71.2809 216.249Z" fill="#001434"/>
+<path d="M106.259 219.978C106.414 219.627 106.495 219.247 106.498 218.863C106.501 218.478 106.425 218.097 106.275 217.743C106.126 217.388 105.905 217.069 105.627 216.802C105.349 216.536 105.02 216.33 104.66 216.196C104.299 216.063 103.915 216.003 103.532 216.023C103.148 216.043 102.772 216.142 102.427 216.312C102.082 216.482 101.776 216.721 101.527 217.013C101.278 217.307 101.091 217.647 100.979 218.015C99.6752 222.173 105.351 223.856 106.259 219.978Z" fill="#001434"/>
+<path d="M114.065 248.34C97.9446 255.815 117.365 275.664 125.714 261.54C126.437 259.846 126.664 257.981 126.37 256.163C126.077 254.344 125.274 252.645 124.055 251.264C122.836 249.883 121.251 248.875 119.483 248.358C117.715 247.84 115.836 247.834 114.065 248.34ZM121.606 259.989C119.527 263.289 110.93 262.382 112.696 255.435C114.544 248.918 124.889 253.901 121.606 259.989Z" fill="#001434"/>
+<path d="M206.565 248.524C196.285 251.428 200.278 267.977 209.452 266.591C224.236 266.129 219.699 244.465 206.565 248.524ZM213.907 259.694C211.696 263.918 203.463 263.242 204.964 255.866C206.862 249.151 217.108 253.523 213.907 259.694Z" fill="#001434"/>
+<path d="M144.408 248.473C135.877 249.463 136.158 267.299 147.015 266.623C160.545 266.953 158.268 244.876 144.408 248.473ZM150.76 260.699C144.886 266.573 138.567 255.238 145.579 252.779C150.348 251.014 153.78 257.548 150.76 260.699Z" fill="#001434"/>
+<path d="M185.739 253.062C181.581 244.581 164.784 248.112 168.43 260.173C171.912 270.981 190.969 266.097 185.739 253.062ZM181.185 259.992C168.843 268.077 170.295 246.165 181.614 254.629C182.038 255.477 182.223 256.424 182.147 257.37C182.071 258.315 181.739 259.223 181.185 259.992Z" fill="#001434"/>
+</svg>
--- a/packages/app/src/ui/empty/index.ts
+++ b/packages/app/src/ui/empty/index.ts
@@ -0,0 +1 @@
+export * from './Empty';
--- a/packages/app/src/ui/input/Input.tsx
+++ b/packages/app/src/ui/input/Input.tsx
@@ -0,0 +1,55 @@
+import { InputHTMLAttributes, useEffect, useState } from 'react';
+import { StyledInput } from './style';
+
+type inputProps = {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: number;
+  maxLength?: number;
+  minLength?: number;
+  onChange?: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onBlur?: (e: any) => void;
+};
+
+export const Input = (props: inputProps) => {
+  const {
+    disabled,
+    value: valueProp,
+    placeholder,
+    maxLength,
+    minLength,
+    width = 260,
+    onChange,
+    onBlur,
+  } = props;
+  const [value, setValue] = useState<string>(valueProp || '');
+  const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
+    if (
+      (maxLength && e.target.value.length > maxLength) ||
+      (minLength && e.target.value.length < minLength)
+    )
+      return;
+    setValue(e.target.value);
+    onChange && onChange(e.target.value);
+  };
+  const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
+    onBlur && onBlur(e);
+  };
+  useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
+  return (
+    <StyledInput
+      value={value}
+      disabled={disabled}
+      placeholder={placeholder}
+      width={width}
+      maxLength={maxLength}
+      minLength={minLength}
+      onChange={handleChange}
+      onBlur={handleBlur}
+    ></StyledInput>
+  );
+};
--- a/packages/app/src/ui/input/index.ts
+++ b/packages/app/src/ui/input/index.ts
@@ -0,0 +1,3 @@
+export * from './Input';
+import { Input } from './Input';
+export default Input;
--- a/packages/app/src/ui/input/style.ts
+++ b/packages/app/src/ui/input/style.ts
@@ -0,0 +1,30 @@
+import { styled } from '@/styles';
+
+export const StyledInput = styled('input')<{
+  disabled?: boolean;
+  value?: string;
+  width: number;
+}>(({ theme, width, disabled }) => {
+  const fontWeight = 400;
+  const fontSize = '16px';
+  return {
+    width: `${width}px`,
+    lineHeight: '22px',
+    padding: '8px 12px',
+    fontWeight,
+    fontSize,
+    color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
+    border: `1px solid`,
+    borderColor: theme.colors.borderColor, // TODO: check out disableColor,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '10px',
+    '&::placeholder': {
+      fontWeight,
+      fontSize,
+      color: theme.colors.placeHolderColor,
+    },
+    '&:focus': {
+      borderColor: theme.colors.primaryColor,
+    },
+  };
+});
--- a/packages/app/src/ui/layout/Content.tsx
+++ b/packages/app/src/ui/layout/Content.tsx
@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+import { styled, textEllipsis } from '@/styles';
+
+// This component should be just used to be contained the text content
+export type ContentProps = {
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
+  align?: CSSProperties['textAlign'];
+  color?: CSSProperties['color'];
+  fontSize?: CSSProperties['fontSize'];
+  weight?: CSSProperties['fontWeight'];
+  lineHeight?: CSSProperties['lineHeight'];
+  ellipsis?: boolean;
+  lineNum?: number;
+  children: string;
+};
+
+export const Content = styled.div<ContentProps>(
+  ({
+    theme,
+    color,
+    fontSize,
+    weight,
+    lineHeight,
+    ellipsis,
+    lineNum,
+    width,
+    maxWidth,
+    align,
+  }) => {
+    return {
+      width,
+      maxWidth,
+      textAlign: align,
+      display: 'inline-block',
+      color: color ?? theme.colors.textColor,
+      fontSize: fontSize ?? theme.font.base,
+      fontWeight: weight ?? 400,
+      lineHeight: lineHeight ?? 1.5,
+      ...(ellipsis ? textEllipsis(lineNum) : {}),
+    };
+  }
+);
+
+export default Content;
--- a/packages/app/src/ui/layout/Wrapper.tsx
+++ b/packages/app/src/ui/layout/Wrapper.tsx
@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import { styled } from '@/styles';
+
+export type WrapperProps = {
+  display?: CSSProperties['display'];
+  flexDirection?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  wrap?: boolean;
+  flexShrink?: CSSProperties['flexShrink'];
+  flexGrow?: CSSProperties['flexGrow'];
+};
+
+// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
+export const Wrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return ![
+      'display',
+      'justifyContent',
+      'alignItems',
+      'wrap',
+      'flexDirection',
+      'flexShrink',
+      'flexGrow',
+    ].includes(prop);
+  },
+})<WrapperProps>(
+  ({
+    display = 'flex',
+    justifyContent = 'flex-start',
+    alignItems = 'center',
+    wrap = false,
+    flexDirection = 'row',
+    flexShrink = '0',
+    flexGrow = '0',
+  }) => {
+    return {
+      display,
+      justifyContent,
+      alignItems,
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+      flexDirection,
+      flexShrink,
+      flexGrow,
+    };
+  }
+);
+
+export default Wrapper;
--- a/packages/app/src/ui/layout/index.ts
+++ b/packages/app/src/ui/layout/index.ts
@@ -0,0 +1,2 @@
+export * from './Wrapper';
+export * from './Content';
--- a/packages/app/src/ui/menu/Menu.tsx
+++ b/packages/app/src/ui/menu/Menu.tsx
--- a/packages/app/src/ui/menu/MenuItem.tsx
+++ b/packages/app/src/ui/menu/MenuItem.tsx
@@ -0,0 +1,35 @@
+import {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { StyledMenuItem, StyledArrow } from './styles';
+
+export type IconMenuProps = PropsWithChildren<{
+  isDir?: boolean;
+  icon?: ReactElement;
+}> &
+  HTMLAttributes<HTMLButtonElement>;
+
+export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
+  ({ isDir = false, icon, children, ...props }, ref) => {
+    return (
+      <StyledMenuItem ref={ref} {...props}>
+        {icon &&
+          cloneElement(icon, {
+            width: 16,
+            height: 16,
+            style: {
+              marginRight: 14,
+            },
+          })}
+        {children}
+        {isDir ? <StyledArrow /> : null}
+      </StyledMenuItem>
+    );
+  }
+);
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;
--- a/packages/app/src/ui/menu/index.ts
+++ b/packages/app/src/ui/menu/index.ts
@@ -1,2 +1,3 @@
-export * from './menu';
-export { StyledMenuItem as MenuItem } from './styles';
+export * from './Menu';
+// export { StyledMenuItem as MenuItem } from './styles';
+export * from './MenuItem';
--- a/packages/app/src/ui/menu/styles.ts
+++ b/packages/app/src/ui/menu/styles.ts
@@ -1,5 +1,6 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import StyledPopperContainer from '../shared/Container';
+import { ArrowRightIcon } from '@blocksuite/icons';

 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
  return {
@@ -12,23 +13,32 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
  };
 });

-export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>(
-  ({ theme, popperVisible }) => {
-    return {
-      borderRadius: '5px',
-      padding: '0 14px',
+export const StyledArrow = styled(ArrowRightIcon)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+});

-      color: popperVisible
-        ? theme.colors.primaryColor
-        : theme.colors.popoverColor,
-      backgroundColor: popperVisible
-        ? theme.colors.hoverBackground
-        : 'transparent',
+export const StyledMenuItem = styled.button<{
+  isDir?: boolean;
+}>(({ theme, isDir = false }) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: '14px',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    color: theme.colors.popoverColor,
+    backgroundColor: 'transparent',

-      ':hover': {
-        color: theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
--- a/packages/app/src/ui/modal/Modal.tsx
+++ b/packages/app/src/ui/modal/Modal.tsx
@@ -0,0 +1,52 @@
+import Fade from '@mui/material/Fade';
+import { StyledModal, StyledBackdrop } from './styles';
+import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+
+const Backdrop = ({
+  open,
+  ...other
+}: {
+  open?: boolean;
+  className: string;
+}) => {
+  return (
+    <Fade in={open}>
+      <StyledBackdrop {...other} />
+    </Fade>
+  );
+};
+
+export type ModalProps = {
+  wrapperPosition?: ['top' | 'bottom' | 'center', 'left' | 'right' | 'center'];
+} & ModalUnstyledOwnProps;
+
+const transformConfig = {
+  top: 'flex-start',
+  bottom: 'flex-end',
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end',
+};
+
+export const Modal = (props: ModalProps) => {
+  const {
+    wrapperPosition = ['center', 'center'],
+    open,
+    children,
+    ...otherProps
+  } = props;
+  const [vertical, horizontal] = wrapperPosition;
+  return (
+    <StyledModal
+      {...otherProps}
+      open={open}
+      components={{ Backdrop }}
+      alignItems={transformConfig[vertical]}
+      justifyContent={transformConfig[horizontal]}
+    >
+      <Fade in={open}>{children}</Fade>
+    </StyledModal>
+  );
+};
+
+export default Modal;
--- a/packages/app/src/ui/modal/ModalCloseButton.tsx
+++ b/packages/app/src/ui/modal/ModalCloseButton.tsx
@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+import { CloseIcon } from '@blocksuite/icons';
+import { IconButton, IconButtonProps } from '@/ui/button';
+import { styled } from '@/styles';
+export type ModalCloseButtonProps = {
+  top?: number;
+  right?: number;
+} & Omit<IconButtonProps, 'children'> &
+  HTMLAttributes<HTMLButtonElement>;
+
+const StyledIconButton = styled(IconButton)<
+  Pick<ModalCloseButtonProps, 'top' | 'right'>
+>(({ top, right }) => {
+  return {
+    position: 'absolute',
+    top: top ?? 6,
+    right: right ?? 6,
+  };
+});
+
+export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => {
+  return (
+    <StyledIconButton {...props}>
+      <CloseIcon />
+    </StyledIconButton>
+  );
+};
+
+export default ModalCloseButton;
--- a/packages/app/src/ui/modal/ModalWrapper.tsx
+++ b/packages/app/src/ui/modal/ModalWrapper.tsx
@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { styled } from '@/styles';
+
+export const ModalWrapper = styled.div<{
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+}>(({ theme, width, height, minHeight }) => {
+  return {
+    width,
+    height,
+    minHeight,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '12px',
+    position: 'relative',
+  };
+});
+
+export default ModalWrapper;
--- a/packages/app/src/ui/modal/index.tsx
+++ b/packages/app/src/ui/modal/index.tsx
@@ -1,4 +1,7 @@
-import Modal from './modal';
+import Modal from './Modal';
+
+export * from './ModalCloseButton';
+export * from './ModalWrapper';
+export * from './Modal';

-export * from './modal';
 export default Modal;
--- a/packages/app/src/ui/modal/modal.tsx
+++ b/packages/app/src/ui/modal/modal.tsx
@@ -1,32 +0,0 @@
-import Fade from '@mui/material/Fade';
-import { StyledModal, StyledBackdrop } from './style';
-import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
-
-const Backdrop = ({
-  open,
-  ...other
-}: {
-  open?: boolean;
-  className: string;
-}) => {
-  return (
-    <Fade in={open}>
-      <StyledBackdrop open={open} {...other} />
-    </Fade>
-  );
-};
-
-export type ModalProps = ModalUnstyledOwnProps;
-
-export const Modal = (props: ModalProps) => {
-  const { components, open, children, ...otherProps } = props;
-  return (
-    <div>
-      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
-        <Fade in={open}>{children}</Fade>
-      </StyledModal>
-    </div>
-  );
-};
-
-export default Modal;
--- a/packages/app/src/ui/modal/style.ts
+++ b/packages/app/src/ui/modal/style.ts
@@ -1,30 +0,0 @@
-import { displayFlex, fixedCenter, styled } from '@/styles';
-import ModalUnstyled from '@mui/base/ModalUnstyled';
-
-export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
-  return {
-    zIndex: '-1',
-    position: 'fixed',
-    right: '0',
-    bottom: '0',
-    top: '0',
-    left: '0',
-    backgroundColor: 'rgba(58, 76, 92, 0.2)',
-  };
-});
-
-export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
-  return {
-    width: '100vw',
-    height: '100vh',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-    zIndex: theme.zIndex.modal,
-    ...displayFlex('center', 'center'),
-    '*': {
-      WebkitTapHighlightColor: 'transparent',
-      outline: 'none',
-    },
-  };
-});
--- a/packages/app/src/ui/modal/styles.ts
+++ b/packages/app/src/ui/modal/styles.ts
@@ -0,0 +1,47 @@
+import { styled } from '@/styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+import { Wrapper } from '@/ui/layout';
+import { CSSProperties } from 'react';
+
+export const StyledBackdrop = styled.div({
+  zIndex: '-1',
+  position: 'fixed',
+  right: '0',
+  bottom: '0',
+  top: '0',
+  left: '0',
+  backgroundColor: 'rgba(58, 76, 92, 0.2)',
+});
+
+export const StyledModal = styled(ModalUnstyled, {
+  shouldForwardProp: prop => {
+    return !['justifyContent', 'alignItems'].includes(prop);
+  },
+})<{
+  alignItems: CSSProperties['alignItems'];
+  justifyContent: CSSProperties['justifyContent'];
+}>(({ theme, alignItems, justifyContent }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems,
+    justifyContent,
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+    '*': {
+      WebkitTapHighlightColor: 'transparent',
+      outline: 'none',
+    },
+  };
+});
+
+export const StyledWrapper = styled(Wrapper)(() => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
+  };
+});
--- a/packages/app/src/ui/popper/Popper.tsx
+++ b/packages/app/src/ui/popper/Popper.tsx
@@ -108,6 +108,7 @@ export const Popper = ({
          onClick: (e: MouseEvent) => {
            children.props.onClick?.(e);
            if (!hasClickTrigger || visibleControlledByParent) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              onClick?.(e);
              return;
@@ -116,8 +117,9 @@ export const Popper = ({
          },
          onPointerEnter: onPointerEnterHandler,
          onPointerLeave: onPointerLeaveHandler,
-          className: anchorClassName,
-          popperVisible: visible,
+          className: `${anchorClassName ? anchorClassName + ' ' : ''}${
+            children.props.className
+          }`,
        })}
        {content && (
          <BasicStyledPopper
@@ -152,6 +154,7 @@ export const Popper = ({
                  className={popoverClassName}
                >
                  {showArrow && (
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-ignore
                    <PopperArrow placement={placement} ref={setArrowRef} />
                  )}
--- a/packages/app/src/ui/table/Table.tsx
+++ b/packages/app/src/ui/table/Table.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren, Children, ReactNode, HTMLAttributes } from 'react';
+import { StyledTable } from './styles';
+
+const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
+  return Children.toArray(children).some(child => {
+    if (typeof child === 'object' && 'props' in child) {
+      if (!child.props.ellipsis && child.props.children) {
+        return childrenHasEllipsis(child.props.children);
+      }
+      return child.props.ellipsis ?? false;
+    }
+
+    return false;
+  });
+};
+
+export const Table = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableElement>>) => {
+  const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto';
+
+  return (
+    <StyledTable tableLayout={tableLayout} {...props}>
+      {children}
+    </StyledTable>
+  );
+};
+
+export default Table;
--- a/packages/app/src/ui/table/TableBody.tsx
+++ b/packages/app/src/ui/table/TableBody.tsx
@@ -0,0 +1,11 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledTableBody } from '@/ui/table/styles';
+
+export const TableBody = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
+  return <StyledTableBody {...props}>{children}</StyledTableBody>;
+};
+
+export default TableBody;
--- a/packages/app/src/ui/table/TableCell.tsx
+++ b/packages/app/src/ui/table/TableCell.tsx
@@ -0,0 +1,14 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { TableCellProps } from './interface';
+import { StyledTableCell } from './styles';
+
+export const TableCell = ({
+  children,
+  ...props
+}: PropsWithChildren<
+  TableCellProps & HTMLAttributes<HTMLTableCellElement>
+>) => {
+  return <StyledTableCell {...props}>{children}</StyledTableCell>;
+};
+
+export default TableCell;
--- a/packages/app/src/ui/table/TableHead.tsx
+++ b/packages/app/src/ui/table/TableHead.tsx
@@ -0,0 +1,11 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledTableHead } from './styles';
+
+export const TableHead = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
+  return <StyledTableHead {...props}>{children}</StyledTableHead>;
+};
+
+export default TableHead;
--- a/packages/app/src/ui/table/TableRow.tsx
+++ b/packages/app/src/ui/table/TableRow.tsx
@@ -0,0 +1,11 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledTableRow } from './styles';
+
+export const TableRow = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>) => {
+  return <StyledTableRow {...props}>{children}</StyledTableRow>;
+};
+
+export default TableRow;
--- a/packages/app/src/ui/table/index.ts
+++ b/packages/app/src/ui/table/index.ts
@@ -0,0 +1,12 @@
+// import Table from '@mui/material/Table';
+// import TableBody from '@mui/material/TableBody';
+// import TableCell from '@mui/material/TableCell';
+// import TableHead from '@mui/material/TableHead';
+// import TableRow from '@mui/material/TableRow';
+//
+
+export * from './Table';
+export * from './TableRow';
+export * from './TableHead';
+export * from './TableCell';
+export * from './TableBody';
--- a/packages/app/src/ui/table/interface.ts
+++ b/packages/app/src/ui/table/interface.ts
@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export type TableCellProps = {
+  align?: 'left' | 'right' | 'center';
+  ellipsis?: boolean;
+  proportion?: number;
+  style?: CSSProperties;
+};
--- a/packages/app/src/ui/table/styles.ts
+++ b/packages/app/src/ui/table/styles.ts
@@ -0,0 +1,74 @@
+import { styled, textEllipsis } from '@/styles';
+import { TableCellProps } from './interface';
+
+export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
+  ({ theme, tableLayout }) => {
+    return {
+      fontSize: theme.font.base,
+      color: theme.colors.textColor,
+      tableLayout,
+      width: '100%',
+      borderCollapse: 'separate',
+      borderSpacing: '0 25px',
+    };
+  }
+);
+
+export const StyledTableBody = styled.tbody(() => {
+  return {
+    fontWeight: 400,
+  };
+});
+
+export const StyledTableCell = styled.td<
+  Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
+>(({ align = 'left', ellipsis = false, proportion }) => {
+  const width = proportion ? `${proportion * 100}%` : 'auto';
+  return {
+    width,
+    height: '52px',
+    lineHeight: '52px',
+    padding: '0 30px',
+    boxSizing: 'border-box',
+    textAlign: align,
+    verticalAlign: 'middle',
+    ...(ellipsis ? textEllipsis(1) : {}),
+    overflowWrap: 'break-word',
+  };
+});
+
+export const StyledTableHead = styled.thead(() => {
+  return {
+    fontWeight: 500,
+    tr: {
+      ':hover': {
+        td: {
+          background: 'unset',
+        },
+      },
+    },
+  };
+});
+
+export const StyledTableRow = styled.tr(({ theme }) => {
+  return {
+    marginBottom: '25px',
+    td: {
+      transition: 'background .15s',
+    },
+    'td:first-of-type': {
+      borderTopLeftRadius: '10px',
+      borderBottomLeftRadius: '10px',
+    },
+    'td:last-of-type': {
+      borderTopRightRadius: '10px',
+      borderBottomRightRadius: '10px',
+    },
+
+    ':hover': {
+      td: {
+        background: theme.colors.hoverBackground,
+      },
+    },
+  };
+});
--- a/packages/app/src/ui/toast/index.ts
+++ b/packages/app/src/ui/toast/index.ts
@@ -0,0 +1 @@
+export * from './toast';
--- a/packages/app/src/ui/toast/toast.ts
+++ b/packages/app/src/ui/toast/toast.ts
@@ -0,0 +1,111 @@
+// Copyright: https://github.com/toeverything/blocksuite/commit/8032ef3ab97aefce01664b36502fc392c5db8b78#diff-bf5b41be21936f9165a8400c7f20e24d3dbc49644ba57b9258e0943f0dc1c464
+import { css, html, TemplateResult } from 'lit';
+
+export const sleep = (ms = 0) =>
+  new Promise(resolve => setTimeout(resolve, ms));
+
+let ToastContainer: HTMLDivElement | null = null;
+
+/**
+ * DO NOT USE FOR USER INPUT
+ * See https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
+ */
+const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
+  const template = document.createElement('template');
+  if (typeof html === 'string') {
+    html = html.trim(); // Never return a text node of whitespace as the result
+    template.innerHTML = html;
+  } else {
+    const { strings, values } = html;
+    const v = [...values, '']; // + last emtpty part
+    template.innerHTML = strings.reduce((acc, cur, i) => acc + cur + v[i], '');
+  }
+  return template.content.firstChild as T;
+};
+
+const createToastContainer = () => {
+  const styles = css`
+    position: fixed;
+    z-index: 9999;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+    bottom: 78px;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+  `;
+  const template = html`<div style="${styles}"></div>`;
+  const element = htmlToElement<HTMLDivElement>(template);
+  document.body.appendChild(element);
+  return element;
+};
+
+export type ToastOptions = {
+  duration: number;
+};
+
+/**
+ * @example
+ * ```ts
+ * toast('Hello World');
+ * ```
+ */
+export const toast = (
+  message: string,
+  { duration }: ToastOptions = { duration: 2500 }
+) => {
+  if (!ToastContainer) {
+    ToastContainer = createToastContainer();
+  }
+
+  const styles = css`
+    max-width: 480px;
+    text-align: center;
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-sm);
+    padding: 6px 12px;
+    margin: 10px 0 0 0;
+    color: var(--affine-tooltip-color);
+    background: var(--affine-tooltip-background);
+    box-shadow: var(--affine-tooltip-shadow);
+    border-radius: 10px;
+    transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1);
+    opacity: 0;
+  `;
+
+  const template = html`<div style="${styles}"></div>`;
+  const element = htmlToElement<HTMLDivElement>(template);
+  // message is not trusted
+  element.textContent = message;
+  ToastContainer.appendChild(element);
+
+  const fadeIn = [
+    {
+      opacity: 0,
+    },
+    { opacity: 1 },
+  ];
+  const options = {
+    duration: 230,
+    easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
+    fill: 'forwards' as const,
+  }; // satisfies KeyframeAnimationOptions;
+  element.animate(fadeIn, options);
+
+  setTimeout(async () => {
+    const fadeOut = fadeIn.reverse();
+    const animation = element.animate(fadeOut, options);
+    await animation.finished;
+    element.style.maxHeight = '0';
+    element.style.margin = '0';
+    element.style.padding = '0';
+    // wait for transition
+    await sleep(230);
+    element.remove();
+  }, duration);
+  return element;
+};
+
+export default toast;