refactor: unify theme (#1303)

2024-11-23 05:33:08 +03:00 · 2023-03-04 01:36:20 -06:00 · 2023-03-04 01:36:20 -06:00 · 4e9f0c97a1
commit 4e9f0c97a1
parent fe0d78b2d6
43 changed files with 779 additions and 543 deletions
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@ -44,6 +44,7 @@ const getRedirectConfig = profile => {
 const nextConfig = {
  productionBrowserSourceMaps: true,
  compiler: {
+    styledComponents: true,
    removeConsole: {
      exclude: ['error', 'log', 'warn', 'info'],
    },
@ -85,6 +86,7 @@ const nextConfig = {
      loader: 'raw-loader',
    });
    config.resolve.alias['yjs'] = require.resolve('yjs');
+    config.resolve.alias['@mui/styled-engine'] = '@mui/styled-engine-sc';

    if (!isServer && !dev) {
      config.devtool = 'hidden-nosources-source-map';
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -20,18 +20,22 @@
    "@blocksuite/react": "0.5.0-20230303192351-13b0dd7",
    "@blocksuite/store": "0.5.0-20230303192351-13b0dd7",
    "@emotion/cache": "^11.10.5",
-    "@emotion/css": "^11.10.6",
    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.6",
    "@mui/material": "^5.11.11",
+    "@mui/styled-engine-sc": "^5.11.11",
    "cmdk": "^0.1.22",
    "css-spring": "^4.1.0",
    "dayjs": "^1.11.7",
    "jotai": "^2.0.3",
    "jotai-devtools": "^0.2.0",
    "lit": "^2.6.1",
+    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
+    "styled-components": "^5.3.8",
    "swr": "^2.0.4",
    "y-indexeddb": "^9.0.9",
    "y-protocols": "^1.0.5",
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts
@ -98,4 +98,4 @@ export const StyledMoreVerticalDiv = styled('div')(() => {
  };
 });

-export const StyledMoreVerticalButton = styled(StyledMoreVerticalDiv)();
+export const StyledMoreVerticalButton = styled(StyledMoreVerticalDiv)``;
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts
@ -9,7 +9,7 @@ export const StyledInput = styled(Input)(({ theme }) => {
  };
 });

-export const StyledWorkspaceInfo = styled.div(({ theme }) => {
+export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    ...displayFlex('flex-start', 'center'),
    fontSize: '20px',
--- a/apps/web/src/components/affine/workspace-setting-detail/style.ts
+++ b/apps/web/src/components/affine/workspace-setting-detail/style.ts
@ -43,7 +43,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
  }
 );

-export const StyledSettingKey = styled.div(({ theme }) => {
+export const StyledSettingKey = styled('div')(({ theme }) => {
  return {
    width: '140px',
    fontSize: theme.font.base,
@ -65,7 +65,7 @@ export const StyledWorkspaceName = styled('span')(({ theme }) => {
  };
 });

-export const StyledIndicator = styled.div(({ theme }) => {
+export const StyledIndicator = styled('div')(({ theme }) => {
  return {
    height: '2px',
    background: theme.colors.primaryColor,
@ -76,14 +76,14 @@ export const StyledIndicator = styled.div(({ theme }) => {
  };
 });

-export const StyledTabButtonWrapper = styled.div(() => {
+export const StyledTabButtonWrapper = styled('div')(() => {
  return {
    display: 'flex',
    position: 'relative',
  };
 });

-// export const StyledDownloadCard = styled.div<{ active?: boolean }>(
+// export const StyledDownloadCard = styled('div')<{ active?: boolean }>(
 //   ({ theme, active }) => {
 //     return {
 //       width: '240px',
@ -105,7 +105,7 @@ export const StyledTabButtonWrapper = styled.div(() => {
 //     };
 //   }
 // );
-// export const StyledDownloadCardDes = styled.div(({ theme }) => {
+// export const StyledDownloadCardDes = styled('div')(({ theme }) => {
 //   return {
 //     fontSize: theme.font.sm,
 //     color: theme.colors.iconColor,
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
@ -14,14 +14,17 @@ import {
  PaperIcon,
 } from '@blocksuite/icons';
 import { PageMeta } from '@blocksuite/store';
-import { useMediaQuery, useTheme as useMuiTheme } from '@mui/material';
+import {
+  useMediaQuery,
+  useTheme as useMuiTheme,
+  useTheme,
+} from '@mui/material';
 import React, { useMemo } from 'react';

 import {
  usePageMeta,
  usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
-import { useTheme } from '../../../../providers/ThemeProvider';
 import { BlockSuiteWorkspace } from '../../../../shared';
 import DateCell from './DateCell';
 import Empty from './Empty';
@ -41,7 +44,7 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
  pageMeta: { favorite },
  onClick,
 }) => {
-  const { theme } = useTheme();
+  const theme = useTheme();
  const { t } = useTranslation();
  return (
    <Tooltip
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
@ -1,14 +1,14 @@
 import { displayFlex, styled } from '@affine/component';
 import { TableRow } from '@affine/component';

-export const StyledTableContainer = styled.div(() => {
+export const StyledTableContainer = styled('div')(() => {
  return {
    height: 'calc(100vh - 60px)',
    padding: '78px 72px',
    overflowY: 'auto',
  };
 });
-export const StyledTitleWrapper = styled.div(({ theme }) => {
+export const StyledTitleWrapper = styled('div')(({ theme }) => {
  return {
    ...displayFlex('flex-start', 'center'),
    a: {
@ -22,7 +22,7 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
    },
  };
 });
-export const StyledTitleLink = styled.div(({ theme }) => {
+export const StyledTitleLink = styled('div')(({ theme }) => {
  return {
    maxWidth: '80%',
    marginRight: '18px',
--- a/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx
+++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx
@ -1,5 +1,6 @@
 import { useTranslation } from '@affine/i18n';
 import { assertExists } from '@blocksuite/store';
+import { useTheme } from '@mui/material';
 import React, { cloneElement, CSSProperties, useEffect, useState } from 'react';

 import {
@ -7,7 +8,6 @@ import {
  usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
 // todo(himself65): remove `useTheme` hook
-import { useTheme } from '../../../../providers/ThemeProvider';
 import { BlockSuiteWorkspace } from '../../../../shared';
 import { EdgelessIcon, PaperIcon } from './Icons';
 import {
@ -20,9 +20,7 @@ import {
 import type { AnimateRadioItemProps, RadioItemStatus } from './type';
 const PaperItem = ({ active }: { active?: boolean }) => {
  const {
-    theme: {
-      colors: { iconColor, primaryColor },
-    },
+    colors: { iconColor, primaryColor },
  } = useTheme();

  return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
@ -30,9 +28,7 @@ const PaperItem = ({ active }: { active?: boolean }) => {

 const EdgelessItem = ({ active }: { active?: boolean }) => {
  const {
-    theme: {
-      colors: { iconColor, primaryColor },
-    },
+    colors: { iconColor, primaryColor },
  } = useTheme();

  return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
@ -78,7 +74,7 @@ export const EditorModeSwitch: React.FC<EditorModeSwitchProps> = ({
  blockSuiteWorkspace,
  pageId,
 }) => {
-  const { mode: themeMode } = useTheme();
+  const theme = useTheme();
  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
  const pageMeta = usePageMeta(blockSuiteWorkspace).find(
    meta => meta.id === pageId
@ -139,7 +135,10 @@ export const EditorModeSwitch: React.FC<EditorModeSwitchProps> = ({
          setRadioItemStatus(modifyRadioItemStatus());
        }}
      />
-      <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
+      <StyledMiddleLine
+        hidden={!isHover}
+        dark={theme.palette.mode === 'dark'}
+      />
      <AnimateRadioItem
        isLeft={false}
        label={t('Edgeless')}
--- a/apps/web/src/components/blocksuite/header/editor-mode-switch/style.ts
+++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/style.ts
@ -1,7 +1,8 @@
-import { displayFlex, keyframes, styled } from '@affine/component';
+import { css, displayFlex, keyframes, styled } from '@affine/component';
 // @ts-ignore
 import spring, { toString } from 'css-spring';

+// @ts-ignore
 import type { ItemStatus } from './type';

 const ANIMATE_DURATION = 500;
@ -10,37 +11,48 @@ export const StyledAnimateRadioContainer = styled('div')<{
  shrink: boolean;
  disabled: boolean;
 }>(({ shrink, theme, disabled }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
    spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
-  )}`;
-  const animateScaleShrink = keyframes(
-    `${toString(
-      spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
-    )}`
  );
-  const shrinkStyle = shrink
+  const animateScaleShrink = toString(
+    spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
+  );
+  const shrinkStyle: any = shrink
    ? {
-        animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+        `,
        background: 'transparent',
      }
    : {
-        animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+        `,
      };
+  return css`
+    height: 36px;
+    border-radius: 18px;
+    background: ${disabled ? 'transparent' : theme.colors.hoverBackground}
+    position: relative;
+    display: flex;
+    transition: background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms;
+    border: 1px solid transparent;
+    ${
+      disabled
+        ? css`
+            pointer-events: none;
+          `
+        : css`
+            animation: ${shrinkStyle.animation};
+            background: ${shrinkStyle.background};
+          `
+    }

-  return {
-    height: '36px',
-    borderRadius: '18px',
-    background: disabled ? 'transparent' : theme.colors.hoverBackground,
-    position: 'relative',
-    display: 'flex',
-    transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
-    border: '1px solid transparent',
-
-    ...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
-    ':hover': {
-      border: disabled ? '' : `1px solid ${theme.colors.primaryColor}`,
-    },
-  };
+    //...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
+    :hover {
+      border: ${disabled ? '' : `1px solid ${theme.colors.primaryColor}`}
+    }
+  `;
 });

 export const StyledMiddleLine = styled('div')<{
@ -62,83 +74,94 @@ export const StyledRadioItem = styled('div')<{
  status: ItemStatus;
  active: boolean;
 }>(({ status, active, theme }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
    spring({ width: '44px' }, { width: '112px' })
-  )}`;
-  const animateScaleOrigin = keyframes(
-    `${toString(spring({ width: '112px' }, { width: '44px' }))}`
  );
-  const animateScaleShrink = keyframes(
-    `${toString(spring({ width: '0px' }, { width: '36px' }))}`
+  const animateScaleOrigin = toString(
+    spring({ width: '112px' }, { width: '44px' })
+  );
+  const animateScaleShrink = toString(
+    spring({ width: '0px' }, { width: '36px' })
  );
  const dynamicStyle =
    status === 'stretch'
      ? {
-          animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+          animation: css`
+            ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+          `,
          flexShrink: '0',
        }
      : status === 'shrink'
      ? {
-          animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+          animation: css`
+            ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+          `,
        }
      : status === 'normal'
-      ? { animation: `${animateScaleOrigin} ${ANIMATE_DURATION}ms forwards` }
+      ? {
+          animation: css`
+            ${keyframes`${animateScaleOrigin}`} ${ANIMATE_DURATION}ms forwards
+          `,
+        }
      : {};

  const {
    colors: { iconColor, primaryColor },
  } = theme;
-  return {
-    width: '0',
-    height: '100%',
-    display: 'flex',
-    cursor: 'pointer',
-    overflow: 'hidden',
-    color: active ? primaryColor : iconColor,
-    ...dynamicStyle,
-  };
+  return css`
+    width: 0;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    overflow: hidden;
+    color: ${active ? primaryColor : iconColor};
+    animation: ${dynamicStyle.animation};
+    flex-shrink: ${dynamicStyle.flexShrink};
+  `;
 });

 export const StyledLabel = styled('div')<{
  shrink: boolean;
  isLeft: boolean;
 }>(({ shrink, isLeft }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
    spring(
      { width: '0px' },
      { width: isLeft ? '65px' : '75px' },
      { preset: 'gentle' }
    )
-  )}`;
-  const animateScaleShrink = keyframes(
-    `${toString(
-      spring(
-        { width: isLeft ? '65px' : '75px' },
-        { width: '0px' },
-        { preset: 'gentle' }
-      )
-    )}`
+  );
+  const animateScaleShrink = toString(
+    spring(
+      { width: isLeft ? '65px' : '75px' },
+      { width: '0px' },
+      { preset: 'gentle' }
+    )
  );
  const shrinkStyle = shrink
    ? {
-        animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+        `,
      }
    : {
-        animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+        `,
      };

-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: isLeft ? 'flex-start' : 'flex-end',
-    fontSize: '16px',
-    flexShrink: '0',
-    transition: `transform ${ANIMATE_DURATION}ms`,
-    fontWeight: 'normal',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    ...shrinkStyle,
-  };
+  return css`
+    display: flex;
+    align-items: center;
+    justify-content: ${isLeft ? 'flex-start' : 'flex-end'};
+    font-size: 16px;
+    flex-shrink: 0;
+    transition: transform ${ANIMATE_DURATION}ms;
+    font-weight: normal;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: ${shrinkStyle.animation};
+  `;
 });

 export const StyledIcon = styled('div')<{
--- a/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
+++ b/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
@ -33,7 +33,7 @@ const NoNetWorkIcon = () => {
    </svg>
  );
 };
-const IconWrapper = styled.div(() => {
+const IconWrapper = styled('div')(() => {
  return {
    width: '32px',
    height: '32px',
--- a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx
+++ b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx
@ -1,10 +1,10 @@
+import { useTheme } from 'next-themes';
 import { useState } from 'react';

-import { useTheme } from '../../../../../providers/ThemeProvider';
 import { MoonIcon, SunIcon } from './Icons';
 import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
 export const ThemeModeSwitch = () => {
-  const { mode, changeMode } = useTheme();
+  const { theme, setTheme } = useTheme();
  const [isHover, setIsHover] = useState(false);
  const [firstTrigger, setFirstTrigger] = useState(false);
  return (
@ -22,22 +22,22 @@ export const ThemeModeSwitch = () => {
    >
      <StyledSwitchItem
        data-testid="change-theme-light"
-        active={mode === 'light'}
+        active={theme === 'light'}
        isHover={isHover}
        firstTrigger={firstTrigger}
        onClick={() => {
-          changeMode('light');
+          setTheme('light');
        }}
      >
        <SunIcon />
      </StyledSwitchItem>
      <StyledSwitchItem
        data-testid="change-theme-dark"
-        active={mode === 'dark'}
+        active={theme === 'dark'}
        isHover={isHover}
        firstTrigger={firstTrigger}
        onClick={() => {
-          changeMode('dark');
+          setTheme('dark');
        }}
      >
        <MoonIcon />
--- a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
+++ b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
@ -1,7 +1,6 @@
-import { displayFlex, keyframes, styled } from '@affine/component';
+import { css, displayFlex, keyframes, styled } from '@affine/component';
 // @ts-ignore
 import spring, { toString } from 'css-spring';
-import { CSSProperties } from 'react';

 const ANIMATE_DURATION = 400;

@ -18,52 +17,60 @@ export const StyledSwitchItem = styled('div')<{
  isHover: boolean;
  firstTrigger: boolean;
 }>(({ active, isHover, firstTrigger, theme }) => {
-  const activeRaiseAnimate = keyframes`${toString(
+  const activeRaiseAnimate = toString(
    spring({ top: '0' }, { top: '-100%' }, { preset: 'gentle' })
-  )}`;
-  const raiseAnimate = keyframes`${toString(
+  );
+  const raiseAnimate = toString(
    spring({ top: '100%' }, { top: '0' }, { preset: 'gentle' })
-  )}`;
-  const activeDeclineAnimate = keyframes`${toString(
+  );
+  const activeDeclineAnimate = toString(
    spring({ top: '-100%' }, { top: '0' }, { preset: 'gentle' })
-  )}`;
-  const declineAnimate = keyframes`${toString(
+  );
+  const declineAnimate = toString(
    spring({ top: '0' }, { top: '100%' }, { preset: 'gentle' })
-  )}`;
+  );
+
  const activeStyle = active
    ? {
        color: theme.colors.iconColor,
        top: '0',
        animation: firstTrigger
-          ? `${
-              isHover ? activeRaiseAnimate : activeDeclineAnimate
-            } ${ANIMATE_DURATION}ms forwards`
+          ? css`
+              ${keyframes`${
+                isHover ? activeRaiseAnimate : activeDeclineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
          : 'unset',
        animationDirection: isHover ? 'normal' : 'alternate',
      }
-    : ({
+    : {
        top: '100%',
        color: theme.colors.primaryColor,
        backgroundColor: theme.colors.hoverBackground,
        animation: firstTrigger
-          ? `${
-              isHover ? raiseAnimate : declineAnimate
-            } ${ANIMATE_DURATION}ms forwards`
+          ? css`
+              ${keyframes`${
+                isHover ? raiseAnimate : declineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
          : 'unset',
        animationDirection: isHover ? 'normal' : 'alternate',
-      } as CSSProperties);
-
-  return {
-    width: '32px',
-    height: '32px',
-    position: 'absolute',
-    left: '0',
-    ...displayFlex('center', 'center'),
-    cursor: 'pointer',
-    ...activeStyle,
-    svg: {
-      width: '24px',
-      height: '24px',
+      };
+  return css`
+    ${css(displayFlex('center', 'center'))}
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+    color: ${activeStyle.color}
+    top: ${activeStyle.top};
+    background-color: ${activeStyle.backgroundColor};
+    animation: ${activeStyle.animation};
+    animation-direction: ${activeStyle.animationDirection};
+    svg {
+      width: 24px;
+      height: 24px;
    },
-  };
+  `;
 });
--- a/apps/web/src/components/blocksuite/header/styles.ts
+++ b/apps/web/src/components/blocksuite/header/styles.ts
@ -1,6 +1,6 @@
 import { displayFlex, styled } from '@affine/component';

-export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
+export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
  ({ hasWarning }) => {
    return {
      height: hasWarning ? '96px' : '60px',
@ -8,16 +8,18 @@ export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
    };
  }
 );
-export const StyledHeader = styled.div<{ hasWarning: boolean }>(({ theme }) => {
-  return {
-    height: '60px',
-    width: '100%',
-    ...displayFlex('flex-end', 'center'),
-    background: theme.colors.pageBackground,
-    transition: 'background-color 0.5s',
-    zIndex: 99,
-  };
-});
+export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
+  ({ theme }) => {
+    return {
+      height: '60px',
+      width: '100%',
+      ...displayFlex('flex-end', 'center'),
+      background: theme.colors.pageBackground,
+      transition: 'background-color 0.5s',
+      zIndex: 99,
+    };
+  }
+);

 export const StyledTitle = styled('div')(({ theme }) => ({
  width: '720px',
@ -45,7 +47,7 @@ export const StyledHeaderRightSide = styled('div')({
  },
 });

-export const StyledBrowserWarning = styled.div<{ show: boolean }>(
+export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
  ({ theme, show }) => {
    return {
      backgroundColor: theme.colors.warningBackground,
@ -63,7 +65,7 @@ export const StyledBrowserWarning = styled.div<{ show: boolean }>(
  }
 );

-export const StyledCloseButton = styled.div(({ theme }) => {
+export const StyledCloseButton = styled('div')(({ theme }) => {
  return {
    width: '36px',
    height: '36px',
@ -83,7 +85,7 @@ export const StyledCloseButton = styled.div(({ theme }) => {
  };
 });

-export const StyledSwitchWrapper = styled.div(() => {
+export const StyledSwitchWrapper = styled('div')(() => {
  return {
    position: 'absolute',
    right: '100%',
@ -94,7 +96,7 @@ export const StyledSwitchWrapper = styled.div(() => {
  };
 });

-export const StyledSearchArrowWrapper = styled.div(() => {
+export const StyledSearchArrowWrapper = styled('div')(() => {
  return {
    position: 'absolute',
    left: 'calc(100% + 4px)',
--- a/apps/web/src/components/pure/contact-modal/style.ts
+++ b/apps/web/src/components/pure/contact-modal/style.ts
@ -121,7 +121,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
  };
 });

-export const StyledPrivacyContainer = styled.div(({ theme }) => {
+export const StyledPrivacyContainer = styled('div')(({ theme }) => {
  return {
    marginTop: '4px',
    position: 'relative',
--- a/apps/web/src/components/pure/footer/styles.ts
+++ b/apps/web/src/components/pure/footer/styles.ts
@ -6,7 +6,7 @@ import {
 } from '@affine/component';
 import { Button } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@ -15,7 +15,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@ -37,7 +37,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@ -48,7 +48,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@ -63,7 +63,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@ -81,7 +81,7 @@ export const StyledFooter = styled('div')({
  ...displayFlex('space-between', 'center'),
 });

-export const StyleUserInfo = styled.div(({ theme }) => {
+export const StyleUserInfo = styled('div')(({ theme }) => {
  return {
    textAlign: 'left',
    marginLeft: '16px',
@ -97,17 +97,17 @@ export const StyleUserInfo = styled.div(({ theme }) => {
  };
 });

-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@ -125,13 +125,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
--- a/apps/web/src/components/pure/loading/styled.ts
+++ b/apps/web/src/components/pure/loading/styled.ts
@ -3,7 +3,7 @@ import { styled } from '@affine/component';
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
 export const StyledLoadingWrapper = styled('div', {
  shouldForwardProp: prop => {
-    return !['size'].includes(prop);
+    return !['size'].includes(prop as string);
  },
 })<{ size?: number }>(({ size = 40 }) => {
  return {
@ -12,7 +12,7 @@ export const StyledLoadingWrapper = styled('div', {
    position: 'relative',
  };
 });
-export const StyledLoading = styled.div`
+export const StyledLoading = styled('div')`
  position: absolute;
  left: 25%;
  top: 50%;
@ -31,7 +31,7 @@ export const StyledLoading = styled.div`
  }
 `;

-export const StyledLoadingItem = styled.div<{ size: number }>(
+export const StyledLoadingItem = styled('div')<{ size: number }>(
  ({ size = 40 }) => {
    return `
  position: absolute;
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/apps/web/src/components/pure/quick-search-modal/style.ts
@ -123,7 +123,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
    },
  };
 });
-export const StyledModalFooterContent = styled.button(({ theme }) => {
+export const StyledModalFooterContent = styled('button')(({ theme }) => {
  return {
    width: '612px',
    height: '32px',
@ -140,7 +140,7 @@ export const StyledModalFooterContent = styled.button(({ theme }) => {
    },
  };
 });
-export const StyledListItem = styled.button(({ theme }) => {
+export const StyledListItem = styled('button')(({ theme }) => {
  return {
    width: '612px',
    height: '32px',
--- a/apps/web/src/components/pure/shortcuts-modal/style.ts
+++ b/apps/web/src/components/pure/shortcuts-modal/style.ts
@ -1,6 +1,6 @@
 import { displayFlex, styled } from '@affine/component';

-export const StyledShortcutsModal = styled.div(({ theme }) => ({
+export const StyledShortcutsModal = styled('div')(({ theme }) => ({
  width: '288px',
  height: '74vh',
  paddingBottom: '28px',
@ -17,7 +17,7 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
  margin: 'auto',
  zIndex: theme.zIndex.modal,
 }));
-export const StyledTitle = styled.div(({ theme }) => ({
+export const StyledTitle = styled('div')(({ theme }) => ({
  color: theme.colors.textColor,
  fontWeight: '500',
  fontSize: theme.font.sm,
@ -29,7 +29,7 @@ export const StyledTitle = styled.div(({ theme }) => ({
    color: theme.colors.primaryColor,
  },
 }));
-export const StyledSubTitle = styled.div(({ theme }) => ({
+export const StyledSubTitle = styled('div')(({ theme }) => ({
  color: theme.colors.popoverColor,
  fontWeight: '500',
  fontSize: theme.font.sm,
@ -38,7 +38,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
  marginTop: '28px',
  padding: '0 16px',
 }));
-export const StyledModalHeader = styled.div(() => ({
+export const StyledModalHeader = styled('div')(() => ({
  ...displayFlex('space-between', 'center'),
  paddingTop: '8px 4px 0 4px',
  width: '100%',
@ -51,7 +51,7 @@ export const StyledModalHeader = styled.div(() => ({
  transition: 'background-color 0.5s',
 }));

-export const StyledListItem = styled.div(({ theme }) => ({
+export const StyledListItem = styled('div')(({ theme }) => ({
  height: '34px',
  ...displayFlex('space-between', 'center'),
  fontSize: theme.font.sm,
--- a/apps/web/src/components/pure/workspace-card/styles.ts
+++ b/apps/web/src/components/pure/workspace-card/styles.ts
@ -6,7 +6,7 @@ import {
 } from '@affine/component';
 import { Button } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@ -15,7 +15,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@ -37,7 +37,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@ -48,7 +48,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@ -63,7 +63,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@ -81,7 +81,7 @@ export const StyledFooter = styled('div')({
  ...displayFlex('space-between', 'center'),
 });

-export const StyleUserInfo = styled.div(({ theme }) => {
+export const StyleUserInfo = styled('div')(({ theme }) => {
  return {
    textAlign: 'left',
    marginLeft: '16px',
@ -97,17 +97,17 @@ export const StyleUserInfo = styled.div(({ theme }) => {
  };
 });

-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@ -125,13 +125,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
--- a/apps/web/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts
@ -1,12 +1,6 @@
-import {
-  displayFlex,
-  displayInlineFlex,
-  styled,
-  textEllipsis,
-} from '@affine/component';
-import { Button } from '@affine/component';
+import { displayFlex, styled, textEllipsis } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@ -15,7 +9,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@ -37,7 +31,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@ -48,7 +42,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@ -63,7 +57,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@ -74,40 +68,17 @@ export const StyledCard = styled.div<{
  };
 });

-export const StyledFooter = styled('div')({
-  height: '84px',
-  padding: '0 40px',
-  flexShrink: 0,
-  ...displayFlex('space-between', 'center'),
-});
-
-export const StyleUserInfo = styled.div(({ theme }) => {
-  return {
-    textAlign: 'left',
-    marginLeft: '16px',
-    flex: 1,
-    p: {
-      lineHeight: '24px',
-      color: theme.colors.iconColor,
-    },
-    'p:first-of-type': {
-      color: theme.colors.textColor,
-      fontWeight: 600,
-    },
-  };
-});
-
-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@ -125,13 +96,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
@ -154,19 +125,3 @@ export const StyledModalHeader = styled('div')(() => {
    ...displayFlex('space-between', 'center'),
  };
 });
-
-export const StyledSignInButton = styled(Button)(({ theme }) => {
-  return {
-    fontWeight: 700,
-    paddingLeft: 0,
-    '.circle': {
-      width: '40px',
-      height: '40px',
-      borderRadius: '20px',
-      backgroundColor: theme.colors.innerHoverBackground,
-      flexShrink: 0,
-      marginRight: '16px',
-      ...displayInlineFlex('center', 'center'),
-    },
-  };
-});
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@ -1,7 +1,7 @@
 import { displayFlex, styled, textEllipsis } from '@affine/component';
 import Link from 'next/link';

-export const StyledSliderBar = styled.div<{ show: boolean }>(
+export const StyledSliderBar = styled('div')<{ show: boolean }>(
  ({ theme, show }) => {
    return {
      width: show ? '256px' : '0',
@ -17,7 +17,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
    };
  }
 );
-export const StyledSliderBarWrapper = styled.div(() => {
+export const StyledSliderBarWrapper = styled('div')(() => {
  return {
    height: '100%',
    overflowX: 'hidden',
@ -26,7 +26,7 @@ export const StyledSliderBarWrapper = styled.div(() => {
  };
 });

-export const StyledArrowButton = styled.button<{ isShow: boolean }>(
+export const StyledArrowButton = styled('button')<{ isShow: boolean }>(
  ({ theme, isShow }) => {
    return {
      width: '32px',
@ -51,7 +51,7 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
  }
 );

-export const StyledListItem = styled.div<{
+export const StyledListItem = styled('div')<{
  active?: boolean;
  disabled?: boolean;
 }>(({ theme, active, disabled }) => {
@ -109,7 +109,7 @@ export const StyledNewPageButton = styled(StyledListItem)(() => {
  };
 });

-export const StyledSubListItem = styled.button<{
+export const StyledSubListItem = styled('button')<{
  disable?: boolean;
  active?: boolean;
 }>(({ theme, disable, active }) => {
--- a/apps/web/src/pages/404.tsx
+++ b/apps/web/src/pages/404.tsx
@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet-async';

 import ErrorImg from '../../public/imgs/invite-error.svg';

-export const StyledContainer = styled.div(() => {
+export const StyledContainer = styled('div')(() => {
  return {
    ...displayFlex('center', 'center'),
    flexDirection: 'column',
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@ -3,7 +3,7 @@ import '../styles/globals.css';

 import { config, setupGlobal } from '@affine/env';
 import { createI18n, I18nextProvider } from '@affine/i18n';
-import createCache from '@emotion/cache';
+import { EmotionCache } from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { Provider } from 'jotai';
 import { useAtomsDebugValue } from 'jotai-devtools';
@ -21,6 +21,7 @@ import { AffineSWRConfigProvider } from '../providers/AffineSWRConfigProvider';
 import { ModalProvider } from '../providers/ModalProvider';
 import { ThemeProvider } from '../providers/ThemeProvider';
 import { NextPageWithLayout } from '../shared';
+import createEmotionCache from '../utils/create-emotion-cache';

 setupGlobal();

@ -35,6 +36,7 @@ const DebugAtoms = memo(function DebugAtoms() {
  return null;
 });

+const clientSideEmotionCache = createEmotionCache();
 const helmetContext = {};

 const defaultSWRConfig: SWRConfiguration = {
@ -48,9 +50,13 @@ const defaultSWRConfig: SWRConfiguration = {
  },
 };

-const cache = createCache({ key: 'affine' });
-
-const App = function App({ Component, pageProps }: AppPropsWithLayout) {
+const App = function App({
+  Component,
+  pageProps,
+  emotionCache = clientSideEmotionCache,
+}: AppPropsWithLayout & {
+  emotionCache?: EmotionCache;
+}) {
  const getLayout = Component.getLayout || EmptyLayout;
  const i18n = useMemo(() => createI18n(), []);

@ -63,8 +69,8 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
  }

  return (
-    <I18nextProvider i18n={i18n}>
-      <CacheProvider value={cache}>
+    <CacheProvider value={emotionCache}>
+      <I18nextProvider i18n={i18n}>
        <DebugAtoms />
        <SWRConfig value={defaultSWRConfig}>
          <AffineErrorBoundary router={useRouter()}>
@ -83,6 +89,10 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
                <HelmetProvider key="HelmetProvider" context={helmetContext}>
                  <Helmet>
                    <title>AFFiNE</title>
+                    <meta
+                      name="viewport"
+                      content="initial-scale=1, width=device-width"
+                    />
                  </Helmet>
                  {getLayout(<Component {...pageProps} />)}
                </HelmetProvider>
@ -90,8 +100,8 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
            </Suspense>
          </AffineErrorBoundary>
        </SWRConfig>
-      </CacheProvider>
-    </I18nextProvider>
+      </I18nextProvider>
+    </CacheProvider>
  );
 };

--- a/apps/web/src/pages/_document.tsx
+++ b/apps/web/src/pages/_document.tsx
@ -1,7 +1,48 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
+import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document';
 import * as React from 'react';

-export default class AppDocument extends Document {
+import createEmotionCache from '../utils/create-emotion-cache';
+
+export default class AppDocument extends Document<{
+  emotionStyleTags: EmotionJSX.Element[];
+}> {
+  static getInitialProps = async (ctx: DocumentContext) => {
+    const originalRenderPage = ctx.renderPage;
+
+    const cache = createEmotionCache();
+    const { extractCriticalToChunks } = createEmotionServer(cache);
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App: any) =>
+          function EnhanceApp(props) {
+            return <App emotionCache={cache} {...props} />;
+          },
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+    const emotionStyles = extractCriticalToChunks(initialProps.html);
+    const emotionStyleTags = emotionStyles.styles.map(style => (
+      <style
+        data-emotion={`${style.key} ${style.ids.join(' ')}`}
+        key={style.key}
+        dangerouslySetInnerHTML={{ __html: style.css }}
+      />
+    ));
+
+    return {
+      ...initialProps,
+      emotionStyleTags,
+    };
+  };
  render() {
    return (
      <Html>
@ -14,6 +55,8 @@ export default class AppDocument extends Document {
            href="/apple-touch-icon.png"
          />
          <link rel="icon" sizes="192x192" href="/chrome-192x192.png" />
+          <meta name="emotion-insertion-point" content="" />
+          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@ -22,7 +22,7 @@ import { PageLoading } from '../../../components/pure/loading';
 import { WorkspaceLayout } from '../../../layouts';
 import { NextPageWithLayout } from '../../../shared';

-export const NavContainer = styled.div(({ theme }) => {
+export const NavContainer = styled('div')(({ theme }) => {
  return {
    width: '100vw',
    padding: '0 12px',
--- a/apps/web/src/providers/ThemeProvider.tsx
+++ b/apps/web/src/providers/ThemeProvider.tsx
@ -1,111 +1,70 @@
-import {
-  AffineTheme,
-  Theme,
-  ThemeMode,
-  ThemeProviderProps,
-  ThemeProviderValue,
-} from '@affine/component';
+import { AffineTheme, ThemeProviderProps } from '@affine/component';
 import {
  getDarkTheme,
  getLightTheme,
  globalThemeVariables,
-  ThemeProvider as ComponentThemeProvider,
+  ThemeProvider as AffineThemeProvider,
 } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
-import {
-  createTheme as MuiCreateTheme,
-  ThemeProvider as MuiThemeProvider,
-} from '@mui/material/styles';
-import { useAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';

 import { useCurrentPageId } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { usePageMeta } from '../hooks/use-page-meta';
-import { useSystemTheme } from '../hooks/use-system-theme';
-
-export const ThemeContext = createContext<ThemeProviderValue>({
-  mode: 'light',
-
-  changeMode: () => {},
-  theme: getLightTheme('page'),
-});
-
-export const useTheme = () => useContext(ThemeContext);
-const muiTheme = MuiCreateTheme();

 const ThemeInjector = React.memo<{
-  theme: Theme;
  themeStyle: AffineTheme;
-}>(function ThemeInjector({ theme, themeStyle }) {
+}>(function ThemeInjector({ themeStyle }) {
  return (
    <GlobalStyles
      styles={{
-        ':root': globalThemeVariables(theme, themeStyle) as any,
+        ':root': globalThemeVariables(themeStyle) as any,
      }}
    />
  );
 });

-const themeAtom = atomWithStorage<ThemeMode>('affine-theme', 'auto');
+const ThemeProviderInner = memo<React.PropsWithChildren>(
+  function ThemeProviderInner({ children }) {
+    const { theme } = useTheme();
+    const [currentWorkspace] = useCurrentWorkspace();
+    const [currentPage] = useCurrentPageId();
+    const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
+    const editorMode =
+      pageMeta.find(page => page.id === currentPage)?.mode ?? 'page';
+    const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
+    const darkThemeStyle = useMemo(
+      () => getDarkTheme(editorMode),
+      [editorMode]
+    );
+    // SSR will always render the light theme, so we need to defer the theme if user selected dark mode
+    const [deferTheme, setDeferTheme] = useState('light');
+    useEffect(() => {
+      setDeferTheme(theme === 'dark' ? 'dark' : 'light');
+    }, [theme]);
+    return (
+      <AffineThemeProvider
+        theme={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
+      >
+        <ThemeInjector
+          themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
+        />
+        {children}
+      </AffineThemeProvider>
+    );
+  }
+);
+
+const themes = ['dark', 'light'];

 export const ThemeProvider = ({
  children,
 }: PropsWithChildren<ThemeProviderProps>) => {
-  const [theme, setTheme] = useAtom(themeAtom);
-  const systemTheme = useSystemTheme();
-  // fixme: use mode detect
-  const [currentWorkspace] = useCurrentWorkspace();
-  const [currentPage] = useCurrentPageId();
-  const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
-  const editorMode =
-    pageMeta.find(page => page.id === currentPage)?.mode ?? 'page';
-  const themeStyle = useMemo(
-    () =>
-      theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode),
-    [editorMode, theme]
-  );
-  const changeMode = useCallback(
-    (themeMode: Theme) => {
-      setTheme(themeMode);
-    },
-    [setTheme]
-  );
-
-  const onceRef = useRef(false);
-
-  useEffect(() => {
-    if (onceRef.current) {
-      return;
-    }
-    if (theme !== 'auto') {
-      setTheme(systemTheme);
-    }
-    onceRef.current = true;
-  }, [setTheme, systemTheme, theme]);
-
-  const realTheme: ThemeMode = theme === 'auto' ? systemTheme : theme;
-
  return (
-    // Use MuiThemeProvider is just because some Transitions in Mui components need it
-    <MuiThemeProvider theme={muiTheme}>
-      <ThemeContext.Provider
-        value={{ mode: realTheme, changeMode, theme: themeStyle }}
-      >
-        <ThemeInjector theme={realTheme} themeStyle={themeStyle} />
-        <ComponentThemeProvider theme={themeStyle}>
-          {children}
-        </ComponentThemeProvider>
-      </ThemeContext.Provider>
-    </MuiThemeProvider>
+    <NextThemeProvider themes={themes}>
+      <ThemeProviderInner>{children}</ThemeProviderInner>
+    </NextThemeProvider>
  );
 };
--- a/apps/web/src/utils/create-emotion-cache.ts
+++ b/apps/web/src/utils/create-emotion-cache.ts
@ -0,0 +1,17 @@
+import { getEnvironment } from '@affine/env';
+import createCache from '@emotion/cache';
+
+const isBrowser = getEnvironment().isBrowser;
+
+export default function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'affine-style', insertionPoint });
+}
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -16,14 +16,18 @@
    "@blocksuite/icons": "2.0.17",
    "@blocksuite/react": "0.5.0-20230303192351-13b0dd7",
    "@blocksuite/store": "0.5.0-20230303192351-13b0dd7",
+    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.6",
    "@mui/base": "5.0.0-alpha.119",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.11",
+    "@mui/styled-engine-sc": "^5.11.11",
    "lit": "^2.6.1",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.8"
  },
  "devDependencies": {
    "@storybook/addon-actions": "7.0.0-beta.60",
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@ -16,3 +16,151 @@ export * from './ui/shared/Container';
 export * from './ui/table';
 export * from './ui/toast';
 export * from './ui/tooltip';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    colors: {
+      primaryColor: string;
+
+      pageBackground: string;
+      popoverBackground: string;
+      tooltipBackground: string;
+      hoverBackground: string;
+      innerHoverBackground: string;
+      codeBackground: string;
+      codeBlockBackground: string;
+      // Use for blockHub and slide bar background
+      hubBackground: string;
+      cardHoverBackground: string;
+      warningBackground: string;
+      errorBackground: string;
+      // Use for the page`s text
+      textColor: string;
+      secondaryTextColor: string;
+      // Use for the editor`s text, because in edgeless mode text is different form other
+      edgelessTextColor: string;
+      linkColor: string;
+      // In dark mode, normal text`s (not bold) color
+      linkColor2: string;
+      linkVisitedColor: string;
+      iconColor: string;
+      handleColor: string;
+      popoverColor: string;
+      inputColor: string;
+      tooltipColor: string;
+      codeColor: string;
+      quoteColor: string;
+      placeHolderColor: string;
+      selectedColor: string;
+      borderColor: string;
+      disableColor: string;
+      warningColor: string;
+      errorColor: string;
+      lineNumberColor: string;
+    };
+    font: {
+      title: string;
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+      base: string;
+      sm: string; // small
+      xs: string; // tiny
+
+      family: string;
+      numberFamily: string;
+      codeFamily: string;
+
+      lineHeight: string | number;
+    };
+    zIndex: {
+      modal: number;
+      popover: number;
+    };
+    shadow: {
+      modal: string;
+      popover: string;
+      tooltip: string;
+    };
+    space: {
+      paragraph: string;
+    };
+    radius: {
+      popover: string;
+    };
+  }
+
+  interface ThemeOptions {
+    colors: {
+      primaryColor: string;
+
+      pageBackground: string;
+      popoverBackground: string;
+      tooltipBackground: string;
+      hoverBackground: string;
+      innerHoverBackground: string;
+      codeBackground: string;
+      codeBlockBackground: string;
+      // Use for blockHub and slide bar background
+      hubBackground: string;
+      cardHoverBackground: string;
+      warningBackground: string;
+      errorBackground: string;
+      // Use for the page`s text
+      textColor: string;
+      secondaryTextColor: string;
+      // Use for the editor`s text, because in edgeless mode text is different form other
+      edgelessTextColor: string;
+      linkColor: string;
+      // In dark mode, normal text`s (not bold) color
+      linkColor2: string;
+      linkVisitedColor: string;
+      iconColor: string;
+      handleColor: string;
+      popoverColor: string;
+      inputColor: string;
+      tooltipColor: string;
+      codeColor: string;
+      quoteColor: string;
+      placeHolderColor: string;
+      selectedColor: string;
+      borderColor: string;
+      disableColor: string;
+      warningColor: string;
+      errorColor: string;
+      lineNumberColor: string;
+    };
+    font: {
+      title: string;
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+      base: string;
+      sm: string; // small
+      xs: string; // tiny
+
+      family: string;
+      numberFamily: string;
+      codeFamily: string;
+
+      lineHeight: string | number;
+    };
+    shadow: {
+      modal: string;
+      popover: string;
+      tooltip: string;
+    };
+    space: {
+      paragraph: string;
+    };
+    radius: {
+      popover: string;
+    };
+  }
+}
--- a/packages/component/src/styles/styled.tsx
+++ b/packages/component/src/styles/styled.tsx
@ -1,10 +1,17 @@
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import emotionStyled from '@emotion/styled';
+import { CssBaseline } from '@mui/material';
+import {
+  createTheme as createMuiTheme,
+  css,
+  keyframes,
+  styled,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
+import { useMemo } from 'react';

 import { AffineTheme } from './types';
-export { css, keyframes } from '@emotion/react';
-export const styled = emotionStyled;
+
+export { css, keyframes, styled };

 export const ThemeProvider = ({
  theme,
@ -12,5 +19,11 @@ export const ThemeProvider = ({
 }: PropsWithChildren<{
  theme: AffineTheme;
 }>) => {
-  return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
+  const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
+  return (
+    <MuiThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      {children}
+    </MuiThemeProvider>
+  );
 };
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@ -2,7 +2,7 @@ import '@emotion/react';

 import type { EditorContainer } from '@blocksuite/editor';

-import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+import { AffineTheme, AffineThemeCSSVariables } from './types';

 const basicFontFamily =
  'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
@ -11,7 +11,9 @@ export const getLightTheme = (
  editorMode: EditorContainer['mode']
 ): AffineTheme => {
  return {
-    mode: 'light',
+    palette: {
+      mode: 'light',
+    },
    editorMode,
    colors: {
      primaryColor: '#6880FF',
@ -92,7 +94,9 @@ export const getDarkTheme = (

  return {
    ...lightTheme,
-    mode: 'dark',
+    palette: {
+      mode: 'dark',
+    },
    colors: {
      primaryColor: '#6880FF',
      pageBackground: '#2c2c2c',
@ -143,11 +147,10 @@ export const getDarkTheme = (
 };

 export const globalThemeVariables: (
-  mode: ThemeMode,
  theme: AffineTheme
-) => AffineThemeCSSVariables = (mode, theme) => {
+) => AffineThemeCSSVariables = theme => {
  return {
-    '--affine-theme-mode': theme.mode,
+    '--affine-theme-mode': theme.palette.mode,
    '--affine-editor-mode': theme.editorMode,

    '--affine-primary-color': theme.colors.primaryColor,
--- a/packages/component/src/styles/types.ts
+++ b/packages/component/src/styles/types.ts
@ -14,8 +14,10 @@ export type ThemeProviderValue = {
 };

 export interface AffineTheme {
-  mode: Theme;
  editorMode: EditorContainer['mode'];
+  palette: {
+    mode: 'light' | 'dark';
+  };
  colors: {
    primaryColor: string;

--- a/packages/component/src/ui/button/styles.ts
+++ b/packages/component/src/ui/button/styles.ts
@ -16,7 +16,7 @@ export const StyledIconButton = styled('button', {
      'hoverColor',
      'hoverStyle',
      'darker',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<{
  width: number;
@ -90,7 +90,7 @@ export const StyledTextButton = styled('button', {
      'hoverColor',
      'hoverStyle',
      'bold',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<
  Pick<
@ -153,7 +153,7 @@ export const StyledButton = styled('button', {
      'type',
      'bold',
      'noBorder',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<
  Pick<
--- a/packages/component/src/ui/button/utils.ts
+++ b/packages/component/src/ui/button/utils.ts
@ -1,4 +1,5 @@
-import { AffineTheme } from '../../styles';
+import { Theme } from '@mui/material';
+
 import {
  ButtonProps,
  SIZE_DEFAULT,
@ -38,7 +39,7 @@ export const getSize = (
 };

 export const getButtonColors = (
-  theme: AffineTheme,
+  theme: Theme,
  type: ButtonProps['type'],
  disabled: boolean,
  extend?: {
--- a/packages/component/src/ui/confirm/styles.ts
+++ b/packages/component/src/ui/confirm/styles.ts
@ -10,7 +10,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
  };
 });

-export const StyledConfirmTitle = styled.div(({ theme }) => {
+export const StyledConfirmTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.h6,
    fontWeight: 600,
@ -20,7 +20,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledConfirmContent = styled.div(({ theme }) => {
+export const StyledConfirmContent = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    textAlign: 'center',
@ -30,14 +30,14 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
  };
 });

-export const StyledColumnButtonWrapper = styled.div(() => {
+export const StyledColumnButtonWrapper = styled('div')(() => {
  return {
    ...displayFlex('center', 'center'),
    flexDirection: 'column',
    marginTop: '32px',
  };
 });
-export const StyledRowButtonWrapper = styled.div(() => {
+export const StyledRowButtonWrapper = styled('div')(() => {
  return {
    ...displayFlex('center', 'center'),
    flexDirection: 'row',
--- a/packages/component/src/ui/empty/style.ts
+++ b/packages/component/src/ui/empty/style.ts
@ -1,6 +1,6 @@
 import { displayFlex, styled } from '../../styles';

-export const StyledEmptyContainer = styled.div(() => {
+export const StyledEmptyContainer = styled('div')(() => {
  return {
    height: '100%',
    ...displayFlex('center', 'center'),
--- a/packages/component/src/ui/layout/Content.tsx
+++ b/packages/component/src/ui/layout/Content.tsx
@ -27,7 +27,7 @@ export const Content = styled('div', {
      'width',
      'maxWidth',
      'align',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<ContentProps>(
  ({
--- a/packages/component/src/ui/layout/Wrapper.tsx
+++ b/packages/component/src/ui/layout/Wrapper.tsx
@ -45,7 +45,7 @@ export const Wrapper = styled('div', {
      'marginLeft',
      'marginRight',
      'marginBottom',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<WrapperProps>(
  ({
@ -90,7 +90,7 @@ export const FlexWrapper = styled(Wrapper, {
      'flexDirection',
      'flexShrink',
      'flexGrow',
-    ].includes(prop);
+    ].includes(prop as string);
  },
 })<FlexWrapperProps>(
  ({
@ -116,7 +116,7 @@ export const FlexWrapper = styled(Wrapper, {
 // TODO: Complete me
 export const GridWrapper = styled(Wrapper, {
  shouldForwardProp: prop => {
-    return ![''].includes(prop);
+    return ![''].includes(prop as string);
  },
 })<WrapperProps>(() => {
  return {
--- a/packages/component/src/ui/menu/styles.ts
+++ b/packages/component/src/ui/menu/styles.ts
@ -22,7 +22,7 @@ export const StyledArrow = styled(ArrowRightSmallIcon)({
  margin: 'auto',
 });

-export const StyledMenuItem = styled.button<{
+export const StyledMenuItem = styled('button')<{
  isDir?: boolean;
 }>(({ theme, isDir = false }) => {
  return {
--- a/packages/component/src/ui/modal/ModalWrapper.tsx
+++ b/packages/component/src/ui/modal/ModalWrapper.tsx
@ -2,7 +2,7 @@ import { CSSProperties } from 'react';

 import { styled } from '../../styles';

-export const ModalWrapper = styled.div<{
+export const ModalWrapper = styled('div')<{
  width?: CSSProperties['width'];
  height?: CSSProperties['height'];
  minHeight?: CSSProperties['minHeight'];
--- a/packages/component/src/ui/modal/styles.ts
+++ b/packages/component/src/ui/modal/styles.ts
@ -4,7 +4,7 @@ import { CSSProperties } from 'react';
 import { styled } from '../../styles';
 import { Wrapper } from '../layout';

-export const StyledBackdrop = styled.div(({ theme }) => {
+export const StyledBackdrop = styled('div')(({ theme }) => {
  return {
    zIndex: '-1',
    position: 'fixed',
@ -13,7 +13,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {
    top: '0',
    left: '0',
    backgroundColor:
-      theme.mode === 'light'
+      theme.palette.mode === 'light'
        ? 'rgba(58, 76, 92, 0.2)'
        : 'rgba(34, 34, 34, 0.6)',
  };
@ -21,7 +21,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {

 export const StyledModal = styled(ModalUnstyled, {
  shouldForwardProp: prop => {
-    return !['justifyContent', 'alignItems'].includes(prop);
+    return !['justifyContent', 'alignItems'].includes(prop as string);
  },
 })<{
  alignItems: CSSProperties['alignItems'];
--- a/packages/component/src/ui/table/styles.ts
+++ b/packages/component/src/ui/table/styles.ts
@ -1,7 +1,7 @@
 import { styled, textEllipsis } from '../../styles';
 import { TableCellProps } from './interface';

-export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
+export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
  ({ theme, tableLayout }) => {
    return {
      fontSize: theme.font.base,
@ -14,13 +14,13 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
  }
 );

-export const StyledTableBody = styled.tbody(() => {
+export const StyledTableBody = styled('tbody')(() => {
  return {
    fontWeight: 400,
  };
 });

-export const StyledTableCell = styled.td<
+export const StyledTableCell = styled('td')<
  Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
 >(({ align = 'left', ellipsis = false, proportion }) => {
  const width = proportion ? `${proportion * 100}%` : 'auto';
@ -37,7 +37,7 @@ export const StyledTableCell = styled.td<
  };
 });

-export const StyledTableHead = styled.thead(() => {
+export const StyledTableHead = styled('thead')(() => {
  return {
    fontWeight: 500,
    tr: {
@ -50,7 +50,7 @@ export const StyledTableHead = styled.thead(() => {
  };
 });

-export const StyledTableRow = styled.tr(({ theme }) => {
+export const StyledTableRow = styled('tr')(({ theme }) => {
  return {
    td: {
      transition: 'background .15s',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -147,9 +147,11 @@ importers:
      '@blocksuite/react': 0.5.0-20230303192351-13b0dd7
      '@blocksuite/store': 0.5.0-20230303192351-13b0dd7
      '@emotion/cache': ^11.10.5
-      '@emotion/css': ^11.10.6
      '@emotion/react': ^11.10.6
+      '@emotion/server': ^11.10.0
+      '@emotion/styled': ^11.10.6
      '@mui/material': ^5.11.11
+      '@mui/styled-engine-sc': ^5.11.11
      '@perfsee/webpack': ^1.3.0
      '@redux-devtools/extension': ^3.2.5
      '@swc-jotai/debug-label': ^0.0.6
@ -168,11 +170,13 @@ importers:
      next: ^13.2.2
      next-debug-local: ^0.1.5
      next-router-mock: ^0.9.2
+      next-themes: ^0.2.1
      raw-loader: ^4.0.2
      react: ^18.2.0
      react-dom: ^18.2.0
      react-helmet-async: ^1.3.0
      redux: ^4.2.1
+      styled-components: ^5.3.8
      swr: ^2.0.4
      typescript: ^4.9.5
      y-indexeddb: ^9.0.9
@ -191,18 +195,22 @@ importers:
      '@blocksuite/react': 0.5.0-20230303192351-13b0dd7_qlfb2yy7nxtfdwqrqhb63y6k6i
      '@blocksuite/store': 0.5.0-20230303192351-13b0dd7_lit@2.6.1+yjs@13.5.48
      '@emotion/cache': 11.10.5
-      '@emotion/css': 11.10.6
      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
-      '@mui/material': 5.11.11_dl5meo57oqikomakll4aynjcye
+      '@emotion/server': 11.10.0
+      '@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
+      '@mui/material': 5.11.11_xqeqsl5kvjjtyxwyi3jhw3yuli
+      '@mui/styled-engine-sc': 5.11.11_styled-components@5.3.8
      cmdk: 0.1.22_zula6vjvt3wdocc4mwcxqa6nzi
      css-spring: 4.1.0
      dayjs: 1.11.7
      jotai: 2.0.3_react@18.2.0
      jotai-devtools: 0.2.0_tfg3pgykuuhpvkcrwis64xs5oq
      lit: 2.6.1
+      next-themes: 0.2.1_nvzgbose6yf6w7ijjprgspqefi
      react: 18.2.0
      react-dom: 18.2.0_react@18.2.0
      react-helmet-async: 1.3.0_biqbaboplfbrettd7655fr4n2y
+      styled-components: 5.3.8_biqbaboplfbrettd7655fr4n2y
      swr: 2.0.4_react@18.2.0
      y-indexeddb: 9.0.9_yjs@13.5.48
      y-protocols: 1.0.5
@ -235,11 +243,14 @@ importers:
      '@blocksuite/icons': 2.0.17
      '@blocksuite/react': 0.5.0-20230303192351-13b0dd7
      '@blocksuite/store': 0.5.0-20230303192351-13b0dd7
+      '@emotion/cache': ^11.10.5
      '@emotion/react': ^11.10.6
+      '@emotion/server': ^11.10.0
      '@emotion/styled': ^11.10.6
      '@mui/base': 5.0.0-alpha.119
      '@mui/icons-material': ^5.11.11
      '@mui/material': ^5.11.11
+      '@mui/styled-engine-sc': ^5.11.11
      '@storybook/addon-actions': 7.0.0-beta.60
      '@storybook/addon-essentials': 7.0.0-beta.60
      '@storybook/addon-links': 7.0.0-beta.60
@ -255,6 +266,7 @@ importers:
      react-dom: ^18.2.0
      storybook: 7.0.0-beta.60
      storybook-dark-mode-v7: 3.0.0-alpha.0
+      styled-components: ^5.3.8
      swc: ^1.0.11
      swc-loader: ^0.2.3
      typescript: ^4.9.5
@ -269,14 +281,18 @@ importers:
      '@blocksuite/icons': 2.0.17_pmekkgnqduwlme35zpnqhenc34
      '@blocksuite/react': 0.5.0-20230303192351-13b0dd7_qlfb2yy7nxtfdwqrqhb63y6k6i
      '@blocksuite/store': 0.5.0-20230303192351-13b0dd7_lit@2.6.1+yjs@13.5.48
+      '@emotion/cache': 11.10.5
      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
+      '@emotion/server': 11.10.0
      '@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
      '@mui/base': 5.0.0-alpha.119_zula6vjvt3wdocc4mwcxqa6nzi
      '@mui/icons-material': 5.11.11_h5fh5ntwxtyr677wxvzgewjsma
      '@mui/material': 5.11.11_xqeqsl5kvjjtyxwyi3jhw3yuli
+      '@mui/styled-engine-sc': 5.11.11_styled-components@5.3.8
      lit: 2.6.1
      react: 18.2.0
      react-dom: 18.2.0_react@18.2.0
+      styled-components: 5.3.8_biqbaboplfbrettd7655fr4n2y
    devDependencies:
      '@storybook/addon-actions': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y
      '@storybook/addon-essentials': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y
@ -420,14 +436,14 @@ packages:
    dependencies:
      '@ampproject/remapping': 2.2.0
      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.20.7
+      '@babel/generator': 7.21.1
      '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
      '@babel/helper-module-transforms': 7.20.11
      '@babel/helpers': 7.20.13
-      '@babel/parser': 7.20.15
+      '@babel/parser': 7.21.2
      '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.13
-      '@babel/types': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
      convert-source-map: 1.9.0
      debug: 4.3.4
      gensync: 1.0.0-beta.2
@ -460,15 +476,6 @@ packages:
      - supports-color
    dev: true

-  /@babel/generator/7.20.7:
-    resolution: {integrity: sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.2
-      '@jridgewell/gen-mapping': 0.3.2
-      jsesc: 2.5.2
-    dev: true
-
  /@babel/generator/7.21.1:
    resolution: {integrity: sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==}
    engines: {node: '>=6.9.0'}
@ -477,14 +484,12 @@ packages:
      '@jridgewell/gen-mapping': 0.3.2
      '@jridgewell/trace-mapping': 0.3.17
      jsesc: 2.5.2
-    dev: true

  /@babel/helper-annotate-as-pure/7.18.6:
    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.21.2
-    dev: true

  /@babel/helper-builder-binary-assignment-operator-visitor/7.18.9:
    resolution: {integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==}
@ -571,7 +576,6 @@ packages:
  /@babel/helper-environment-visitor/7.18.9:
    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
    engines: {node: '>=6.9.0'}
-    dev: true

  /@babel/helper-explode-assignable-expression/7.18.6:
    resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
@ -586,14 +590,12 @@ packages:
    dependencies:
      '@babel/template': 7.20.7
      '@babel/types': 7.21.2
-    dev: true

  /@babel/helper-hoist-variables/7.18.6:
    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.21.2
-    dev: true

  /@babel/helper-member-expression-to-functions/7.21.0:
    resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==}
@ -700,7 +702,6 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.21.2
-    dev: true

  /@babel/helper-string-parser/7.19.4:
    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
@ -757,21 +758,12 @@ packages:
      chalk: 2.4.2
      js-tokens: 4.0.0

-  /@babel/parser/7.20.15:
-    resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.21.2
-    dev: true
-
  /@babel/parser/7.21.2:
    resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==}
    engines: {node: '>=6.0.0'}
    hasBin: true
    dependencies:
      '@babel/types': 7.21.2
-    dev: true

  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.21.0:
    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
@ -1724,25 +1716,6 @@ packages:
      '@babel/code-frame': 7.18.6
      '@babel/parser': 7.21.2
      '@babel/types': 7.21.2
-    dev: true
-
-  /@babel/traverse/7.20.13:
-    resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.21.1
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.21.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.2
-      '@babel/types': 7.21.2
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true

  /@babel/traverse/7.21.2:
    resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
@ -1762,14 +1735,23 @@ packages:
      - supports-color
    dev: true

-  /@babel/types/7.20.7:
-    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+  /@babel/traverse/7.21.2_supports-color@5.5.0:
+    resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
    engines: {node: '>=6.9.0'}
    dependencies:
-      '@babel/helper-string-parser': 7.19.4
-      '@babel/helper-validator-identifier': 7.19.1
-      to-fast-properties: 2.0.0
-    dev: true
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.21.1
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.21.2
+      '@babel/types': 7.21.2
+      debug: 4.3.4_supports-color@5.5.0
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false

  /@babel/types/7.21.2:
    resolution: {integrity: sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==}
@ -2167,16 +2149,6 @@ packages:
      stylis: 4.1.3
    dev: false

-  /@emotion/css/11.10.6:
-    resolution: {integrity: sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==}
-    dependencies:
-      '@emotion/babel-plugin': 11.10.6
-      '@emotion/cache': 11.10.5
-      '@emotion/serialize': 1.1.1
-      '@emotion/sheet': 1.2.1
-      '@emotion/utils': 1.2.0
-    dev: false
-
  /@emotion/hash/0.9.0:
    resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==}
    dev: false
@ -2222,6 +2194,20 @@ packages:
      csstype: 3.1.1
    dev: false

+  /@emotion/server/11.10.0:
+    resolution: {integrity: sha512-MTvJ21JPo9aS02GdjFW4nhdwOi2tNNpMmAM/YED0pkxzjDNi5WbiTwXqaCnvLc2Lr8NFtjhT0az1vTJyLIHYcw==}
+    peerDependencies:
+      '@emotion/css': ^11.0.0-rc.0
+    peerDependenciesMeta:
+      '@emotion/css':
+        optional: true
+    dependencies:
+      '@emotion/utils': 1.2.0
+      html-tokenize: 2.0.1
+      multipipe: 1.0.2
+      through: 2.3.8
+    dev: false
+
  /@emotion/sheet/1.2.1:
    resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
    dev: false
@ -2247,6 +2233,14 @@ packages:
      react: 18.2.0
    dev: false

+  /@emotion/stylis/0.8.5:
+    resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
+    dev: false
+
+  /@emotion/unitless/0.7.5:
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+    dev: false
+
  /@emotion/unitless/0.8.0:
    resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==}
    dev: false
@ -3284,28 +3278,23 @@ packages:
      '@jridgewell/set-array': 1.1.2
      '@jridgewell/sourcemap-codec': 1.4.14
      '@jridgewell/trace-mapping': 0.3.17
-    dev: true

  /@jridgewell/resolve-uri/3.1.0:
    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/set-array/1.1.2:
    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/sourcemap-codec/1.4.14:
    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true

  /@jridgewell/trace-mapping/0.3.17:
    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true

  /@jridgewell/trace-mapping/0.3.9:
    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
@ -3431,41 +3420,6 @@ packages:
      react: 18.2.0
    dev: false

-  /@mui/material/5.11.11_dl5meo57oqikomakll4aynjcye:
-    resolution: {integrity: sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.21.0
-      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
-      '@mui/base': 5.0.0-alpha.119_zula6vjvt3wdocc4mwcxqa6nzi
-      '@mui/core-downloads-tracker': 5.11.11
-      '@mui/system': 5.11.11_oouaibmszuch5k64ms7uxp2aia
-      '@mui/types': 7.2.3_@types+react@18.0.28
-      '@mui/utils': 5.11.11_react@18.2.0
-      '@types/react': 18.0.28
-      '@types/react-transition-group': 4.4.5
-      clsx: 1.2.1
-      csstype: 3.1.1
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      react-is: 18.2.0
-      react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
-    dev: false
-
  /@mui/material/5.11.11_xqeqsl5kvjjtyxwyi3jhw3yuli:
    resolution: {integrity: sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==}
    engines: {node: '>=12.0.0'}
@ -3519,25 +3473,19 @@ packages:
      react: 18.2.0
    dev: false

-  /@mui/styled-engine/5.11.11_3og6jmu6wvzuytygvdoxepq3x4:
-    resolution: {integrity: sha512-wV0UgW4lN5FkDBXefN8eTYeuE9sjyQdg5h94vtwZCUamGQEzmCOtir4AakgmbWMy0x8OLjdEUESn9wnf5J9MOg==}
+  /@mui/styled-engine-sc/5.11.11_styled-components@5.3.8:
+    resolution: {integrity: sha512-6+HsfcKHlhjQklDoEup7Itl+Xgn+BCsqEpIdIIhlxED4YlOZ38xghxIKrx78XFZznTorbhAspUgDDKIaB5vDMg==}
    engines: {node: '>=12.0.0'}
    peerDependencies:
-      '@emotion/react': ^11.4.1
-      '@emotion/styled': ^11.3.0
-      react: ^17.0.0 || ^18.0.0
+      '@types/styled-components': ^5.1.14
+      styled-components: ^5.3.1
    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
+      '@types/styled-components':
        optional: true
    dependencies:
      '@babel/runtime': 7.21.0
-      '@emotion/cache': 11.10.5
-      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
-      csstype: 3.1.1
      prop-types: 15.8.1
-      react: 18.2.0
+      styled-components: 5.3.8_biqbaboplfbrettd7655fr4n2y
    dev: false

  /@mui/styled-engine/5.11.11_xqp3pgpqjlfxxa3zxu4zoc4fba:
@ -3592,35 +3540,6 @@ packages:
      react: 18.2.0
    dev: false

-  /@mui/system/5.11.11_oouaibmszuch5k64ms7uxp2aia:
-    resolution: {integrity: sha512-a9gaOAJBjpzypDfhbGZQ8HzdcxdxsKkFvbp1aAWZhFHBPdehEkARNh7mj851VfEhD/GdffYt85PFKFKdUta5Eg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.21.0
-      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
-      '@mui/private-theming': 5.11.11_pmekkgnqduwlme35zpnqhenc34
-      '@mui/styled-engine': 5.11.11_3og6jmu6wvzuytygvdoxepq3x4
-      '@mui/types': 7.2.3_@types+react@18.0.28
-      '@mui/utils': 5.11.11_react@18.2.0
-      '@types/react': 18.0.28
-      clsx: 1.2.1
-      csstype: 3.1.1
-      prop-types: 15.8.1
-      react: 18.2.0
-    dev: false
-
  /@mui/types/7.2.3_@types+react@18.0.28:
    resolution: {integrity: sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==}
    peerDependencies:
@ -3660,7 +3579,6 @@ packages:

  /@next/env/13.2.3:
    resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
-    dev: true

  /@next/eslint-plugin-next/13.2.3:
    resolution: {integrity: sha512-QmMPItnU7VeojI1KnuwL9SLFWEwmaNHNlnOGpoTwdLoSiP9sc8KYiAHWEc4/44L+cAdCxcZYvn7frcRNP5l84Q==}
@ -3683,7 +3601,6 @@ packages:
    cpu: [arm]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-android-arm64/13.1.0:
@ -3701,7 +3618,6 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-darwin-arm64/13.1.0:
@ -3719,7 +3635,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-darwin-x64/13.1.0:
@ -3737,7 +3652,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-freebsd-x64/13.1.0:
@ -3755,7 +3669,6 @@ packages:
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-linux-arm-gnueabihf/13.1.0:
@ -3773,7 +3686,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-linux-arm64-gnu/13.1.0:
@ -3791,7 +3703,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-linux-arm64-musl/13.1.0:
@ -3809,7 +3720,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-linux-x64-gnu/13.1.0:
@ -3827,7 +3737,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-linux-x64-musl/13.1.0:
@ -3845,7 +3754,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-win32-arm64-msvc/13.1.0:
@ -3863,7 +3771,6 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-win32-ia32-msvc/13.1.0:
@ -3881,7 +3788,6 @@ packages:
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@next/swc-win32-x64-msvc/13.1.0:
@ -3899,7 +3805,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@nodelib/fs.scandir/2.1.5:
@ -5989,7 +5894,7 @@ packages:
      '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12
      magic-string: 0.27.0
      react-refresh: 0.14.0
-      vite: 4.1.4_@types+node@18.14.4
+      vite: 4.1.4
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -6501,6 +6406,23 @@ packages:
      - supports-color
    dev: true

+  /babel-plugin-styled-components/2.0.7_styled-components@5.3.8:
+    resolution: {integrity: sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==}
+    peerDependencies:
+      styled-components: '>= 2'
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      babel-plugin-syntax-jsx: 6.18.0
+      lodash: 4.17.21
+      picomatch: 2.3.1
+      styled-components: 5.3.8_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
+  /babel-plugin-syntax-jsx/6.18.0:
+    resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
+    dev: false
+
  /balanced-match/1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@ -6670,6 +6592,10 @@ packages:
    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
    dev: true

+  /buffer-from/0.1.2:
+    resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==}
+    dev: false
+
  /buffer-from/1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
    dev: true
@ -6808,6 +6734,10 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /camelize/1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+    dev: false
+
  /caniuse-lite/1.0.30001419:
    resolution: {integrity: sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==}

@ -7171,7 +7101,6 @@ packages:

  /core-util-is/1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
-    dev: true

  /cosmiconfig/7.0.1:
    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
@ -7236,12 +7165,25 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /css-color-keywords/1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+    dev: false
+
  /css-spring/4.1.0:
    resolution: {integrity: sha512-RdA4NuRNk2xChTSo+52P2jlfr+rUgNY94mV7uHrCeDPvaUtFZgW6LMoCy4xEX3HphZ7LLkCHiUY5PBSegFBE3A==}
    dependencies:
      lodash: 4.17.21
    dev: false

+  /css-to-react-native/3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: false
+
  /css.escape/1.5.1:
    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
    dev: true
@ -7328,6 +7270,19 @@ packages:
    dependencies:
      ms: 2.1.2

+  /debug/4.3.4_supports-color@5.5.0:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+      supports-color: 5.5.0
+    dev: false
+
  /decamelize-keys/1.1.1:
    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
    engines: {node: '>=0.10.0'}
@ -7596,6 +7551,12 @@ packages:
    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
    dev: true

+  /duplexer2/0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: false
+
  /duplexify/3.7.1:
    resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
    dependencies:
@ -9143,7 +9104,6 @@ packages:
  /globals/11.12.0:
    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
    engines: {node: '>=4'}
-    dev: true

  /globals/13.19.0:
    resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==}
@ -9372,6 +9332,17 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /html-tokenize/2.0.1:
+    resolution: {integrity: sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==}
+    hasBin: true
+    dependencies:
+      buffer-from: 0.1.2
+      inherits: 2.0.4
+      minimist: 1.2.8
+      readable-stream: 1.0.34
+      through2: 0.4.2
+    dev: false
+
  /htmlparser2/8.0.1:
    resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
    dependencies:
@ -9826,9 +9797,12 @@ packages:
      is-docker: 2.2.1
    dev: true

+  /isarray/0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
  /isarray/1.0.0:
    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-    dev: true

  /isarray/2.0.5:
    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
@ -9884,7 +9858,7 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      '@babel/core': 7.20.12
-      '@babel/parser': 7.20.15
+      '@babel/parser': 7.21.2
      '@istanbuljs/schema': 0.1.3
      istanbul-lib-coverage: 3.2.0
      semver: 6.3.0
@ -10084,7 +10058,6 @@ packages:
    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
    engines: {node: '>=4'}
    hasBin: true
-    dev: true

  /json-buffer/3.0.1:
    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@ -10130,7 +10103,7 @@ packages:
    resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
    hasBin: true
    dependencies:
-      minimist: 1.2.6
+      minimist: 1.2.8
    dev: true

  /json5/2.2.3:
@ -10711,7 +10684,6 @@ packages:

  /minimist/1.2.8:
    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true

  /minipass/3.3.6:
    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
@ -10783,6 +10755,13 @@ packages:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
    dev: true

+  /multipipe/1.0.2:
+    resolution: {integrity: sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==}
+    dependencies:
+      duplexer2: 0.1.4
+      object-assign: 4.1.1
+    dev: false
+
  /mz/2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
    dependencies:
@ -10833,6 +10812,18 @@ packages:
      react: 18.2.0
    dev: true

+  /next-themes/0.2.1_nvzgbose6yf6w7ijjprgspqefi:
+    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+    peerDependencies:
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      next: 13.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
  /next-tick/1.1.0:
    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
    dev: false
@ -10926,7 +10917,6 @@ packages:
    transitivePeerDependencies:
      - '@babel/core'
      - babel-plugin-macros
-    dev: true

  /no-case/3.0.4:
    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@ -11125,6 +11115,10 @@ packages:
      call-bind: 1.0.2
      define-properties: 1.2.0

+  /object-keys/0.4.0:
+    resolution: {integrity: sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==}
+    dev: false
+
  /object-keys/1.1.1:
    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
    engines: {node: '>= 0.4'}
@ -11504,7 +11498,6 @@ packages:
  /picomatch/2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}
-    dev: true

  /pidtree/0.6.0:
    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
@ -11569,6 +11562,10 @@ packages:
      '@babel/runtime': 7.21.0
    dev: true

+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
+
  /postcss/8.4.14:
    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
    engines: {node: ^10 || ^12 || >=14}
@ -11634,7 +11631,6 @@ packages:

  /process-nextick-args/2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-    dev: true

  /process-on-spawn/1.0.0:
    resolution: {integrity: sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==}
@ -12090,6 +12086,15 @@ packages:
      strip-bom: 3.0.0
    dev: true

+  /readable-stream/1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
  /readable-stream/2.3.8:
    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
    dependencies:
@ -12100,7 +12105,6 @@ packages:
      safe-buffer: 5.1.2
      string_decoder: 1.1.1
      util-deprecate: 1.0.2
-    dev: true

  /readable-stream/3.6.1:
    resolution: {integrity: sha512-+rQmrWMYGA90yenhTYsLWAsLsqVC8osOw6PKE1HDYiO0gdPeKe/xDHNzIAIn4C91YQ6oenEhfYqqc1883qHbjQ==}
@ -12380,7 +12384,6 @@ packages:

  /safe-buffer/5.1.2:
    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-    dev: true

  /safe-buffer/5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
@ -12881,11 +12884,14 @@ packages:
      es-abstract: 1.21.1
    dev: true

+  /string_decoder/0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
  /string_decoder/1.1.1:
    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
    dependencies:
      safe-buffer: 5.1.2
-    dev: true

  /string_decoder/1.3.0:
    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
@ -12969,6 +12975,28 @@ packages:
      peek-readable: 5.0.0
    dev: true

+  /styled-components/5.3.8_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-6jQrlvaJQ16uWVVO0rBfApaTPItkqaG32l3746enNZzpMDxMvzmHzj8rHUg39bvVtom0Y8o8ZzWuchEXKGjVsg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+      react-is: '>= 16.8.0'
+    dependencies:
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/traverse': 7.21.2_supports-color@5.5.0
+      '@emotion/is-prop-valid': 1.2.0
+      '@emotion/stylis': 0.8.5
+      '@emotion/unitless': 0.7.5
+      babel-plugin-styled-components: 2.0.7_styled-components@5.3.8
+      css-to-react-native: 3.2.0
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      shallowequal: 1.1.0
+      supports-color: 5.5.0
+    dev: false
+
  /styled-jsx/5.1.1_react@18.2.0:
    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
    engines: {node: '>= 12.0.0'}
@ -13163,7 +13191,13 @@ packages:

  /through/2.3.8:
    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
-    dev: true
+
+  /through2/0.4.2:
+    resolution: {integrity: sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==}
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 2.1.2
+    dev: false

  /through2/2.0.5:
    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@ -14147,6 +14181,13 @@ packages:
        optional: true
    dev: true

+  /xtend/2.1.2:
+    resolution: {integrity: sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      object-keys: 0.4.0
+    dev: false
+
  /xtend/4.0.2:
    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
    engines: {node: '>=0.4'}