refactor: with styled-components

2026-08-16 22:46:04 +01:00 · 2021-12-18 00:50:54 -03:00
parent 5138b4dfc2
commit 47d03b6d73
42 changed files with 845 additions and 934 deletions
--- a/.babelrc.json
+++ b/.babelrc.json
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,6 @@

 # production
 /build
-/temp

 # misc
 .DS_Store
--- a/package.json
+++ b/package.json
@@ -6,10 +6,9 @@
  "license": "MIT",
  "scripts": {
    "prisma": "yarn prisma:push && yarn prisma:seed",
-    "initialdata": "ts-node scripts/initialdata.ts",
-    "predev": "yarn prisma && yarn initialdata",
+    "predev": "yarn prisma",
    "dev": "next dev",
-    "prebuild": "yarn prisma && yarn initialdata",
+    "prebuild": "yarn prisma",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --fix",
@@ -21,20 +20,23 @@
  },
  "dependencies": {
    "@prisma/client": "^3.6.0",
-    "@stitches/react": "^1.2.6",
    "axios": "^0.24.0",
    "bcryptjs": "^2.4.3",
+    "cuid": "^2.1.8",
    "dotenv": "^10.0.0",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "next": "12.0.7",
    "next-connect": "^0.11.0",
    "nookies": "^2.5.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "polished": "^4.1.3",
+    "react": "^17.0.2",
+    "react-collapsible": "^2.8.4",
+    "react-color": "^2.19.3",
+    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "sharp": "^0.29.3",
-    "swr": "^1.1.1"
+    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@commitlint/cli": "15.0.0",
@@ -44,6 +46,9 @@
    "@types/lodash": "^4.14.178",
    "@types/node": "^16.11.12",
    "@types/react": "17.0.37",
+    "@types/react-color": "^3.0.6",
+    "@types/styled-components": "^5.1.18",
+    "babel-plugin-styled-components": "^2.0.2",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "8.3.0",
@@ -54,6 +59,7 @@
    "prettier": "2.5.0",
    "pretty-quick": "3.1.2",
    "prisma": "^3.6.0",
+    "react-is": "^17.0.2",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.3"
  },
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,5 +1,6 @@
 import { PrismaClient } from '@prisma/client'
 import { hashSync } from 'bcryptjs'
+import cuid from 'cuid'
 import dotenv from 'dotenv'

 const prisma = new PrismaClient()
@@ -53,16 +54,19 @@ async function main() {
    ],
    buttonLinks: [
      {
+        id: cuid(),
        label: 'Home',
        href: '#'
      },
      {
+        id: cuid(),
        label: 'About',
-        href: '/about'
+        href: '#'
      },
      {
+        id: cuid(),
        label: 'Contact',
-        href: '/contact'
+        href: '#'
      }
    ]
  }
--- a/scripts/initialdata.ts
+++ b/scripts/initialdata.ts
@@ -1,19 +0,0 @@
-import fs from 'fs'
-
-import { fetchData } from '../src/services/fetchData'
-
-async function initialdata() {
-  const dataDir = './temp'
-  const data = await fetchData()
-
-  if (!fs.existsSync(dataDir)) {
-    fs.mkdirSync(dataDir)
-  }
-
-  fs.writeFileSync(`${dataDir}/data.json`, JSON.stringify(data, null, 2))
-}
-
-initialdata().catch(e => {
-  console.error(e)
-  process.exit(1)
-})
--- a/scripts/tsconfig.json
+++ b/scripts/tsconfig.json
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs"
-  }
-}
--- a/src/components/Avatar/styles.ts
+++ b/src/components/Avatar/styles.ts
@@ -1,10 +1,9 @@
 import Image from 'next/image'
+import styled from 'styled-components'

-import { styled } from '../../styles/stitches.config'
-
-export const Wrapper = styled(Image, {
-  borderRadius: '9999px',
-  objectFit: 'cover',
-  width: '84px',
-  height: '84px'
-})
+export const Wrapper = styled(Image)`
+  border-radius: 9999px;
+  object-fit: cover;
+  width: 84px;
+  height: 84px;
+`
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,19 +1 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
-
-import type { ButtonVariantProps } from './styles'
-import { Wrapper } from './styles'
-
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  children: ReactNode
-  colorSchema?: ButtonVariantProps['colorSchema']
-  styleSchema?: ButtonVariantProps['styleSchema']
-  size?: ButtonVariantProps['size']
-  font?: ButtonVariantProps['font']
-  outline?: boolean
-}
-
-export function Button({ children, ...rest }: ButtonProps) {
-  return <Wrapper {...rest}>{children}</Wrapper>
-}
-
-export type { ButtonVariantProps }
+export { Button } from './styles'
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -1,218 +1,72 @@
-import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config'
+import { darken } from 'polished'
+import styled from 'styled-components'

-const colorSchemaFn = (
-  lightColor: Colors,
-  regularColor: Colors,
-  darkColor: Colors,
-  darkerColor: Colors
-) => ({
-  background: theme.colors[regularColor],
-  borderColor: theme.colors[regularColor],
-  color: theme.colors[lightColor],
+type ButtonProps = {
+  color?: string
+  background?: string
+  variant?: 'square' | 'rounded' | 'pill'
+  outlined?: boolean
+  font?: string
+  size?: 'small' | 'medium'
+}

-  '&:hover': {
-    background: theme.colors[darkColor],
-    borderColor: theme.colors[darkColor]
-  },
+export const Button = styled.button.attrs((props: ButtonProps) => ({
+  color: props.color || '#f8fafc',
+  background: props.background || '#e11d48',
+  variant: props.variant || 'rounded',
+  outlined: props.outlined || false,
+  font: props.font || 'inherit',
+  size: props.size || 'medium'
+}))<ButtonProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 1rem;
+  font-family: ${({ font }) => font};
+  color: ${({ color }) => color};
+  background: ${({ background }) => background};
+  border-width: 2.5px;
+  border-style: solid;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.25s ease;

-  '&:active': {
-    background: theme.colors[darkerColor],
-    borderColor: theme.colors[darkerColor]
+  &:hover {
+    background: ${({ background }) => darken(0.1, background)};
+    transform: translateY(-0.15rem);
  }
-})

-const outlineVariantFn = (color: Colors) => ({
-  color: theme.colors[color],
-
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.05)'
-  },
-
-  '&:active': {
-    background: 'rgba(0, 0, 0, 0.1)'
+  &:active {
+    background: ${({ background }) => darken(0.2, background)};
  }
-})

-export const Wrapper = styled('button', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '100%',
-  padding: '0 1rem',
-  borderWidth: '2.5px',
-  borderStyle: 'solid',
-  fontWeight: 500,
-  cursor: 'pointer',
-  transition: 'all 0.25s ease-in-out',
+  ${({ variant }) => variant === 'square' && `border-radius: 0;`}

-  '&:hover': {
-    transform: 'translateY(-0.15rem)'
-  },
+  ${({ variant }) => variant === 'rounded' && `border-radius: 0.5rem;`}

-  variants: {
-    colorSchema: {
-      slate: colorSchemaFn('slate50', 'slate600', 'slate700', 'slate800'),
-      red: colorSchemaFn('red50', 'red600', 'red700', 'red800'),
-      orange: colorSchemaFn('orange50', 'orange600', 'orange700', 'orange800'),
-      amber: colorSchemaFn('amber50', 'amber600', 'amber700', 'amber800'),
-      yellow: colorSchemaFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
-      lime: colorSchemaFn('lime50', 'lime600', 'lime700', 'lime800'),
-      green: colorSchemaFn('green50', 'green600', 'green700', 'green800'),
-      emerald: colorSchemaFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
-      teal: colorSchemaFn('teal50', 'teal600', 'teal700', 'teal800'),
-      cyan: colorSchemaFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
-      sky: colorSchemaFn('sky50', 'sky600', 'sky700', 'sky800'),
-      blue: colorSchemaFn('blue50', 'blue600', 'blue700', 'blue800'),
-      indigo: colorSchemaFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
-      violet: colorSchemaFn('violet50', 'violet600', 'violet700', 'violet800'),
-      purple: colorSchemaFn('purple50', 'purple600', 'purple700', 'purple800'),
-      fuchsia: colorSchemaFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
-      pink: colorSchemaFn('pink50', 'pink600', 'pink700', 'pink800'),
-      rose: colorSchemaFn('rose50', 'rose600', 'rose700', 'rose800')
-    },
+  ${({ variant }) => variant === 'pill' && `border-radius: 9999px;`}

-    styleSchema: {
-      square: {
-        borderRadius: '0'
-      },
-      rounded: {
-        borderRadius: '0.5rem'
-      },
-      pill: {
-        borderRadius: '9999px'
-      }
-    },
+  ${({ size }) =>
+    size === 'small' &&
+    `
+    height: 2rem;
+    font-size: 0.875rem;
+  `}

-    size: {
-      small: {
-        height: '2rem',
-        fontSize: '0.875rem'
-      },
-      medium: {
-        height: '3rem',
-        fontSize: '1rem'
-      }
-    },
+  ${({ size }) =>
+    size === 'medium' &&
+    `
+    height: 3rem;
+    font-size: 1rem;
+  `}

-    font: {
-      baloo: {
-        fontFamily: theme.fonts.baloo
-      },
-      montserrat: {
-        fontFamily: theme.fonts.montserrat
-      },
-      roboto: {
-        fontFamily: theme.fonts.roboto
-      }
-    },
-
-    outline: {
-      true: {
-        background: 'transparent'
-      }
-    }
-  },
-
-  compoundVariants: [
-    {
-      colorSchema: 'slate',
-      outline: true,
-      css: outlineVariantFn('slate600')
-    },
-    {
-      colorSchema: 'red',
-      outline: true,
-      css: outlineVariantFn('red600')
-    },
-    {
-      colorSchema: 'orange',
-      outline: true,
-      css: outlineVariantFn('orange600')
-    },
-    {
-      colorSchema: 'amber',
-      outline: true,
-      css: outlineVariantFn('amber600')
-    },
-    {
-      colorSchema: 'yellow',
-      outline: true,
-      css: outlineVariantFn('yellow600')
-    },
-    {
-      colorSchema: 'lime',
-      outline: true,
-      css: outlineVariantFn('lime600')
-    },
-    {
-      colorSchema: 'green',
-      outline: true,
-      css: outlineVariantFn('green600')
-    },
-    {
-      colorSchema: 'emerald',
-      outline: true,
-      css: outlineVariantFn('emerald600')
-    },
-    {
-      colorSchema: 'teal',
-      outline: true,
-      css: outlineVariantFn('teal600')
-    },
-    {
-      colorSchema: 'cyan',
-      outline: true,
-      css: outlineVariantFn('cyan600')
-    },
-    {
-      colorSchema: 'sky',
-      outline: true,
-      css: outlineVariantFn('sky600')
-    },
-    {
-      colorSchema: 'blue',
-      outline: true,
-      css: outlineVariantFn('blue600')
-    },
-    {
-      colorSchema: 'indigo',
-      outline: true,
-      css: outlineVariantFn('indigo600')
-    },
-    {
-      colorSchema: 'violet',
-      outline: true,
-      css: outlineVariantFn('violet600')
-    },
-    {
-      colorSchema: 'purple',
-      outline: true,
-      css: outlineVariantFn('purple600')
-    },
-    {
-      colorSchema: 'fuchsia',
-      outline: true,
-      css: outlineVariantFn('fuchsia600')
-    },
-    {
-      colorSchema: 'pink',
-      outline: true,
-      css: outlineVariantFn('pink600')
-    },
-    {
-      colorSchema: 'rose',
-      outline: true,
-      css: outlineVariantFn('rose600')
-    }
-  ],
-
-  defaultVariants: {
-    colorSchema: 'teal',
-    styleSchema: 'pill',
-    size: 'medium',
-    font: 'roboto',
-    outline: false
-  }
-})
-
-export type ButtonVariantProps = VariantProps<typeof Wrapper>
+  ${({ outlined, color }) =>
+    outlined &&
+    `
+    background: transparent;
+    color: ${color};
+    border-color: ${color};
+  `}
+`
--- a/src/components/Dash/ButtonsStyleSelect/index.tsx
+++ b/src/components/Dash/ButtonsStyleSelect/index.tsx
@@ -1,18 +1,17 @@
 import { useData } from '../../../hooks/useData'
-import type { ButtonVariantProps } from '../../Button'

 export function ButtonsStyleSelect() {
  const { data, setData } = useData()

  return (
    <select
-      value={data.settings.buttonsSchema as string}
+      value={data.settings.buttonsSchema}
      onChange={e =>
        setData({
          ...data,
          settings: {
            ...data.settings,
-            buttonsSchema: e.target.value as ButtonVariantProps['styleSchema']
+            buttonsSchema: e.target.value as 'square' | 'rounded' | 'pill'
          }
        })
      }
--- a/src/components/Dash/ColorPicker/index.tsx
+++ b/src/components/Dash/ColorPicker/index.tsx
@@ -0,0 +1,35 @@
+import { BlockPicker } from 'react-color'
+
+import { useData } from '../../../hooks/useData'
+import { colors } from '../../../styles/colors'
+
+type ColorPickerProps = {
+  prop: 'texts' | 'socialLinks' | 'background' | 'buttonLinks'
+}
+
+export function ColorPicker({ prop }: ColorPickerProps) {
+  const { data, setData } = useData()
+
+  const handleChange = (color: string) => {
+    setData({
+      ...data,
+      settings: {
+        ...data.settings,
+        colors: {
+          ...data.settings.colors,
+          [prop]: color
+        }
+      }
+    })
+  }
+
+  return (
+    <BlockPicker
+      color={data.settings.colors[prop]}
+      colors={colors}
+      triangle="hide"
+      width="100%"
+      onChangeComplete={color => handleChange(color.hex)}
+    />
+  )
+}
--- a/src/components/Dash/ColorSelect/index.tsx
+++ b/src/components/Dash/ColorSelect/index.tsx
@@ -1,88 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { useData } from '../../../hooks/useData'
-import type { Colors } from '../../../styles/stitches.config'
-import { theme } from '../../../styles/stitches.config'
-import { Color, SelectButton, Wrapper } from './styles'
-
-type ColorSelectProps = {
-  prop: 'texts' | 'socialLinks' | 'background' | 'buttonLinks'
-}
-
-export function ColorSelect({ prop }: ColorSelectProps) {
-  const { data, setData } = useData()
-  const [activeColor, setActiveColor] = useState(data.settings.colors[prop] as string)
-
-  useEffect(() => {
-    setActiveColor(data.settings.colors[prop] as string)
-  }, [data, prop])
-
-  const allColors = Object.keys(theme.colors) as Colors[]
-  const colorsSchema = [
-    'slate',
-    'red',
-    'orange',
-    'amber',
-    'yellow',
-    'lime',
-    'green',
-    'emerald',
-    'teal',
-    'cyan',
-    'sky',
-    'blue',
-    'indigo',
-    'violet',
-    'purple',
-    'fuchsia',
-    'pink',
-    'rose'
-  ]
-
-  const colors = {
-    texts: allColors,
-    socialLinks: colorsSchema,
-    background: allColors,
-    buttonLinks: colorsSchema
-  }[prop]
-
-  const backgroundColor = (color: string) => {
-    if (prop === 'background' || prop === 'texts') {
-      return theme.colors[color as Colors]
-    }
-
-    return theme.colors[`${color}600` as Colors]
-  }
-
-  const handleChange = (color: string) => {
-    setActiveColor(color)
-    setData({
-      ...data,
-      settings: {
-        ...data.settings,
-        colors: {
-          ...data.settings.colors,
-          [prop]: color
-        }
-      }
-    })
-  }
-
-  return (
-    <Wrapper>
-      {colors.map(color => (
-        <SelectButton
-          key={color}
-          active={color === activeColor}
-          onClick={() => handleChange(color)}
-        >
-          <Color
-            css={{
-              backgroundColor: backgroundColor(color)
-            }}
-          />
-        </SelectButton>
-      ))}
-    </Wrapper>
-  )
-}
--- a/src/components/Dash/ColorSelect/styles.ts
+++ b/src/components/Dash/ColorSelect/styles.ts
@@ -1,33 +0,0 @@
-import { styled, theme } from '../../../styles/stitches.config'
-
-export const Wrapper = styled('div', {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(10, 1fr)',
-  gridGap: '0.5rem'
-})
-
-export const SelectButton = styled('button', {
-  width: '100%',
-  height: '3rem',
-  padding: '0.25rem',
-  borderRadius: '0.2rem',
-  borderWidth: '3px',
-  borderStyle: 'solid',
-  borderColor: theme.colors.slate200,
-  background: 'transparent',
-  cursor: 'pointer',
-
-  variants: {
-    active: {
-      true: {
-        borderColor: theme.colors.sky500
-      }
-    }
-  }
-})
-
-export const Color = styled('div', {
-  width: '100%',
-  height: '100%',
-  borderRadius: '0.25rem'
-})
--- a/src/components/Dash/ColorsSettings/index.tsx
+++ b/src/components/Dash/ColorsSettings/index.tsx
@@ -1,19 +1,34 @@
-import { ColorSelect } from '../ColorSelect'
+import { ColorPicker } from '../ColorPicker'

 export function ColorsSettings() {
  return (
-    <div>
-      <h1>Texts</h1>
-      <ColorSelect prop="texts" />
+    <div
+      style={{
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap',
+        flex: 1
+      }}
+    >
+      <div>
+        <h1>Texts</h1>
+        <ColorPicker prop="texts" />
+      </div>

-      <h1>Icons</h1>
-      <ColorSelect prop="socialLinks" />
+      <div>
+        <h1>Icons</h1>
+        <ColorPicker prop="socialLinks" />
+      </div>

-      <h1>Buttons</h1>
-      <ColorSelect prop="buttonLinks" />
+      <div>
+        <h1>Buttons</h1>
+        <ColorPicker prop="buttonLinks" />
+      </div>

-      <h1>Background</h1>
-      <ColorSelect prop="background" />
+      <div>
+        <h1>Background</h1>
+        <ColorPicker prop="background" />
+      </div>
    </div>
  )
 }
--- a/src/components/Dash/FontsSelect/index.tsx
+++ b/src/components/Dash/FontsSelect/index.tsx
@@ -1,5 +1,4 @@
 import { useData } from '../../../hooks/useData'
-import type { Fonts } from '../../../styles/stitches.config'

 export function FontsSelect() {
  const { data, setData } = useData()
@@ -12,14 +11,14 @@ export function FontsSelect() {
          ...data,
          settings: {
            ...data.settings,
-            font: e.target.value as Fonts
+            font: e.target.value
          }
        })
      }
    >
-      <option value="baloo">Baloo</option>
-      <option value="montserrat">Montserrat</option>
-      <option value="roboto">Roboto</option>
+      <option value="'Baloo Bhaijaan 2', sans-serif">Baloo</option>
+      <option value="'Montserrat', sans-serif">Montserrat</option>
+      <option value="'Roboto', sans-serif">Roboto</option>
    </select>
  )
 }
--- a/src/components/Dash/SaveChangesAlert/index.tsx
+++ b/src/components/Dash/SaveChangesAlert/index.tsx
@@ -40,23 +40,17 @@ export function SaveChangesAlert({
    setData(initialData)
  }

-  return (
-    <Wrapper show={hasUnsavedChanges}>
+  return hasUnsavedChanges ? (
+    <Wrapper>
      You have unsaved changes.
      <ButtonsGroup>
-        <Button
-          size="small"
-          styleSchema="square"
-          colorSchema="rose"
-          outline
-          onClick={() => handleCancel()}
-        >
+        <Button size="small" outlined onClick={() => handleCancel()}>
          Cancel
        </Button>
-        <Button size="small" styleSchema="square" colorSchema="slate" onClick={() => handleSave()}>
+        <Button size="small" onClick={() => handleSave()}>
          Save
        </Button>
      </ButtonsGroup>
    </Wrapper>
-  )
+  ) : null
 }
--- a/src/components/Dash/SaveChangesAlert/styles.ts
+++ b/src/components/Dash/SaveChangesAlert/styles.ts
@@ -1,38 +1,19 @@
-import { styled, theme } from '../../../styles/stitches.config'
+import styled from 'styled-components'

-export const Wrapper = styled('div', {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '50%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '1rem',
-  background: theme.colors.sky200,
-  color: theme.colors.slate700,
-  fontFamily: theme.fonts.roboto,
-  fontSize: '0.875rem',
-  lineHeight: 1,
-  transition: 'all 0.25s ease-in-out',
+export const Wrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  font-size: 0.875rem;
+  line-height: 1;
+`

-  variants: {
-    show: {
-      true: {
-        opacity: 1
-      },
-      false: {
-        opacity: 0
-      }
-    }
-  },
-
-  defaultVariant: {
-    show: false
-  }
-})
-
-export const ButtonsGroup = styled('div', {
-  display: 'flex',
-  gap: '1rem'
-})
+export const ButtonsGroup = styled.div`
+  display: flex;
+  gap: 1rem;
+`
--- a/src/components/Dash/index.tsx
+++ b/src/components/Dash/index.tsx
@@ -1,8 +1,8 @@
 import { isEqual } from 'lodash'
 import { useEffect, useState } from 'react'
+import Collapsible from 'react-collapsible'

 import { useData } from '../../hooks/useData'
-import type { Data } from '../../types/Data'
 import { getLocalStorageData, setLocalStorageData } from '../../utils/localStorage'
 import { Home } from '../Home'
 import { ColorsSettings } from './ColorsSettings'
@@ -10,15 +10,12 @@ import { DataSettings } from './DataSettings'
 import { SaveChangesAlert } from './SaveChangesAlert'
 import { Content, Preview, Wrapper } from './styles'

-type DashProps = {
-  initialData: Data
-}
-
-export function Dash({ initialData }: DashProps) {
+export function Dash() {
  const { data, setData } = useData()
  const [isLoading, setIsLoading] = useState(true)
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
  const [activeTab, setActiveTab] = useState<'data' | 'colors'>('data')
+  const initialData = data

  useEffect(() => {
    if (isLoading) {
@@ -53,13 +50,18 @@ export function Dash({ initialData }: DashProps) {
        />
        <h1>Dash </h1>

-        {tabs.map(tab => (
-          <button key={tab.value} onClick={() => setActiveTab(tab.value as 'data' | 'colors')}>
+        {tabs.map((tab, i) => (
+          <button key={i} onClick={() => setActiveTab(tab.value as 'data' | 'colors')}>
            {tab.label}
          </button>
        ))}

        {body[activeTab]}
+
+        <Collapsible trigger="Start here">
+          <p>This is the collapsible content. It can be any element or React component you like.</p>
+          <p>It can even be another Collapsible component. Check out the next section!</p>
+        </Collapsible>
      </Content>
      <Preview>
        <Home />
--- a/src/components/Dash/styles.ts
+++ b/src/components/Dash/styles.ts
@@ -1,30 +1,28 @@
-import { styled, theme } from '../../styles/stitches.config'
+import styled from 'styled-components'

-export const Wrapper = styled('main', {
-  display: 'grid',
-  gridTemplateColumns: '1fr 1fr',
-  position: 'fixed',
-  inset: 0
-})
+export const Wrapper = styled.main`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  position: fixed;
+  inset: 0;
+`

-export const Content = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-  padding: '5rem 1rem 1rem',
-  fontFamily: theme.fonts.roboto,
-  color: theme.colors.slate900,
-  background: theme.colors.slate50,
-  overflowY: 'scroll'
-})
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 5rem 1rem 1rem;
+  font-family: 'Roboto', sans-serif;
+  overflow-y: scroll;
+`

-export const Preview = styled('div', {
-  position: 'relative',
-  overflowY: 'scroll',
+export const Preview = styled.div`
+  position: relative;
+  overflow-y: scroll;

-  '&::after': {
-    content: '',
-    position: 'absolute',
-    inset: 0
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
  }
-})
+`
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -1,7 +1,4 @@
-import Head from 'next/head'
-
 import { useData } from '../../hooks/useData'
-import { theme } from '../../styles/stitches.config'
 import { Avatar } from '../Avatar'
 import { Button } from '../Button'
 import { SocialLinks } from '../SocialLinks'
@@ -9,34 +6,24 @@ import { Content, Description, Name, Wrapper } from './styles'

 export const Home = () => {
  const { data } = useData()
-  const { colors, buttonsSchema, outline, font, name, description } = data.settings
+  const { colors, buttonsSchema, font, name, description } = data.settings

  return (
-    <Wrapper
-      css={{
-        color: theme.colors[colors.texts],
-        fontFamily: theme.fonts[font]
-      }}
-    >
-      <Head>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `body { background: ${theme.colors[colors.background]} }`
-          }}
-        />
-      </Head>
+    <Wrapper color={colors.texts} font={font}>
      <Content>
        <Avatar />
        <Name>{name}</Name>
        <SocialLinks />
        <Description>{description}</Description>
-        {data.buttonLinks?.map(link => (
+        {data.buttonLinks?.map((link, i) => (
          <Button
-            colorSchema={colors.buttonLinks}
-            styleSchema={buttonsSchema}
-            outline={outline}
-            font={font}
-            key={link.href}
+            as="a"
+            href={link.href}
+            rel="noopener noreferrer"
+            target="_blank"
+            // key={link.id}
+            key={i}
+            variant={buttonsSchema}
          >
            {link.label}
          </Button>
--- a/src/components/Home/styles.ts
+++ b/src/components/Home/styles.ts
@@ -1,30 +1,40 @@
-import { styled } from '../../styles/stitches.config'
+import styled from 'styled-components'

-export const Wrapper = styled('main', {
-  width: '100%',
-  height: '100vh',
-  transition: 'all 0.25s ease-in-out'
-})
+type Props = {
+  color?: string
+  font?: string
+}

-export const Content = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '1rem',
-  margin: '0 auto',
-  maxWidth: '640px',
-  padding: '2rem 1rem'
-})
+export const Wrapper = styled.main.attrs((props: Props) => ({
+  color: props.color || '#e11d48',
+  font: props.font || 'inherit'
+}))<Props>`
+  color: ${({ color }) => color};
+  font-family: ${({ font }) => font};
+  width: 100%;
+  height: 100vh;
+  transition: all 0.25s ease;
+`

-export const Name = styled('h1', {
-  fontSize: '2rem',
-  fontWeight: 500,
-  margin: 0
-})
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 2rem 1rem;
+`

-export const Description = styled('p', {
-  fontSize: '1rem',
-  textAlign: 'center',
-  fontWeight: 400,
-  lineHeight: '1.5'
-})
+export const Name = styled.h1`
+  font-size: 2rem;
+  font-weight: 500;
+  margin: 0;
+`
+
+export const Description = styled.p`
+  font-size: 1rem;
+  text-align: center;
+  font-weight: 400;
+  line-height: 1.5;
+`
--- a/src/components/Link/index.ts
+++ b/src/components/Link/index.ts
@@ -0,0 +1 @@
+export { Link } from './styles'
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -1,20 +0,0 @@
-import NextLink from 'next/link'
-import type { AnchorHTMLAttributes } from 'react'
-
-import type { LinkVariantProps } from './styles'
-import { Wrapper } from './styles'
-
-export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  href: string
-  theme?: LinkVariantProps['theme']
-}
-
-export function Link({ href, theme, ...rest }: LinkProps) {
-  return (
-    <NextLink href={href} passHref>
-      <Wrapper theme={theme} {...rest} />
-    </NextLink>
-  )
-}
-
-export type { LinkVariantProps }
--- a/src/components/Link/styles.ts
+++ b/src/components/Link/styles.ts
@@ -1,47 +1,22 @@
-import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config'
+import { darken } from 'polished'
+import styled from 'styled-components'

-const themeVariantFn = (regularColor: Colors, darkColor: Colors, darkerColor: Colors) => ({
-  color: theme.colors[regularColor],
+type LinkProps = {
+  color?: string
+}

-  '&:hover': {
-    color: theme.colors[darkColor]
-  },
+export const Link = styled.a.attrs((props: LinkProps) => ({
+  color: props.color || '#e11d48'
+}))<LinkProps>`
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.25s ease;

-  '&:active': {
-    color: theme.colors[darkerColor]
+  &:hover {
+    color: ${({ color }) => darken(0.1, color)};
  }
-})

-export const Wrapper = styled('a', {
-  textDecoration: 'none',
-  transition: 'color 0.25s ease',
-  cursor: 'pointer',
-
-  variants: {
-    theme: {
-      slate: themeVariantFn('slate600', 'slate700', 'slate800'),
-      orange: themeVariantFn('orange600', 'orange700', 'orange800'),
-      amber: themeVariantFn('amber600', 'amber700', 'amber800'),
-      yellow: themeVariantFn('yellow600', 'yellow700', 'yellow800'),
-      lime: themeVariantFn('lime600', 'lime700', 'lime800'),
-      green: themeVariantFn('green600', 'green700', 'green800'),
-      emerald: themeVariantFn('emerald600', 'emerald700', 'emerald800'),
-      teal: themeVariantFn('teal600', 'teal700', 'teal800'),
-      cyan: themeVariantFn('cyan600', 'cyan700', 'cyan800'),
-      sky: themeVariantFn('sky600', 'sky700', 'sky800'),
-      blue: themeVariantFn('blue600', 'blue700', 'blue800'),
-      indigo: themeVariantFn('indigo600', 'indigo700', 'indigo800'),
-      violet: themeVariantFn('violet600', 'violet700', 'violet800'),
-      purple: themeVariantFn('purple600', 'purple700', 'purple800'),
-      fuchsia: themeVariantFn('fuchsia600', 'fuchsia700', 'fuchsia800'),
-      pink: themeVariantFn('pink600', 'pink700', 'pink800'),
-      rose: themeVariantFn('rose600', 'rose700', 'rose800')
-    }
-  },
-
-  defaultVariants: {
-    theme: 'teal'
+  &:active {
+    color: ${({ color }) => darken(0.2, color)};
  }
-})
-
-export type LinkVariantProps = VariantProps<typeof Wrapper>
+`
--- a/src/components/SocialLinks/index.tsx
+++ b/src/components/SocialLinks/index.tsx
@@ -25,16 +25,16 @@ export function SocialLinks() {

  return (
    <Wrapper>
-      {data.socialLinks?.map(({ label, href }) => {
+      {data.socialLinks?.map(({ label, href }, i) => {
        const Icon: IconType = Icons[label as keyof typeof Icons]
        return (
-          <SocialItem key={href}>
+          <SocialItem key={i}>
            <Link
              href={href}
              aria-label={label}
              rel="noopener noreferrer"
              target="_blank"
-              theme={data.settings.colors.socialLinks}
+              color={data.settings.colors.socialLinks}
            >
              <Icon size={22} />
            </Link>
--- a/src/components/SocialLinks/styles.ts
+++ b/src/components/SocialLinks/styles.ts
@@ -1,22 +1,22 @@
-import { styled } from '../../styles/stitches.config'
+import styled from 'styled-components'

-export const Wrapper = styled('ul', {
-  display: 'inline-flex',
-  listStyle: 'none'
-})
+export const Wrapper = styled.div`
+  display: inline-flex;
+  list-style: none;
+`

-export const SocialItem = styled('li', {
-  transition: 'transform 0.2s ease-in-out',
+export const SocialItem = styled.li`
+  transition: transform 0.25s ease;

-  '&:not(:last-child)': {
-    marginRight: '1rem'
-  },
-
-  '&:hover': {
-    transform: 'scale(1.1)'
-  },
-
-  '&:active': {
-    transform: 'scale(0.95)'
+  &:not(:last-child) {
+    margin-right: 1rem;
  }
-})
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
--- a/src/contexts/DataContext.tsx
+++ b/src/contexts/DataContext.tsx
@@ -1,7 +1,6 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'React'
+import { Dispatch, ReactNode, SetStateAction } from 'react'
 import { createContext, useState } from 'react'

-import initialData from '../../temp/data.json'
 import type { Data } from '../types/Data'

 type DataContextType = {
@@ -11,12 +10,13 @@ type DataContextType = {

 type DataProviderProps = {
  children: ReactNode
+  initialData: Data
 }

 export const DataContext = createContext({} as DataContextType)

-export const DataProvider = ({ children }: DataProviderProps) => {
-  const [data, setData] = useState<Data>(initialData as Data)
+export const DataProvider = ({ children, initialData }: DataProviderProps) => {
+  const [data, setData] = useState<Data>(initialData)

  return <DataContext.Provider value={{ data, setData }}>{children}</DataContext.Provider>
 }
--- a/src/hooks/useFetchData.ts
+++ b/src/hooks/useFetchData.ts
@@ -1,15 +0,0 @@
-import useSWR from 'swr'
-
-import { fetcher } from '../services/api'
-import type { Data } from '../types/Data'
-import { useData } from './useData'
-
-export function useFetchData(fallbackData: Data) {
-  const { setData } = useData()
-  const { data } = useSWR('data', fetcher, {
-    refreshInterval: 1000,
-    fallbackData
-  })
-
-  setData(data)
-}
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,13 +1,14 @@
 import type { AppProps } from 'next/app'

 import { DataProvider } from '../contexts/DataContext'
-import { globalStyles } from '../styles/globals'
+import { Layout } from '../styles/layout'

 export default function App({ Component, pageProps }: AppProps) {
-  globalStyles()
  return (
-    <DataProvider>
-      <Component {...pageProps} />
+    <DataProvider initialData={pageProps.initialData}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
    </DataProvider>
  )
 }
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,7 +1,5 @@
 import NextDocument, { Head, Html, Main, NextScript } from 'next/document'

-import { getCssText } from '../styles/stitches.config'
-
 export default class Document extends NextDocument {
  render() {
    return (
@@ -13,7 +11,6 @@ export default class Document extends NextDocument {
            href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500&family=Montserrat:wght@400;500&family=Roboto:wght@400;500&display=swap"
            rel="stylesheet"
          />
-          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
        </Head>
        <body>
          <Main />
--- a/src/pages/api/data.ts
+++ b/src/pages/api/data.ts
@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import nc from 'next-connect'

 import { prisma } from '../../services/prisma'
-import { authMiddleware } from '../../utils/authMiddleware'
+// import { authMiddleware } from '../../utils/authMiddleware'
 import { ExceptionError } from '../../utils/error'

 const handler = nc<NextApiRequest, NextApiResponse>({
@@ -29,7 +29,6 @@ const handler = nc<NextApiRequest, NextApiResponse>({
    }
  }
 })
-  .use(authMiddleware)
  .get(async (_req, res) => {
    const response = await prisma.data.findUnique({
      where: { id: 1 }
@@ -41,6 +40,7 @@ const handler = nc<NextApiRequest, NextApiResponse>({

    res.status(200).json(response?.data)
  })
+  // .use(authMiddleware)
  .put(async (req, res) => {
    const { data } = req.body

--- a/src/pages/dash.tsx
+++ b/src/pages/dash.tsx
@@ -2,14 +2,9 @@ import { GetServerSideProps } from 'next'

 import { Dash } from '../components/Dash'
 import { fetchData } from '../services/fetchData'
-import type { Data } from '../types/Data'

-type DashPageProps = {
-  initialData: Data
-}
-
-export default function DashPage({ initialData }: DashPageProps) {
-  return <Dash initialData={initialData} />
+export default function DashPage() {
+  return <Dash />
 }

 export const getServerSideProps: GetServerSideProps = async () => {
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,24 +1,17 @@
 import { GetStaticProps } from 'next'

 import { Home } from '../components/Home'
-import { useFetchData } from '../hooks/useFetchData'
 import { fetchData } from '../services/fetchData'
-import type { Data } from '../types/Data'

-type HomePageProps = {
-  data: Data
-}
-
-export default function HomePage({ data }: HomePageProps) {
-  useFetchData(data)
+export default function HomePage() {
  return <Home />
 }

 export const getStaticProps: GetStaticProps = async () => {
-  const data = await fetchData()
+  const initialData = await fetchData()

  return {
-    props: { data },
+    props: { initialData },
    revalidate: 1
  }
 }
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,7 +1,90 @@
-import axios from 'axios'
+import axios, { AxiosError } from 'axios'
+import { GetServerSidePropsContext } from 'next'
+import router from 'next/router'
+import { parseCookies } from 'nookies'

-export const api = axios.create({
-  baseURL: '/api'
-})
+import { destroyCookies } from '../utils/destroyCookies'
+import { setCookies } from '../utils/setCookies'

-export const fetcher = (url: string) => api.get(url).then(({ data }) => data)
+let isRefreshing = false
+let failedRequestsQueued: any[] = []
+
+export function setupAPIClient(ctx: GetServerSidePropsContext | undefined = undefined) {
+  let cookies = parseCookies(ctx)
+
+  const authorization = cookies.accessToken
+    ? { headers: { authorization: `Bearer ${cookies.accessToken}` } }
+    : {}
+
+  const api = axios.create({
+    baseURL: '/api',
+    ...authorization
+  })
+
+  api.interceptors.response.use(
+    response => {
+      return response
+    },
+    (error: AxiosError) => {
+      if (error.response?.status === 401) {
+        cookies = parseCookies(ctx)
+
+        const { refreshToken } = cookies
+        const originalConfig = error.config
+
+        if (!isRefreshing) {
+          isRefreshing = true
+
+          api
+            .post('session/refresh-token', { refreshToken })
+            .then(response => {
+              const { accessToken, refreshToken } = response.data
+
+              setCookies({
+                ctx,
+                accessToken,
+                refreshToken
+              })
+
+              failedRequestsQueued.forEach(request => request.onSuccess(accessToken))
+              failedRequestsQueued = []
+            })
+            .catch(error => {
+              failedRequestsQueued.forEach(request => request.onFailure(error))
+              failedRequestsQueued = []
+
+              destroyCookies(ctx)
+
+              if (process.browser) {
+                router.push('/auth')
+              }
+            })
+            .finally(() => {
+              isRefreshing = false
+            })
+
+          return new Promise((resolve, reject) => {
+            failedRequestsQueued.push({
+              onSuccess: (token: string) => {
+                if (originalConfig.headers) {
+                  originalConfig.headers['authorization'] = `Bearer ${token}`
+                }
+
+                resolve(api(originalConfig))
+              },
+              onFailure: (error: AxiosError) => {
+                reject(error)
+              }
+            })
+          })
+        }
+      }
+
+      return Promise.reject(error)
+    }
+  )
+
+  return api
+}
+
+export const api = setupAPIClient()
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -0,0 +1,54 @@
+export const colors = [
+  '#f8fafc',
+  '#cbd5e1',
+  '#475569',
+  '#0f172a',
+  '#fca5a5',
+  '#dc2626',
+  '#7f1d1d',
+  '#fdba74',
+  '#ea580c',
+  '#7c2d12',
+  '#fcd34d',
+  '#d97706',
+  '#78350f',
+  '#fde047',
+  '#ca8a04',
+  '#713f12',
+  '#bef264',
+  '#65a30d',
+  '#365314',
+  '#86efac',
+  '#16a34a',
+  '#14532d',
+  '#6ee7b7',
+  '#059669',
+  '#064e3b',
+  '#5eead4',
+  '#0d9488',
+  '#134e4a',
+  '#67e8f9',
+  '#0891b2',
+  '#164e63',
+  '#93c5fd',
+  '#2563eb',
+  '#1e3a8a',
+  '#a5b4fc',
+  '#4f46e5',
+  '#312e81',
+  '#c4b5fd',
+  '#7c3aed',
+  '#4c1d95',
+  '#d8b4fe',
+  '#9333ea',
+  '#581c87',
+  '#f0abfc',
+  '#c026d3',
+  '#701a75',
+  '#f9a8d4',
+  '#db2777',
+  '#831843',
+  '#fda4af',
+  '#e11d48',
+  '#881337'
+]
--- a/src/styles/globals.ts
+++ b/src/styles/globals.ts
@@ -1,12 +0,0 @@
-import { globalCss } from './stitches.config'
-
-export const globalStyles = globalCss({
-  '*': {
-    margin: 0,
-    padding: 0,
-    boxSizing: 'border-box'
-  },
-  body: {
-    transition: 'all 0.25s ease-in-out'
-  }
-})
--- a/src/styles/layout.tsx
+++ b/src/styles/layout.tsx
@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import { createGlobalStyle } from 'styled-components'
+
+import { useData } from '../hooks/useData'
+import { Data } from '../types/Data'
+
+type GlobalStyleProps = {
+  data: Data
+}
+
+type LayoutProps = {
+  children: ReactNode
+}
+
+const GlobalStyles = createGlobalStyle<GlobalStyleProps>`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+  }
+
+  body {
+    font-family: "Roboto", sans-serif;
+    color: #0f172a;
+    background: ${({ data }) => data.settings.colors.background};
+  }
+`
+
+export function Layout({ children }: LayoutProps) {
+  const { data } = useData()
+
+  return (
+    <>
+      <GlobalStyles data={data} />
+      {children}
+    </>
+  )
+}
--- a/src/styles/stitches.config.ts
+++ b/src/styles/stitches.config.ts
@@ -1,224 +0,0 @@
-import type { VariantProps } from '@stitches/react'
-import { createStitches } from '@stitches/react'
-
-export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({
-  theme: {
-    fonts: {
-      baloo: "'Baloo Bhaijaan 2', cursive",
-      montserrat: "'Montserrat', sans-serif",
-      roboto: "'Roboto', sans-serif"
-    },
-    colors: {
-      slate50: '#f8fafc',
-      slate100: '#f1f5f9',
-      slate200: '#e2e8f0',
-      slate300: '#cbd5e1',
-      slate400: '#94a3b8',
-      slate500: '#64748b',
-      slate600: '#475569',
-      slate700: '#334155',
-      slate800: '#1e293b',
-      slate900: '#0f172a',
-
-      red50: '#fef2f2',
-      red100: '#fee2e2',
-      red200: '#fecaca',
-      red300: '#fca5a5',
-      red400: '#f87171',
-      red500: '#ef4444',
-      red600: '#dc2626',
-      red700: '#b91c1c',
-      red800: '#991b1b',
-      red900: '#7f1d1d',
-
-      orange50: '#fff7ed',
-      orange100: '#ffedd5',
-      orange200: '#fed7aa',
-      orange300: '#fdba74',
-      orange400: '#fb923c',
-      orange500: '#f97316',
-      orange600: '#ea580c',
-      orange700: '#c2410c',
-      orange800: '#9a3412',
-      orange900: '#7c2d12',
-
-      amber50: '#fffbeb',
-      amber100: '#fef3c7',
-      amber200: '#fde68a',
-      amber300: '#fcd34d',
-      amber400: '#fbbf24',
-      amber500: '#f59e0b',
-      amber600: '#d97706',
-      amber700: '#b45309',
-      amber800: '#92400e',
-      amber900: '#78350f',
-
-      yellow50: '#fefce8',
-      yellow100: '#fef9c3',
-      yellow200: '#fef08a',
-      yellow300: '#fde047',
-      yellow400: '#facc15',
-      yellow500: '#eab308',
-      yellow600: '#ca8a04',
-      yellow700: '#a16207',
-      yellow800: '#854d0e',
-      yellow900: '#713f12',
-
-      lime50: '#f7fee7',
-      lime100: '#ecfccb',
-      lime200: '#d9f99d',
-      lime300: '#bef264',
-      lime400: '#a3e635',
-      lime500: '#84cc16',
-      lime600: '#65a30d',
-      lime700: '#4d7c0f',
-      lime800: '#3f6212',
-      lime900: '#365314',
-
-      green50: '#f0fdf4',
-      green100: '#dcfce7',
-      green200: '#bbf7d0',
-      green300: '#86efac',
-      green400: '#4ade80',
-      green500: '#22c55e',
-      green600: '#16a34a',
-      green700: '#15803d',
-      green800: '#166534',
-      green900: '#14532d',
-
-      emerald50: '#ecfdf5',
-      emerald100: '#d1fae5',
-      emerald200: '#a7f3d0',
-      emerald300: '#6ee7b7',
-      emerald400: '#34d399',
-      emerald500: '#10b981',
-      emerald600: '#059669',
-      emerald700: '#047857',
-      emerald800: '#065f46',
-      emerald900: '#064e3b',
-
-      teal50: '#f0fdfa',
-      teal100: '#ccfbf1',
-      teal200: '#99f6e4',
-      teal300: '#5eead4',
-      teal400: '#2dd4bf',
-      teal500: '#14b8a6',
-      teal600: '#0d9488',
-      teal700: '#0f766e',
-      teal800: '#115e59',
-      teal900: '#134e4a',
-
-      cyan50: '#ecfeff',
-      cyan100: '#cffafe',
-      cyan200: '#a5f3fc',
-      cyan300: '#67e8f9',
-      cyan400: '#22d3ee',
-      cyan500: '#06b6d4',
-      cyan600: '#0891b2',
-      cyan700: '#0e7490',
-      cyan800: '#155e75',
-      cyan900: '#164e63',
-
-      sky50: '#f0f9ff',
-      sky100: '#e0f2fe',
-      sky200: '#bae6fd',
-      sky300: '#7dd3fc',
-      sky400: '#38bdf8',
-      sky500: '#0ea5e9',
-      sky600: '#0284c7',
-      sky700: '#0369a1',
-      sky800: '#075985',
-      sky900: '#0c4a6e',
-
-      blue50: '#eff6ff',
-      blue100: '#dbeafe',
-      blue200: '#bfdbfe',
-      blue300: '#93c5fd',
-      blue400: '#60a5fa',
-      blue500: '#3b82f6',
-      blue600: '#2563eb',
-      blue700: '#1d4ed8',
-      blue800: '#1e40af',
-      blue900: '#1e3a8a',
-
-      indigo50: '#eef2ff',
-      indigo100: '#e0e7ff',
-      indigo200: '#c7d2fe',
-      indigo300: '#a5b4fc',
-      indigo400: '#818cf8',
-      indigo500: '#6366f1',
-      indigo600: '#4f46e5',
-      indigo700: '#4338ca',
-      indigo800: '#3730a3',
-      indigo900: '#312e81',
-
-      violet50: '#f5f3ff',
-      violet100: '#ede9fe',
-      violet200: '#ddd6fe',
-      violet300: '#c4b5fd',
-      violet400: '#a78bfa',
-      violet500: '#8b5cf6',
-      violet600: '#7c3aed',
-      violet700: '#6d28d9',
-      violet800: '#5b21b6',
-      violet900: '#4c1d95',
-
-      purple50: '#faf5ff',
-      purple100: '#f3e8ff',
-      purple200: '#e9d5ff',
-      purple300: '#d8b4fe',
-      purple400: '#c084fc',
-      purple500: '#a855f7',
-      purple600: '#9333ea',
-      purple700: '#7e22ce',
-      purple800: '#6b21a8',
-      purple900: '#581c87',
-
-      fuchsia50: '#fdf4ff',
-      fuchsia100: '#fae8ff',
-      fuchsia200: '#f5d0fe',
-      fuchsia300: '#f0abfc',
-      fuchsia400: '#e879f9',
-      fuchsia500: '#d946ef',
-      fuchsia600: '#c026d3',
-      fuchsia700: '#a21caf',
-      fuchsia800: '#86198f',
-      fuchsia900: '#701a75',
-
-      pink50: '#fdf2f8',
-      pink100: '#fce7f3',
-      pink200: '#fbcfe8',
-      pink300: '#f9a8d4',
-      pink400: '#f472b6',
-      pink500: '#ec4899',
-      pink600: '#db2777',
-      pink700: '#be185d',
-      pink800: '#9d174d',
-      pink900: '#831843',
-
-      rose50: '#fff1f2',
-      rose100: '#ffe4e6',
-      rose200: '#fecdd3',
-      rose300: '#fda4af',
-      rose400: '#fb7185',
-      rose500: '#f43f5e',
-      rose600: '#e11d48',
-      rose700: '#be123c',
-      rose800: '#9f1239',
-      rose900: '#881337'
-    }
-  },
-  utils: {
-    inset: (value: number | string) => ({
-      top: value,
-      right: value,
-      left: value,
-      bottom: value
-    })
-  }
-})
-
-type Colors = keyof typeof theme.colors
-type Fonts = keyof typeof theme.fonts
-
-export type { Colors, Fonts, VariantProps }
--- a/src/types/Data.ts
+++ b/src/types/Data.ts
@@ -1,20 +1,16 @@
-import type { ButtonVariantProps } from '../components/Button'
-import type { LinkVariantProps } from '../components/Link'
-import type { Colors, Fonts } from '../styles/stitches.config'
-
 export type Data = {
  settings: {
    avatar: string
    name: string
    description: string
-    font: Fonts
-    buttonsSchema: ButtonVariantProps['styleSchema']
+    font: string
+    buttonsSchema: 'square' | 'rounded' | 'pill'
    outline: boolean
    colors: {
-      texts: Colors
-      socialLinks: LinkVariantProps['theme']
-      buttonLinks: ButtonVariantProps['colorSchema']
-      background: Colors
+      texts: string
+      socialLinks: string
+      buttonLinks: string
+      background: string
    }
  }
  socialLinks: {
@@ -22,6 +18,7 @@ export type Data = {
    href: string
  }[]
  buttonLinks: {
+    id: string
    label: string
    href: string
  }[]
--- a/src/utils/destroyCookies.ts
+++ b/src/utils/destroyCookies.ts
@@ -0,0 +1,12 @@
+import { GetServerSidePropsContext } from 'next'
+import { destroyCookie } from 'nookies'
+
+export function destroyCookies(ctx: GetServerSidePropsContext | undefined = undefined) {
+  destroyCookie(ctx, 'accessToken', {
+    path: '/'
+  })
+
+  destroyCookie(ctx, 'refreshToken', {
+    path: '/'
+  })
+}
--- a/src/utils/setCookies.ts
+++ b/src/utils/setCookies.ts
@@ -0,0 +1,25 @@
+import { GetServerSidePropsContext } from 'next'
+import { setCookie } from 'nookies'
+
+import { api } from '../services/api'
+
+type SetCookiesProps = {
+  ctx?: GetServerSidePropsContext
+  accessToken: string
+  refreshToken: string
+}
+
+export function setCookies({ ctx = undefined, accessToken, refreshToken }: SetCookiesProps) {
+  // @ts-ignore
+  api.defaults.headers['Authorization'] = `Bearer ${accessToken}`
+
+  setCookie(ctx, 'accessToken', accessToken, {
+    maxAge: 60 * 60 * 24 * 30, // 30 days
+    path: '/'
+  })
+
+  setCookie(ctx, 'refreshToken', refreshToken, {
+    maxAge: 60 * 60 * 24 * 30, // 30 days
+    path: '/'
+  })
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,18 +9,78 @@
  dependencies:
    "@babel/highlight" "^7.10.4"

-"@babel/code-frame@^7.0.0":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.0":
  version "7.16.0"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
  integrity sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==
  dependencies:
    "@babel/highlight" "^7.16.0"

+"@babel/generator@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.5.tgz#26e1192eb8f78e0a3acaf3eede3c6fc96d22bedf"
+  integrity sha512-kIvCdjZqcdKqoDbVVdt5R99icaRtrtYhYK/xux5qiWCBmfdvEYMFZ68QCrpE5cbFM1JsuArUNs1ZkuKtTtUcZA==
+  dependencies:
+    "@babel/types" "^7.16.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
+  integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-environment-visitor@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.5.tgz#f6a7f38b3c6d8b07c88faea083c46c09ef5451b8"
+  integrity sha512-ODQyc5AnxmZWm/R2W7fzhamOk1ey8gSguo5SGvF0zcB3uUzRpTRmM/jmLSm9bDMyPlvbyJ+PwPEK0BWIoZ9wjg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-function-name@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz#b7dd0797d00bbfee4f07e9c4ea5b0e30c8bb1481"
+  integrity sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.0"
+    "@babel/template" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-get-function-arity@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
+  integrity sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-hoist-variables@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz#4c9023c2f1def7e28ff46fc1dbcd36a39beaa81a"
+  integrity sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
+  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-plugin-utils@^7.14.5":
  version "7.14.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==

+"@babel/helper-split-export-declaration@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz#29672f43663e936df370aaeb22beddb3baec7438"
+  integrity sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
  version "7.15.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
@@ -35,6 +95,11 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

+"@babel/parser@^7.16.0", "@babel/parser@^7.16.5":
+  version "7.16.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.6.tgz#8f194828193e8fa79166f34a4b4e52f3e769a314"
+  integrity sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ==
+
 "@babel/plugin-syntax-jsx@7.14.5":
  version "7.14.5"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
@@ -64,6 +129,38 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.14.0":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
+  integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
+  integrity sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/parser" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
+"@babel/traverse@^7.4.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.5.tgz#d7d400a8229c714a59b87624fc67b0f1fbd4b2b3"
+  integrity sha512-FOCODAzqUMROikDYLYxl4nmwiLlu85rNqBML/A5hKRVXG2LV8d0iMqgPzdYTcIpjZEBB7D6UDU9vxRZiriASdQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/generator" "^7.16.5"
+    "@babel/helper-environment-visitor" "^7.16.5"
+    "@babel/helper-function-name" "^7.16.0"
+    "@babel/helper-hoist-variables" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+    "@babel/parser" "^7.16.5"
+    "@babel/types" "^7.16.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@7.15.0":
  version "7.15.0"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
@@ -72,6 +169,14 @@
    "@babel/helper-validator-identifier" "^7.14.9"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@15.0.0":
  version "15.0.0"
  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-15.0.0.tgz#8e78e86ee2b6955c1a5d140e734a6c171ce367ee"
@@ -224,6 +329,28 @@
  dependencies:
    "@cspotcode/source-map-consumer" "0.8.0"

+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@endemolshinegroup/cosmiconfig-typescript-loader@^3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
@@ -283,6 +410,11 @@
  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@napi-rs/triples@1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
@@ -425,11 +557,6 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
  integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==

-"@stitches/react@^1.2.6":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.6.tgz#61f2a3d1110334ecd33bcb7463650127d42470cb"
-  integrity sha512-gRVITYj8W4jJmoiVxWDv72yCvd12VvtUUAnTzs07EqmtvGCVgKZu3Dx0x5KVCcb0b6tfgvvNH2L84YrzdM4Mag==
-
 "@tsconfig/node10@^1.0.7":
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
@@ -455,6 +582,14 @@
  resolved "https://registry.yarnpkg.com/@types/bcryptjs/-/bcryptjs-2.4.2.tgz#e3530eac9dd136bfdfb0e43df2c4c5ce1f77dfae"
  integrity sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==

+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json5@^0.0.29":
  version "0.0.29"
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -502,7 +637,15 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==

-"@types/react@17.0.37":
+"@types/react-color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
+  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
+"@types/react@*", "@types/react@17.0.37":
  version "17.0.37"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
@@ -511,11 +654,27 @@
    "@types/scheduler" "*"
    csstype "^3.0.2"

+"@types/reactcss@*":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
+  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/scheduler@*":
  version "0.16.2"
  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

+"@types/styled-components@^5.1.18":
+  version "5.1.18"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.18.tgz#1c361130f76a52f1cb4851c2a32aa328267e5b78"
+  integrity sha512-xPTYmWP7Mxk5TAD3pYsqjwA9G5fAI8e/S51QUJEl7EQD1siKCdiYXIWiH2lzoHRl+QqbQCJMcGv3YTF3OmyPdQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@typescript-eslint/parser@^5.0.0":
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.6.0.tgz#11677324659641400d653253c03dcfbed468d199"
@@ -802,6 +961,21 @@ axobject-query@^2.2.0:
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==

+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54"
+  integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1006,6 +1180,11 @@ camelcase@^5.3.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228:
  version "1.0.30001286"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6"
@@ -1326,6 +1505,20 @@ crypto-browserify@3.12.0:
    randombytes "^2.0.0"
    randomfill "^1.0.3"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css.escape@1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
@@ -1350,6 +1543,11 @@ csstype@^3.0.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==

+cuid@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/cuid/-/cuid-2.1.8.tgz#cbb88f954171e0d5747606c0139fb65c5101eac0"
+  integrity sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==
+
 damerau-levenshtein@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
@@ -1379,7 +1577,7 @@ debug@^3.2.7:
  dependencies:
    ms "^2.1.1"

-debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
  version "4.3.3"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
@@ -2160,6 +2358,11 @@ global-dirs@^0.1.1:
  dependencies:
    ini "^1.3.4"

+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.6.0, globals@^13.9.0:
  version "13.12.0"
  resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.0.tgz#4d733760304230a0082ed96e21e5c565f898089e"
@@ -2259,6 +2462,13 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
  version "2.8.9"
  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -2601,6 +2811,11 @@ js-yaml@^4.1.0:
  dependencies:
    argparse "^2.0.1"

+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-parse-even-better-errors@^2.3.0:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -2778,6 +2993,11 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.get@^4:
  version "4.4.2"
  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -2828,7 +3048,7 @@ lodash.sortby@^4.7.0:
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=

-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
+lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2879,6 +3099,11 @@ map-obj@^4.0.0:
  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==

+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -3447,6 +3672,18 @@ platform@1.3.6:
  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
  integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==

+polished@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
+  integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+
+postcss-value-parser@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@8.2.15:
  version "8.2.15"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
@@ -3526,7 +3763,7 @@ progress@^2.0.0:
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==

-prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3622,7 +3859,25 @@ rc@^1.2.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-react-dom@17.0.2:
+react-collapsible@^2.8.4:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.8.4.tgz#319ff7471138c4381ce0afa3ac308ccde7f4e09f"
+  integrity sha512-oG4yOk6AGKswe0OD/8t3/nf4Rgj4UhlZUUvqL5jop0/ez02B3dBDmNvs3sQz0PcTpJvt0ai8zF7Atd1SzN/UNw==
+
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
+react-dom@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -3636,12 +3891,12 @@ react-icons@^4.3.1:
  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==

-react-is@17.0.2:
+react-is@17.0.2, react-is@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

-react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -3651,7 +3906,7 @@ react-refresh@0.8.3:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

-react@17.0.2:
+react@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -3659,6 +3914,13 @@ react@17.0.2:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -3896,6 +4158,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 sharp@^0.29.3:
  version "0.29.3"
  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.29.3.tgz#0da183d626094c974516a48fab9b3e4ba92eb5c2"
@@ -4013,6 +4280,11 @@ source-map@0.8.0-beta.0:
  dependencies:
    whatwg-url "^7.0.0"

+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
 source-map@^0.6.0, source-map@^0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -4217,6 +4489,22 @@ strip-json-comments@~2.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=

+styled-components@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
+  integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@5.0.0-beta.3:
  version "5.0.0-beta.3"
  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz#400d16179b5dff10d5954ab8be27a9a1b7780dd2"
@@ -4241,7 +4529,7 @@ stylis@3.5.4:
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -4267,11 +4555,6 @@ supports-color@^9.0.2:
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891"
  integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ==

-swr@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.1.tgz#f13346cc830d7950183af57b341bfabb4cc90d43"
-  integrity sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==
-
 tar-fs@^2.0.0, tar-fs@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
@@ -4322,6 +4605,11 @@ timers-browserify@2.0.12:
  dependencies:
    setimmediate "^1.0.4"

+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 to-fast-properties@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"