refactor: unify theme (#1303)

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';

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",

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)``;

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',

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,

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

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',

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')}

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 {
+    //...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
-    height: '36px',
+    :hover {
-    borderRadius: '18px',
+      border: ${disabled ? '' : `1px solid ${theme.colors.primaryColor}`}
-    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}`,
-    },
-  };
 });
 
 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(
+  const animateScaleOrigin = toString(
-    `${toString(spring({ width: '0px' }, { width: '36px' }))}`
+    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 {
+  return css`
-    width: '0',
+    width: 0;
-    height: '100%',
+    height: 100%;
-    display: 'flex',
+    display: flex;
-    cursor: 'pointer',
+    cursor: pointer;
-    overflow: 'hidden',
+    overflow: hidden;
-    color: active ? primaryColor : iconColor,
+    color: ${active ? primaryColor : iconColor};
-    ...dynamicStyle,
+    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(
+  const animateScaleShrink = toString(
-    `${toString(
+    spring(
-      spring(
+      { width: isLeft ? '65px' : '75px' },
-        { width: isLeft ? '65px' : '75px' },
+      { width: '0px' },
-        { width: '0px' },
+      { preset: 'gentle' }
-        { 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 {
+  return css`
-    display: 'flex',
+    display: flex;
-    alignItems: 'center',
+    align-items: center;
-    justifyContent: isLeft ? 'flex-start' : 'flex-end',
+    justify-content: ${isLeft ? 'flex-start' : 'flex-end'};
-    fontSize: '16px',
+    font-size: 16px;
-    flexShrink: '0',
+    flex-shrink: 0;
-    transition: `transform ${ANIMATE_DURATION}ms`,
+    transition: transform ${ANIMATE_DURATION}ms;
-    fontWeight: 'normal',
+    font-weight: normal;
-    overflow: 'hidden',
+    overflow: hidden;
-    whiteSpace: 'nowrap',
+    white-space: nowrap;
-    ...shrinkStyle,
+    animation: ${shrinkStyle.animation};
-  };
+  `;
 });
 
 export const StyledIcon = styled('div')<{

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',

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 />

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
-          ? `${
+          ? css`
-              isHover ? activeRaiseAnimate : activeDeclineAnimate
+              ${keyframes`${
-            } ${ANIMATE_DURATION}ms forwards`
+                isHover ? activeRaiseAnimate : activeDeclineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
           : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
       }
-    : ({
+    : {
         top: '100%',
         color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
         animation: firstTrigger
-          ? `${
+          ? css`
-              isHover ? raiseAnimate : declineAnimate
+              ${keyframes`${
-            } ${ANIMATE_DURATION}ms forwards`
+                isHover ? raiseAnimate : declineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
           : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
-      } as CSSProperties);
+      };
-
+  return css`
-  return {
+    ${css(displayFlex('center', 'center'))}
-    width: '32px',
+    width: 32px;
-    height: '32px',
+    height: 32px;
-    position: 'absolute',
+    position: absolute;
-    left: '0',
+    left: 0;
-    ...displayFlex('center', 'center'),
+    cursor: pointer;
-    cursor: 'pointer',
+    color: ${activeStyle.color}
-    ...activeStyle,
+    top: ${activeStyle.top};
-    svg: {
+    background-color: ${activeStyle.backgroundColor};
-      width: '24px',
+    animation: ${activeStyle.animation};
-      height: '24px',
+    animation-direction: ${activeStyle.animationDirection};
+    svg {
+      width: 24px;
+      height: 24px;
     },
-  };
+  `;
 });

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 }) => {
+export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
-  return {
+  ({ theme }) => {
-    height: '60px',
+    return {
-    width: '100%',
+      height: '60px',
-    ...displayFlex('flex-end', 'center'),
+      width: '100%',
-    background: theme.colors.pageBackground,
+      ...displayFlex('flex-end', 'center'),
-    transition: 'background-color 0.5s',
+      background: theme.colors.pageBackground,
-    zIndex: 99,
+      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)',

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',

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',

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;

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',

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,

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',

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -1,12 +1,6 @@
-import {
+import { displayFlex, styled, textEllipsis } from '@affine/component';
-  displayFlex,
-  displayInlineFlex,
-  styled,
-  textEllipsis,
-} 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 +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')({
+export const StyledModalHeaderLeft = 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(() => {
   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'),
-    },
-  };
-});

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 }) => {

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',

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,
-const App = function App({ Component, pageProps }: AppPropsWithLayout) {
+  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={emotionCache}>
-      <CacheProvider value={cache}>
+      <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>
   );
 };
 

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 />

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',

apps/web/src/providers/ThemeProvider.tsx

@@ -1,111 +1,70 @@
-import {
+import { AffineTheme, ThemeProviderProps } from '@affine/component';
-  AffineTheme,
-  Theme,
-  ThemeMode,
-  ThemeProviderProps,
-  ThemeProviderValue,
-} from '@affine/component';
 import {
   getDarkTheme,
   getLightTheme,
   globalThemeVariables,
-  ThemeProvider as ComponentThemeProvider,
+  ThemeProvider as AffineThemeProvider,
 } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
-import {
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
-  createTheme as MuiCreateTheme,
-  ThemeProvider as MuiThemeProvider,
-} from '@mui/material/styles';
-import { useAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 import type { PropsWithChildren } from 'react';
-import React, {
+import React, { memo, useEffect, useMemo, useState } from 'react';
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} 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
+    <NextThemeProvider themes={themes}>
-    <MuiThemeProvider theme={muiTheme}>
+      <ThemeProviderInner>{children}</ThemeProviderInner>
-      <ThemeContext.Provider
+    </NextThemeProvider>
-        value={{ mode: realTheme, changeMode, theme: themeStyle }}
-      >
-        <ThemeInjector theme={realTheme} themeStyle={themeStyle} />
-        <ComponentThemeProvider theme={themeStyle}>
-          {children}
-        </ComponentThemeProvider>
-      </ThemeContext.Provider>
-    </MuiThemeProvider>
   );
 };

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 });
+}

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",

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;
+    };
+  }
+}

packages/component/src/styles/styled.tsx

@@ -1,10 +1,17 @@
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { CssBaseline } from '@mui/material';
-import emotionStyled from '@emotion/styled';
+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>
+  );
 };

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,

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;
 

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<

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?: {

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',

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'),

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>(
   ({

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 {

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 {

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'];

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'];

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',

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/traverse': 7.21.2
-      '@babel/types': 7.20.7
+      '@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:
+  /@babel/traverse/7.21.2_supports-color@5.5.0:
-    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.19.4
+      '@babel/code-frame': 7.18.6
-      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/generator': 7.21.1
-      to-fast-properties: 2.0.0
+      '@babel/helper-environment-visitor': 7.18.9
-    dev: true
+      '@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:
+  /@mui/styled-engine-sc/5.11.11_styled-components@5.3.8:
-    resolution: {integrity: sha512-wV0UgW4lN5FkDBXefN8eTYeuE9sjyQdg5h94vtwZCUamGQEzmCOtir4AakgmbWMy0x8OLjdEUESn9wnf5J9MOg==}
+    resolution: {integrity: sha512-6+HsfcKHlhjQklDoEup7Itl+Xgn+BCsqEpIdIIhlxED4YlOZ38xghxIKrx78XFZznTorbhAspUgDDKIaB5vDMg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      '@emotion/react': ^11.4.1
+      '@types/styled-components': ^5.1.14
-      '@emotion/styled': ^11.3.0
+      styled-components: ^5.3.1
-      react: ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
-      '@emotion/react':
+      '@types/styled-components':
-        optional: true
-      '@emotion/styled':
         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'}