diff --git a/.eslintignore b/.eslintignore
index f3ce7687..fd8d5b5f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
-.git/
-node_modules/
-!.vitepress
-!.shared-components
+.git
+node_modules
+!/.vitepress
 **/dist
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..bddd1e66
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,15 @@
+{
+  "extends": ["@hannoeru", "plugin:markdown/recommended"],
+  "overrides": [
+    {
+      "files": ["**/*.md/**"],
+      "rules": {
+        "no-undef": "off",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "jsonc/no-dupe-keys": "off"
+      }
+    }
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 44322413..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,32 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-  },
-  extends: ['@antfu/eslint-config', 'plugin:jsonc/recommended-with-json5'],
-  plugins: ['markdown'],
-  rules: {
-    'no-tabs': ['error'],
-    'no-unused-vars': 'off',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/*.md'],
-      processor: 'markdown/markdown',
-    },
-    {
-      files: ['**/*.md/*.{js,ts,json,json5}'],
-      rules: {
-        'no-undef': 'off',
-        'no-unused-vars': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-        'jsonc/no-dupe-keys': 'off',
-      },
-    },
-  ],
-}
diff --git a/.gitignore b/.gitignore
index 484445df..936f121d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,6 @@ wiki/
 
 # Algolia
 .algolia.env
+
+# vite-plugin-components
+components.d.ts
diff --git a/.npmrc b/.npmrc
index 1f59b8f4..bf2e7648 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1 @@
-shared-workspace-lockfile=false
 shamefully-hoist=true
diff --git a/.vitepress/config.js b/.vitepress/config.js
index 76de7641..08b4f7e7 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -1,4 +1,5 @@
 require('esbuild-register')
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const config = require('./config/index.ts')
 module.exports = config.default
diff --git a/.vitepress/config/index.ts b/.vitepress/config/index.ts
index 7bbf94cd..a141c97b 100644
--- a/.vitepress/config/index.ts
+++ b/.vitepress/config/index.ts
@@ -1,14 +1,28 @@
 import { UserConfig } from 'vitepress'
-import { DefaultTheme } from '@windicss/vitepress-theme/config'
 import { metaData } from './constants'
+import { mdRenderFilename } from './markdown'
 import head from './head'
 import themeConfig from './theme'
+import { DefaultTheme } from '@/config'
 
 const config: UserConfig<DefaultTheme.Config> = {
   title: 'Windi CSS',
   description: metaData.description,
   head,
   themeConfig,
+  srcExclude: ['README.md'],
+  markdown: {
+    config(md) {
+      md.use(mdRenderFilename)
+    },
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag === 'preview-box',
+      },
+    },
+  },
 }
 
 export default config
diff --git a/.vitepress/config/markdown.ts b/.vitepress/config/markdown.ts
new file mode 100644
index 00000000..49ee600a
--- /dev/null
+++ b/.vitepress/config/markdown.ts
@@ -0,0 +1,23 @@
+import MarkdownIt from 'markdown-it'
+
+export const mdRenderFilename = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+    const langInfo = token.info.split(' ')
+    const langName = langInfo?.length ? langInfo[0] : ''
+    const filename = langName.length && langInfo[1] ? langInfo[1] : null
+
+    // remove filename
+    token.info = langName
+
+    const rawCode = fence(...args)
+
+    const finalCode = filename
+      ? rawCode.replace(/<div class="language-(\w+)">/, `<div class="language-$1 with-filename"><div class="code-block-filename">${filename}</div>`)
+      : rawCode
+
+    return finalCode
+  }
+}
diff --git a/.vitepress/config/nav.ts b/.vitepress/config/nav.ts
index 33e2ca35..2c89e605 100644
--- a/.vitepress/config/nav.ts
+++ b/.vitepress/config/nav.ts
@@ -1,4 +1,4 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
+import type { DefaultTheme } from '@/config'
 
 export const nav: DefaultTheme.Config['nav'] = [
   {
diff --git a/.vitepress/config/sidebar.ts b/.vitepress/config/sidebar.ts
index 80f4cf97..a4924715 100644
--- a/.vitepress/config/sidebar.ts
+++ b/.vitepress/config/sidebar.ts
@@ -1,4 +1,4 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
+import type { DefaultTheme } from '@/config'
 
 export const sidebar: DefaultTheme.Config['sidebar'] = {
   '/utilities': [
diff --git a/.vitepress/config/theme.ts b/.vitepress/config/theme.ts
index 073e2ae2..d1bd7206 100644
--- a/.vitepress/config/theme.ts
+++ b/.vitepress/config/theme.ts
@@ -1,6 +1,6 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
 import { sidebar } from './sidebar'
 import { nav } from './nav'
+import type { DefaultTheme } from '@/config'
 
 const themeConfig: DefaultTheme.Config = {
   algolia: {
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..31c0b921
--- /dev/null
+++ b/.vitepress/theme/Layout.vue
@@ -0,0 +1,4 @@
+<template>
+  <TheLayout />
+  <Debug />
+</template>
diff --git a/.vitepress/theme/NotFound.vue b/.vitepress/theme/NotFound.vue
new file mode 100644
index 00000000..8b86a854
--- /dev/null
+++ b/.vitepress/theme/NotFound.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="relative flex flex-col items-center justify-center h-60vh">
+    <h1 class="!m-0 w-full text-center !text-9xl !md:text-12xl !text-transparent text-stroke-sm text-stroke-primary-300 dark:text-stroke-primary-700">
+      404
+    </h1>
+    <h2 class="!m-0 !-mt-15 !md:-mt-20 w-full text-center !text-3xl text-stroke-sm uppercase tracking-0.5em pl-3">
+      Page Not Found
+    </h2>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/atoms/AppButton.vue b/.vitepress/theme/components/atoms/AppButton.vue
new file mode 100644
index 00000000..36eeee62
--- /dev/null
+++ b/.vitepress/theme/components/atoms/AppButton.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  size: String as PropType<'sm' | 'lg'>,
+})
+
+const linkClass = computed(() => ([
+  `
+  inline-flex items-center justify-center
+  px-3 py-2
+  border border-transparent rounded-md
+  bg-primary
+  hover:bg-primary-600
+  shadow-sm
+  text-base text-white font-medium
+  transition duration-50
+  ring-primary focus:ring-3 ring-opacity-50
+  `, {
+    'bg-transparent border border-primary text-primary hover:text-gray-100': props.outline,
+    'text-sm underline': props.inline,
+    'text-sm px-2.5 py-2': props.size === 'sm',
+    'text-base px-3 py-2.5 md:(text-lg px-4 py-3) border-2': props.size === 'lg',
+  },
+]))
+
+</script>
+
+<template>
+  <a
+    :href="href"
+    :class="linkClass"
+  >
+    <div v-if="$slots.icon" class="inline-block mr-1">
+      <slot name="icon" />
+    </div>
+    <slot />
+  </a>
+</template>
+
+<style>
+.btn {
+  display: inline-flex;
+
+}
+</style>
diff --git a/.vitepress/theme/components/atoms/AppLayout.vue b/.vitepress/theme/components/atoms/AppLayout.vue
new file mode 100644
index 00000000..2a9ccf2d
--- /dev/null
+++ b/.vitepress/theme/components/atoms/AppLayout.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="container !max-w-screen-2xl lg:px-6 mx-auto pt-$header-height">
+    <slot />
+  </div>
+</template>
diff --git a/.vitepress/theme/components/atoms/AppLogo.vue b/.vitepress/theme/components/atoms/AppLogo.vue
new file mode 100644
index 00000000..36248c0f
--- /dev/null
+++ b/.vitepress/theme/components/atoms/AppLogo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { withBase, useData } from 'vitepress'
+const { site, theme, localePath } = useData()
+</script>
+
+<template>
+  <a
+    class="
+      inline-flex
+      items-center
+      text-xl lg:text-2xl
+      font-semibold
+    "
+    :href="localePath"
+    :aria-label="`${site.title}, back to home`"
+  >
+    <img
+      v-if="theme.logo"
+      class="
+        inline-flex
+        mr-1 lg:mr-3
+        h-8 lg:h-10
+      "
+      :src="withBase(theme.logo)"
+      alt="Logo"
+    >
+    {{ site.title }}
+  </a>
+</template>
diff --git a/.vitepress/theme/components/atoms/ContentLayout.vue b/.vitepress/theme/components/atoms/ContentLayout.vue
new file mode 100644
index 00000000..77ba0ee8
--- /dev/null
+++ b/.vitepress/theme/components/atoms/ContentLayout.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="grid px-6 md:px-8 py-8 lg:py-12">
+    <slot />
+  </div>
+</template>
diff --git a/.vitepress/theme/components/atoms/IconButton.vue b/.vitepress/theme/components/atoms/IconButton.vue
new file mode 100644
index 00000000..005a7d08
--- /dev/null
+++ b/.vitepress/theme/components/atoms/IconButton.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    target="_blank"
+    rel="noopener"
+    class="inline-flex text-xl p-2"
+  >
+    <slot />
+  </a>
+  <button v-else class="inline-flex text-xl p-2">
+    <slot />
+  </button>
+</template>
diff --git a/.vitepress/theme/components/atoms/PlayDivide.vue b/.vitepress/theme/components/atoms/PlayDivide.vue
new file mode 100644
index 00000000..1816692b
--- /dev/null
+++ b/.vitepress/theme/components/atoms/PlayDivide.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="hidden md:inline-flex items-center">
+    <div class="h-5 w-2px bg-gray-200 dark:bg-dark-200" />
+  </div>
+</template>
diff --git a/.vitepress/theme/components/atoms/logos/Logo.vue b/.vitepress/theme/components/atoms/logos/Logo.vue
new file mode 100644
index 00000000..bd86ef27
--- /dev/null
+++ b/.vitepress/theme/components/atoms/logos/Logo.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Nuxt from 'virtual:vite-icons/logos/nuxt-icon'
+import Vue from 'virtual:vite-icons/logos/vue'
+import Svelte from 'virtual:vite-icons/logos/svelte-icon'
+import Rollup from 'virtual:vite-icons/logos/rollup'
+import Webpack from 'virtual:vite-icons/logos/webpack'
+import VSCode from 'virtual:vite-icons/logos/visual-studio-code'
+import Webstrom from 'virtual:vite-icons/logos/webstorm'
+import PostCSS from 'virtual:vite-icons/logos/postcss'
+import Gridsome from 'virtual:vite-icons/logos/gridsome-icon'
+import JavaScript from 'virtual:vite-icons/logos/javascript'
+import NextJs from './NuxtJs.vue'
+import Vite from './ViteLogo.vue'
+import Windi from './WindiLogo.vue'
+
+// @windicss-safelist: 'logo-float-xl'
+
+const props = defineProps({
+  name: {
+    default: '',
+  },
+})
+
+const Logo = computed(() => {
+  switch (props.name.toString()) {
+    case 'nuxt':
+      return Nuxt
+    case 'vue':
+      return Vue
+    case 'svelte':
+      return Svelte
+    case 'rollup':
+      return Rollup
+    case 'webpack':
+      return Webpack
+    case 'vite':
+      return Vite
+    case 'nextjs':
+      return NextJs
+    case 'gridsome':
+      return Gridsome
+    case 'vscode':
+      return VSCode
+    case 'webstorm':
+      return Webstrom
+    case 'postcss':
+      return PostCSS
+    case 'javascript':
+      return JavaScript
+    default:
+      return Windi
+  }
+})
+</script>
+
+<template>
+  <component :is="Logo" />
+</template>
diff --git a/.vitepress/theme/components/atoms/logos/NuxtJs.vue b/.vitepress/theme/components/atoms/logos/NuxtJs.vue
new file mode 100644
index 00000000..4b242a41
--- /dev/null
+++ b/.vitepress/theme/components/atoms/logos/NuxtJs.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import NextJs from 'virtual:vite-icons/logos/nextjs'
+</script>
+
+<template>
+  <NextJs class="dark:brightness-0 dark:invert" />
+</template>
diff --git a/.vitepress/theme/components/atoms/logos/ViteLogo.vue b/.vitepress/theme/components/atoms/logos/ViteLogo.vue
new file mode 100644
index 00000000..0cb82479
--- /dev/null
+++ b/.vitepress/theme/components/atoms/logos/ViteLogo.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg width="1.2em" height="1.2em" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)" />
+    <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)" />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="6.00017"
+        y1="32.9999"
+        x2="235"
+        y2="344"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#41D1FF" />
+        <stop offset="1" stop-color="#BD34FE" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="194.651"
+        y1="8.81818"
+        x2="236.076"
+        y2="292.989"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FFEA83" />
+        <stop offset="0.0833333" stop-color="#FFDD35" />
+        <stop offset="1" stop-color="#FFA800" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
diff --git a/.vitepress/theme/components/atoms/logos/WindiLogo.vue b/.vitepress/theme/components/atoms/logos/WindiLogo.vue
new file mode 100644
index 00000000..95c1aae2
--- /dev/null
+++ b/.vitepress/theme/components/atoms/logos/WindiLogo.vue
@@ -0,0 +1,3 @@
+<template>
+  <img src="/assets/logo.svg" style="width: 1.35em; height: 1.35em" class="!m-0">
+</template>
diff --git a/.vitepress/theme/components/global/ColorsPalette.vue b/.vitepress/theme/components/global/ColorsPalette.vue
new file mode 100644
index 00000000..c89e74cc
--- /dev/null
+++ b/.vitepress/theme/components/global/ColorsPalette.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+const colors = [
+  'pink',
+  'rose',
+  'red',
+  'orange',
+  'yellow',
+  'amber',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'light-blue',
+  'blue',
+  'indigo',
+  'purple',
+  'violet',
+  'fuchsia',
+  'gray',
+  'blue-gray',
+  'cool-gray',
+  'warm-gray',
+  'true-gray',
+  'light',
+  'dark',
+]
+</script>
+
+<template>
+  <div class="my-8">
+    <div v-for="color in colors" :key="color">
+      <div class="relative mb-3 mt-6">
+        <span>
+          {{ color }}
+        </span>
+      </div>
+      <div class="flex gap-2 mb-2 overflow-y-auto">
+        <SingleColor v-for="level in levels" :key="level" :color="`bg-${color}-${level}`" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/global/Customizing.vue b/.vitepress/theme/components/global/Customizing.vue
new file mode 100644
index 00000000..65c464c7
--- /dev/null
+++ b/.vitepress/theme/components/global/Customizing.vue
@@ -0,0 +1,10 @@
+<template>
+  <details class="customizing mt-4">
+    <summary class="outline-none select-none cursor-pointer opacity-50">
+      Customizing
+    </summary>
+    <div class="mt-4">
+      <slot />
+    </div>
+  </details>
+</template>
diff --git a/.vitepress/theme/components/global/Integrations.vue b/.vitepress/theme/components/global/Integrations.vue
new file mode 100644
index 00000000..3cf70cdd
--- /dev/null
+++ b/.vitepress/theme/components/global/Integrations.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  items: {link: string; logo: string; title: string; wip?: boolean }[]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-5">
+    <a
+      v-for="item of items"
+      :key="item.link"
+      class="
+        relative
+        no-underline
+        border rounded-lg
+        h-30 w-30 p-4
+        text-$c-fg text-center
+        transition-all duration-500
+        border-$windi-bc
+        hover:(shadow-lg)
+        dark:hover:(bg-gray-400 bg-opacity-10)
+      "
+      :href="item.link"
+    >
+      <Logo :name="item.logo" class="!m-auto text-5xl block" />
+      <div class="pb-3 right-0 bottom-0 left-0 absolute no-underline">{{ item.title }}</div>
+      <div v-if="item.wip" class="text-xs opacity-50 transform right-2 bottom-7 scale-90 absolute italic">WIP</div>
+    </a>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/global/LearnMore.vue b/.vitepress/theme/components/global/LearnMore.vue
new file mode 100644
index 00000000..f25ffdcf
--- /dev/null
+++ b/.vitepress/theme/components/global/LearnMore.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  to: string
+}>()
+</script>
+
+<template>
+  <div class="mt-4">
+    <a :href="to" class="text-primary border-b border-transparent !hover:(no-underline border-current)">
+      Learn more <carbon:arrow-right class="inline" />
+    </a>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/global/PackageInfo.vue b/.vitepress/theme/components/global/PackageInfo.vue
new file mode 100644
index 00000000..9f635fe4
--- /dev/null
+++ b/.vitepress/theme/components/global/PackageInfo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  repo?: string
+  author?: string
+  hideNpm?: boolean
+}>()
+
+function encode(str: string) {
+  return encodeURIComponent(str).replace(/-/g, '--')
+}
+</script>
+
+<template>
+  <p class="space-x-2">
+    <a :href="`https://github.com/windicss/${repo || name}`" target="_blank" class="inline-block">
+      <img class="!m-0" :src="`https://img.shields.io/badge/a-${encode(name)}-gray?logo=github&label=`">
+    </a>
+    <a
+      v-if="!hideNpm"
+      :href="`https://www.npmjs.com/package/${name}`"
+      target="_blank"
+      class="inline-block"
+    >
+      <img class="!m-0" :src="`https://img.shields.io/npm/v/${name}?color=cb0200&label=%20&logo=npm`">
+    </a>
+    <a
+      v-if="author"
+      :href="`https://github.com/${author}`"
+      target="_blank"
+      class="inline-block"
+    >
+      <img class="!m-0" :src="`https://img.shields.io/badge/a-${encode('@'+author)}-48B0F1?label=`">
+    </a>
+    <slot />
+  </p>
+</template>
diff --git a/.vitepress/theme/components/global/Playground.vue b/.vitepress/theme/components/global/Playground.vue
new file mode 100644
index 00000000..fb02e340
--- /dev/null
+++ b/.vitepress/theme/components/global/Playground.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { IframePreview } from '@windicss/shared-components'
+import { Splitpanes, Pane } from 'splitpanes'
+import type { Config } from 'windicss/types/interfaces'
+import { useWindiCSS } from '@/logics/useWindiCSS'
+import { getSharedCode, useEmitShare } from '@/logics/useShare'
+import { layout } from '@/logics/playgroundLayout'
+import { isDark } from '@/logics/dark'
+import { bps } from '@/logics/breakpoints'
+import { html, css } from '@/data/playground'
+
+import 'splitpanes/dist/splitpanes.css'
+import '@windicss/shared-components/index.css'
+// @windi whitelist: text-sm border p-2 rounded !bg-dark-300
+
+const regexClassGroup = /([!\w+-<@][\w+:_/-]*?\w):\(([!\w\s:/\\,%#\[\].$-]*?)\)/gm
+
+const bpmd = bps.greater('md')
+
+const styleCode = ref(css)
+const htmlCode = ref(html)
+
+const props = defineProps<{ config?: Config }>()
+
+onMounted(() => {
+  const { html, css } = getSharedCode()
+  if (html)
+    htmlCode.value = html
+  if (css)
+    styleCode.value = css
+
+  useEmitShare(htmlCode, styleCode)
+})
+
+// replace group variant
+const finalHTML = computed(() => {
+  return htmlCode.value.replace(regexClassGroup, (full: string, a: string, b: string) => {
+    return b.split(/\s/g).map(i => `${a}:${i}`).join(' ')
+  })
+})
+
+const {
+  processor,
+  generatedCSS,
+} = useWindiCSS(finalHTML, styleCode, props.config)
+</script>
+
+<template>
+  <div class="playground">
+    <ClientOnly>
+      <Splitpanes :horizontal="!bpmd || layout === 'bottom'" class="w-full h-full default-theme">
+        <Pane v-if="layout === 'left'" min-size="20" :size="bpmd ? 40 : 33">
+          <PlayPreviewBlock class="h-full">
+            <IframePreview class="w-full h-full" :html="finalHTML" :css="generatedCSS" :dark="isDark" />
+          </PlayPreviewBlock>
+        </Pane>
+        <Pane min-size="20" :size="bpmd ? 60 : 66">
+          <Splitpanes :horizontal="layout !== 'bottom'">
+            <Pane min-size="20">
+              <PlayTemplateBlock v-model="htmlCode" class="w-full h-full" :processor="processor" />
+            </Pane>
+            <Pane min-size="20">
+              <PlayStyleBlock v-model="styleCode" class="w-full h-full" :processor="processor" />
+            </Pane>
+          </Splitpanes>
+        </Pane>
+        <Pane v-if="layout !== 'left'" min-size="20" :size="bpmd ? 40 : 33">
+          <PlayPreviewBlock class="h-full">
+            <IframePreview class="w-full h-full" :html="finalHTML" :css="generatedCSS" :dark="isDark" />
+          </PlayPreviewBlock>
+        </Pane>
+      </Splitpanes>
+    </ClientOnly>
+  </div>
+</template>
+
+<style lang="postcss">
+.playground {
+  --c-bg: var(--windi-bg);
+  --c-scrollbar: var(--windi-bc);
+  @apply h-140vh p-4 bg-blue-gray-100 dark:bg-dark-800;
+}
+@screen md {
+  .playground {
+    height: calc(100vh - var(--header-height));
+  }
+}
+.block-bg {
+  @apply bg-white rounded-lg bg-opacity-90 dark:bg-dark-500;
+}
+.block-title {
+  @apply pl-4 pr-2 pt-2 text-sm font-bold opacity-85 select-none;
+}
+.block-code {
+  @apply absolute pt-2em inset-0 w-full h-full overflow-hidden rounded-b-lg;
+}
+.splitpanes.default-theme .splitpanes__pane {
+  @apply bg-transparent;
+}
+.splitpanes.default-theme .splitpanes__splitter {
+  @apply bg-transparent border-transparent min-w-4 min-h-4;
+  &:before, &:after {
+    @apply bg-gray-300 dark:bg-dark-300;
+  }
+  &:hover:before, &:hover:after {
+    @apply bg-gray-400 dark:bg-dark-100;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/global/Sponsors.vue b/.vitepress/theme/components/global/Sponsors.vue
new file mode 100644
index 00000000..6a15eafb
--- /dev/null
+++ b/.vitepress/theme/components/global/Sponsors.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFetch } from '@vueuse/core'
+
+const corsProxyUrl = 'https://cors.maint.workers.dev/?'
+const memberUrl = 'https://opencollective.com/windicss/members.json'
+
+const { data, isFinished } = useFetch<any[]>(corsProxyUrl + memberUrl).json().get()
+
+const base = computed(() => {
+  const cache: any = []
+  return data.value
+    ? data.value
+      .filter((i: any) => i.totalAmountDonated !== 0)
+      .filter((i: any) => {
+        if (cache.includes(i.profile)) {
+          return false
+        } else {
+          cache.push(i.profile)
+          return true
+        }
+      })
+      .sort((a: any, b: any) => (
+        b.totalAmountDonated - a.totalAmountDonated
+      ))
+    : []
+})
+const viewData = computed(() => {
+  return [
+    {
+      title: 'Special Sponsor',
+      data: base.value.filter((i: any) => i.totalAmountDonated >= 1000),
+    },
+    {
+      title: 'Sponsors',
+      data: base.value.filter((i: any) => i.totalAmountDonated < 1000),
+    },
+  ]
+})
+</script>
+
+<template>
+  <div class="text-$c-text text-center mt-4 mb-24">
+    <template v-for="item in viewData" :key="item.title">
+      <h2 class="border-none text-2xl">
+        {{ item.title }}
+      </h2>
+      <div v-if="isFinished" class="flex flex-wrap justify-center px-4 md:px-16 mt-10 mb-10">
+        <a
+          v-for="{ profile, image, name, MemberId } of item.data"
+          :key="name"
+          :href="profile"
+          target="_blank"
+          rel="noopener"
+          aria-label="sponsor-img"
+          class="inline-block w-60px h-60px md:(w-80px h-80px) overflow-hidden m-1.5 hover:no-underline"
+          :class="{'!w-280px': item.title === 'Special Sponsor' }"
+        >
+          <logos:nuxt v-if="MemberId === 180034" class="w-full h-full" />
+          <img v-else-if="image" :src="image" :alt="name" class="!m-0 w-full h-full rounded-full">
+          <div v-else class="w-full h-full bg-gray-100 dark:bg-dark-400 flex items-center p-1 rounded-full">
+            <span class="text-$c-text text-xs">{{ name }}</span>
+          </div>
+        </a>
+      </div>
+    </template>
+    <span class="text-sm">
+      Become a sponsor on
+      <a href="https://opencollective.com/windicss" target="_blank" rel="noopener">Open Collective</a>
+    </span>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/global/playground/DirectivesPlayground.vue b/.vitepress/theme/components/global/playground/DirectivesPlayground.vue
new file mode 100644
index 00000000..66e17350
--- /dev/null
+++ b/.vitepress/theme/components/global/playground/DirectivesPlayground.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Windi from 'windicss'
+import { CSSParser } from 'windicss/utils/parser'
+import { useVModel } from '@vueuse/core'
+
+import { useCodeMirror } from '@/logics/useCodeMirror'
+import { usePrismCSS } from '@/logics/usePrismCSS'
+
+const emit = defineEmits([])
+const props = defineProps({
+  input: {
+    type: String,
+    default: '',
+  },
+})
+
+const input = useVModel(props, 'input', emit, { passive: true })
+const textareaInput = ref<HTMLTextAreaElement | null>(null)
+
+const processor = new Windi()
+const { highlightedCSS, copy, copied } = usePrismCSS(() => new CSSParser(input.value, processor).parse().build())
+
+onMounted(async() => {
+  if (typeof window === 'undefined')
+    return
+
+  await useCodeMirror(textareaInput, input, { mode: 'text/x-scss', scrollbarStyle: 'null' })
+})
+</script>
+
+<template>
+  <div class="border border-$windi-bc rounded relative directives-playground">
+    <div
+      class="grid w-full"
+      style="grid-template-columns: 1fr max-content;"
+    >
+      <div class="flex-auto flex flex-col overflow-auto">
+        <div>
+          <textarea
+            ref="textareaInput"
+            spellcheck="false"
+            autocomplete="off"
+            autocapitalize="false"
+            class="bg-transparent outline-none"
+          />
+        </div>
+        <div
+          class="text-sm border-t border-$windi-bc"
+        >
+          <div class="ml-1 p-2 text-sm opacity-50 flex">
+            <span>Generated CSS</span>
+            <div class="flex-auto" />
+            <div class="icon-button ml-3" :class="{ active: copied }" title="Copy" @click="copy()">
+              <carbon:checkmark-outline v-if="copied" class="text-green-500" />
+              <carbon:copy v-else />
+            </div>
+          </div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="language-css !bg-transparent max-h-30em">
+            <pre><code v-html="highlightedCSS" /></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.directives-playground .CodeMirror {
+  @apply px-3 py-2 h-auto bg-transparent font-mono text-sm;
+}
+</style>
diff --git a/.vitepress/theme/components/global/playground/InlinePlayground.vue b/.vitepress/theme/components/global/playground/InlinePlayground.vue
new file mode 100644
index 00000000..02e6db93
--- /dev/null
+++ b/.vitepress/theme/components/global/playground/InlinePlayground.vue
@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { shallowRef, ref, watchEffect, onMounted, computed, toRef, reactive } from 'vue'
+import { syncRef } from '@vueuse/core'
+import { StyleSheet } from 'windicss/utils/style'
+import Windi from 'windicss'
+import JSON5 from 'json5'
+
+import type { PropType } from 'vue'
+import type CodeMirror from 'codemirror'
+import type { Config } from 'windicss/types/interfaces'
+import { useCodeMirror } from '@/logics/useCodeMirror'
+import { usePrismCSS } from '@/logics/usePrismCSS'
+import { isDark } from '@/logics/dark'
+
+const props = defineProps({
+  input: {
+    type: String,
+    // eslint-disable-next-line no-useless-escape
+    default: 'px-1.2em py-2 bg-hex-0ea5e9 text-white rounded\nhover:\(shadow bg-opacity-85)',
+  },
+  showPreview: {
+    default: true,
+  },
+  showMode: {
+    default: false,
+  },
+  showTabs: {
+    default: false,
+  },
+  showCSS: {
+    default: true,
+  },
+  showCopy: {
+    default: true,
+  },
+  showConfig: {
+    default: false,
+  },
+  enableConfig: {
+    default: false,
+  },
+  enablePreview: {
+    default: true,
+  },
+  nested: {
+    default: false,
+  },
+  fixed: {
+    default: '',
+  },
+  appended: {
+    default: '',
+  },
+  html: {
+    default: undefined,
+  },
+  tab: {
+    type: String as PropType<'code' | 'css' | 'config'>,
+    default: 'code',
+  },
+  mode: {
+    type: String as PropType<'interpret' | 'compile'>,
+    default: 'interpret',
+  },
+  config: {
+    type: Object as PropType<Config>,
+    default: () => {},
+  },
+})
+
+const config = ref(props.config)
+const processor = computed(() => new Windi(config.value))
+
+const textareaInput = ref<HTMLTextAreaElement | null>(null)
+const textareaConfig = ref<HTMLTextAreaElement | null>(null)
+const input = ref(props.input)
+const mode = ref(props.mode)
+
+syncRef(toRef(props, 'input'), input)
+
+const acceped = ref<string[]>([])
+
+const decorations: CodeMirror.TextMarker<CodeMirror.MarkerRange>[] = []
+const preflightStyles = processor.value.preflight('<div <p', true, true, true)
+const fixedStyles = processor.value.interpret(`${props.fixed} ${props.appended}`).styleSheet
+
+const style = shallowRef<StyleSheet>(new StyleSheet())
+const { highlightedCSS, copy, copied } = usePrismCSS(() => style.value.build().trim())
+
+const iframeData = reactive({
+  css: computed(() => new StyleSheet()
+    .extend(preflightStyles)
+    .extend(style.value)
+    .sort()
+    .build(),
+  ),
+  fixedCss: computed(() => fixedStyles.build()),
+  classes: computed(() => `${[...(props.nested ? [] : acceped.value), props.fixed].filter(Boolean).join(' ')}`.trim()),
+  html: computed(() => props.nested ? `${props.html}`.replace(/\{class\}/g, acceped.value.join(' ')) : props.html),
+})
+
+function mark(start: number, end: number, matched: boolean, cm: CodeMirror.Editor) {
+  decorations.push(cm.markText(
+    cm.posFromIndex(start),
+    cm.posFromIndex(end),
+    { className: [matched ? 'text-green-600' : 'text-orange-600'].join(' ') },
+  ))
+}
+
+function toggleMode() {
+  mode.value = mode.value === 'compile' ? 'interpret' : 'compile'
+}
+
+function interpret(cm: CodeMirror.Editor) {
+  const value = input.value
+
+  // @ts-expect-error
+  const { styleSheet, success, ignored, className } = mode.value === 'interpret'
+    ? processor.value.interpret(value.replace(/\n/g, ' ')) || {}
+    : processor.value.compile(value.replace(/\n/g, ' ')) || {}
+
+  if (mode.value === 'interpret')
+    acceped.value = success || []
+  else
+    acceped.value = [className]
+
+  // clear previous
+  decorations.forEach(i => i.clear())
+
+  // hightlight for classes
+  let start = 0
+  value.split(/\s/g).forEach((i) => {
+    const end = start + i.length
+    if (success.includes(i))
+      mark(start, end, true, cm)
+    else if (ignored.includes(i))
+      mark(start, end, false, cm)
+    start = end + 1
+  })
+
+  // hightlight for groups
+  Array.from(value.matchAll(/([\w:]+):\((.*?)\)/g))
+    .forEach((match) => {
+      const [full, prefix, itemStr] = match
+      let start = match.index!
+      const items = itemStr.split(/\s/g)
+      // group success
+      if (success.some(i => i.startsWith(prefix))) {
+        // prefix
+        mark(start, start + prefix.length + 2, true, cm)
+        // end braket
+        mark(start + full.length - 1, start + full.length, true, cm)
+
+        start += prefix.length + 2
+
+        // group items
+        items.forEach((i) => {
+          const item = `${prefix}:${i}`
+          const end = start + i.length
+          if (success.includes(item))
+            mark(start, end, true, cm)
+          else if (ignored.includes(item))
+            mark(start, end, false, cm)
+
+          start = end + 1
+        })
+      } else {
+        // group failed
+        mark(start, start + full.length, false, cm)
+      }
+    })
+
+  style.value = styleSheet
+}
+
+const configString = computed<string>({
+  get() {
+    return JSON5.stringify(config.value, { space: 2, quote: '\'' }) || ''
+  },
+  set(v) {
+    config.value = JSON5.parse(v)
+  },
+})
+
+onMounted(async() => {
+  if (typeof window === 'undefined')
+    return
+
+  const cm1 = await useCodeMirror(textareaInput, input, { mode: 'text', scrollbarStyle: 'null', lineWrapping: true })
+
+  if (textareaConfig.value)
+    await useCodeMirror(textareaConfig, configString, { mode: 'javascript' })
+
+  watchEffect(() => interpret(cm1))
+})
+</script>
+
+<template>
+  <div class="inline-playground mt-4">
+    <div v-if="showTabs" class="flex tabs">
+      <!-- <div class="tab" :class="{active: tab === 'code'}" @click="tab = 'code'">
+      <carbon:code class="inline-block" />
+    </div> -->
+      <div class="flex-auto" />
+      <div
+        class="tab"
+        title="Toggle CSS"
+        :class="{active: showCSS}"
+        @click="showCSS = !showCSS"
+      >
+        <uil:css3-simple class="inline-block" />
+      </div>
+      <div
+        v-if="enableConfig"
+        class="tab"
+        title="Toggle Configurations"
+        :class="{active: showConfig}"
+        @click="showConfig = !showConfig"
+      >
+        <carbon:settings-adjust class="inline-block" />
+      </div>
+      <div
+        v-if="enablePreview"
+        class="tab"
+        title="Toggle Preview"
+        :class="{active: showPreview}"
+        @click="showPreview = !showPreview"
+      >
+        <carbon:camera class="inline-block" />
+      </div>
+    </div>
+    <div class="border border-$windi-bc rounded relative">
+      <div
+        class="grid w-full"
+        style="grid-template-columns: 1fr max-content;"
+      >
+        <div class="flex-auto flex flex-col overflow-auto">
+          <div>
+            <textarea
+              ref="textareaInput"
+              spellcheck="false"
+              autocomplete="off"
+              autocapitalize="false"
+              class="bg-transparent outline-none"
+            />
+          </div>
+          <div v-show="showConfig" class="border-t border-$windi-bc">
+            <div class="ml-1 p-2 pb-0 text-sm opacity-50 flex">
+              <span>Config</span>
+            </div>
+            <div class="max-h-20em overflow-y-auto">
+              <textarea
+                ref="textareaConfig"
+                spellcheck="false"
+                autocomplete="off"
+                autocapitalize="false"
+                class="bg-transparent outline-none"
+              />
+            </div>
+          </div>
+          <div
+            v-show="showCSS"
+            class="text-sm border-t border-$windi-bc"
+          >
+            <div class="ml-1 p-2 text-sm opacity-50 flex">
+              <span>CSS</span>
+              <div class="flex-auto" />
+              <div v-if="showMode" class="icon-button" title="Toggle Mode" @click="toggleMode">
+                <span class="text-sm mr-1.5 capitalize">{{ mode }}</span>
+                <carbon:circle-packing v-if="mode === 'compile'" />
+                <carbon:chart-bubble-packed v-else />
+              </div>
+              <div v-if="showCopy" class="icon-button ml-3" :class="{ active: copied }" title="Copy" @click="copy()">
+                <carbon:checkmark-outline v-if="copied" class="text-green-500" />
+                <carbon:copy v-else />
+              </div>
+            </div>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <pre class="language-css !bg-transparent max-h-30em !px-4 !py-4" v-html="highlightedCSS" />
+          </div>
+        </div>
+        <div
+          v-if="showPreview"
+          class="border-l border-$windi-bc w-10em p-3"
+        >
+          <preview-box v-bind="iframeData" :dark="isDark" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.inline-playground .tabs .tab {
+  @apply px-3 py-1 mx-1 cursor-pointer bg-gray-50 dark:bg-true-gray-800 text-gray-400 opacity-75
+    border-t border-l border-r rounded-tr rounded-tl border-$windi-bc;
+}
+.inline-playground .tabs .tab.active {
+  @apply text-blue-500 bg-$windi-bg opacity-100;
+}
+.inline-playground .CodeMirror {
+  @apply px-3 py-2 h-auto bg-transparent font-mono text-sm;
+}
+.icon-button {
+  @apply
+    flex items-center text-1.05rem border-0
+    focus:outline-none text-$c-text
+    opacity-80 cursor-pointer select-none
+    hover:opacity-100;
+  &.active {
+    @apply opacity-100;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/global/playground/PlaygroundWithBox.vue b/.vitepress/theme/components/global/playground/PlaygroundWithBox.vue
new file mode 100644
index 00000000..a4ba6923
--- /dev/null
+++ b/.vitepress/theme/components/global/playground/PlaygroundWithBox.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useVModels } from '@vueuse/core'
+
+const emit = defineEmits([])
+const props = defineProps({
+  directions: {
+    default: () => ['ALL'],
+  },
+  variant: {
+    default: '',
+  },
+  variants: {
+    default: () => ['none', 'sm', '', 'md', 'lg', 'xl', '2xl', '3xl', '1/2', 'full'],
+  },
+  prefix: {
+    default: 'rounded',
+  },
+  mode: {
+    default: 'all',
+  },
+  fixed: {
+    default: '',
+  },
+})
+
+const {
+  directions,
+  variant,
+  prefix,
+} = useVModels(props, emit, { passive: true })
+
+const classes = computed(() => {
+  let strs = []
+  if (directions.value.includes('ALL'))
+    strs = [prefix.value]
+  else
+    strs = directions.value.map(i => `${prefix.value}-${i}`)
+
+  if (variant.value)
+    strs = strs.map(i => `${i}-${variant.value}`)
+
+  return strs.join(' ')
+})
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <SelectorBox
+      v-model="directions"
+      class="flex-none"
+      :mode="mode"
+    />
+    <SelectorVariants
+      v-model="variant"
+      class="max-w-20em mt-auto"
+      :variants="variants"
+    />
+  </div>
+  <div class="mt-4" />
+  <InlinePlayground
+    :input="classes"
+    :fixed="fixed"
+    :show-mode="true"
+  />
+</template>
diff --git a/.vitepress/theme/components/global/playground/PlaygroundWithVariants.vue b/.vitepress/theme/components/global/playground/PlaygroundWithVariants.vue
new file mode 100644
index 00000000..c987026f
--- /dev/null
+++ b/.vitepress/theme/components/global/playground/PlaygroundWithVariants.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useVModels } from '@vueuse/core'
+
+const emit = defineEmits([])
+const props = defineProps({
+  variant: {
+    default: '',
+  },
+  variants: {
+    default: () => ['none', 'sm', '', 'md', 'lg', 'xl', '2xl', '3xl', '1/2', 'full'],
+  },
+  type: {
+    default: undefined,
+  },
+  prefix: {
+    default: '',
+  },
+  fixed: {
+    default: '',
+  },
+  appended: {
+    default: '',
+  },
+  nested: {
+    default: false,
+  },
+  html: {
+    default: undefined,
+  },
+  showPreview: {
+    default: true,
+  },
+})
+
+const {
+  variant,
+  prefix,
+} = useVModels(props, emit, { passive: true })
+
+const classes = computed(() => {
+  if (!prefix.value)
+    return variant.value
+
+  let strs = [prefix.value]
+
+  if (variant.value)
+    strs = variant.value.startsWith('-') ? strs.map(i => `-${i}${variant.value}`) : strs.map(i => `${i}-${variant.value}`)
+
+  return strs.join(' ')
+})
+</script>
+
+<template>
+  <SelectorVariants
+    v-model="variant"
+    :variants="type === 'color' ? ['transparent', 'current', 'gray-500', 'red-500', 'yellow-500', 'blue-500', 'green-500'] : type === 'opacity' ? ['0', '5', '10', '20', '25', '30', '40', '50', '60', '70', '75', '80', '90', '95', '100'] : variants"
+  />
+  <div class="mt-4" />
+  <InlinePlayground
+    :input="classes"
+    :fixed="fixed"
+    :nested="nested"
+    :appended="appended"
+    :html="html"
+    :show-preview="showPreview"
+  />
+</template>
diff --git a/.vitepress/theme/components/molecules/DropdownLink.vue b/.vitepress/theme/components/molecules/DropdownLink.vue
new file mode 100644
index 00000000..306f79ea
--- /dev/null
+++ b/.vitepress/theme/components/molecules/DropdownLink.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+
+import type { PropType } from 'vue'
+import type { DefaultTheme } from '@/config'
+
+defineProps({
+  item: {
+    type: Object as PropType<DefaultTheme.NavItemWithChildren>,
+    required: true,
+  },
+})
+
+const route = useRoute()
+const open = ref(false)
+watch(
+  () => route.path,
+  () => {
+    open.value = false
+  },
+)
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div class="relative inline-flex items-center" @mouseenter="open = true" @mouseleave="open = false">
+    <button class="p-2 inline-flex items-center" :aria-label="item.ariaLabel" @click="toggle">
+      {{ item.text }}
+      <uil:angle-down class="ml-2 transition-transform duration-50 transform" :class="{'rotate-180': open}" />
+    </button>
+
+    <ul
+      v-if="open"
+      class="
+        absolute top-10 right-0 z-50
+        p-2 min-w-40
+        rounded-md border
+        bg-$windi-bg
+        border-gray-100 dark:border-dark-400
+      "
+    >
+      <li v-for="item in item.items" :key="item.text">
+        <div v-if="item.text === 'separator'" class="border-b border-$windi-bc my-1 mx-3" />
+        <NavLink v-else :item="item" :dropdown="true" />
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/EditLink.vue b/.vitepress/theme/components/molecules/EditLink.vue
new file mode 100644
index 00000000..3fd3338a
--- /dev/null
+++ b/.vitepress/theme/components/molecules/EditLink.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useEditLink } from '@/logics/editLink'
+
+const { url, text } = useEditLink()
+</script>
+
+<template>
+  <div>
+    <a
+      v-if="url"
+      class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary"
+      :href="url"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <carbon:pen class="inline-block mr-1.5 text-xs" />{{ text }}
+    </a>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/HomeNews.vue b/.vitepress/theme/components/molecules/HomeNews.vue
new file mode 100644
index 00000000..623a9701
--- /dev/null
+++ b/.vitepress/theme/components/molecules/HomeNews.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+
+</script>
+
+<template>
+  <div class="px-4">
+    <a
+      v-if="frontmatter.newsLink && frontmatter.newsTitle"
+      class="
+        bg-primary bg-opacity-10
+        inline-flex rounded
+        font-bold text-center text-primary
+        p-3 md:p-4 lg:px-8
+        text-sm lg:text-base"
+      :href="frontmatter.newsLink"
+    >
+      {{ frontmatter.newsTitle }}
+    </a>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/LastUpdated.vue b/.vitepress/theme/components/molecules/LastUpdated.vue
new file mode 100644
index 00000000..efa6904a
--- /dev/null
+++ b/.vitepress/theme/components/molecules/LastUpdated.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useData } from 'vitepress'
+
+const { page, site } = useData()
+
+const hasLastUpdated = computed(() => {
+  const lu = site.value.themeConfig.lastUpdated
+
+  return lu !== undefined && lu !== false
+})
+
+const prefix = computed(() => {
+  const p = site.value.themeConfig.lastUpdated
+  return p === true ? 'Last Updated' : p
+})
+
+const datetime = ref('')
+onMounted(() => {
+  // locale string might be different based on end user
+  // and will lead to potential hydration mismatch if calculated at build time
+  datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
+})
+</script>
+
+<template>
+  <p v-if="hasLastUpdated" class="inline-block">
+    <span class="inline-block font-medium">{{ prefix }}:</span>
+    <span class="inline-block ml-1.5 font-normal">{{ datetime }}</span>
+  </p>
+</template>
diff --git a/.vitepress/theme/components/molecules/NavLink.vue b/.vitepress/theme/components/molecules/NavLink.vue
new file mode 100644
index 00000000..45b7981d
--- /dev/null
+++ b/.vitepress/theme/components/molecules/NavLink.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import type { DefaultTheme } from '@/config'
+import { useNavLink } from '@/logics/navLink'
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithLink
+  dropdown?: boolean
+}>()
+const propsRefs = toRefs(props)
+const { props: linkProps } = useNavLink(propsRefs.item, props.dropdown)
+</script>
+
+<template>
+  <a
+    class="p-2 inline-flex items-center transition duration-50"
+    :class="{ 'whitespace-nowrap font-base hover:(text-primary bg-$windi-hover-bg) rounded w-full text-sm': dropdown }"
+    v-bind="linkProps"
+  >
+    {{ item.text }}
+  </a>
+</template>
diff --git a/.vitepress/theme/components/molecules/NextAndPrevLinks.vue b/.vitepress/theme/components/molecules/NextAndPrevLinks.vue
new file mode 100644
index 00000000..be8558e7
--- /dev/null
+++ b/.vitepress/theme/components/molecules/NextAndPrevLinks.vue
@@ -0,0 +1,35 @@
+<template>
+  <div v-if="hasLinks">
+    <div class="flex border-t border-$windi-bc pt-6 justify-between items-center">
+      <div class="max-w-1/2 flex items-center">
+        <a v-if="prev" class="nav-link" :href="withBase(prev.link)">
+          <carbon-arrow-left class="mr-3" />
+          <span class="text-sm md:text-base">{{ prev.text }}</span>
+        </a>
+      </div>
+      <div class="max-w-1/2 flex items-center">
+        <a v-if="next" class="nav-link text-right justify-end" :href="withBase(next.link)">
+          <span class="text-sm md:text-base">{{ next.text }}</span>
+          <carbon-arrow-right class="ml-3" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { useNextAndPrevLinks } from '@/logics/nextAndPrevLinks'
+
+const { hasLinks, prev, next } = useNextAndPrevLinks()
+</script>
+
+<style scoped lang="postcss">
+.nav-link {
+  @apply
+    inline-flex items-center px-1 md:px-3
+    font-semibold
+    text-cool-gray-500 dark:text-gray-400
+    hover:(text-gray-800 dark:text-white);
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/SingleColor.vue b/.vitepress/theme/components/molecules/SingleColor.vue
new file mode 100644
index 00000000..63a5e3b5
--- /dev/null
+++ b/.vitepress/theme/components/molecules/SingleColor.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import colors from 'windicss/colors'
+
+const props = defineProps({
+  color: {
+    default: '',
+  },
+})
+
+function camelize(str: string) {
+  const arr = str.split('-')
+  const capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item.toLowerCase())
+  // ^-- change here.
+  const capitalString = capital.join('')
+
+  return capitalString
+}
+
+const level = computed(() => props.color.split(/-/).slice(-1)[0])
+const color = computed(() => props.color.split(/-/).slice(1, -1).join('-'))
+// @ts-ignore
+const hex = computed<string>(() => colors[camelize(color.value)]?.[+level.value])
+</script>
+
+<template>
+  <div>
+    <div class="w-14 h-14 rounded" :class="props.color" />
+    <div class="font-bold text-sm">
+      {{ level }}
+    </div>
+    <div class="opacity-50 font-mono text-xs -mt-1">
+      {{ hex }}
+    </div>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/TableOfContent.vue b/.vitepress/theme/components/molecules/TableOfContent.vue
new file mode 100644
index 00000000..e7d5f775
--- /dev/null
+++ b/.vitepress/theme/components/molecules/TableOfContent.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+
+import { computed } from 'vue'
+import type { Header } from '@/types'
+import type { DefaultTheme } from '@/config'
+
+interface HeaderWithChildren extends Header {
+  children?: Header[]
+}
+
+const route = useRoute()
+
+const headers = computed(() => {
+  return route.data.headers ? resolveHeaders(route.data.headers) : null
+})
+
+function resolveHeaders(headers: Header[]): DefaultTheme.SideBarItem[] {
+  return mapHeaders(groupHeaders(headers))
+}
+
+function groupHeaders(headers: Header[]): HeaderWithChildren[] {
+  headers = headers.map(h => Object.assign({}, h))
+  let lastH2: HeaderWithChildren
+  headers.forEach((h) => {
+    if (h.level === 2)
+      lastH2 = h
+
+    else if (lastH2)
+      (lastH2.children || (lastH2.children = [])).push(h)
+  })
+  return headers.filter(h => h.level === 2)
+}
+
+function mapHeaders(headers: HeaderWithChildren[]): DefaultTheme.SideBarItem[] {
+  return headers.map(header => ({
+    text: header.title,
+    link: `#${header.slug}`,
+    children: header.children ? mapHeaders(header.children) : undefined,
+  }))
+}
+
+const hasHeaders = computed(() => headers.value && headers.value?.length > 0)
+
+</script>
+
+<template>
+  <ul v-if="hasHeaders" class="py-4 pl-4 lg:pt-10">
+    <li>
+      <SidebarLinkItem
+        :item="{
+          text: 'Table of Content',
+        }"
+        class="px-2"
+        :header="true"
+      />
+      <ul class="mb-2">
+        <li v-for="child in headers" :key="child.text">
+          <SidebarLinkItem :item="child" :table="true" />
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
diff --git a/.vitepress/theme/components/molecules/ToggleDark.vue b/.vitepress/theme/components/molecules/ToggleDark.vue
new file mode 100644
index 00000000..a1376b73
--- /dev/null
+++ b/.vitepress/theme/components/molecules/ToggleDark.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { isDark, toggleDark } from '@/logics/dark'
+</script>
+
+<template>
+  <IconButton @click="toggleDark()">
+    <bx:bx-moon v-show="isDark" />
+    <ion-ios-sunny v-show="!isDark" />
+  </IconButton>
+</template>
diff --git a/.vitepress/theme/components/molecules/ToggleSidebar.vue b/.vitepress/theme/components/molecules/ToggleSidebar.vue
new file mode 100644
index 00000000..bae9fdcb
--- /dev/null
+++ b/.vitepress/theme/components/molecules/ToggleSidebar.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// @ts-ignore
+import { openSideBar } from '@/logics/sideBar'
+</script>
+
+<template>
+  <IconButton @click="openSideBar = true">
+    <heroicons-outline:menu-alt-2 />
+  </IconButton>
+</template>
diff --git a/.vitepress/theme/components/molecules/TreeLink.vue b/.vitepress/theme/components/molecules/TreeLink.vue
new file mode 100644
index 00000000..3627d75f
--- /dev/null
+++ b/.vitepress/theme/components/molecules/TreeLink.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+
+import type { PropType } from 'vue'
+import type { DefaultTheme } from '@/config'
+
+defineProps({
+  item: {
+    type: Object as PropType<DefaultTheme.NavItemWithChildren>,
+    required: true,
+  },
+})
+
+const route = useRoute()
+const open = ref(false)
+watch(
+  () => route.path,
+  () => {
+    open.value = false
+  },
+)
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <button class="p-2 flex items-center font-medium" :aria-label="item.ariaLabel" @click="toggle">
+      <uil:angle-right class="mr-1 transform transition-transform" :class="{ 'rotate-90': open}" />
+      {{ item.text }}
+    </button>
+    <transition name="collapse">
+      <ul
+        v-if="open"
+        class="px-4"
+      >
+        <li v-for="item in item.items" :key="item.text">
+          <div v-if="item.text === 'separator'" class="border-b border-$windi-bc my-1 mx-3" />
+          <NavLink v-else :item="item" class="whitespace-nowrap font-base hover:bg-gray-100  dark:hover:bg-dark-300 rounded w-full text-sm" />
+        </li>
+      </ul>
+    </transition>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/play/PlayDownloadButton.vue b/.vitepress/theme/components/molecules/play/PlayDownloadButton.vue
new file mode 100644
index 00000000..620e4535
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlayDownloadButton.vue
@@ -0,0 +1,42 @@
+
+<script setup lang="ts">
+import { emitExport } from '@/logics/useShare'
+
+defineProps({
+  open: Boolean,
+})
+</script>
+
+<template>
+  <div class="relative hidden md:block" @click.stop="$emit('toggle')">
+    <IconButton title="Download component" alt="Download component">
+      <carbon:download />
+    </IconButton>
+    <div v-if="open" class="dropdown-model">
+      <span>Components</span>
+      <div class="flex space-x-2">
+        <IconButton class="!text-2xl" @click="emitExport('vue')">
+          <logos:vue />
+        </IconButton>
+        <IconButton class="!text-2xl" @click="emitExport('svelte')">
+          <logos:svelte-icon />
+        </IconButton>
+        <!-- TODO -->
+        <!-- <NavBarIcon @click="emitExport('react')">
+          <logos:react />
+        </NavBarIcon> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.dropdown-model {
+  @apply
+  grid gap-2 p-1.5 px-2
+  absolute top-11 -right-2
+  bg-white dark:bg-dark-700
+  text-sm font-bold
+  rounded-lg border border-$windi-bc;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/play/PlayLayoutSwitch.vue b/.vitepress/theme/components/molecules/play/PlayLayoutSwitch.vue
new file mode 100644
index 00000000..c2f9ee5e
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlayLayoutSwitch.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { layout } from '@/logics/playgroundLayout'
+
+defineProps({
+  open: Boolean,
+})
+</script>
+
+<template>
+  <div class="relative hidden md:block" @click.stop="$emit('toggle')">
+    <IconButton title="Switch layout" alt="Switch layout">
+      <carbon:open-panel-right />
+    </IconButton>
+    <div v-if="open" class="dropdown-model">
+      <IconButton v-if="layout !== 'left'" @click="layout = 'left'">
+        <carbon:open-panel-left />
+      </IconButton>
+      <IconButton v-if="layout !== 'bottom'" @click="layout = 'bottom'">
+        <carbon:open-panel-bottom />
+      </IconButton>
+      <IconButton v-if="layout !== 'right'" @click="layout = 'right'">
+        <carbon:open-panel-right />
+      </IconButton>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.dropdown-model {
+  @apply
+  grid gap-2 p-1.5
+  absolute top-11 -left-2
+  bg-white dark:bg-dark-700
+  rounded-lg border border-$windi-bc;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/play/PlayPreviewToolbar.vue b/.vitepress/theme/components/molecules/play/PlayPreviewToolbar.vue
new file mode 100644
index 00000000..75d34028
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlayPreviewToolbar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="absolute bottom-0 w-full">
+    <div class="bg-blue-gray-100 dark:bg-dark-700 m-2 rounded-md p-2 flex items-center justify-center">
+      <select id="devices" name="devices" class="bg-transparent appearance-none relative text-xs dark:text-gray-200 focus:outline-none">
+        <option value="ipad_pro">
+          iPad Pro
+        </option>
+      </select>
+      <svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+      <div class="flex items-center text-xs mx-4">
+        <input id="width" name="width" class="number-input" value="1366">
+        <span class="mx-1">×</span>
+        <input id="height" name="height" class="number-input" value="1024">
+      </div>
+      <select id="ratio" class="bg-transparent text-xs text-gray-800 dark:text-gray-100 appearance-none focus:outline-none">
+        <option value="50">
+          50%
+        </option>
+        <option value="75">
+          75%
+        </option>
+        <option value="100">
+          100%
+        </option>
+        <option value="125">
+          125%
+        </option>
+        <option value="150">
+          150%
+        </option>
+      </select>
+      <svg class="fill-current w-4 h-4 -ml-1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+      <button class="ml-3 focus:outline-none hover:text-gray-600">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current" version="1.1" viewBox="0 0 24 24"><path d="M7.5,21.5C4.25,19.94 1.91,16.76 1.55,13H0.05C0.56,19.16 5.71,24 12,24L12.66,23.97L8.85,20.16M14.83,21.19L2.81,9.17L9.17,2.81L21.19,14.83M10.23,1.75C9.64,1.16 8.69,1.16 8.11,1.75L1.75,8.11C1.16,8.7 1.16,9.65 1.75,10.23L13.77,22.25C14.36,22.84 15.31,22.84 15.89,22.25L22.25,15.89C22.84,15.3 22.84,14.35 22.25,13.77L10.23,1.75M16.5,2.5C19.75,4.07 22.09,7.24 22.45,11H23.95C23.44,4.84 18.29,0 12,0L11.34,0.03L15.15,3.84L16.5,2.5Z" /></svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.number-input {
+  @apply appearance-none bg-transparent w-12 text-center focus:outline-none border rounded border-$windi-bc;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/play/PlayShareButton.vue b/.vitepress/theme/components/molecules/play/PlayShareButton.vue
new file mode 100644
index 00000000..72383091
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlayShareButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTimeoutFn } from '@vueuse/core'
+import { emitShare } from '@/logics/useShare'
+
+const toggle = ref(false)
+
+const { start } = useTimeoutFn(() => toggle.value = false, 4000)
+
+function handleShare() {
+  emitShare()
+  toggle.value = true
+  start()
+}
+</script>
+
+<template>
+  <IconButton title="Copy link" alt="Copy link" @click="handleShare()">
+    <bx:bx-check-circle v-if="toggle" />
+    <bx:bx-clipboard v-else />
+  </IconButton>
+</template>
diff --git a/.vitepress/theme/components/molecules/play/PlayToolsDropdown.vue b/.vitepress/theme/components/molecules/play/PlayToolsDropdown.vue
new file mode 100644
index 00000000..af9941dc
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlayToolsDropdown.vue
@@ -0,0 +1,50 @@
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useToggle } from '@vueuse/core'
+// @ts-ignore
+import { layout } from '@/logics/playgroundLayout'
+
+const show = ref(false)
+
+const toggleShow = useToggle(show)
+const close = () => show.value = false
+onMounted(() => {
+  document.addEventListener('click', close)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', close)
+})
+</script>
+
+<template>
+  <div class="relative hidden md:block" @click.stop="toggleShow()">
+    <button class="focus:outline-none">
+      <uil:angle-down class="bg-blue-gray-100 hover:bg-blue-gray-200 rounded w-6 h-6 text-gray-700 dark:bg-dark-300 dark:text-gray-100 dark:hover:bg-dark-800" />
+    </button>
+    <div v-if="show" class="dropdown-model">
+      <span>Components</span>
+      <div class="flex space-x-2">
+        <IconButton>
+          <logos:vue />
+        </IconButton>
+        <IconButton>
+          <logos:react />
+        </IconButton>
+        <IconButton>
+          <logos:svelte-icon />
+        </IconButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.dropdown-model {
+  @apply
+  grid gap-2 p-1.5 px-2
+  absolute top-8 right-0
+  bg-white dark:bg-dark-700
+  rounded-lg border border-$windi-bc;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/play/PlaygroundActionButtons.vue b/.vitepress/theme/components/molecules/play/PlaygroundActionButtons.vue
new file mode 100644
index 00000000..5a8d657e
--- /dev/null
+++ b/.vitepress/theme/components/molecules/play/PlaygroundActionButtons.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const show = ref<'export' | 'layout' | null>(null)
+
+function handleToggle(e: Event, v: 'export' | 'layout') {
+  if (!show.value || show.value !== v)
+    show.value = v
+  else
+    show.value = null
+}
+const close = () => show.value = null
+onMounted(() => {
+  document.addEventListener('click', close)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', close)
+})
+</script>
+
+<template>
+  <div class="inline-flex space-x-2 mr-3">
+    <PlayShareButton />
+    <PlayDivide />
+    <PlayLayoutSwitch :open="show === 'layout'" @click="handleToggle($event, 'layout')" />
+    <PlayDivide />
+    <PlayDownloadButton :open="show === 'export'" class="!hidden !md:inline-flex" @click="handleToggle($event, 'export')" />
+  </div>
+</template>
diff --git a/.vitepress/theme/components/molecules/playground/SelectorBox.vue b/.vitepress/theme/components/molecules/playground/SelectorBox.vue
new file mode 100644
index 00000000..d70f12f0
--- /dev/null
+++ b/.vitepress/theme/components/molecules/playground/SelectorBox.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { triggerRef } from 'vue'
+import { useVModel } from '@vueuse/core'
+import type { PropType } from 'vue'
+
+const emit = defineEmits([])
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  normalize: {
+    default: false,
+  },
+  mode: {
+    default: 'all',
+  },
+})
+
+const directions = useVModel(props, 'modelValue', emit, { passive: true })
+
+function includes(str: string) {
+  return directions.value.includes(str)
+}
+
+function has(str: string) {
+  if (includes('ALL'))
+    return true
+  if (str.length === 2) {
+    return includes(str)
+      || includes(str.slice(0, 1))
+      || includes(str.slice(1, 2))
+  }
+  return includes(str)
+}
+
+function toggle(str: string) {
+  remove('ALL')
+
+  if (directions.value.includes(str)) {
+    remove(str)
+  } else {
+    expand()
+    if (has(str))
+      remove(str)
+    else
+      add(str)
+    normalize()
+    normalize()
+  }
+
+  triggerRef(directions)
+}
+
+function remove(...strs: string[]) {
+  for (const str of strs) {
+    const index = directions.value.indexOf(str)
+
+    if (index >= 0)
+      directions.value.splice(index, 1)
+  }
+}
+
+function add(...strs: string[]) {
+  for (const str of strs) {
+    const index = directions.value.indexOf(str)
+
+    if (index < 0)
+      directions.value.push(str)
+  }
+}
+
+const map: readonly [string, readonly string[]][] = [
+  ['r', ['tr', 'br']],
+  ['t', ['tr', 'tl']],
+  ['b', ['br', 'bl']],
+  ['l', ['tl', 'bl']],
+  ['ALL', ['r', 't', 'b', 'l']],
+]
+
+function normalize() {
+  const c = Array.from(directions.value)
+
+  for (const [n, r] of map) {
+    if (c.includes(n) || r.every(i => c.includes(i))) {
+      remove(...r)
+      add(n)
+    }
+  }
+}
+
+function expand() {
+  let c = Array.from(directions.value)
+
+  if (c.includes('ALL'))
+    c = ['r', 't', 'b', 'l']
+
+  c.forEach((i) => {
+    for (const [n, r] of map) {
+      if (i === n) {
+        remove(i)
+        add(...r)
+        break
+      }
+    }
+  })
+}
+
+function toggleAll() {
+  const hasAll = directions.value.includes('ALL')
+
+  directions.value.splice(0, directions.value.length)
+  if (!hasAll)
+    directions.value.push('ALL')
+
+  triggerRef(directions)
+}
+</script>
+
+<template>
+  <div class="relative w-24 h-24 ring-4 ring-gray-400 ring-opacity-10 ring-inset rounded-xl">
+    <!-- Corners -->
+    <template
+      v-if="['all', 'corners'].includes(mode)"
+    >
+      <div
+        class="border-t-4 border-l-4 item rounded-tl-xl"
+        :class="{ active: includes('tl'), has: has('tl') }"
+        @click="toggle('tl')"
+      />
+      <div
+        class="right-0 border-t-4 border-r-4 item rounded-tr-xl"
+        :class="{ active: includes('tr'), has: has('tr') }"
+        @click="toggle('tr')"
+      />
+      <div
+        class="bottom-0 border-b-4 border-l-4 item rounded-bl-xl"
+        :class="{ active: includes('bl'), has: has('bl') }"
+        @click="toggle('bl')"
+      />
+      <div
+        class="bottom-0 right-0 border-b-4 border-r-4 item rounded-br-xl"
+        :class="{ active: includes('br'), has: has('br') }"
+        @click="toggle('br')"
+      />
+    </template>
+    <!-- Edges -->
+    <template
+      v-if="['all', 'edges'].includes(mode)"
+    >
+      <div
+        class="transform -translate-x-1/2 border-t-4 item left-1/2"
+        :class="{ active: includes('t'), has: has('t') }"
+        @click="toggle('t')"
+      />
+      <div
+        class="bottom-0 transform -translate-x-1/2 border-b-4 item left-1/2"
+        :class="{ active: includes('b'), has: has('b') }"
+        @click="toggle('b')"
+      />
+      <div
+        class="transform -translate-y-1/2 border-l-4 item top-1/2"
+        :class="{ active: includes('l'), has: has('l') }"
+        @click="toggle('l')"
+      />
+      <div
+        class="right-0 transform -translate-y-1/2 border-r-4 item top-1/2"
+        :class="{ active: includes('r'), has: has('r') }"
+        @click="toggle('r')"
+      />
+    </template>
+    <!-- all -->
+    <div
+      class="absolute w-6 h-6 transform -translate-x-1/2 -translate-y-1/2 border-2 border-gray-400 border-opacity-25 rounded  button left-1/2 top-1/2"
+      @click="toggleAll()"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.button {
+  @apply hover:(bg-gray-400 bg-opacity-20) cursor-pointer;
+}
+.item {
+  @apply absolute w-6.2 h-6.2
+    border-gray-300 border-opacity-40
+    hover:(bg-gray-400 bg-opacity-20) cursor-pointer
+    transition-all duration-200;
+  ;
+}
+.item.active {
+  @apply border-light-blue-500 border-opacity-100;
+}
+.item.has:not(.active) {
+  @apply border-light-blue-400 border-opacity-70;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/playground/SelectorVariants.vue b/.vitepress/theme/components/molecules/playground/SelectorVariants.vue
new file mode 100644
index 00000000..95744e09
--- /dev/null
+++ b/.vitepress/theme/components/molecules/playground/SelectorVariants.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref, watch, toRef } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+  },
+  variants: {
+    default: () => ['sm', '', 'lg', 'xl', '2xl', '3xl'],
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const variant = ref(props.modelValue)
+const variants = toRef(props, 'variants')
+
+function set(str: string) {
+  variant.value = str
+}
+function has(str: string) {
+  return variant.value === str
+}
+
+watch(variant, v => emit('update:modelValue', v))
+watch(() => props.modelValue, v => variant.value = v)
+</script>
+
+<template>
+  <div class="selector flex flex-wrap gap-2">
+    <div
+      v-for="s of variants"
+      :key="s"
+      class="item"
+      :class="{ active: has(s), default: !s }"
+      @click="set(s)"
+    >
+      {{ s || 'default' }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.selector {
+  height: max-content;
+}
+.item {
+  height: max-content;
+  @apply px-2 py-0.5 inline-block rounded font-mono
+         border border-$windi-bc border-opacity-50 dark:border-opacity-50
+         text-sm cursor-pointer select-none;
+}
+.item.active {
+  @apply border-light-blue-500 text-light-blue-500;
+}
+</style>
diff --git a/.vitepress/theme/components/molecules/sidebar/SidebarBackground.vue b/.vitepress/theme/components/molecules/sidebar/SidebarBackground.vue
new file mode 100644
index 00000000..a3e3b2bf
--- /dev/null
+++ b/.vitepress/theme/components/molecules/sidebar/SidebarBackground.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { openSideBar } from '@/logics/sideBar'
+
+</script>
+
+<template>
+  <transition name="fade">
+    <div
+      v-if="openSideBar"
+      class="
+        fixed top-0 left-0 z-0
+        w-full h-full
+        bg-cool-gray-200
+        pointer-events-auto
+        backdrop-filter backdrop-blur-sm
+        dark:bg-dark-800 dark:bg-opacity-80
+        bg-opacity-50
+        lg:hidden
+      "
+      @click="openSideBar = false"
+    />
+  </transition>
+</template>
diff --git a/.vitepress/theme/components/molecules/sidebar/SidebarLink.vue b/.vitepress/theme/components/molecules/sidebar/SidebarLink.vue
new file mode 100644
index 00000000..5f79cf09
--- /dev/null
+++ b/.vitepress/theme/components/molecules/sidebar/SidebarLink.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { DefaultTheme } from '@/config'
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<DefaultTheme.SideBarItem>,
+    required: true,
+  },
+})
+
+const children = (props.item as DefaultTheme.SideBarGroup).children
+
+</script>
+
+<template>
+  <li>
+    <SidebarLinkItem :item="item" :header="true" />
+    <ul v-if="children" class="mb-2">
+      <li v-for="child in children" :key="child.text">
+        <SidebarLinkItem :item="child" />
+      </li>
+    </ul>
+  </li>
+</template>
diff --git a/.vitepress/theme/components/molecules/sidebar/SidebarLinkItem.vue b/.vitepress/theme/components/molecules/sidebar/SidebarLinkItem.vue
new file mode 100644
index 00000000..e322f409
--- /dev/null
+++ b/.vitepress/theme/components/molecules/sidebar/SidebarLinkItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useData } from 'vitepress'
+
+import type { PropType } from 'vue'
+import type { DefaultTheme } from '@/config'
+import { joinUrl, isActive } from '@/utils'
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<Partial<DefaultTheme.SideBarItem>>,
+    required: true,
+  },
+  header: {
+    type: Boolean,
+    default: false,
+  },
+  table: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const route = useRoute()
+const { site } = useData()
+
+function resolveLink(base: string, path?: string): string | undefined {
+  if (path === undefined)
+    return path
+
+  // keep relative hash to the same page
+  if (path.startsWith('#'))
+    return path
+
+  return joinUrl(base, path)
+}
+
+const active = computed(() => isActive(route, props.item.link))
+const link = resolveLink(site.value.base, props.item.link)
+
+const style = computed(() => ([
+  'transition duration-100',
+  props.header
+    ? 'font-bold py-2'
+    : props.table
+      ? `inline-flex
+      items-center
+      justify-between py-2 px-3 w-full rounded-md
+      text-sm text-gray-700
+      dark:text-gray-400
+      hover:(text-primary dark:text-primary bg-$windi-hover-bg)`
+      : `relative
+      inline-flex
+      items-center
+      justify-between
+      pl-3 py-1
+      border-l border-gray-100
+      dark:border-dark-400
+      text-sm text-gray-700
+      dark:text-gray-400
+      hover:(text-primary dark:text-primary)`,
+  {
+    '!border-primary dark:border-primary !text-primary dark:text-primary': active.value,
+  },
+]))
+
+</script>
+
+<template>
+  <a v-if="link" :href="link" :class="style">
+    {{ item.text }}
+  </a>
+  <h5 v-else :class="style">
+    {{ item.text }}
+  </h5>
+</template>
diff --git a/.vitepress/theme/components/molecules/sidebar/SidebarNav.vue b/.vitepress/theme/components/molecules/sidebar/SidebarNav.vue
new file mode 100644
index 00000000..dfbb0c79
--- /dev/null
+++ b/.vitepress/theme/components/molecules/sidebar/SidebarNav.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSideBar } from '@/logics/sideBar'
+
+const items = useSideBar()
+const hasItem = computed(() => items.value.length > 0)
+</script>
+
+<template>
+  <nav>
+    <ul v-if="hasItem" class="py-4 px-4 lg:pt-10">
+      <template v-for="item of items" :key="item.text">
+        <SidebarLink :item="item" :max-depth="2" />
+      </template>
+    </ul>
+  </nav>
+</template>
diff --git a/.vitepress/theme/components/organisms/AlgoliaSearchBox.vue b/.vitepress/theme/components/organisms/AlgoliaSearchBox.vue
new file mode 100644
index 00000000..3914e85d
--- /dev/null
+++ b/.vitepress/theme/components/organisms/AlgoliaSearchBox.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { DefaultTheme } from '@/config'
+import { useSearchBox } from '@/logics/search'
+
+import '@docsearch/css/dist/style.css'
+
+const props = defineProps<{
+  options: DefaultTheme.AlgoliaSearchOptions
+  multilang?: boolean
+  id?: string
+}>()
+
+const { searchId } = useSearchBox(props)
+</script>
+
+<template>
+  <div :id="searchId" class="algolia-search-box" />
+</template>
+
+<style lang="postcss">
+.algolia-search-box {
+  @apply pt-1px;
+}
+
+:root {
+  --docsearch-container-background: rgba(173,181,189,0.7);
+
+  --docsearch-modal-background: theme('colors.white');
+  --docsearch-modal-shadow: none;
+
+  --docsearch-footer-background: transparent;
+  --docsearch-footer-shadow: rgba(125,125,125,0.1);
+
+  --docsearch-hit-color: theme('colors.cool-gray.800');
+  --docsearch-hit-background: rgba(125,125,125,0.1);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-height: 3.5rem;
+
+  --docsearch-primary-color: theme('colors.primary.600');
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+
+  /* --docsearch-searchbox-background: theme('colors.cool-gray.100');
+  --docsearch-searchbox-focus-background: theme('colors.cool-gray.200'); */
+  --docsearch-searchbox-background: transparent;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-searchbox-shadow: none;
+  --docsearch-searchbox-height: 3.5rem;
+
+  --docsearch-text-color: theme('colors.cool-gray.600');
+  --docsearch-muted-color: theme('colors.cool-gray.400');
+
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+}
+
+html.dark {
+  --docsearch-container-background: rgba(12,12,12,0.9);
+
+  --docsearch-modal-background: theme('colors.dark.800');
+  --docsearch-modal-shadow: none;
+
+  --docsearch-hit-color: theme('colors.cool-gray.200');
+
+  /* --docsearch-searchbox-background: theme('colors.dark.400');
+  --docsearch-searchbox-focus-background: theme('colors.dark.300'); */
+  --docsearch-searchbox-background: transparent;
+  --docsearch-searchbox-focus-background: transparent;
+
+  --docsearch-text-color: theme('colors.cool-gray.200');
+  --docsearch-muted-color: theme('colors.cool-gray.400');
+
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+}
+
+.DocSearch-Button {
+  @apply rounded-lg ml-0 h-auto px-3 py-2;
+}
+.DocSearch-Button-Key {
+  @apply static w-5 h-5 pb-0 border border-$docsearch-muted-color m-0 top-0;
+}
+.DocSearch-Button-Placeholder + .DocSearch-Button-Key {
+  @apply mr-2;
+}
+.DocSearch-Button-Placeholder {
+  @apply pl-3 font-normal pr-0 xl:pr-12;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Key {
+  @apply text-$docsearch-text-color border-$docsearch-text-color;
+}
+.DocSearch-Form, .DocSearch-Hit a {
+  @apply rounded-lg;
+}
+.DocSearch-Form {
+  @apply bg-gray-100 dark:bg-dark-500;
+}
+.DocSearch-Modal {
+  @apply rounded-lg;
+}
+.DocSearch-Footer {
+  @apply border-t dark:border-dark-300;
+}
+.DocSearch-Search-Icon {
+  @apply h-20px w-20px stroke-2;
+}
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  @apply text-$docsearch-text-color;
+}
+.DocSearch-Input {
+  padding-left: 1rem;
+  font-size: 1em;
+}
+.DocSearch-StartScreen {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+@screen -lg {
+  .DocSearch-Button-Key,
+  .DocSearch-Button-KeySeparator,
+  .DocSearch-Button-Placeholder {
+    display:none
+  }
+}
+
+@screen -xl {
+  .DocSearch-Button-Key {
+    display:none
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/organisms/DropdownMenu.vue b/.vitepress/theme/components/organisms/DropdownMenu.vue
new file mode 100644
index 00000000..1033f638
--- /dev/null
+++ b/.vitepress/theme/components/organisms/DropdownMenu.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { useRepo } from '@/logics/repo'
+const { theme } = useData()
+const repo = useRepo()
+const show = computed(() => theme.value.value || repo.value)
+</script>
+
+<template>
+  <nav v-if="show" class="inline-flex space-x-2 px-3">
+    <template v-if="theme.nav">
+      <div v-for="item in theme.nav" :key="item.text" class="item">
+        <DropdownLink v-if="item.items" :item="item" />
+        <NavLink v-else :item="item" />
+      </div>
+    </template>
+  </nav>
+</template>
diff --git a/.vitepress/theme/components/organisms/HomeFooter.vue b/.vitepress/theme/components/organisms/HomeFooter.vue
new file mode 100644
index 00000000..94021600
--- /dev/null
+++ b/.vitepress/theme/components/organisms/HomeFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+const { frontmatter } = useData()
+
+</script>
+
+<template>
+  <footer v-if="frontmatter.footer" class="mx-auto container !max-w-screen-2xl px-6">
+    <div class="px-6 pb-9 sm:(px-6 pb-18)">
+      <p class="text-center text-sm text-gray-400">
+        {{ frontmatter.footer }}
+      </p>
+    </div>
+  </footer>
+</template>
diff --git a/.vitepress/theme/components/organisms/HomeHero.vue b/.vitepress/theme/components/organisms/HomeHero.vue
new file mode 100644
index 00000000..7e70a3bd
--- /dev/null
+++ b/.vitepress/theme/components/organisms/HomeHero.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+const { site, frontmatter } = useData()
+
+const showHero = computed(() => {
+  const {
+    heroImage,
+    heroText,
+    tagline,
+    actionLink,
+    actionText,
+  } = frontmatter.value
+  return heroImage || heroText || tagline || (actionLink && actionText)
+})
+const heroText = computed(() => frontmatter.value.heroText || site.value.title)
+</script>
+
+<template>
+  <header v-if="showHero" class="flex items-center justify-center h-$full-header md:px-6">
+    <div>
+      <div class="space-y-2 mb-12 md:mb-14">
+        <figure v-if="frontmatter.heroImage">
+          <img
+            class="mx-auto max-w-full w-auto max-h-120px block select-none"
+            :src="withBase(frontmatter.heroImage)"
+            :alt="frontmatter.heroAlt"
+          >
+        </figure>
+
+        <div class="text-center">
+          <h1 v-if="heroText" id="main-title" class="text-3xl leading-10 font-semibold sm:(text-5xl leading-16)">
+            {{ heroText }}
+          </h1>
+          <p v-if="frontmatter.tagline || site.description" class="m-0 mt-1 text-lg opacity-75 leading-6 px-4 sm:(text-xl)">
+            {{ frontmatter.tagline || site.description }}
+          </p>
+
+          <div class="flex space-x-4 mt-8 justify-center">
+            <AppButton v-if="frontmatter.actionLink && frontmatter.actionText" size="lg" :href="frontmatter.actionLink">
+              {{ frontmatter.actionText }}
+            </AppButton>
+            <AppButton v-if="frontmatter.altActionLink && frontmatter.altActionText" size="lg" :href="frontmatter.altActionLink" outline>
+              {{ frontmatter.altActionText }}
+            </AppButton>
+          </div>
+        </div>
+      </div>
+      <HomeNews />
+    </div>
+  </header>
+</template>
diff --git a/.vitepress/theme/components/organisms/PageFooter.vue b/.vitepress/theme/components/organisms/PageFooter.vue
new file mode 100644
index 00000000..5fd554a5
--- /dev/null
+++ b/.vitepress/theme/components/organisms/PageFooter.vue
@@ -0,0 +1,9 @@
+<template>
+  <footer>
+    <div class="flex justify-between items-center py-8">
+      <EditLink />
+      <LastUpdated />
+    </div>
+    <NextAndPrevLinks />
+  </footer>
+</template>
diff --git a/.vitepress/theme/components/organisms/SidebarHeader.vue b/.vitepress/theme/components/organisms/SidebarHeader.vue
new file mode 100644
index 00000000..1912c86a
--- /dev/null
+++ b/.vitepress/theme/components/organisms/SidebarHeader.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRepo } from '@/logics/repo'
+
+defineEmits(['close'])
+
+const repo = useRepo()
+
+</script>
+
+<template>
+  <div class="h-$header-height bg-light-700 dark:bg-dark-400 flex lg:hidden items-center justify-between px-2">
+    <IconButton @click="$emit('close')">
+      <carbon:arrow-left />
+    </IconButton>
+    <div class="flex items-center">
+      <IconButton :href="repo?.link">
+        <carbon-logo-github />
+      </IconButton>
+      <ToggleDark />
+    </div>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/organisms/TreeMenu.vue b/.vitepress/theme/components/organisms/TreeMenu.vue
new file mode 100644
index 00000000..25dd1864
--- /dev/null
+++ b/.vitepress/theme/components/organisms/TreeMenu.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { useRepo } from '@/logics/repo'
+const { theme } = useData()
+const repo = useRepo()
+const show = computed(() => theme.value.value || repo.value)
+</script>
+
+<template>
+  <nav v-if="show" class="flex lg:hidden flex-col py-3">
+    <template v-if="theme.nav">
+      <div v-for="item in theme.nav" :key="item.text">
+        <TreeLink v-if="item.items" :item="item" />
+        <NavLink v-else :item="item" class="pl-8" />
+      </div>
+    </template>
+  </nav>
+</template>
diff --git a/.vitepress/theme/components/organisms/play/PlayPreviewBlock.vue b/.vitepress/theme/components/organisms/play/PlayPreviewBlock.vue
new file mode 100644
index 00000000..5aab559f
--- /dev/null
+++ b/.vitepress/theme/components/organisms/play/PlayPreviewBlock.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="block-bg overflow-hidden relative">
+    <div class="block-title">
+      <div class="w-full flex justify-between items-center">
+        <span>Preview</span>
+        <!-- <PlayToolsDropdown /> -->
+      </div>
+    </div>
+    <div class="absolute inset-0 pt-12 p-4 h-full">
+      <slot />
+    </div>
+    <!-- <PlayPreviewToolbar /> -->
+  </div>
+</template>
diff --git a/.vitepress/theme/components/organisms/play/PlayStyleBlock.vue b/.vitepress/theme/components/organisms/play/PlayStyleBlock.vue
new file mode 100644
index 00000000..e08eb8c4
--- /dev/null
+++ b/.vitepress/theme/components/organisms/play/PlayStyleBlock.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Editor } from '@windicss/shared-components'
+import type { PropType } from 'vue'
+import type Processor from 'windicss'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  processor: {
+    type: Object as PropType<Processor>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const styleCode = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v),
+})
+</script>
+
+<template>
+  <div class="block-bg relative">
+    <div class="block-code">
+      <ClientOnly>
+        <Editor v-model="styleCode" class="h-full w-full" language="css" :processor="processor" />
+      </ClientOnly>
+    </div>
+    <div class="block-title">
+      <div class="flex w-full justify-between items-center">
+        <span>Style</span>
+        <!-- <PlayToolsDropdown /> -->
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/organisms/play/PlayTemplateBlock.vue b/.vitepress/theme/components/organisms/play/PlayTemplateBlock.vue
new file mode 100644
index 00000000..b85f300f
--- /dev/null
+++ b/.vitepress/theme/components/organisms/play/PlayTemplateBlock.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Editor } from '@windicss/shared-components'
+import type { PropType } from 'vue'
+import type Processor from 'windicss'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  processor: {
+    type: Object as PropType<Processor>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const htmlCode = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v),
+})
+</script>
+
+<template>
+  <div class="block-bg relative">
+    <div class="block-code">
+      <ClientOnly>
+        <Editor v-model="htmlCode" class="h-full w-full" language="html" :processor="processor" />
+      </ClientOnly>
+    </div>
+    <div class="block-title">
+      <div class="flex w-full justify-between items-center">
+        <span>Template</span>
+        <!-- <PlayToolsDropdown /> -->
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/templates/TheHeader.vue b/.vitepress/theme/components/templates/TheHeader.vue
new file mode 100644
index 00000000..77b59824
--- /dev/null
+++ b/.vitepress/theme/components/templates/TheHeader.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useRepo } from '@/logics/repo'
+
+const { theme } = useData()
+const repo = useRepo()
+</script>
+
+<template>
+  <header class="d-header">
+    <div class="flex flex-none h-full container !max-w-screen-2xl mx-auto px-2 md:px-6">
+      <div class="flex items-center lg:hidden">
+        <ToggleSidebar />
+      </div>
+      <div class="flex items-center flex-1 lg:flex-none">
+        <AppLogo />
+      </div>
+      <div class="flex items-center order-last ml-2 lg:(order-none flex-1 ml-4) xl:ml-10">
+        <AlgoliaSearchBox :options="theme.algolia" />
+      </div>
+      <div class="hidden lg:flex items-center flex-1">
+        <DropdownMenu />
+      </div>
+      <div class="flex items-center lg:space-x-3 lg:pl-3 xl:pl-6">
+        <IconButton class="hidden lg:inline-flex" :href="repo?.link">
+          <carbon-logo-github />
+        </IconButton>
+        <ToggleDark />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="postcss">
+.d-header {
+  @apply
+    fixed top-0 inset-x-0 z-50
+    bg-$windi-bg
+    flex items-center
+    border-b border-$windi-bc;
+  height: var(--header-height);
+}
+</style>
diff --git a/.vitepress/theme/components/templates/TheHome.vue b/.vitepress/theme/components/templates/TheHome.vue
new file mode 100644
index 00000000..4dd05d14
--- /dev/null
+++ b/.vitepress/theme/components/templates/TheHome.vue
@@ -0,0 +1,22 @@
+<template>
+  <TheHeader />
+  <AppLayout class="content">
+    <TheSidebar class="lg:hidden" />
+    <ContentLayout class="!pt-0">
+      <HomeHero />
+      <div class="prose min-w-0">
+        <Content />
+      </div>
+    </ContentLayout>
+  </AppLayout>
+  <HomeFooter />
+</template>
+
+<style scoped lang="postcss">
+.content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 12px;
+}
+</style>
diff --git a/.vitepress/theme/components/templates/TheLayout.vue b/.vitepress/theme/components/templates/TheLayout.vue
new file mode 100644
index 00000000..5ac4f390
--- /dev/null
+++ b/.vitepress/theme/components/templates/TheLayout.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import TheHome from './TheHome.vue'
+import ThePage from './ThePage.vue'
+
+const { frontmatter } = useData()
+
+const ThePlay = defineAsyncComponent(async() => await import('./ThePlay.vue'))
+
+const page = computed(() => {
+  if (frontmatter.value.home)
+    return TheHome
+  else if (frontmatter.value.playground)
+    return ThePlay
+  else
+    return ThePage
+})
+
+onMounted(async() => {
+  // @ts-expect-error
+  await import('@/web-components/PreviewBox.ts')
+})
+
+</script>
+
+<template>
+  <div class="relative antialiased">
+    <keep-alive>
+      <component :is="page" />
+    </keep-alive>
+  </div>
+</template>
diff --git a/.vitepress/theme/components/templates/ThePage.vue b/.vitepress/theme/components/templates/ThePage.vue
new file mode 100644
index 00000000..369ffa86
--- /dev/null
+++ b/.vitepress/theme/components/templates/ThePage.vue
@@ -0,0 +1,29 @@
+<template>
+  <TheHeader />
+  <AppLayout class="content">
+    <TheSidebar />
+    <ContentLayout>
+      <HomeHero />
+      <div class="prose min-w-0">
+        <Content />
+      </div>
+      <PageFooter />
+    </ContentLayout>
+    <TheRightSidebar />
+  </AppLayout>
+</template>
+
+<style scoped lang="postcss">
+.content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 12px;
+}
+
+@screen lg {
+  .content {
+    grid-template-columns: 250px 1fr 250px;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/templates/ThePlay.vue b/.vitepress/theme/components/templates/ThePlay.vue
new file mode 100644
index 00000000..5ff7477e
--- /dev/null
+++ b/.vitepress/theme/components/templates/ThePlay.vue
@@ -0,0 +1,7 @@
+<template>
+  <ThePlayHeader />
+  <div class="pt-$header-height">
+    <Playground />
+  </div>
+  <HomeFooter />
+</template>
diff --git a/.vitepress/theme/components/templates/ThePlayHeader.vue b/.vitepress/theme/components/templates/ThePlayHeader.vue
new file mode 100644
index 00000000..c24a0ed0
--- /dev/null
+++ b/.vitepress/theme/components/templates/ThePlayHeader.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useRepo } from '@/logics/repo'
+const repo = useRepo()
+</script>
+
+<template>
+  <header class="d-header">
+    <div class="flex flex-none h-full w-full px-3 md:px-6">
+      <div class="flex items-center flex-1">
+        <AppLogo />
+        <span class="hidden md:block text-sm ml-2 mt-1 text-cool-gray-400 dark:text-cool-gray-500">
+          play v1.0.0
+        </span>
+      </div>
+      <div class="flex items-center md:space-x-3">
+        <PlaygroundActionButtons />
+        <IconButton class="hidden lg:inline-flex" :href="repo?.link">
+          <carbon-logo-github />
+        </IconButton>
+        <ToggleDark />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="postcss">
+.d-header {
+  @apply
+    fixed top-0 inset-x-0 z-50
+    bg-light-100 dark:bg-dark-800
+    flex items-center
+    border-b border-$windi-bc;
+  height: var(--header-height);
+}
+</style>
diff --git a/.vitepress/theme/components/templates/TheRightSidebar.vue b/.vitepress/theme/components/templates/TheRightSidebar.vue
new file mode 100644
index 00000000..6666abd4
--- /dev/null
+++ b/.vitepress/theme/components/templates/TheRightSidebar.vue
@@ -0,0 +1,7 @@
+<template>
+  <aside class="hidden lg:block">
+    <div class="sticky top-$header-height h-$full-header overflow-auto">
+      <TableOfContent />
+    </div>
+  </aside>
+</template>
diff --git a/.vitepress/theme/components/templates/TheSidebar.vue b/.vitepress/theme/components/templates/TheSidebar.vue
new file mode 100644
index 00000000..b7c0321a
--- /dev/null
+++ b/.vitepress/theme/components/templates/TheSidebar.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRoute } from 'vitepress'
+import { openSideBar } from '@/logics/sideBar'
+
+const route = useRoute()
+
+watch(() => route.path, () => openSideBar.value = false)
+
+watch(openSideBar, (v) => {
+  v
+    ? document.documentElement.classList.add('overflow-hidden')
+    : document.documentElement.classList.remove('overflow-hidden')
+})
+
+</script>
+
+<template>
+  <aside class="fixed z-50 lg:z-0 lg:static">
+    <div class="h-full overflow-auto pointer-events-none lg:overflow-visible">
+      <SidebarBackground />
+      <div
+        class="
+          fixed top-0 left-0
+          w-auto h-full
+          overflow-auto pointer-events-auto
+          transform -translate-x-full lg:transform-none transition-transform duration-200 ease-linear
+          min-w-62
+          lg:(h-$full-header sticky top-$header-height)
+        "
+        :class="{ '-translate-x-0': openSideBar }"
+      >
+        <div
+          class="w-auto h-full overflow-auto bg-$windi-bg lg:bg-transparent"
+        >
+          <SidebarHeader @close="openSideBar = false" />
+          <div class="sticky top-$header-height h-$full-header overflow-auto">
+            <TreeMenu />
+            <SidebarNav />
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/.vitepress/theme/config.ts b/.vitepress/theme/config.ts
new file mode 100644
index 00000000..1468626f
--- /dev/null
+++ b/.vitepress/theme/config.ts
@@ -0,0 +1,148 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable-next-line @typescript-eslint/no-namespace */
+export namespace DefaultTheme {
+  export interface Config {
+    logo?: string
+    nav?: NavItem[] | false
+    sidebar?: SideBarConfig | MultiSideBarConfig
+
+    /**
+     * GitHub repository following the format <user>/<project>.
+     *
+     * @example `"vuejs/vue-next"`
+     */
+    repo?: string
+
+    /**
+     * Customize the header label. Defaults to GitHub/Gitlab/Bitbucket
+     * depending on the provided repo.
+     *
+     * @example `"Contribute!"`
+     */
+    repoLabel?: string
+
+    /**
+     * If your docs are in a different repository from your main project.
+     *
+     * @example `"vuejs/docs-next"`
+     */
+    docsRepo?: string
+
+    /**
+     * If your docs are not at the root of the repo.
+     *
+     * @example `"docs"`
+     */
+    docsDir?: string
+
+    /**
+     * If your docs are in a different branch. Defaults to `master`.
+     *
+     * @example `"next"`
+     */
+    docsBranch?: string
+
+    /**
+     * Enable links to edit pages at the bottom of the page.
+     */
+    editLinks?: boolean
+
+    /**
+     * Custom text for edit link. Defaults to "Edit this page".
+     */
+    editLinkText?: string
+
+    /**
+     * Show last updated time at the bottom of the page. Defaults to `false`.
+     * If given a string, it will be displayed as a prefix (default value:
+     * "Last Updated").
+     */
+    lastUpdated?: string | boolean
+
+    prevLinks?: boolean
+    nextLinks?: boolean
+
+    locales?: Record<string, LocaleConfig & Omit<Config, 'locales'>>
+
+    algolia?: AlgoliaSearchOptions
+
+    carbonAds?: {
+      carbon: string
+      custom?: string
+      placement: string
+    }
+  }
+
+  // navbar --------------------------------------------------------------------
+
+  export type NavItem = NavItemWithLink | NavItemWithChildren
+
+  export interface NavItemBase {
+    text: string
+    target?: string
+    rel?: string
+    ariaLabel?: string
+    activeMatch?: string
+  }
+
+  export interface NavItemWithLink extends NavItemBase {
+    link: string
+  }
+
+  export interface NavItemWithChildren extends NavItemBase {
+    items: NavItemWithLink[]
+  }
+
+  // sidebar -------------------------------------------------------------------
+
+  export type SideBarConfig = SideBarItem[] | 'auto' | false
+
+  export interface MultiSideBarConfig {
+    [path: string]: SideBarConfig
+  }
+
+  export type SideBarItem = SideBarLink | SideBarGroup
+
+  export interface SideBarLink {
+    text: string
+    link: string
+  }
+
+  export interface SideBarGroup {
+    text: string
+    link?: string
+
+    /**
+     * @default false
+     */
+    collapsable?: boolean
+
+    children: SideBarItem[]
+  }
+
+  // algolia  ------------------------------------------------------------------
+  // partially copied from @docsearch/react/dist/esm/DocSearch.d.ts
+  export interface AlgoliaSearchOptions {
+    appId?: string
+    apiKey: string
+    indexName: string
+    placeholder?: string
+    searchParameters?: any
+    disableUserPersonalization?: boolean
+    initialQuery?: string
+  }
+
+  // locales -------------------------------------------------------------------
+
+  export interface LocaleConfig {
+    /**
+     * Text for the language dropdown.
+     */
+    selectText?: string
+
+    /**
+     * Label for this locale in the language dropdown.
+     */
+    label?: string
+  }
+}
diff --git a/.vitepress/theme/data/colors.ts b/.vitepress/theme/data/colors.ts
new file mode 100644
index 00000000..197f0853
--- /dev/null
+++ b/.vitepress/theme/data/colors.ts
@@ -0,0 +1,327 @@
+// @windicss-safelist
+export const colors = [
+  'bg-gray-50',
+  'bg-gray-100',
+  'bg-gray-200',
+  'bg-gray-300',
+  'bg-gray-400',
+  'bg-gray-500',
+  'bg-gray-600',
+  'bg-gray-700',
+  'bg-gray-800',
+  'bg-gray-900',
+  'bg-red-50',
+  'bg-red-100',
+  'bg-red-200',
+  'bg-red-300',
+  'bg-red-400',
+  'bg-red-500',
+  'bg-red-600',
+  'bg-red-700',
+  'bg-red-800',
+  'bg-red-900',
+  'bg-yellow-50',
+  'bg-yellow-100',
+  'bg-yellow-200',
+  'bg-yellow-300',
+  'bg-yellow-400',
+  'bg-yellow-500',
+  'bg-yellow-600',
+  'bg-yellow-700',
+  'bg-yellow-800',
+  'bg-yellow-900',
+  'bg-green-50',
+  'bg-green-100',
+  'bg-green-200',
+  'bg-green-300',
+  'bg-green-400',
+  'bg-green-500',
+  'bg-green-600',
+  'bg-green-700',
+  'bg-green-800',
+  'bg-green-900',
+  'bg-blue-50',
+  'bg-blue-100',
+  'bg-blue-200',
+  'bg-blue-300',
+  'bg-blue-400',
+  'bg-blue-500',
+  'bg-blue-600',
+  'bg-blue-700',
+  'bg-blue-800',
+  'bg-blue-900',
+  'bg-indigo-50',
+  'bg-indigo-100',
+  'bg-indigo-200',
+  'bg-indigo-300',
+  'bg-indigo-400',
+  'bg-indigo-500',
+  'bg-indigo-600',
+  'bg-indigo-700',
+  'bg-indigo-800',
+  'bg-indigo-900',
+  'bg-purple-50',
+  'bg-purple-100',
+  'bg-purple-200',
+  'bg-purple-300',
+  'bg-purple-400',
+  'bg-purple-500',
+  'bg-purple-600',
+  'bg-purple-700',
+  'bg-purple-800',
+  'bg-purple-900',
+  'bg-pink-50',
+  'bg-pink-100',
+  'bg-pink-200',
+  'bg-pink-300',
+  'bg-pink-400',
+  'bg-pink-500',
+  'bg-pink-600',
+  'bg-pink-700',
+  'bg-pink-800',
+  'bg-pink-900',
+  // 'bg-current',
+  // 'bg-fill',
+  // 'bg-black',
+  // 'bg-white',
+  'bg-rose-50',
+  'bg-rose-100',
+  'bg-rose-200',
+  'bg-rose-300',
+  'bg-rose-400',
+  'bg-rose-500',
+  'bg-rose-600',
+  'bg-rose-700',
+  'bg-rose-800',
+  'bg-rose-900',
+  'bg-pink-50',
+  'bg-pink-100',
+  'bg-pink-200',
+  'bg-pink-300',
+  'bg-pink-400',
+  'bg-pink-500',
+  'bg-pink-600',
+  'bg-pink-700',
+  'bg-pink-800',
+  'bg-pink-900',
+  'bg-fuchsia-50',
+  'bg-fuchsia-100',
+  'bg-fuchsia-200',
+  'bg-fuchsia-300',
+  'bg-fuchsia-400',
+  'bg-fuchsia-500',
+  'bg-fuchsia-600',
+  'bg-fuchsia-700',
+  'bg-fuchsia-800',
+  'bg-fuchsia-900',
+  'bg-purple-50',
+  'bg-purple-100',
+  'bg-purple-200',
+  'bg-purple-300',
+  'bg-purple-400',
+  'bg-purple-500',
+  'bg-purple-600',
+  'bg-purple-700',
+  'bg-purple-800',
+  'bg-purple-900',
+  'bg-violet-50',
+  'bg-violet-100',
+  'bg-violet-200',
+  'bg-violet-300',
+  'bg-violet-400',
+  'bg-violet-500',
+  'bg-violet-600',
+  'bg-violet-700',
+  'bg-violet-800',
+  'bg-violet-900',
+  'bg-indigo-50',
+  'bg-indigo-100',
+  'bg-indigo-200',
+  'bg-indigo-300',
+  'bg-indigo-400',
+  'bg-indigo-500',
+  'bg-indigo-600',
+  'bg-indigo-700',
+  'bg-indigo-800',
+  'bg-indigo-900',
+  'bg-blue-50',
+  'bg-blue-100',
+  'bg-blue-200',
+  'bg-blue-300',
+  'bg-blue-400',
+  'bg-blue-500',
+  'bg-blue-600',
+  'bg-blue-700',
+  'bg-blue-800',
+  'bg-blue-900',
+  'bg-light-blue-50',
+  'bg-light-blue-100',
+  'bg-light-blue-200',
+  'bg-light-blue-300',
+  'bg-light-blue-400',
+  'bg-light-blue-500',
+  'bg-light-blue-600',
+  'bg-light-blue-700',
+  'bg-light-blue-800',
+  'bg-light-blue-900',
+  'bg-cyan-50',
+  'bg-cyan-100',
+  'bg-cyan-200',
+  'bg-cyan-300',
+  'bg-cyan-400',
+  'bg-cyan-500',
+  'bg-cyan-600',
+  'bg-cyan-700',
+  'bg-cyan-800',
+  'bg-cyan-900',
+  'bg-teal-50',
+  'bg-teal-100',
+  'bg-teal-200',
+  'bg-teal-300',
+  'bg-teal-400',
+  'bg-teal-500',
+  'bg-teal-600',
+  'bg-teal-700',
+  'bg-teal-800',
+  'bg-teal-900',
+  'bg-emerald-50',
+  'bg-emerald-100',
+  'bg-emerald-200',
+  'bg-emerald-300',
+  'bg-emerald-400',
+  'bg-emerald-500',
+  'bg-emerald-600',
+  'bg-emerald-700',
+  'bg-emerald-800',
+  'bg-emerald-900',
+  'bg-green-50',
+  'bg-green-100',
+  'bg-green-200',
+  'bg-green-300',
+  'bg-green-400',
+  'bg-green-500',
+  'bg-green-600',
+  'bg-green-700',
+  'bg-green-800',
+  'bg-green-900',
+  'bg-lime-50',
+  'bg-lime-100',
+  'bg-lime-200',
+  'bg-lime-300',
+  'bg-lime-400',
+  'bg-lime-500',
+  'bg-lime-600',
+  'bg-lime-700',
+  'bg-lime-800',
+  'bg-lime-900',
+  'bg-yellow-50',
+  'bg-yellow-100',
+  'bg-yellow-200',
+  'bg-yellow-300',
+  'bg-yellow-400',
+  'bg-yellow-500',
+  'bg-yellow-600',
+  'bg-yellow-700',
+  'bg-yellow-800',
+  'bg-yellow-900',
+  'bg-amber-50',
+  'bg-amber-100',
+  'bg-amber-200',
+  'bg-amber-300',
+  'bg-amber-400',
+  'bg-amber-500',
+  'bg-amber-600',
+  'bg-amber-700',
+  'bg-amber-800',
+  'bg-amber-900',
+  'bg-orange-50',
+  'bg-orange-100',
+  'bg-orange-200',
+  'bg-orange-300',
+  'bg-orange-400',
+  'bg-orange-500',
+  'bg-orange-600',
+  'bg-orange-700',
+  'bg-orange-800',
+  'bg-orange-900',
+  'bg-red-50',
+  'bg-red-100',
+  'bg-red-200',
+  'bg-red-300',
+  'bg-red-400',
+  'bg-red-500',
+  'bg-red-600',
+  'bg-red-700',
+  'bg-red-800',
+  'bg-red-900',
+  'bg-warm-gray-50',
+  'bg-warm-gray-100',
+  'bg-warm-gray-200',
+  'bg-warm-gray-300',
+  'bg-warm-gray-400',
+  'bg-warm-gray-500',
+  'bg-warm-gray-600',
+  'bg-warm-gray-700',
+  'bg-warm-gray-800',
+  'bg-warm-gray-900',
+  'bg-true-gray-50',
+  'bg-true-gray-100',
+  'bg-true-gray-200',
+  'bg-true-gray-300',
+  'bg-true-gray-400',
+  'bg-true-gray-500',
+  'bg-true-gray-600',
+  'bg-true-gray-700',
+  'bg-true-gray-800',
+  'bg-true-gray-900',
+  'bg-gray-50',
+  'bg-gray-100',
+  'bg-gray-200',
+  'bg-gray-300',
+  'bg-gray-400',
+  'bg-gray-500',
+  'bg-gray-600',
+  'bg-gray-700',
+  'bg-gray-800',
+  'bg-gray-900',
+  'bg-cool-gray-50',
+  'bg-cool-gray-100',
+  'bg-cool-gray-200',
+  'bg-cool-gray-300',
+  'bg-cool-gray-400',
+  'bg-cool-gray-500',
+  'bg-cool-gray-600',
+  'bg-cool-gray-700',
+  'bg-cool-gray-800',
+  'bg-cool-gray-900',
+  'bg-blue-gray-50',
+  'bg-blue-gray-100',
+  'bg-blue-gray-200',
+  'bg-blue-gray-300',
+  'bg-blue-gray-400',
+  'bg-blue-gray-500',
+  'bg-blue-gray-600',
+  'bg-blue-gray-700',
+  'bg-blue-gray-800',
+  'bg-blue-gray-900',
+  'bg-dark-50',
+  'bg-dark-100',
+  'bg-dark-200',
+  'bg-dark-300',
+  'bg-dark-400',
+  'bg-dark-500',
+  'bg-dark-600',
+  'bg-dark-700',
+  'bg-dark-800',
+  'bg-dark-900',
+  'bg-light-50',
+  'bg-light-100',
+  'bg-light-200',
+  'bg-light-300',
+  'bg-light-400',
+  'bg-light-500',
+  'bg-light-600',
+  'bg-light-700',
+  'bg-light-800',
+  'bg-light-900',
+]
diff --git a/.vitepress/theme/data/components.ts b/.vitepress/theme/data/components.ts
new file mode 100644
index 00000000..8db53197
--- /dev/null
+++ b/.vitepress/theme/data/components.ts
@@ -0,0 +1,33 @@
+const vue = `
+<template>
+  {{ HTML }}
+</template>
+
+<style>
+{{ CSS }}
+</style>
+`.trim()
+
+const svelte = `
+<style>
+{{ CSS }}
+</style>
+
+{{ HTML }}
+`.trim()
+
+export function getTemplateComponent(type: string, html: string, css: string) {
+  switch (type) {
+    case 'vue':
+      return vue
+        .replace('{{ HTML }}', html)
+        .replace('{{ CSS }}', css)
+    case 'svelte':
+      return svelte
+        .replace('{{ HTML }}', html)
+        .replace('{{ CSS }}', css)
+    default:
+      // eslint-disable-next-line no-console
+      console.error('Components template not found')
+  }
+}
diff --git a/.vitepress/theme/data/playground.ts b/.vitepress/theme/data/playground.ts
new file mode 100644
index 00000000..1e0319eb
--- /dev/null
+++ b/.vitepress/theme/data/playground.ts
@@ -0,0 +1,32 @@
+export const css = `.box {
+  @apply
+    py-8 px-8 inline-flex mx-auto
+    bg-white dark:bg-gray-400 dark:bg-opacity-10
+    rounded-xl shadow-md space-y-2;
+}
+.btn {
+  @apply
+    px-4 py-1 text-sm text-purple-600 font-semibold
+    rounded-full border border-purple-200 dark:border-purple-800
+    hover:text-white hover:bg-purple-600 hover:border-transparent
+    focus:outline-none focus:ring-2 ring-purple-600 ring-opacity-40;
+}
+`
+
+export const html = `<div class="flex">
+  <div class="box">
+    <div class="text-center space-y-2">
+      <div class="space-y-0.5">
+        <p class="text-lg text-black dark:text-white font-semibold mb-2">
+          Erin Lindford
+        </p>
+        <p class="text-gray-500 dark:text-gray-300 font-medium pb-3">
+          Product Engineer
+        </p>
+      </div>
+      <button class="btn">
+        Message
+      </button>
+    </div>
+  </div>
+</div>`
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index f5599ac0..9bd9afbb 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,3 +1,20 @@
-import Theme from '@windicss/vitepress-theme/index'
+import 'virtual:windi.css'
 
-export default Theme
+import './style/vars.css'
+import './style/all.css'
+import './style/scrollbar.css'
+import './style/markdown.css'
+import './style/codemirror-prism-vars.css'
+
+import Layout from './Layout.vue'
+import NotFound from './NotFound.vue'
+
+import type { Theme } from 'vitepress'
+
+export default <Theme> {
+  Layout,
+  NotFound,
+  enhanceApp({ app }) {
+    app.config.compilerOptions.isCustomElement = tag => tag === 'preview-box'
+  },
+}
diff --git a/.vitepress/theme/logics/activeSidebarLink.ts b/.vitepress/theme/logics/activeSidebarLink.ts
new file mode 100644
index 00000000..c6a5431d
--- /dev/null
+++ b/.vitepress/theme/logics/activeSidebarLink.ts
@@ -0,0 +1,129 @@
+import { onMounted, onUnmounted, onUpdated } from 'vue'
+
+export function useActiveSidebarLinks() {
+  let rootActiveLink: HTMLAnchorElement | null = null
+  let activeLink: HTMLAnchorElement | null = null
+
+  const onScroll = throttleAndDebounce(setActiveLink, 300)
+
+  function setActiveLink(): void {
+    const sidebarLinks = getSidebarLinks()
+    const anchors = getAnchors(sidebarLinks)
+
+    for (let i = 0; i < anchors.length; i++) {
+      const anchor = anchors[i]
+      const nextAnchor = anchors[i + 1]
+
+      const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
+
+      if (isActive) {
+        history.replaceState(null, document.title, hash || ' ')
+        activateLink(hash)
+        return
+      }
+    }
+  }
+
+  function activateLink(hash: string | null): void {
+    deactivateLink(activeLink)
+    deactivateLink(rootActiveLink)
+
+    activeLink = document.querySelector(`.sidebar a[href="${hash}"]`)
+
+    if (!activeLink)
+      return
+
+    activeLink.classList.add('active')
+
+    // also add active class to parent h2 anchors
+    const rootLi = activeLink.closest('.sidebar-links > ul > li')
+
+    if (rootLi && rootLi !== activeLink.parentElement) {
+      rootActiveLink = rootLi.querySelector('a')
+      rootActiveLink && rootActiveLink.classList.add('active')
+    } else {
+      rootActiveLink = null
+    }
+  }
+
+  function deactivateLink(link: HTMLAnchorElement | null): void {
+    link && link.classList.remove('active')
+  }
+
+  onMounted(() => {
+    setActiveLink()
+    window.addEventListener('scroll', onScroll)
+  })
+
+  onUpdated(() => {
+    // sidebar update means a route change
+    activateLink(decodeURIComponent(location.hash))
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+}
+
+function getSidebarLinks(): HTMLAnchorElement[] {
+  return [].slice.call(
+    document.querySelectorAll('.sidebar a.sidebar-link-item'),
+  )
+}
+
+function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
+  return [].slice
+    .call(document.querySelectorAll('.header-anchor'))
+    .filter((anchor: HTMLAnchorElement) =>
+      sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
+    ) as HTMLAnchorElement[]
+}
+
+function getPageOffset(): number {
+  return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight
+}
+
+function getAnchorTop(anchor: HTMLAnchorElement): number {
+  const pageOffset = getPageOffset()
+
+  return anchor.parentElement!.offsetTop - pageOffset - 15
+}
+
+function isAnchorActive(
+  index: number,
+  anchor: HTMLAnchorElement,
+  nextAnchor: HTMLAnchorElement,
+): [boolean, string | null] {
+  const scrollTop = window.scrollY
+
+  if (index === 0 && scrollTop === 0)
+    return [true, null]
+
+  if (scrollTop < getAnchorTop(anchor))
+    return [false, null]
+
+  if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor))
+    return [true, decodeURIComponent(anchor.hash)]
+
+  return [false, null]
+}
+
+function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeout: NodeJS.Timeout
+  let called = false
+
+  return () => {
+    if (timeout)
+      clearTimeout(timeout)
+
+    if (!called) {
+      fn()
+      called = true
+      setTimeout(() => {
+        called = false
+      }, delay)
+    } else {
+      timeout = setTimeout(fn, delay)
+    }
+  }
+}
diff --git a/.vitepress/theme/logics/breakpoints.ts b/.vitepress/theme/logics/breakpoints.ts
new file mode 100644
index 00000000..9b69dcde
--- /dev/null
+++ b/.vitepress/theme/logics/breakpoints.ts
@@ -0,0 +1,3 @@
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+
+export const bps = useBreakpoints(breakpointsTailwind)
diff --git a/.vitepress/theme/logics/dark.ts b/.vitepress/theme/logics/dark.ts
new file mode 100644
index 00000000..443d0307
--- /dev/null
+++ b/.vitepress/theme/logics/dark.ts
@@ -0,0 +1,5 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+
+export const toggleDark = useToggle(isDark)
diff --git a/.vitepress/theme/logics/editLink.ts b/.vitepress/theme/logics/editLink.ts
new file mode 100644
index 00000000..f0988bf5
--- /dev/null
+++ b/.vitepress/theme/logics/editLink.ts
@@ -0,0 +1,89 @@
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { endingSlashRE, isNullish, isExternal } from '../utils'
+
+const bitbucketRE = /bitbucket.org/
+
+export function useEditLink() {
+  const { site, page } = useData()
+
+  const url = computed(() => {
+    const showEditLink = isNullish(page.value.frontmatter.editLink)
+      ? site.value.themeConfig.editLinks
+      : page.value.frontmatter.editLink
+
+    const {
+      repo,
+      docsDir = '',
+      docsBranch = 'master',
+      docsRepo = repo,
+    } = site.value.themeConfig
+
+    const { relativePath } = page.value
+
+    if (!showEditLink || !relativePath || !repo)
+      return null
+
+    return createUrl(repo, docsRepo, docsDir, docsBranch, relativePath)
+  })
+
+  const text = computed(() => {
+    return site.value.themeConfig.editLinkText || 'Edit this page'
+  })
+
+  return {
+    url,
+    text,
+  }
+}
+
+function createUrl(
+  repo: string,
+  docsRepo: string,
+  docsDir: string,
+  docsBranch: string,
+  path: string,
+): string {
+  return bitbucketRE.test(repo)
+    ? createBitbucketUrl(repo, docsRepo, docsDir, docsBranch, path)
+    : createGitHubUrl(repo, docsRepo, docsDir, docsBranch, path)
+}
+
+function createGitHubUrl(
+  repo: string,
+  docsRepo: string,
+  docsDir: string,
+  docsBranch: string,
+  path: string,
+): string {
+  const base = isExternal(docsRepo)
+    ? docsRepo
+    : `https://github.com/${docsRepo}`
+
+  return (
+    `${base.replace(endingSlashRE, '')
+    }/edit`
+    + `/${docsBranch}/${
+      docsDir ? `${docsDir.replace(endingSlashRE, '')}/` : ''
+    }${path}`
+  )
+}
+
+function createBitbucketUrl(
+  repo: string,
+  docsRepo: string,
+  docsDir: string,
+  docsBranch: string,
+  path: string,
+): string {
+  const base = isExternal(docsRepo) ? docsRepo : repo
+
+  return (
+    `${base.replace(endingSlashRE, '')
+    }/src`
+    + `/${docsBranch}/${
+      docsDir ? `${docsDir.replace(endingSlashRE, '')}/` : ''
+    }${path
+    }?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+  )
+}
diff --git a/.vitepress/theme/logics/navLink.ts b/.vitepress/theme/logics/navLink.ts
new file mode 100644
index 00000000..acd2cd74
--- /dev/null
+++ b/.vitepress/theme/logics/navLink.ts
@@ -0,0 +1,49 @@
+import { computed } from 'vue'
+import { useRoute, withBase } from 'vitepress'
+import { isExternal as isExternalCheck } from '../utils'
+
+import type { DefaultTheme } from '../config'
+import type { Ref } from 'vue'
+
+export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>, isDropdown = false) {
+  const route = useRoute()
+
+  const isExternal = isExternalCheck(item.value.link)
+
+  const props = computed(() => {
+    const routePath = normalizePath(`/${route.data?.relativePath}`)
+
+    let active = false
+    if (item.value.activeMatch) {
+      active = new RegExp(item.value.activeMatch).test(routePath)
+    } else {
+      const itemPath = normalizePath(withBase(item.value.link))
+      active = itemPath === routePath
+    }
+
+    return {
+      'class': {
+        'bg-$windi-hover-bg': active && isDropdown,
+        'text-primary': active && !isDropdown,
+        isExternal,
+      },
+      'href': isExternal ? item.value.link : withBase(item.value.link),
+      'target': item.value.target || isExternal ? '_blank' : undefined,
+      'rel': item.value.rel || isExternal ? 'noopener noreferrer' : undefined,
+      'aria-label': item.value.ariaLabel,
+    }
+  })
+
+  return {
+    props,
+    isExternal,
+  }
+}
+
+function normalizePath(path: string): string {
+  return path
+    .replace(/#.*$/, '')
+    .replace(/\?.*$/, '')
+    .replace(/\.(html|md)$/, '')
+    .replace(/\/index$/, '/')
+}
diff --git a/.vitepress/theme/logics/nextAndPrevLinks.ts b/.vitepress/theme/logics/nextAndPrevLinks.ts
new file mode 100644
index 00000000..e8116f76
--- /dev/null
+++ b/.vitepress/theme/logics/nextAndPrevLinks.ts
@@ -0,0 +1,47 @@
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { isArray, ensureStartingSlash, removeExtension, getSideBarConfig, getFlatSideBarLinks } from '@/utils'
+
+export function useNextAndPrevLinks() {
+  const { site, page } = useData()
+
+  const path = computed(() => {
+    return removeExtension(ensureStartingSlash(page.value.relativePath))
+  })
+
+  const candidates = computed(() => {
+    const config = getSideBarConfig(site.value.themeConfig.sidebar, path.value)
+
+    return isArray(config) ? getFlatSideBarLinks(config) : []
+  })
+
+  const index = computed(() => {
+    return candidates.value.findIndex((item) => {
+      return item.link === path.value
+    })
+  })
+
+  const next = computed(() => {
+    if (
+      site.value.themeConfig.nextLinks !== false
+      && index.value > -1
+      && index.value < candidates.value.length - 1
+    )
+      return candidates.value[index.value + 1]
+    return null
+  })
+
+  const prev = computed(() => {
+    if (site.value.themeConfig.prevLinks !== false && index.value > 0)
+      return candidates.value[index.value - 1]
+    return null
+  })
+
+  const hasLinks = computed(() => !!next.value || !!prev.value)
+
+  return {
+    next,
+    prev,
+    hasLinks,
+  }
+}
diff --git a/.vitepress/theme/logics/playgroundLayout.ts b/.vitepress/theme/logics/playgroundLayout.ts
new file mode 100644
index 00000000..582c8c3a
--- /dev/null
+++ b/.vitepress/theme/logics/playgroundLayout.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const layout = ref<'left' | 'bottom' | 'right'>('right')
diff --git a/.vitepress/theme/logics/repo.ts b/.vitepress/theme/logics/repo.ts
new file mode 100644
index 00000000..6e21468b
--- /dev/null
+++ b/.vitepress/theme/logics/repo.ts
@@ -0,0 +1,48 @@
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import type { DefaultTheme } from '@/config'
+
+export const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map((platform) => {
+  return [platform, new RegExp(platform, 'i')] as const
+})
+
+export function useRepo() {
+  const { site } = useData()
+
+  return computed(() => {
+    const theme = site.value.themeConfig as DefaultTheme.Config
+    const name = theme.repo || theme.docsRepo
+
+    if (!name)
+      return null
+
+    const link = getRepoUrl(name)
+    const text = getRepoText(link, theme.repoLabel)
+
+    return { text, link }
+  })
+}
+
+function getRepoUrl(repo: string): string {
+  // if the full url is not provided, default to GitHub repo
+  return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
+}
+
+function getRepoText(url: string, text?: string): string {
+  if (text)
+    return text
+
+  // if no label is provided, deduce it from the repo url
+  const hosts = url.match(/^https?:\/\/[^/]+/)
+
+  if (!hosts)
+    return 'Source'
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const platform = platforms.find(([_p, re]) => re.test(hosts[0]))
+
+  if (platform && platform[0])
+    return platform[0]
+
+  return 'Source'
+}
diff --git a/.vitepress/theme/logics/search.ts b/.vitepress/theme/logics/search.ts
new file mode 100644
index 00000000..8c251eda
--- /dev/null
+++ b/.vitepress/theme/logics/search.ts
@@ -0,0 +1,136 @@
+import docsearch from '@docsearch/js'
+import { useRoute, useRouter, useData } from 'vitepress'
+import { getCurrentInstance, onMounted, watch } from 'vue'
+
+import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
+import type { DefaultTheme } from '@/config'
+
+export function useSearchBox(props: Readonly<{
+  options: DefaultTheme.AlgoliaSearchOptions
+  multilang?: boolean
+  id?: string
+}>) {
+  const vm = getCurrentInstance()
+  const route = useRoute()
+  const router = useRouter()
+
+  const searchId = props.id || 'docsearch'
+
+  watch(
+    () => props.options,
+    (value) => {
+      update(value)
+    },
+  )
+
+  onMounted(() => {
+    initialize(props.options)
+  })
+
+  function isSpecialClick(event: MouseEvent) {
+    return (
+      event.button === 1
+      || event.altKey
+      || event.ctrlKey
+      || event.metaKey
+      || event.shiftKey
+    )
+  }
+
+  function getRelativePath(absoluteUrl: string) {
+    const { pathname, hash } = new URL(absoluteUrl)
+    return pathname + hash
+  }
+
+  function update(options: any) {
+    if (vm && vm.vnode.el) {
+      vm.vnode.el.innerHTML
+        = `<div class="algolia-search-box" id="${searchId}"></div>`
+      initialize(options)
+    }
+  }
+
+  const { lang } = useData()
+
+  function initialize(userOptions: any) {
+    // if the user has multiple locales, the search results should be filtered
+    // based on the language
+    const facetFilters = props.multilang ? [`language:${lang.value}`] : []
+    docsearch(
+      Object.assign({}, userOptions, {
+        container: '#docsearch',
+        searchParameters: Object.assign({}, userOptions.searchParameters, {
+          // pass a custom lang facetFilter to allow multiple language search
+          // https://github.com/algolia/docsearch-configs/pull/3942
+          facetFilters: facetFilters.concat(
+            userOptions.searchParameters?.facetFilters || [],
+          ),
+        }),
+        navigator: {
+          navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
+            const { pathname: hitPathname } = new URL(
+              window.location.origin + suggestionUrl,
+            )
+            // Router doesn't handle same-page navigation so we use the native
+            // browser location API for anchor navigation
+            if (route.path === hitPathname)
+              window.location.assign(window.location.origin + suggestionUrl)
+            else
+              router.go(suggestionUrl)
+          },
+        },
+        transformItems: (items: DocSearchHit[]) => {
+          return items.map((item) => {
+            return Object.assign({}, item, {
+              url: getRelativePath(item.url),
+            })
+          })
+        },
+        hitComponent: ({
+          hit,
+          children,
+        }: {
+          hit: DocSearchHit
+          children: any
+        }) => {
+          const relativeHit = hit.url.startsWith('http')
+            ? getRelativePath(hit.url as string)
+            : hit.url
+          return {
+            type: 'a',
+            ref: undefined,
+            constructor: undefined,
+            key: undefined,
+            props: {
+              href: hit.url,
+              onClick: (event: MouseEvent) => {
+                if (isSpecialClick(event))
+                  return
+
+                // we rely on the native link scrolling when user is already on
+                // the right anchor because Router doesn't support duplicated
+                // history entries
+                if (route.path === relativeHit)
+                  return
+
+                // if the hits goes to another page, we prevent the native link
+                // behavior to leverage the Router loading feature
+                if (route.path !== relativeHit)
+                  event.preventDefault()
+
+                router.go(relativeHit)
+              },
+              children,
+            },
+          }
+        },
+      }),
+    )
+  }
+
+  return {
+    searchId,
+    initialize,
+    update,
+  }
+}
diff --git a/.vitepress/theme/logics/sideBar.ts b/.vitepress/theme/logics/sideBar.ts
new file mode 100644
index 00000000..4fb118a6
--- /dev/null
+++ b/.vitepress/theme/logics/sideBar.ts
@@ -0,0 +1,77 @@
+import { computed, ref } from 'vue'
+import { useRoute, useData } from 'vitepress'
+import { useActiveSidebarLinks } from './activeSidebarLink'
+import { Header } from '@/types'
+import { getSideBarConfig } from '@/utils'
+import { DefaultTheme } from '@/config'
+
+export const openSideBar = ref(false)
+
+export const toggleSidebar = (to?: boolean) => {
+  openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
+}
+
+export function useSideBar() {
+  const route = useRoute()
+  const { site } = useData()
+
+  useActiveSidebarLinks()
+
+  return computed(() => {
+    // at first, we'll check if we can find the sidebar setting in frontmatter.
+    const headers = route.data.headers
+    const frontSidebar = route.data.frontmatter.sidebar
+    const sidebarDepth = route.data.frontmatter.sidebarDepth
+
+    // if it's `false`, we'll just return an empty array here.
+    if (frontSidebar === false)
+      return []
+
+    // if it's `auto`, render headers of the current page
+    if (frontSidebar === 'auto')
+      return resolveAutoSidebar(headers, sidebarDepth)
+
+    // now, there's no sidebar setting at frontmatter; let's see the configs
+    const themeSidebar = getSideBarConfig(
+      site.value.themeConfig.sidebar,
+      route.data.relativePath,
+    )
+
+    if (themeSidebar === false)
+      return []
+
+    if (themeSidebar === 'auto')
+      return resolveAutoSidebar(headers, sidebarDepth)
+
+    return themeSidebar
+  })
+}
+
+function resolveAutoSidebar(
+  headers: Header[],
+  depth: number,
+): DefaultTheme.SideBarItem[] {
+  const ret: DefaultTheme.SideBarItem[] = []
+
+  if (headers === undefined)
+    return []
+
+  let lastH2: DefaultTheme.SideBarItem | undefined
+  headers.forEach(({ level, title, slug }) => {
+    if (level - 1 > depth)
+      return
+
+    const item: DefaultTheme.SideBarItem = {
+      text: title,
+      link: `#${slug}`,
+    }
+    if (level === 2) {
+      lastH2 = item
+      ret.push(item)
+    } else if (lastH2) {
+      ((lastH2 as any).children || ((lastH2 as any).children = [])).push(item)
+    }
+  })
+
+  return ret
+}
diff --git a/.vitepress/theme/logics/useCodeMirror.ts b/.vitepress/theme/logics/useCodeMirror.ts
new file mode 100644
index 00000000..e3d653ff
--- /dev/null
+++ b/.vitepress/theme/logics/useCodeMirror.ts
@@ -0,0 +1,41 @@
+import { watch } from 'vue'
+import type CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+
+import type { Ref, WritableComputedRef } from 'vue'
+
+export async function useCodeMirror(
+  textarea: Ref<HTMLTextAreaElement | null>,
+  input: Ref<string> | WritableComputedRef<string>,
+  options: CodeMirror.EditorConfiguration = {},
+) {
+  const CodeMirror = await import('codemirror')
+
+  // @ts-expect-error untyped
+  await import('codemirror/mode/javascript/javascript')
+  // @ts-expect-error untyped
+  await import('codemirror/mode/css/css')
+  // // @ts-expect-error untyped
+  // await import('codemirror/mode/htmlem')
+
+  const cm = CodeMirror.fromTextArea(
+    textarea.value!,
+    {
+      theme: 'vars',
+      ...options,
+    },
+  )
+
+  cm.on('change', () => input.value = cm.getValue())
+
+  watch(
+    input,
+    (v) => {
+      if (v !== cm.getValue())
+        cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Infinity))
+    },
+    { immediate: true },
+  )
+
+  return cm
+}
diff --git a/.vitepress/theme/logics/usePrismCSS.ts b/.vitepress/theme/logics/usePrismCSS.ts
new file mode 100644
index 00000000..03513a3b
--- /dev/null
+++ b/.vitepress/theme/logics/usePrismCSS.ts
@@ -0,0 +1,29 @@
+import { useClipboard } from '@vueuse/core'
+import { ref, watchEffect } from 'vue'
+
+import Prism from 'prismjs'
+import 'prismjs/components/prism-css'
+
+export function usePrismCSS(getStyle: () => string) {
+  const plainCSS = ref('')
+  const highlightedCSS = ref('')
+
+  const { copy, copied } = useClipboard({
+    read: false,
+    source: plainCSS,
+    copiedDuring: 2000,
+  })
+
+  watchEffect(() => {
+    const style = getStyle()
+    plainCSS.value = style
+    highlightedCSS.value = Prism.highlight(style, Prism.languages.css, 'css').trim()
+  })
+
+  return {
+    copy,
+    copied,
+    plainCSS,
+    highlightedCSS,
+  }
+}
diff --git a/.vitepress/theme/logics/useShare.ts b/.vitepress/theme/logics/useShare.ts
new file mode 100644
index 00000000..904f40a9
--- /dev/null
+++ b/.vitepress/theme/logics/useShare.ts
@@ -0,0 +1,81 @@
+import { computed, watch } from 'vue'
+import * as lzs from 'lz-string'
+import mitt from 'mitt'
+import { getTemplateComponent } from '../data/components'
+
+import type { Ref } from 'vue'
+
+export const SHARE_EVENT = Symbol('share')
+export const EXPORT_EVENT = Symbol('export')
+export const BASE_URL = 'https://windicss.org'
+
+type ComponentType = 'vue' | 'react' | 'svelte'
+
+const filename: Record<ComponentType, string> = {
+  vue: 'windicss.vue',
+  react: 'windicss.tsx',
+  svelte: 'windicss.svelte',
+}
+
+type Events = {
+  [SHARE_EVENT]: void
+  [EXPORT_EVENT]: ComponentType
+}
+
+export const emitter = mitt<Events>()
+
+export function getShareURL(html: string, css: string, site: string = BASE_URL) {
+  const url = new URL('/play.html', site)
+  url.searchParams.set('html', lzs.compressToEncodedURIComponent(html))
+  url.searchParams.set('css', lzs.compressToEncodedURIComponent(css))
+  return url
+}
+export function getSharedCode() {
+  const url = new URL(window.location.href)
+  const params = url.searchParams
+  const htmlParam = params.get('html')
+  const cssParam = params.get('css')
+
+  return {
+    html: htmlParam ? lzs.decompressFromEncodedURIComponent(htmlParam) : null,
+    css: cssParam ? lzs.decompressFromEncodedURIComponent(cssParam) : null,
+  }
+}
+
+function download(filename: string, textInput: string) {
+  const blob = new Blob([textInput], {
+    type: 'text/plain',
+  })
+  const url = window.URL.createObjectURL(blob)
+  const element = document.createElement('a')
+  element.setAttribute('href', url)
+  element.setAttribute('download', filename)
+  element.click()
+  window.URL.revokeObjectURL(url)
+}
+
+export function useEmitShare(html: Ref<string>, css: Ref<string>) {
+  const url = computed(() => getShareURL(html.value, css.value))
+  watch(url, () => {
+    const path = `${url.value.pathname}${url.value.search}`
+    if (typeof window !== 'undefined' && !import.meta.env.DEV)
+      window.history.replaceState('', '', path)
+  }, { immediate: true })
+
+  emitter.on(SHARE_EVENT, async() => {
+    await navigator.clipboard.writeText(url.value.toString())
+  })
+  emitter.on(EXPORT_EVENT, async(type) => {
+    if (!type) return
+    const str = getTemplateComponent(type, html.value, css.value)
+    if (str)
+      download(filename[type], str)
+  })
+}
+export function emitShare() {
+  emitter.emit(SHARE_EVENT)
+}
+
+export function emitExport(type: ComponentType) {
+  emitter.emit(EXPORT_EVENT, type)
+}
diff --git a/.vitepress/theme/logics/useWindiCSS.ts b/.vitepress/theme/logics/useWindiCSS.ts
new file mode 100644
index 00000000..f9f986df
--- /dev/null
+++ b/.vitepress/theme/logics/useWindiCSS.ts
@@ -0,0 +1,38 @@
+import { computed } from 'vue'
+import Windi from 'windicss'
+import { StyleSheet } from 'windicss/utils/style'
+import { CSSParser, HTMLParser } from 'windicss/utils/parser'
+
+import type { Ref } from 'vue'
+import type { Config } from 'windicss/types/interfaces'
+
+export function useWindiCSS(htmlCode: Ref<string>, styleCode: Ref<string>, config: Config | undefined) {
+  const processor = computed(() => new Windi(config))
+
+  const preflightStyles = computed(() => {
+    return processor.value.preflight(htmlCode.value, true, true, true)
+  })
+
+  const transformStyles = computed(() => {
+    return new CSSParser(styleCode.value, processor.value).parse()
+  })
+
+  const utilityStyles = computed(() => {
+    return processor.value.interpret(
+      new HTMLParser(htmlCode.value)
+        .parseClasses()
+        .map(i => i.result)
+        .join(' '),
+    ).styleSheet
+  })
+
+  const generatedCSS = computed(() => new StyleSheet()
+    .extend(preflightStyles.value)
+    .extend(transformStyles.value)
+    .extend(utilityStyles.value)
+    .sort()
+    .build(),
+  )
+
+  return { processor, generatedCSS }
+}
diff --git a/.vitepress/theme/shims-vue.d.ts b/.vitepress/theme/shims-vue.d.ts
new file mode 100644
index 00000000..2b97bd96
--- /dev/null
+++ b/.vitepress/theme/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/.vitepress/theme/shims.d.ts b/.vitepress/theme/shims.d.ts
new file mode 100644
index 00000000..611c60ea
--- /dev/null
+++ b/.vitepress/theme/shims.d.ts
@@ -0,0 +1,16 @@
+declare module '@docsearch/js' {
+  import type { DocSearchProps as DocSearchComponentProps } from '@docsearch/react'
+  interface DocSearchProps extends DocSearchComponentProps {
+    container: string | HTMLElement
+    environment?: typeof window
+  }
+  export default function docsearch(props: DocSearchProps): void
+}
+
+declare module 'splitpanes' {
+  // eslint-disable-next-line import/no-duplicates
+  import type { ComponentOptions } from 'vue'
+  const Splitpanes: ComponentOptions
+  const Pane: ComponentOptions
+  export { Splitpanes, Pane }
+}
diff --git a/.vitepress/theme/style/all.css b/.vitepress/theme/style/all.css
new file mode 100644
index 00000000..1544980c
--- /dev/null
+++ b/.vitepress/theme/style/all.css
@@ -0,0 +1,40 @@
+body {
+  font-family: var(--font-family);
+  text-rendering: optimizeLegibility;
+  color: var(--windi-text);
+  background-color: var(--windi-bg);
+}
+
+html {
+  font-size: 16px;
+  overflow-y: overlay;
+}
+
+
+button {
+  @apply focus:outline-none;
+}
+
+// vue transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.collapse-enter-active,
+.collapse-leave-active {
+  transition:max-height 0.3s ease-out;
+  height:auto;
+  max-height:300px;
+  overflow: hidden;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height:0;
+}
diff --git a/.vitepress/theme/style/codemirror-prism-vars.css b/.vitepress/theme/style/codemirror-prism-vars.css
new file mode 100644
index 00000000..bfaaf047
--- /dev/null
+++ b/.vitepress/theme/style/codemirror-prism-vars.css
@@ -0,0 +1,131 @@
+.cm-editor {
+  height: 100%;
+  width: 100%;
+  color: var(--prism-foreground);
+}
+
+.cm-content {
+  font-size: var(--prism-font-size);
+  font-family: var(--prism-font-family);
+  line-height: var(--prism-line-height);
+}
+
+.cm-editor.cm-focused {
+  outline: none;
+}
+
+.cm-scroller {
+  outline: none;
+}
+
+.cm-editor.cm-focused .cm-selectionBackground, .cm-editor ::selection {
+  background-color: var(--prism-selection-background);
+}
+.cm-editor.cm-focused .cm-cursor {
+  padding-right: 2px;
+  border-left-color: var(--prism-foreground);
+}
+
+.cm-selectionBackground {
+  background: var(--prism-selection-background);
+}
+
+.cm-editor .cm-gutters {
+  background: transparent;
+  border-right: none;
+  padding: 0 0.5rem;
+  @apply bg-white dark:bg-dark-500;
+}
+.cm-editor .cm-foldPlaceholder {
+  background: transparent;
+  border: 1px solid var(--prism-punctuation);
+  color: var(--prism-punctuation);
+  margin: 1px 4px;
+}
+
+.cmt-link,
+.cmt-url {
+  text-decoration: var(--prism-url-decoration);
+}
+
+.cmt-heading {}
+
+.cmt-emphasis,
+.cmt-strong,
+.cmt-keyword {
+  color: var(--prism-keyword-control);
+}
+.cmt-strong {
+  font-weight: bold;
+}
+
+
+.cmt-atom {}
+
+.cmt-bool {
+  color: var(--prism-boolean);
+}
+
+.cmt-labelName {}
+.cmt-inserted {}
+
+.cmt-deleted {
+  color: var(--prism-deleted);
+}
+
+.cmt-literal {
+  color: var(--prism-literal);
+}
+
+.cmt-string {
+  /* color: var(--prism-string); */
+  color: var(--prism-selector);
+}
+
+.cmt-number {
+  color: var(--prism-number);
+}
+
+.cmt-string2 {
+  color: var(--prism-regex);
+}
+
+.cmt-variableName,
+.cmt-variableName.cmt-local,
+.cmt-variableName2 {
+  color: var(--prism-variable);
+}
+
+.cmt-variableName.cmt-definition {
+  color: var(--prism-decorator);
+}
+
+.cmt-typeName {
+  color: var(--prism-builtin);
+}
+
+.cmt-namespace {
+  color: var(--prism-namespace);
+}
+
+.cmt-macroName {}
+
+.cmt-propertyName,
+.cmt-meta {
+  color: var(--prism-property);
+}
+
+.cmt-operator {
+  color: var(--prism-operator);
+}
+
+.cmt-comment {
+  color: var(--prism-comment);
+  font-style: var(--prism-comment-style);
+}
+
+.cmt-invalid {}
+
+.cmt-punctuation {
+  color: var(--prism-punctuation);
+}
diff --git a/.vitepress/theme/style/markdown.css b/.vitepress/theme/style/markdown.css
new file mode 100644
index 00000000..db8482d3
--- /dev/null
+++ b/.vitepress/theme/style/markdown.css
@@ -0,0 +1,159 @@
+/* https://github.com/antfu/prism-theme-vars */
+@import 'prism-theme-vars/base.css';
+@import 'codemirror-theme-vars/base.css';
+@import 'prism-theme-vars/to-codemirror.css';
+
+:root {
+  --prism-block-padding-x: 0;
+  --prism-block-padding-y: 0;
+  --prism-font-size: 1em;
+  --prism-font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  --prism-font-size: 0.9rem;
+}
+
+html:not(.dark) {
+  --prism-foreground: #393a34;
+  --prism-background: theme('colors.light.300');
+  --prism-comment: #a0ada0;
+  --prism-string: #b56959;
+  --prism-literal: #2f8a89;
+  --prism-number: #296aa3;
+  --prism-keyword: #1c6b48;
+  --prism-function: #6c7834;
+  --prism-boolean: #1c6b48;
+  --prism-constant: #a65e2b;
+  --prism-deleted: #a14f55;
+  --prism-class: #2993a3;
+  --prism-builtin: #ab5959;
+  --prism-property: #b58451;
+  --prism-namespace: #b05a78;
+  --prism-punctuation: #8e8f8b;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #698c96;
+}
+
+html.dark {
+  --prism-foreground: #d4cfbf;
+  --prism-background: theme('colors.dark.500');
+  --prism-comment: #758575;
+  --prism-string: #d48372;
+  --prism-literal: #429988;
+  --prism-keyword: #4d9375;
+  --prism-boolean: #1c6b48;
+  --prism-number: #6394bf;
+  --prism-variable: #c2b36e;
+  --prism-function: #a1b567;
+  --prism-deleted: #a14f55;
+  --prism-class: #54b1bf;
+  --prism-builtin: #e0a569;
+  --prism-property: #dd8e6e;
+  --prism-namespace: #db889a;
+  --prism-punctuation: #858585;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #6b8b9e;
+  --prism-line-number: #888888;
+  --prism-line-number-gutter: #eeeeee;
+  --prism-line-highlight-background: #444444;
+  --prism-selection-background: #444444;
+}
+
+a.header-anchor {
+  float: left;
+  margin-top: .1em;
+  margin-left: -1.2em;
+  padding-right: .50em;
+  font-size: .85em;
+  opacity: 0;
+  text-decoration: none;
+  border: 0 !important;
+}
+
+@screen -md {
+  a.header-anchor {
+    @apply hidden;
+  }
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+  text-decoration: none;
+}
+
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 0.5;
+}
+
+.prose pre {
+  @apply bg-transparent m-0 px-4.5 py-3.5;
+}
+
+:not(pre) > code {
+  @apply text-violet-500 !dark:text-violet-400 !font-normal !text-0.95rem;
+}
+
+.prose table code {
+  @apply !text-violet-400 !font-normal !text-sm;
+}
+
+.prose a:hover {
+  @apply underline;
+}
+
+.prose blockquote {
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1.5rem;
+  padding: 0.6rem 1.2rem;
+  opacity: 0.8;
+  margin-left: 1rem;
+  @apply ml-1 lg:ml-4 mr-2 lg:mr-6;
+}
+
+.prose blockquote > :first-child {
+  margin-top: 0;
+}
+.prose blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+
+.prose blockquote p:first-of-type::before {
+  content: none;
+}
+
+.prose blockquote p:first-of-type::after {
+  content: none;
+}
+
+.prose tbody tr {
+  @apply border-b-gray-200 dark:border-b-dark-300;
+}
+
+.prose thead {
+  @apply border-b-gray-300 dark:border-b-dark-100;
+}
+
+div[class*='language-'][class*='with-filename'] {
+  @apply relative pt-6;
+}
+
+div[class*='language-'] .code-block-filename {
+  @apply absolute top-0 left-0 py-1 px-2 text-xs text-cool-gray-500 dark:text-cool-gray-400 bg-gray-200 dark:bg-dark-300 rounded-br;
+}
+
+div[class*='language-'] {
+  @apply shadow-sm shadow-gray-500;
+}
diff --git a/.vitepress/theme/style/scrollbar.css b/.vitepress/theme/style/scrollbar.css
new file mode 100644
index 00000000..767e5ac9
--- /dev/null
+++ b/.vitepress/theme/style/scrollbar.css
@@ -0,0 +1,18 @@
+// scrollbar
+*::-webkit-scrollbar {
+  @apply bg-transparent w-12px h-12px;
+}
+
+*::-webkit-scrollbar-thumb {
+  transition: background .2s ease-in-out;
+  border: 3px solid transparent;
+  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  @apply bg-cool-gray-300 dark:bg-dark-100;
+}
+
+*::-webkit-scrollbar-corner {
+  @apply bg-transparent;
+}
diff --git a/.vitepress/theme/style/vars.css b/.vitepress/theme/style/vars.css
new file mode 100644
index 00000000..6a891a8c
--- /dev/null
+++ b/.vitepress/theme/style/vars.css
@@ -0,0 +1,25 @@
+:root {
+  --header-height: 4rem;
+  --full-header: calc(100vh - var(--header-height));
+  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+@screen md {
+  :root {
+    --header-height: 4.5rem;
+  }
+}
+
+html {
+  --windi-bg: theme('colors.light.100');
+  --windi-hover-bg: theme('colors.light.400');
+  --windi-text: theme('colors.cool-gray.800');
+  --windi-bc: theme('colors.cool-gray.200');
+}
+
+html.dark {
+  --windi-bg: theme('colors.dark.800');
+  --windi-hover-bg: theme('colors.dark.300');
+  --windi-text: theme('colors.cool-gray.100');
+  --windi-bc: theme('colors.dark.300');
+}
\ No newline at end of file
diff --git a/.vitepress/theme/types.ts b/.vitepress/theme/types.ts
new file mode 100644
index 00000000..59328839
--- /dev/null
+++ b/.vitepress/theme/types.ts
@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+
+export type MaybeRef<T> = T | Ref<T>
+
+export type HeadConfig =
+  | [string, Record<string, string>]
+  | [string, Record<string, string>, string]
+
+export interface LocaleConfig {
+  lang: string
+  title?: string
+  description?: string
+  head?: HeadConfig[]
+  label?: string
+  selectText?: string
+}
+
+export interface SiteData<ThemeConfig = any> {
+  base: string
+  lang: string
+  title: string
+  description: string
+  head: HeadConfig[]
+  themeConfig: ThemeConfig
+  locales: Record<string, LocaleConfig>
+  customData: any
+}
+
+export interface Header {
+  level: number
+  title: string
+  slug: string
+}
+
+export interface PageData {
+  relativePath: string
+  title: string
+  description: string
+  headers: Header[]
+  frontmatter: Record<string, any>
+  lastUpdated: number
+}
diff --git a/.vitepress/theme/utils.ts b/.vitepress/theme/utils.ts
new file mode 100644
index 00000000..55867364
--- /dev/null
+++ b/.vitepress/theme/utils.ts
@@ -0,0 +1,144 @@
+import { Route } from 'vitepress'
+import { DefaultTheme } from './config'
+
+export const hashRE = /#.*$/
+export const extRE = /(index)?\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^[a-z]+:/i
+
+export function isNullish(value: any): value is null | undefined {
+  return value === null || value === undefined
+}
+
+export function isArray(value: any): value is any[] {
+  return Array.isArray(value)
+}
+
+export function isExternal(path: string): boolean {
+  return outboundRE.test(path)
+}
+
+export function isActive(route: Route, path?: string): boolean {
+  if (path === undefined)
+    return false
+
+  const routePath = normalize(`/${route.data.relativePath}`)
+  const pagePath = normalize(path)
+
+  return routePath === pagePath
+}
+
+export function normalize(path: string): string {
+  return decodeURI(path).replace(hashRE, '').replace(extRE, '')
+}
+
+export function joinUrl(base: string, path: string): string {
+  const baseEndsWithSlash = base.endsWith('/')
+  const pathStartsWithSlash = path.startsWith('/')
+
+  if (baseEndsWithSlash && pathStartsWithSlash)
+    return base.slice(0, -1) + path
+
+  if (!baseEndsWithSlash && !pathStartsWithSlash)
+    return `${base}/${path}`
+
+  return base + path
+}
+
+/**
+ * get the path without filename (the last segment). for example, if the given
+ * path is `/guide/getting-started.html`, this method will return `/guide/`.
+ * Always with a trailing slash.
+ */
+export function getPathDirName(path: string): string {
+  const segments = path.split('/')
+
+  if (segments[segments.length - 1])
+    segments.pop()
+
+  return ensureEndingSlash(segments.join('/'))
+}
+
+export function ensureSlash(path: string): string {
+  return ensureEndingSlash(ensureStartingSlash(path))
+}
+
+export function ensureStartingSlash(path: string): string {
+  return /^\//.test(path) ? path : `/${path}`
+}
+
+export function ensureEndingSlash(path: string): string {
+  return /(\.html|\/)$/.test(path) ? path : `${path}/`
+}
+
+/**
+ * Remove `.md` or `.html` extention from the given path. It also converts
+ * `index` to slush.
+ */
+export function removeExtension(path: string): string {
+  return path.replace(/(index)?(\.(md|html))?$/, '') || '/'
+}
+
+/**
+ * Sidebar
+ */
+
+export function isSideBarConfig(
+  sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig,
+): sidebar is DefaultTheme.SideBarConfig {
+  return sidebar === false || sidebar === 'auto' || isArray(sidebar)
+}
+
+export function isSideBarGroup(
+  item: DefaultTheme.SideBarItem,
+): item is DefaultTheme.SideBarGroup {
+  return (item as DefaultTheme.SideBarGroup).children !== undefined
+}
+
+export function isSideBarEmpty(sidebar?: DefaultTheme.SideBarConfig): boolean {
+  return isArray(sidebar) ? sidebar.length === 0 : !sidebar
+}
+
+/**
+ * Get the `SideBarConfig` from sidebar option. This method will ensure to get
+ * correct sidebar config from `MultiSideBarConfig` with various path
+ * combinations such as matching `guide/` and `/guide/`. If no matching config
+ * was found, it will return `auto` as a fallback.
+ */
+export function getSideBarConfig(
+  sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig,
+  path: string,
+): DefaultTheme.SideBarConfig {
+  if (isSideBarConfig(sidebar))
+    return sidebar
+
+  path = ensureStartingSlash(path)
+
+  for (const dir of Object.keys(sidebar)) {
+    // make sure the multi sidebar key starts with slash too
+    if (path.startsWith(ensureStartingSlash(dir)))
+      return sidebar[dir]
+  }
+
+  return 'auto'
+}
+
+/**
+ * Get flat sidebar links from the sidebar items. This method is useful for
+ * creating the "next and prev link" feature. It will ignore any items that
+ * don't have `link` property and removes `.md` or `.html` extension if a
+ * link contains it.
+ */
+export function getFlatSideBarLinks(
+  sidebar: DefaultTheme.SideBarItem[],
+): DefaultTheme.SideBarLink[] {
+  return sidebar.reduce<DefaultTheme.SideBarLink[]>((links, item) => {
+    if (item.link)
+      links.push({ text: item.text, link: removeExtension(item.link) })
+
+    if (isSideBarGroup(item))
+      links = [...links, ...getFlatSideBarLinks(item.children)]
+
+    return links
+  }, [])
+}
diff --git a/.vitepress/theme/vite-env.d.ts b/.vitepress/theme/vite-env.d.ts
new file mode 100644
index 00000000..dc6653cc
--- /dev/null
+++ b/.vitepress/theme/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-icons/client" />
diff --git a/.vitepress/theme/web-components/PreviewBox.ts b/.vitepress/theme/web-components/PreviewBox.ts
new file mode 100644
index 00000000..a094539f
--- /dev/null
+++ b/.vitepress/theme/web-components/PreviewBox.ts
@@ -0,0 +1,149 @@
+const template = document.createElement('template')
+
+template.innerHTML = `
+  <style>
+    *::-webkit-scrollbar {
+      background-color: transparent;
+      height: 12px;
+      width: 12px;
+    }
+    *::-webkit-scrollbar-thumb {
+      transition: background .2s ease-in-out;
+      border: 3px solid transparent;
+      -webkit-background-clip: content-box;
+      background-clip: content-box;
+      --tw-bg-opacity: 1;
+      background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+      border-radius: 9999px;
+    }
+    .dark *::-webkit-scrollbar-thumb {
+      --tw-bg-opacity: 1;
+      background-color: rgba(50, 50, 50, var(--tw-bg-opacity));
+    }
+    *::-webkit-scrollbar-thumb:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+    }
+    .dark *::-webkit-scrollbar-thumb:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgba(60, 60, 60, var(--tw-bg-opacity));
+    }
+    *::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }  
+
+    :host {
+      width: 100%;
+      height: 100%;
+    }
+    #dark-wrap {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+    #container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      inset: 0;
+      overflow: auto;
+    }
+  </style>
+  <div id="dark-wrap">
+    <div id="container">
+    </div>
+  </div>
+`
+
+class Play extends HTMLElement {
+  private styleEl: HTMLStyleElement | null
+  private fixedStyleEl: HTMLStyleElement | null
+  private container: HTMLElement
+  private darkWrap: HTMLElement
+  constructor() {
+    super()
+
+    this.attachShadow({ mode: 'open' })
+
+    if (this.shadowRoot)
+      this.shadowRoot.appendChild(template.content.cloneNode(true))
+
+    this.styleEl = null
+    this.fixedStyleEl = null
+    this.container = this.shadowRoot!.getElementById('container')!
+    this.darkWrap = this.shadowRoot!.getElementById('dark-wrap')!
+
+    this.setContent({
+      css: this.getAttribute('css') || '',
+      html: this.getAttribute('html') || 'Preview',
+      classes: this.getAttribute('classes') || '',
+      fixedCss: this.getAttribute('fixed-css') || '',
+    })
+
+    if (this.getAttribute('dark') === 'true')
+      this.container.classList.add('dark')
+  }
+
+  static get observedAttributes() {
+    return ['dark', 'css', 'html', 'classes', 'fixed-css', 'fixedcss']
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name === 'dark') {
+      if (newValue === 'true')
+        this.darkWrap.classList.add('dark')
+      else
+        this.darkWrap.classList.remove('dark')
+
+      return
+    }
+
+    if (name === 'fixed-css' || name === 'fixedcss')
+      name = 'fixedCss'
+
+    this.setContent({
+      [name]: newValue,
+    })
+  }
+
+  setContent(data: Record<string, string>) {
+    if (!this.shadowRoot) return
+
+    const {
+      css,
+      fixedCss,
+      classes,
+      html,
+    } = data
+
+    // console.log({
+    //   css,
+    //   fixedCss,
+    //   classes,
+    //   html,
+    // })
+
+    if (css) {
+      if (this.styleEl)
+        this.shadowRoot.removeChild(this.styleEl)
+      this.styleEl = document.createElement('style')
+      this.styleEl.innerHTML = css
+      this.shadowRoot.appendChild(this.styleEl)
+    }
+
+    if (fixedCss) {
+      if (this.fixedStyleEl)
+        this.shadowRoot.removeChild(this.fixedStyleEl)
+      this.fixedStyleEl = document.createElement('style')
+      this.fixedStyleEl.innerHTML = fixedCss
+      this.shadowRoot.appendChild(this.fixedStyleEl)
+    }
+    if (classes)
+      this.container.className = classes
+    if (html)
+      this.container.innerHTML = html
+  }
+}
+
+window.customElements.define('preview-box', Play)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 21b4e5df..202368da 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,6 @@
   "eslint.packageManager": "pnpm",
   "prettier.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "volar.style.defaultLanguage": "postcss",
   "volar.tsPlugin": true,
   "volar.tsPluginStatus": false,
   "editor.codeActionsOnSave": {
@@ -19,5 +18,9 @@
   },
   "files.associations": {
     "*.css": "postcss"
-  }
+  },
+  "eslint.workingDirectories": [
+		{ "directory": ".vitepress" }
+	],
+  "windicss.sortOnSave": false
 }
\ No newline at end of file
diff --git a/features/analyzer.md b/features/analyzer.md
index 1d574d36..942be8fd 100644
--- a/features/analyzer.md
+++ b/features/analyzer.md
@@ -24,8 +24,7 @@ Or you can install locally to reuse the same version of your local `windicss` mo
 npm i -D windicss-analysis
 ```
 
-```json5
-// package.json
+```json5 package.json
 {
   "scripts": {
     "analysis": "windicss-analysis"
@@ -60,8 +59,7 @@ npx windicss-analysis --html dist
 
 You will need to configure the `extract.include` options in `windi.config.js` instead of your framework's configurations file so it can be understood by the analyzer so as other integrations support. For example:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 import colors from 'windicss/colors'
 
@@ -88,8 +86,8 @@ and process it as you need.
 You can also have type support for it via:
 
 ```ts
-import type { AnalysisReport } from 'windicss-analysis'
 import rawReport from './report.json'
+import type { AnalysisReport } from 'windicss-analysis'
 
 const report = rawReport as AnalysisReport
 ```
diff --git a/features/dark-mode.md b/features/dark-mode.md
index c050c53b..b94b877e 100644
--- a/features/dark-mode.md
+++ b/features/dark-mode.md
@@ -4,7 +4,7 @@ Windi CSS has out-of-box Dark Mode support.
 
 By prefixing the `dark:` variant to the utilities, they will only apply when dark mode is enabled. With the following example, the `Preview` text will be red on the light mode, and green on the dark mode. Try play with it: 
 
-<DarkModeSwitch />
+<ToggleDark />
 
 <InlinePlayground :input="'text-red-400 dark:text-green-400'" :showCSS="true" :showPreview="true"/>
 
@@ -14,8 +14,7 @@ We have two modes for enabling dark mode, [class mode](#class-mode) and [media q
 
 Class mode gives you better controls over when should the dark mode enables.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   darkMode: 'class',
   // ...
@@ -62,8 +61,7 @@ else
 
 In media query mode, it uses the built-in `@media (prefers-color-scheme: dark)` query from the browser that always matches with the users' system preference. 
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   darkMode: 'media',
   // ...
diff --git a/features/index.md b/features/index.md
index d203430c..53607565 100644
--- a/features/index.md
+++ b/features/index.md
@@ -6,7 +6,7 @@
 
 [Windi CSS] is fully compatible with [Tailwind CSS] v2. On top of that, we have many additional features that boost your workflow further and open up much more possibilities.
 
-### Value Auto-infer
+## Value Auto-infer
 
 Use arbitrary values in your classes and generate corresponding styles.
 
@@ -24,7 +24,7 @@ Use arbitrary values in your classes and generate corresponding styles.
 
 <LearnMore to="/features/value-auto-infer" />
 
-### Variant Groups
+## Variant Groups
 
 Apply utilities for the same variant by grouping them with parenthesis.
 
@@ -38,7 +38,7 @@ Apply utilities for the same variant by grouping them with parenthesis.
 
 <LearnMore to="/features/variant-groups" />
 
-### Responsive Design
+## Responsive Design
 
 Extended responsive breakpoints control.
 
@@ -48,7 +48,7 @@ Extended responsive breakpoints control.
 
 <LearnMore to="/features/responsive-design" />
 
-### Important Prefix
+## Important Prefix
 
 Prefix any utility classes with `!` to make them as `!important`.
 
@@ -58,12 +58,11 @@ Prefix any utility classes with `!` to make them as `!important`.
 
 <LearnMore to="/features/important-prefix" />
 
-### Shortcuts
+## Shortcuts
 
 Create components and utilities quickly and reusable.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     /* ... */
@@ -81,7 +80,7 @@ export default {
 
 <LearnMore to="/features/shortcuts" />
 
-### Dark Mode
+## Dark Mode
 
 ```html
 <div class="text-black dark:text-white"></div>
@@ -89,7 +88,7 @@ export default {
 
 <LearnMore to="/features/dark-mode" />
 
-### RTL
+## RTL
 
 ```html
 <div class="text-green-400 rtl:(text-red-400 text-right)"></div>
@@ -97,7 +96,7 @@ export default {
 
 <LearnMore to="/features/rtl" />
 
-### Directives
+## Directives
 
 Tailwind-like `@apply`, `@screen` directives are fully supported.
 
@@ -113,7 +112,7 @@ Tailwind-like `@apply`, `@screen` directives are fully supported.
 
 <LearnMore to="/features/directives" />
 
-### Visual Analyzer
+## Visual Analyzer
 
 We provided a visual analyzer for you to have an overview of your utility usage and design system.
 
diff --git a/features/responsive-design.md b/features/responsive-design.md
index 1c41986e..e0253af9 100644
--- a/features/responsive-design.md
+++ b/features/responsive-design.md
@@ -38,8 +38,7 @@ lg  => greater or equal than this breakpoint
 
 You can customize your breakpoints in your `windi.config.js`
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
diff --git a/features/shortcuts.md b/features/shortcuts.md
index 5fc15a1d..1958a503 100644
--- a/features/shortcuts.md
+++ b/features/shortcuts.md
@@ -4,8 +4,7 @@ It's quite common when you work on same set of utilities for multiple times. We
 
 By simply adding the `shortcuts` field to your configurations:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     /* ... */
@@ -32,8 +31,7 @@ export default {
 
 CSS-in-JS syntax is also supported for complex utility
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     /* ... */
diff --git a/guide/configuration.md b/guide/configuration.md
index 61e5975c..75ac0824 100644
--- a/guide/configuration.md
+++ b/guide/configuration.md
@@ -21,8 +21,7 @@ By default, Windi CSS will search for the configuration file under your project'
 
 To get typecheck for your configurations, you can import the `defineConfig` function from `windicss/helpers`:
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -30,8 +29,7 @@ export default defineConfig({
 })
 ```
 
-```js
-// windi.config.js
+```js windi.config.js
 // @ts-check - enable TS check for js file
 import { defineConfig } from 'windicss/helpers'
 
@@ -42,9 +40,7 @@ export default defineConfig({
 
 `defineConfig` is a bypass function with type hints, which means you can also omit it if you don't need the autocompletion/typecheck.
 
-```js
-// windi.config.js
-
+```js windi.config.js
 export default {
   /* configurations... */
 }
@@ -54,7 +50,7 @@ You can use the autocompletion from your editor to see possible configuration fi
 
 ## Example Configuration
 
-```js
+```js windi.config.js
 import { defineConfig } from 'windicss/helpers'
 import colors from 'windicss/colors'
 import plugin from 'windicss/plugin'
diff --git a/guide/extractions.md b/guide/extractions.md
index 2d6d46ab..3ed11da7 100644
--- a/guide/extractions.md
+++ b/guide/extractions.md
@@ -24,8 +24,7 @@ Sometimes you'll have to use dynamic concatenations:
 
 For that, you will need to specify the possible combinations in the `safelist` option of `windi.config.js`.
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -35,8 +34,7 @@ export default defineConfig({
 
 Or to be more fixable:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 function range(size, startAt = 1) {
@@ -58,8 +56,7 @@ By default, it will scan files under `src/` with extensions `vue, html, mdx, pug
 
 If you want to enable/disable scanning for other file-types or locations, you can configure it using `include` and `exclude` options:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -83,8 +80,7 @@ Preflight (style resetting) is also enabled on-demand with scanning.
 
 You can disable it completely in the configuration:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -94,8 +90,7 @@ export default defineConfig({
 
 Or explicitly enable it with safelisting:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
diff --git a/guide/index.md b/guide/index.md
index 28382259..bfa63595 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -22,7 +22,7 @@ If you are already familiar with [Tailwind CSS], think about Windi CSS as an **o
 
 A quote from the author should illustrate his motivation to create Windi CSS:
 
-> When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - [@voorjaar](https://github.com/voorjaar)
+> When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. <br> - [@voorjaar](https://github.com/voorjaar)
 
 By scanning your HTML and CSS and generating utilities on-demand, Windi CSS is able to provide [faster load times][video comparison] and a speedy HMR in development, and does not require purging in production.
 
diff --git a/guide/migration.md b/guide/migration.md
index b0aacf9d..5d95c109 100644
--- a/guide/migration.md
+++ b/guide/migration.md
@@ -3,18 +3,18 @@
 
 # Migrate from Tailwind CSS
 
-### `package.json`
+## Package 
 
 Some of your dependencies are no longer required. You can remove them if they were needed only for Tailwind CSS.
 
-```diff
+```diff package.json
 - "tailwindcss": "*",
 - "postcss": "*",
 - "autoprefixer": "*",
 + "windicss": "*"
 ```
 
-### Base Styles
+## Base Styles
 
 You can now remove the Tailwind CSS imports from your css entry.
 
@@ -26,12 +26,11 @@ You can now remove the Tailwind CSS imports from your css entry.
 
 (Optional) Based on the integration tools you are using, you might need to import the `virtual:windi.css` entry explicitly. Please check the docs of the tools for more details.
 
-```js
-// main.js
+```js main.js
 import 'virtual:windi.css'
 ```
 
-### Configurations
+## Configurations
 
 Since all variants are [automatically enabled][auto], `variant` and `purge` fields are no longer needed.
 
@@ -39,7 +38,7 @@ Since all variants are [automatically enabled][auto], `variant` and `purge` fiel
 
 We are compatible with both `windi.config.js` and `tailwind.config.js`.
 
-```diff
+```diff windi.config.js
 -const colors = require('tailwindcss/colors')
 +const colors = require('windicss/colors')
 -const typography = require('@tailwindcss/typography')
@@ -75,7 +74,7 @@ export default {
 }
 ```
 
-### Cleanup (optional)
+## Cleanup (optional)
 
 The following files can be removed if you don't use their other features.
 
diff --git a/index.md b/index.md
index d9675d99..81bb5123 100644
--- a/index.md
+++ b/index.md
@@ -1,8 +1,6 @@
 ---
 home: true
 
-title: ''
-
 heroText: Windi CSS
 
 actionText: Get Started
@@ -14,24 +12,16 @@ altActionLink: /features/
 heroImage: /assets/logo.svg
 heroAlt: Windi CSS logo
 
-features:
-  - title: On-demand
-    details: Genreate CSS only for utilities you use. With instant hot reload and minimal reproduction size.
-  - title: First-class Integrations
-    details: Provides first-class integrations and best DX for the tools you love. Including Vite, Webpack, Nuxt, Svelte and more!
-  - title: Auto-utilities
-    details: Infers number, sizes, and colors from your classes
-footer: MIT Licensed | Copyright © 2020-2021 Windi CSS Contributors
-
 newsTitle: 🎉 v3.0 is now out with a bunch of exciting new features!
 newsLink: /posts/v30.html
+
+footer: MIT Licensed | Copyright © 2020-2021 Windi CSS Contributors
 ---
 
 <Sponsors />
 
 <InlinePlayground 
-  :input="`bg-gradient-to-r from-green-400 to-blue-500
-m-4 px-4 py-3 text-white text-center italic rounded cursor-default 
+  :input="`bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 text-white text-center italic rounded cursor-default !h-auto !w-auto !relative
 transition-all duration-400
 hover:rounded-2xl
 dark:\(from-teal-400 to-yellow-500)`"
diff --git a/integrations/cli.md b/integrations/cli.md
index da3bda52..3d9d112a 100644
--- a/integrations/cli.md
+++ b/integrations/cli.md
@@ -71,7 +71,6 @@ windicss './hello.html' './world.html'
 windicss './**/*.html'
 windicss './src/**/*.html'
 windicss './hello.html' './world.html', './src/**/*.svelte'
-...
 ```
 
 ### Compile CSS File
@@ -85,7 +84,6 @@ windicss './**/*.html'
 windicss './**/*.html' -to windi.css
 windicss './test.html' -to windi.css
 windicss './test.html' --preflight --output windi.css
-
 ```
 
 #### Minimize build
@@ -164,8 +162,7 @@ windicss './**/*.html' -to windi.css --config windi.config.js
 
 Give an example
 
-```js
-// windi.config.js
+```js windi.config.js
 module.exports = {
   // ...
   theme: {
@@ -199,8 +196,7 @@ windicss './**/*.html' -to windi.css --dev --fuzzy
 
 You can also configure `extractors` for specific file types
 
-```js
-// windi.config.js
+```js windi.config.js
 module.exports = {
   // ...
   extract: {
diff --git a/integrations/gridsome.md b/integrations/gridsome.md
index 8e75898f..6132ef91 100644
--- a/integrations/gridsome.md
+++ b/integrations/gridsome.md
@@ -17,8 +17,7 @@ yarn add gridsome-plugin-windicss -D
 
 Within your `gridsome.config.js` add the following.
 
-```js
-// gridsome.config.js
+```js gridsome.config.js
 export default {
   // ...
   plugins: [
diff --git a/integrations/javascript.md b/integrations/javascript.md
index 69c3aa17..05f197a6 100644
--- a/integrations/javascript.md
+++ b/integrations/javascript.md
@@ -149,8 +149,7 @@ export function generateStyles(html) {
 
       // append current value to accumulator value
       acc[attrKey] = [...attrKeyValue, ...attrValue]
-    }
-    else {
+    } else {
       // else add atrribute value array to accumulator
       acc[attrKey] = attrValue
     }
diff --git a/integrations/nuxt.md b/integrations/nuxt.md
index ff83693e..d4c777aa 100644
--- a/integrations/nuxt.md
+++ b/integrations/nuxt.md
@@ -15,8 +15,7 @@ yarn add nuxt-windicss -D
 
 Within your `nuxt.config.js` add the following.
 
-```js
-// nuxt.config.js
+```js nuxt.config.js
 export default {
   buildModules: [
     'nuxt-windicss',
@@ -45,8 +44,7 @@ Follow the [migration guide](https://windicss.org/guide/migration.html) for othe
 
 Preflight is enabled on-demanded. If you'd like to completely disable it, you can configure it as below
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -65,8 +63,7 @@ By default, we scan your source code statically and find all the usages of the u
 
 For that, you will need to specify the possible combinations in the `safelist` options of `webpack.config.js`.
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -76,8 +73,7 @@ export default defineConfig({
 
 Or you can do it this way
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 function range(size, startAt = 1) {
@@ -97,8 +93,7 @@ export default defineConfig({
 On server start, `nuxt-windicss` will scan your source code and extract the utility usages. By default,
 only files within your root with extensions `vue, html, md, mdx, pug, jsx, tsx` will be included. If you want to enable scanning for other file types of locations, you can configure it via:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -111,8 +106,7 @@ export default defineConfig({
 
 Or in nuxt config:
 
-```ts
-// nuxt.config.js
+```js nuxt.config.js
 export default {
   // ...
   windicss: {
@@ -130,7 +124,8 @@ export default {
 ### Other Options
 
 These are the default options for the nuxt module.
-```js
+
+```js nuxt.config.js
 export default {
   // ...
   windicss: {
@@ -173,8 +168,7 @@ the scanning for most users.
 
 To opt-in to this scanning you will need to set the scan options yourself.
 
-````js
-// nuxt.config.js
+````js nuxt.config.js
 export default {
   // ...
   hooks: {
@@ -199,7 +193,7 @@ export default {
 If you need to load in a CSS file from a node_module folder and have the @apply's transformed,
 then you will need to use the `extraTransformTargets` option.
 
-```js
+```js nuxt.config.js
 export default {
   // ...
   hooks: {
diff --git a/integrations/postcss.md b/integrations/postcss.md
index 97b71a59..0cad1e16 100644
--- a/integrations/postcss.md
+++ b/integrations/postcss.md
@@ -18,8 +18,7 @@ npm i -D postcss-windicss
 
 Create `postcss.config.js` under your project root
 
-```js
-// postcss.config.js
+```js postcss.config.js
 module.exports = {
   plugins: {
     'postcss-windicss': { /* ... */ },
@@ -36,8 +35,7 @@ Add `@windicss` to your main css entry:
 
 Create `windi.config.js` / `windi.config.ts` under your project root with this configurations
 
-```js
-// windi.config.js
+```js windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
diff --git a/integrations/rollup.md b/integrations/rollup.md
index ecc3e064..e2e07eb7 100644
--- a/integrations/rollup.md
+++ b/integrations/rollup.md
@@ -14,8 +14,7 @@
 npm i rollup-plugin-windicss -D # yarn add rollup-plugin-windicss -D
 ```
 
-```ts
-// rollup.config.js
+```js rollup.config.js
 import WindiCSS from 'rollup-plugin-windicss'
 
 export default {
@@ -39,8 +38,7 @@ That's all.
 
 Preflight is enables on demanded, if you'd like to completely disable it, you can configure it as below
 
-```js
-// rollup.config.js
+```js rollup.config.js
 export default {
   plugins: [
     WindiCSS({
@@ -61,8 +59,7 @@ By default, we scan your source code statically and find all the usages of the u
 
 For that, you will need to specify the possible combinations in the `safelist` options of `vite.config.js`.
 
-```js
-// rollup.config.js
+```js rollup.config.js
 export default {
   plugins: [
     WindiCSS({
@@ -96,8 +93,7 @@ export default {
 
 On server start, `vite-plugin-windicss` will scan your source code and extract the utilities usages. By default, only files under `src/` with extensions `vue, html, mdx, pug, jsx, tsx` will be included. If you want to enable scaning for other file type of locations, you can configure it via:
 
-```js
-// rollup.config.js
+```js rollup.config.js
 export default {
   plugins: [
     WindiCSS({
diff --git a/integrations/svelte.md b/integrations/svelte.md
index c68f674e..31ae6d97 100644
--- a/integrations/svelte.md
+++ b/integrations/svelte.md
@@ -17,18 +17,19 @@ Our Svelte integration uses the Svelte Preprocessor API, therefore runs before c
 
 ### Options
 
-```js
-import { windi } from 'svelte-windicss-preprocess'
-// ...
-windi({
-  silent?: boolean, // default: false
-  mode?: 'development' | 'production', // default: process.env.NODE_ENV
-  configPath?: string, // no default
-  disableFormat?: boolean, // default: false
-  useDevTools?: {
-    enabled?: boolean, // default: false
-  },
-})
+```ts
+interface Options {
+  silent?: boolean
+  mode?: 'development' | 'production'
+  configPath?: string
+  disableFormat?: boolean
+  devTools?: {
+    enabled: boolean
+    completions?: boolean
+  }
+  safeList?: string
+  preflights?: boolean
+}
 ```
 
 ### Custom pre-processing information
@@ -96,7 +97,7 @@ To make all Windi CSS classes in one `.svelte` global, with help of `:global()`
 
 ### Custom styles
 
-You may have the need in your project to define custom CSS classes, and want to decide seperate to Windi CSS if they are scoped or global. You can with the following syntax:
+You may have the need in your project to define custom CSS classes, and want to decide separate to Windi CSS if they are scoped or global. You can with the following syntax:
 
 ```html
   <!-- all styles with :global() -->
diff --git a/integrations/vite.md b/integrations/vite.md
index 99e9d68a..9e14770a 100644
--- a/integrations/vite.md
+++ b/integrations/vite.md
@@ -33,8 +33,7 @@ npm i -D vite-plugin-windicss windicss
 
 Then, install the plugin in your Vite configuration:
 
-```ts
-// vite.config.js
+```ts vite.config.js
 import WindiCSS from 'vite-plugin-windicss'
 
 export default {
@@ -46,8 +45,7 @@ export default {
 
 And finally, import `virtual:windi.css` in your Vite entries:
 
-```js
-// main.js
+```js main.js
 import 'virtual:windi.css'
 ```
 
@@ -63,8 +61,7 @@ Enable TypeScript for your `tailwind.config.js`? Sure, why not?
 
 Rename it to `tailwind.config.ts` and things just work!
 
-```ts
-// tailwind.config.ts
+```ts tailwind.config.ts
 import { defineConfig } from 'windicss/helpers'
 import formsPlugin from 'windicss/plugin/forms'
 
@@ -112,8 +109,7 @@ Oh, and don't worry about the final bundle, in production build `virtual:windi-d
 
 Preflight is enabled on-demanded. If you'd like to completely disable it, you can configure it as below
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'vite-plugin-windicss'
 
 export default defineConfig({
@@ -132,8 +128,7 @@ By default, we scan your source code statically and find all the usages of the u
 
 For that, you will need to specify the possible combinations in the `safelist` options of `vite.config.js`.
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'vite-plugin-windicss'
 
 export default defineConfig({
@@ -143,8 +138,7 @@ export default defineConfig({
 
 Or you can do it this way
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'vite-plugin-windicss'
 
 function range(size, startAt = 1) {
@@ -164,8 +158,7 @@ export default defineConfig({
 On server start, `vite-plugin-windicss` will scan your source code and extract the utility usages. By default,
 only files under `src/` with extensions `vue, html, mdx, pug, jsx, tsx` will be included. If you want to enable scanning for other file types of locations, you can configure it via:
 
-```ts
-// windi.config.js
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -178,8 +171,7 @@ export default defineConfig({
 
 Or in plugin options:
 
-```ts
-// vite.config.js
+```ts vite.config.js
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -199,8 +191,7 @@ export default defineConfig({
 
 Enabled it by 
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 export default {
   attributify: true,
 }
@@ -224,8 +215,7 @@ And use them as you would like:
 
 If you are concerned about naming confliction, you can add custom prefix to attributify mode by:
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 export default {
   attributify: {
     prefix: 'w:',
@@ -247,8 +237,7 @@ export default {
 
 ### [Alias Config](https://windicss.org/posts/v30.html#alias-config)
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 export default {
   alias: {
     'hstack': 'flex items-center',
@@ -304,8 +293,7 @@ See [examples](https://github.com/windicss/vite-plugin-windicss/blob/main/exampl
 
 Install plugin with `npm i -D vite-plugin-windicss` and adapt the svelte config:
 
-```js
-// svelte.config.js
+```js svelte.config.js
 import preprocess from 'svelte-preprocess'
 import WindiCSS from 'vite-plugin-windicss'
 
@@ -326,8 +314,7 @@ export default config
 
 Add `import "virtual:windi.css"` to the top of your $layout.svelte file:
 
-```html
-<!-- $layout.svelte -->
+```html $layout.svelte
 <script>
   import "virtual:windi.css"
 
diff --git a/integrations/vue-cli.md b/integrations/vue-cli.md
index add2f9b1..f6e0d409 100644
--- a/integrations/vue-cli.md
+++ b/integrations/vue-cli.md
@@ -26,8 +26,7 @@ vue add windicss
 
 You can change the behaviour of the plugin by modifying the options in `./vue.config.js`.
 
-```js
-// vue.config.js
+```js vue.config.js
 module.exports = {
   pluginOptions: {
     windicss: {
@@ -50,7 +49,7 @@ If you were previously using `vue-cli-plugin-tailwind`, please consult the [docu
 yarn remove vue-cli-plugin-tailwind
 ```
 
-## Configuration
+## Options
 
 - Default:
 
diff --git a/integrations/webpack.md b/integrations/webpack.md
index dccda5be..24f3603e 100644
--- a/integrations/webpack.md
+++ b/integrations/webpack.md
@@ -52,8 +52,7 @@ If you were previously using Tailwind, please see the [migration guide](/guide/m
 
 You will need to add the plugin to your webpack configuration. If you have access to modify the `webpack.config.js` directly, then you can do the following.
 
-```js
-// webpack.config.js
+```js webpack.config.js
 import WindiCSS from 'windicss-webpack-plugin'
 
 export default {
@@ -69,8 +68,7 @@ export default {
 
 For webpack configurations which don't support the es module import syntax, you can try the following.
 
-```js
-// webpack.config.js
+```js webpack.config.js
 const WindiCSS = require('windicss-webpack-plugin').default
 
 export default {
@@ -85,8 +83,7 @@ export default {
 
 Within an entry point file or something only loaded once, add the import of `windi.css`.
 
-```ts
-// main.js
+```ts main.js
 import 'windi.css'
 // require('windi.css')
 ```
@@ -102,8 +99,7 @@ to modify the scanning.
 
 On server start, Windi will scan your code and extract the utility usages. By default, only files under `src/` with extensions `"html", "vue", "md", "mdx", "pug", "jsx", "tsx", "svelte", "ts", "js", "css", "postcss"` will be included.
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -122,8 +118,7 @@ export default defineConfig({
 
 Preflight is enabled on-demanded. If you'd like to completely disable it, you can configure it as below
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -142,8 +137,7 @@ By default, we scan your source code statically and find all the usages of the u
 
 For that, you will need to specify the possible combinations in the `safelist` options of `windi.config.ts`.
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -153,8 +147,7 @@ export default defineConfig({
 
 Or you can do it this way
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 function range(size, startAt = 1) {
@@ -198,8 +191,7 @@ See [options.ts](https://github.com/windicss/vite-plugin-windicss/blob/main/pack
 
 ### Next.js
 
-**next.config.js**
-```js
+```js next.config.js
 const WindiCSS = require('windicss-webpack-plugin').default
 
 module.exports = {
@@ -211,13 +203,11 @@ module.exports = {
 }
 ```
 
-**pages/_app.js**
-```js
+```js pages/_app.js
 import 'windi.css'
 ```
 
-**windi.config.ts**
-```ts
+```ts windi.config.js
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -233,8 +223,7 @@ Note: JSX usage is experimental. Please report any issues you find.
 
 ### Create React App - CRACO
 
-**craco.config.js**
-```js
+```js craco.config.js
 const WindiCSS = require('windicss-webpack-plugin').default
 
 module.exports = {
@@ -251,13 +240,11 @@ module.exports = {
 }
 ```
 
-**src/index.js**
-```js
+```js src/index.js
 import './virtual:windi.css'
 ```
 
-**windi.config.ts**
-```ts
+```ts windi.config.ts
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
@@ -274,8 +261,7 @@ Note: JSX usage is experimental. Please report any issues you find.
 
 For webpack configurations which don't support the es module import syntax, you can try the following.
 
-```js
-// webpack.config.js
+```js webpack.config.js
 const WindiCSS = require('windicss-webpack-plugin').default
 
 export default {
@@ -293,8 +279,7 @@ require('windi.css')
 
 ### Storybook
 
-**.storybook/main.js**
-```js
+```js .storybook/main.js
 const WindiCSS = require('windicss-webpack-plugin').default
 
 module.exports = {
@@ -306,8 +291,7 @@ module.exports = {
 }
 ```
 
-**.storybook/preview.js**
-```js
+```js .storybook/preview.js
 import 'windi.css'
 ```
 
diff --git a/package.json b/package.json
index d709875e..6138f731 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vitepress dev",
-    "build": "vitepress build",
+    "build": "vue-tsc --noEmit && vitepress build",
     "serve": "vitepress serve",
     "crawl": "docker run --rm -it --env-file=.algolia/.env -e \"CONFIG=$(cat .algolia/config.json | jq -r tostring)\" algolia/docsearch-scraper",
     "lint": "eslint --ext .js,.ts,.md,.vue ./",
@@ -11,48 +11,45 @@
     "analysis": "windicss-analysis"
   },
   "dependencies": {
-    "@docsearch/css": "^3.0.0-alpha.36",
-    "@docsearch/js": "^3.0.0-alpha.36",
-    "@vueuse/core": "^5.0.1",
-    "@vueuse/integrations": "^5.0.1",
-    "@windicss/shared-components": "*",
-    "@windicss/vitepress-theme": "*",
-    "axios": "^0.21.1",
-    "codemirror": "^5.61.1",
+    "@docsearch/css": "1.0.0-alpha.28",
+    "@docsearch/js": "1.0.0-alpha.28",
+    "@vueuse/core": "^6.0.0",
+    "@windicss/shared-components": "^0.1.5",
+    "codemirror": "^5.62.3",
     "codemirror-theme-vars": "^0.1.1",
     "json5": "^2.2.0",
     "lz-string": "^1.4.4",
-    "mitt": "^2.1.0",
+    "mitt": "^3.0.0",
     "prism-theme-vars": "^0.2.2",
-    "prismjs": "^1.23.0",
-    "splitpanes": "^3.0.4",
-    "vue": "^3.1.1",
-    "vue-board": "^0.0.5",
-    "windicss": "^3.1.3"
+    "prismjs": "^1.24.1",
+    "splitpanes": "^3.0.6",
+    "vue": "^3.2.6",
+    "windicss": "^3.1.7"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.6.5",
-    "@antfu/utils": "^0.1.6",
+    "@antfu/utils": "^0.3.0",
     "@docsearch/react": "^1.0.0-alpha.28",
-    "@iconify/json": "^1.1.354",
-    "@types/codemirror": "^5.60.0",
+    "@hannoeru/eslint-config": "^0.2.4",
+    "@iconify/json": "^1.1.394",
+    "@types/codemirror": "^5.60.2",
     "@types/lz-string": "^1.3.34",
-    "@types/node": "^15.12.2",
-    "@types/prismjs": "^1.16.5",
-    "@types/resolve": "^1.20.0",
-    "@vitejs/plugin-vue": "^1.2.3",
-    "esbuild-register": "^2.5.0",
-    "eslint": "^7.28.0",
-    "eslint-plugin-jsonc": "^1.2.1",
+    "@types/node": "^16.7.2",
+    "@types/prismjs": "^1.16.6",
+    "@types/resolve": "^1.20.1",
+    "@vitejs/plugin-vue": "^1.6.0",
+    "@vue/compiler-sfc": "^3.2.6",
+    "esbuild-register": "^3.0.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-markdown": "^2.2.0",
     "resolve": "^1.20.0",
-    "typescript": "^4.3.2",
-    "vite": "^2.3.6",
-    "vite-plugin-components": "^0.10.4",
-    "vite-plugin-icons": "^0.6.1",
+    "typescript": "^4.4.2",
+    "vite": "2.5.0",
+    "vite-plugin-components": "^0.13.2",
+    "vite-plugin-icons": "^0.6.5",
     "vite-plugin-restart": "^0.0.2",
-    "vite-plugin-windicss": "^1.0.2",
-    "vitepress": "^0.14.0",
-    "windicss-analysis": "^0.2.0"
+    "vite-plugin-windicss": "^1.3.0",
+    "vitepress": "^0.16.1",
+    "vue-tsc": "^0.3.0",
+    "windicss-analysis": "^0.3.4"
   }
 }
diff --git a/plugins/community/animations.md b/plugins/community/animations.md
index 01726c53..ed36073e 100644
--- a/plugins/community/animations.md
+++ b/plugins/community/animations.md
@@ -10,8 +10,7 @@ npm install --save-dev @windicss/animations
 
 ## Usage
 
-```js
-// tailwind.config.js
+```js tailwind.config.js
 export default {
   theme: {
     // ...
diff --git a/plugins/community/interaction-variants.md b/plugins/community/interaction-variants.md
index 8aca5c5f..ae01d4d3 100644
--- a/plugins/community/interaction-variants.md
+++ b/plugins/community/interaction-variants.md
@@ -10,8 +10,7 @@ npm install --save-dev @windicss/plugin-interaction-variants
 
 ## Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backgroundColor: {
diff --git a/plugins/community/question-mark.md b/plugins/community/question-mark.md
index aff65ba0..f55c9b79 100644
--- a/plugins/community/question-mark.md
+++ b/plugins/community/question-mark.md
@@ -16,8 +16,7 @@ npm install --save-dev @windicss/plugin-question-mark
 
 Then add the plugin to your `windi.config.js` file:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
diff --git a/plugins/community/scrollbar.md b/plugins/community/scrollbar.md
index 6fef1729..30d0a2b4 100644
--- a/plugins/community/scrollbar.md
+++ b/plugins/community/scrollbar.md
@@ -10,8 +10,7 @@ npm install --save-dev @windicss/plugin-scrollbar
 
 Add it to the plugins array of your Config File.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
diff --git a/plugins/official/aspect-ratio.md b/plugins/official/aspect-ratio.md
index 9578db0a..6d467b8a 100644
--- a/plugins/official/aspect-ratio.md
+++ b/plugins/official/aspect-ratio.md
@@ -1,12 +1,12 @@
-## Aspect Ratio
+# Aspect Ratio
 
-### Utilities
+## Utilities
 
-| Class | Properties |
-| :---- | :--------- |
-| `aspect-none` | position: 'static';<br>paddingBottom: '0';<br>'> *': {<br>&emsp;position: 'static';<br>&emsp;height: 'auto';<br>&emsp;width: 'auto';<br>&emsp;top: 'auto';<br>&emsp;right: 'auto';<br>&emsp;bottom: 'auto';<br>&emsp;left: 'auto';<br>} |
-| `aspect-w-${float}` | --tw-aspect-w: `${float};` |
-| `aspect-h-${float}` | --tw-aspect-h: `${float};` |
+| Class                | Properties                                                                                                                                                                                                                               |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `aspect-none`        | position: 'static';<br>paddingBottom: '0';<br>'> *': {<br>&emsp;position: 'static';<br>&emsp;height: 'auto';<br>&emsp;width: 'auto';<br>&emsp;top: 'auto';<br>&emsp;right: 'auto';<br>&emsp;bottom: 'auto';<br>&emsp;left: 'auto';<br>}  |
+| `aspect-w-${float}`  | --tw-aspect-w: `${float};`                                                                                                                                                                                                               |
+| `aspect-h-${float}`  | --tw-aspect-h: `${float};`                                                                                                                                                                                                               |
 | `aspect-${fraction}` | position: 'relative';<br>paddingBottom: `${percent};`<br>'> *': {<br>&emsp;position: 'absolute';<br>&emsp;height: '100%';<br>&emsp;width: '100%';<br>&emsp;top: '0';<br>&emsp;right: '0';<br>&emsp;bottom: '0';<br>&emsp;left: '0';<br>} |
 
 
@@ -31,10 +31,9 @@
 }
 ```
 
-### Usage
+## Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
diff --git a/plugins/official/filters.md b/plugins/official/filters.md
index 17ab3339..0356664a 100644
--- a/plugins/official/filters.md
+++ b/plugins/official/filters.md
@@ -1,18 +1,17 @@
-## Filters
+# Filters
 
-### Utilities
+## Utilities
 
-| Class | Properties |
-| :---- | :--------- |
-| `blur-none` | filter: none |
-| `blur-${key}` | filter: `blur(${value});`
-| `filter-${key}` | filter: `${value};` |
+| Class             | Properties                   |
+| :---------------- | :--------------------------- |
+| `blur-none`       | filter: none                 |
+| `blur-${key}`     | filter: `blur(${value});`    |
+| `filter-${key}`   | filter: `${value};`          |
 | `backdrop-${key}` | backdrop-filter: `${value};` |
 
-### Usage
+## Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     filter: {
diff --git a/plugins/official/forms.md b/plugins/official/forms.md
index 1bf69d2b..2afdbcf8 100644
--- a/plugins/official/forms.md
+++ b/plugins/official/forms.md
@@ -1,6 +1,6 @@
-## Forms
+# Forms
 
-### Base Styles
+## Base Styles
 
 - `input[type='text']`
 - `input[type='password']`
@@ -20,10 +20,9 @@
 - `select[multiple]`
 - `textarea`
 
-### Usage
+## Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
diff --git a/plugins/official/line-clamp.md b/plugins/official/line-clamp.md
index 5bde6d95..13bde5a8 100644
--- a/plugins/official/line-clamp.md
+++ b/plugins/official/line-clamp.md
@@ -1,16 +1,15 @@
-## Line Clamp
+# Line Clamp
 
-### Utilities
+## Utilities
 
 | Class | Properties |
 | :---- | :--------- |
 | `line-clamp-${int}` | overflow: hidden;<br>display: -webkit-box;<br>-webkit-box-orient: vertical;<br>-webkit-line-clamp: `${int};` |
 | `line-clamp-none` | -webkit-line-clamp: unset; |
 
-### Usage
+## Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   extend: {
     lineClamp: {
diff --git a/plugins/official/scroll-snap.md b/plugins/official/scroll-snap.md
index d18c86d6..52efc637 100644
--- a/plugins/official/scroll-snap.md
+++ b/plugins/official/scroll-snap.md
@@ -1,42 +1,41 @@
-## Scroll Snap
+# Scroll Snap
 
 inspired by [tailwindcss-scroll-snap](https://github.com/innocenzi/tailwindcss-scroll-snap)
 
 
-### Utilities
-
-| Class | Properties | Description |
-| :---- | :--------- | :---------- |
-| `snap` | scroll-snap-type: <br> var(--scroll-snap-axis, both) <br> var(--scroll-snap-strictness, mandatory) | main snap class |
-| __Strictness__ | | |
-| `snap-none` | --scroll-snap-strictness: none | |
-| `snap-mandatory` | --scroll-snap-strictness: mandatory | |
-| `snap-proximity` | --scroll-snap-strictness: proximity | |
-| __Axis__ | | |
-| `snap-x` | --scroll-snap-axis: x | |
-| `snap-y` | --scroll-snap-axis: y | |
-| `snap-block` | --scroll-snap-axis: block | |
-| `snap-inline` | --scroll-snap-axis: inline | |
-| `snap-both` | --scroll-snap-axis: both | |
-| __Align__ | | |
-| `snap-start` | scroll-snap-align: start | |
-| `snap-end` | scroll-snap-align: end | |
-| `snap-center` | scroll-snap-align: center | |
-| __Stop__ | | |
-| `snap-normal` | scroll-snap-stop: normal | |
-| `snap-always` | scroll-snap-stop: always | |
-| __Margin__ | | |
-| `snap-m${direction}-${value}` | scroll-snap-margin`${direction}`: `${value}` | same [Margin Utilities](/utilities/spacing.html#margin-%E2%AD%90%EF%B8%8F) |
-| __Padding__ | | |
-| `snap-p${direction}-${value}` | scroll-snap-padding`${direction}`: `${value}` | same [Padding Utilities](/utilities/spacing.html#padding-%E2%AD%90%EF%B8%8F) |
-| __Other__ | | |
-| `scrollbar-hide` | scrollbar-width: none<br>::-webkit-scrollbar: {<br>&nbsp;&nbsp;display: none<br>} | visual hide scrollbar |
-
-
-### Usage
-
-```js
-// windi.config.js
+## Utilities
+
+| Class                         | Properties                                                                                         | Description                                                                  |
+| :---------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
+| `snap`                        | scroll-snap-type: <br> var(--scroll-snap-axis, both) <br> var(--scroll-snap-strictness, mandatory) | main snap class                                                              |
+| __Strictness__                |                                                                                                    |                                                                              |
+| `snap-none`                   | --scroll-snap-strictness: none                                                                     |                                                                              |
+| `snap-mandatory`              | --scroll-snap-strictness: mandatory                                                                |                                                                              |
+| `snap-proximity`              | --scroll-snap-strictness: proximity                                                                |                                                                              |
+| __Axis__                      |                                                                                                    |                                                                              |
+| `snap-x`                      | --scroll-snap-axis: x                                                                              |                                                                              |
+| `snap-y`                      | --scroll-snap-axis: y                                                                              |                                                                              |
+| `snap-block`                  | --scroll-snap-axis: block                                                                          |                                                                              |
+| `snap-inline`                 | --scroll-snap-axis: inline                                                                         |                                                                              |
+| `snap-both`                   | --scroll-snap-axis: both                                                                           |                                                                              |
+| __Align__                     |                                                                                                    |                                                                              |
+| `snap-start`                  | scroll-snap-align: start                                                                           |                                                                              |
+| `snap-end`                    | scroll-snap-align: end                                                                             |                                                                              |
+| `snap-center`                 | scroll-snap-align: center                                                                          |                                                                              |
+| __Stop__                      |                                                                                                    |                                                                              |
+| `snap-normal`                 | scroll-snap-stop: normal                                                                           |                                                                              |
+| `snap-always`                 | scroll-snap-stop: always                                                                           |                                                                              |
+| __Margin__                    |                                                                                                    |                                                                              |
+| `snap-m${direction}-${value}` | scroll-snap-margin`${direction}`: `${value}`                                                       | same [Margin Utilities](/utilities/spacing.html#margin-%E2%AD%90%EF%B8%8F)   |
+| __Padding__                   |                                                                                                    |                                                                              |
+| `snap-p${direction}-${value}` | scroll-snap-padding`${direction}`: `${value}`                                                      | same [Padding Utilities](/utilities/spacing.html#padding-%E2%AD%90%EF%B8%8F) |
+| __Other__                     |                                                                                                    |                                                                              |
+| `scrollbar-hide`              | scrollbar-width: none<br>::-webkit-scrollbar: {<br>&nbsp;&nbsp;display: none<br>}                  | visual hide scrollbar                                                        |
+
+
+## Usage
+
+```js windi.config.js
 export default {
   plugins: [
     require('windicss/plugin/scroll-snap'),
@@ -47,8 +46,7 @@ export default {
 
 with TypeScript:
 
-```ts
-// windi.config.ts
+```ts windi.config.ts
 import scrollSnapPlugin from 'windicss/plugin/scroll-snap'
 
 export default defineConfig({
diff --git a/plugins/official/typography.md b/plugins/official/typography.md
index a0efbeaa..492068a3 100644
--- a/plugins/official/typography.md
+++ b/plugins/official/typography.md
@@ -1,14 +1,14 @@
-## Typography
+# Typography
 
-### Utilities
+## Utilities
 
-| Class       |  Body font size |
+| Class       | Body font size  |
 | :---------- | :-------------- |
 | `prose-sm`  | 0.875rem (14px) |
-| `prose`     |     1rem (16px) |
+| `prose`     | 1rem (16px)     |
 | `prose-lg`  | 1.125rem (18px) |
-| `prose-xl`  |  1.25rem (20px) |
-| `prose-2xl` |   1.5rem (24px) |
+| `prose-xl`  | 1.25rem (20px)  |
+| `prose-2xl` | 1.5rem (24px)   |
 
 | Class          | Link color   |
 | :------------- | :----------- |
@@ -20,10 +20,9 @@
 | `prose-purple` | `purple.600` |
 | `prose-pink`   | `pink.600`   |
 
-### Basic Usage
+## Basic Usage
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
@@ -35,10 +34,9 @@ export default {
 }
 ```
 
-### Disabling size modifiers
+## Disabling size modifiers
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
@@ -52,10 +50,9 @@ export default {
 }
 ```
 
-### Customization
+## Customization
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
diff --git a/plugins/transform.md b/plugins/transform.md
index f49f860d..d1be23fd 100644
--- a/plugins/transform.md
+++ b/plugins/transform.md
@@ -2,9 +2,7 @@
 
 For tailwind plugins, we generally use Transform API to support them. You can import them to your config like below:
 
-```js
-// windi.config.js
-
+```js windi.config.js
 const { transform } = require('windicss/helpers')
 
 export default {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fe320b3..9a05cb9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,268 +1,175 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@antfu/eslint-config': ^0.6.5
-  '@antfu/utils': ^0.1.6
-  '@docsearch/css': ^3.0.0-alpha.36
-  '@docsearch/js': ^3.0.0-alpha.36
+  '@antfu/utils': ^0.3.0
+  '@docsearch/css': 1.0.0-alpha.28
+  '@docsearch/js': 1.0.0-alpha.28
   '@docsearch/react': ^1.0.0-alpha.28
-  '@iconify/json': ^1.1.354
-  '@types/codemirror': ^5.60.0
+  '@hannoeru/eslint-config': ^0.2.4
+  '@iconify/json': ^1.1.394
+  '@types/codemirror': ^5.60.2
   '@types/lz-string': ^1.3.34
-  '@types/node': ^15.12.2
-  '@types/prismjs': ^1.16.5
-  '@types/resolve': ^1.20.0
-  '@vitejs/plugin-vue': ^1.2.3
-  '@vueuse/core': ^5.0.1
-  '@vueuse/integrations': ^5.0.1
-  '@windicss/shared-components': '*'
-  '@windicss/vitepress-theme': '*'
-  axios: ^0.21.1
-  codemirror: ^5.61.1
+  '@types/node': ^16.7.2
+  '@types/prismjs': ^1.16.6
+  '@types/resolve': ^1.20.1
+  '@vitejs/plugin-vue': ^1.6.0
+  '@vue/compiler-sfc': ^3.2.6
+  '@vueuse/core': ^6.0.0
+  '@windicss/shared-components': ^0.1.5
+  codemirror: ^5.62.3
   codemirror-theme-vars: ^0.1.1
-  esbuild-register: ^2.5.0
-  eslint: ^7.28.0
-  eslint-plugin-jsonc: ^1.2.1
+  esbuild-register: ^3.0.0
+  eslint: ^7.32.0
   eslint-plugin-markdown: ^2.2.0
   json5: ^2.2.0
   lz-string: ^1.4.4
-  mitt: ^2.1.0
+  mitt: ^3.0.0
   prism-theme-vars: ^0.2.2
-  prismjs: ^1.23.0
+  prismjs: ^1.24.1
   resolve: ^1.20.0
-  splitpanes: ^3.0.4
-  typescript: ^4.3.2
-  vite: ^2.3.6
-  vite-plugin-components: ^0.10.4
-  vite-plugin-icons: ^0.6.1
+  splitpanes: ^3.0.6
+  typescript: ^4.4.2
+  vite: 2.5.0
+  vite-plugin-components: ^0.13.2
+  vite-plugin-icons: ^0.6.5
   vite-plugin-restart: ^0.0.2
-  vite-plugin-windicss: ^1.0.2
-  vitepress: ^0.14.0
-  vue: ^3.1.1
-  vue-board: ^0.0.5
-  windicss: ^3.1.3
-  windicss-analysis: ^0.2.0
+  vite-plugin-windicss: ^1.3.0
+  vitepress: ^0.16.1
+  vue: ^3.2.6
+  vue-tsc: ^0.3.0
+  windicss: ^3.1.7
+  windicss-analysis: ^0.3.4
 
 dependencies:
-  '@docsearch/css': 3.0.0-alpha.36
-  '@docsearch/js': 3.0.0-alpha.36
-  '@vueuse/core': 5.0.1_vue@3.1.1
-  '@vueuse/integrations': 5.0.1_vue@3.1.1
-  '@windicss/shared-components': 0.1.3_vue@3.1.1+windicss@3.1.3
-  '@windicss/vitepress-theme': 0.1.6
-  axios: 0.21.1
-  codemirror: 5.61.1
+  '@docsearch/css': 1.0.0-alpha.28
+  '@docsearch/js': 1.0.0-alpha.28
+  '@vueuse/core': 6.0.0_vue@3.2.6
+  '@windicss/shared-components': 0.1.5_vue@3.2.6+windicss@3.1.7
+  codemirror: 5.62.3
   codemirror-theme-vars: 0.1.1
   json5: 2.2.0
   lz-string: 1.4.4
-  mitt: 2.1.0
+  mitt: 3.0.0
   prism-theme-vars: 0.2.2
-  prismjs: 1.23.0
-  splitpanes: 3.0.4
-  vue: 3.1.1
-  vue-board: 0.0.5_vue@3.1.1
-  windicss: 3.1.3
+  prismjs: 1.24.1
+  splitpanes: 3.0.6
+  vue: 3.2.6
+  windicss: 3.1.7
 
 devDependencies:
-  '@antfu/eslint-config': 0.6.5_eslint@7.28.0+typescript@4.3.2
-  '@antfu/utils': 0.1.6
+  '@antfu/utils': 0.3.0
   '@docsearch/react': 1.0.0-alpha.28
-  '@iconify/json': 1.1.354
-  '@types/codemirror': 5.60.0
+  '@hannoeru/eslint-config': 0.2.4_eslint@7.32.0+typescript@4.4.2
+  '@iconify/json': 1.1.394
+  '@types/codemirror': 5.60.2
   '@types/lz-string': 1.3.34
-  '@types/node': 15.12.2
-  '@types/prismjs': 1.16.5
-  '@types/resolve': 1.20.0
-  '@vitejs/plugin-vue': 1.2.3
-  esbuild-register: 2.5.0
-  eslint: 7.28.0
-  eslint-plugin-jsonc: 1.2.1_eslint@7.28.0
-  eslint-plugin-markdown: 2.2.0_eslint@7.28.0
+  '@types/node': 16.7.2
+  '@types/prismjs': 1.16.6
+  '@types/resolve': 1.20.1
+  '@vitejs/plugin-vue': 1.6.0_@vue+compiler-sfc@3.2.6
+  '@vue/compiler-sfc': 3.2.6
+  esbuild-register: 3.0.0
+  eslint: 7.32.0
+  eslint-plugin-markdown: 2.2.0_eslint@7.32.0
   resolve: 1.20.0
-  typescript: 4.3.2
-  vite: 2.3.6
-  vite-plugin-components: 0.10.4_vite@2.3.6
-  vite-plugin-icons: 0.6.1_@iconify+json@1.1.354
-  vite-plugin-restart: 0.0.2_vite@2.3.6
-  vite-plugin-windicss: 1.0.2_vite@2.3.6
-  vitepress: 0.14.0
-  windicss-analysis: 0.2.0
+  typescript: 4.4.2
+  vite: 2.5.0
+  vite-plugin-components: 0.13.2_vite@2.5.0
+  vite-plugin-icons: 0.6.5_03d2c571c47277889d0f7cb457412944
+  vite-plugin-restart: 0.0.2_vite@2.5.0
+  vite-plugin-windicss: 1.3.0_typescript@4.4.2+vite@2.5.0
+  vitepress: 0.16.1
+  vue-tsc: 0.3.0_typescript@4.4.2
+  windicss-analysis: 0.3.4_typescript@4.4.2
 
 packages:
 
-  /@algolia/autocomplete-core/1.0.0-alpha.44:
-    resolution: {integrity: sha512-2iMXthldMIDXtlbg9omRKLgg1bLo2ZzINAEqwhNjUeyj1ceEyL1ck6FY0VnJpf2LsjmNthHCz2BuFk+nYUeDNA==}
+  /@algolia/cache-browser-local-storage/4.10.5:
+    resolution: {integrity: sha512-cfX2rEKOtuuljcGI5DMDHClwZHdDqd2nT2Ohsc8aHtBiz6bUxKVyIqxr2gaC6tU8AgPtrTVBzcxCA+UavXpKww==}
     dependencies:
-      '@algolia/autocomplete-shared': 1.0.0-alpha.44
-    dev: false
-
-  /@algolia/autocomplete-preset-algolia/1.0.0-alpha.44_algoliasearch@4.9.1:
-    resolution: {integrity: sha512-DCHwo5ovzg9k2ejUolGNTLFnIA7GpsrkbNJTy1sFbMnYfBmeK8egZPZnEl7lBTr27OaZu7IkWpTepLVSztZyng==}
-    peerDependencies:
-      '@algolia/client-search': ^4.5.1
-      algoliasearch: ^4.5.1
-    dependencies:
-      '@algolia/autocomplete-shared': 1.0.0-alpha.44
-      algoliasearch: 4.9.1
-    dev: false
-
-  /@algolia/autocomplete-shared/1.0.0-alpha.44:
-    resolution: {integrity: sha512-2oQZPERYV+yNx/yoVWYjZZdOqsitJ5dfxXJjL18yczOXH6ujnsq+DTczSrX+RjzjQdVeJ1UAG053EJQF/FOiMg==}
-    dev: false
+      '@algolia/cache-common': 4.10.5
 
-  /@algolia/cache-browser-local-storage/4.9.1:
-    resolution: {integrity: sha512-bAUU9vKCy45uTTlzJw0LYu1IjoZsmzL6lgjaVFaW1crhX/4P+JD5ReQv3n/wpiXSFaHq1WEO3WyH2g3ymzeipQ==}
-    dependencies:
-      '@algolia/cache-common': 4.9.1
-
-  /@algolia/cache-common/4.9.1:
-    resolution: {integrity: sha512-tcvw4mOfFy44V4ZxDEy9wNGr6vFROZKRpXKTEBgdw/WBn6mX51H1ar4RWtceDEcDU4H5fIv5tsY3ip2hU+fTPg==}
-
-  /@algolia/cache-in-memory/4.9.1:
-    resolution: {integrity: sha512-IEJrHonvdymW2CnRfJtsTVWyfAH05xPEFkGXGCw00+6JNCj8Dln3TeaRLiaaY1srlyGedkemekQm1/Xb46CGOQ==}
-    dependencies:
-      '@algolia/cache-common': 4.9.1
-
-  /@algolia/client-account/4.9.1:
-    resolution: {integrity: sha512-Shpjeuwb7i2LR5QuWREb6UbEQLGB+Pl/J5+wPgILJDP/uWp7jpl0ase9mYNQGKj7TjztpSpQCPZ3dSHPnzZPfw==}
-    dependencies:
-      '@algolia/client-common': 4.9.1
-      '@algolia/client-search': 4.9.1
-      '@algolia/transporter': 4.9.1
+  /@algolia/cache-common/4.10.5:
+    resolution: {integrity: sha512-1mClwdmTHll+OnHkG+yeRoFM17kSxDs4qXkjf6rNZhoZGXDvfYLy3YcZ1FX4Kyz0DJv8aroq5RYGBDsWkHj6Tw==}
 
-  /@algolia/client-analytics/4.9.1:
-    resolution: {integrity: sha512-/g6OkOSIA+A0t/tjvbL6iG/zV4El4LPFgv/tcAYHTH27BmlNtnEXw+iFpGjeUlQoPily9WVB3QNLMJkaNwL3HA==}
+  /@algolia/cache-in-memory/4.10.5:
+    resolution: {integrity: sha512-+ciQnfIGi5wjMk02XhEY8fmy2pzy+oY1nIIfu8LBOglaSipCRAtjk6WhHc7/KIbXPiYzIwuDbM2K1+YOwSGjwA==}
     dependencies:
-      '@algolia/client-common': 4.9.1
-      '@algolia/client-search': 4.9.1
-      '@algolia/requester-common': 4.9.1
-      '@algolia/transporter': 4.9.1
+      '@algolia/cache-common': 4.10.5
 
-  /@algolia/client-common/4.9.1:
-    resolution: {integrity: sha512-UziRTZ8km3qwoVPIyEre8TV6V+MX7UtbfVqPmSafZ0xu41UUZ+sL56YoKjOXkbKuybeIC9prXMGy/ID5bXkTqg==}
+  /@algolia/client-account/4.10.5:
+    resolution: {integrity: sha512-I9UkSS2glXm7RBZYZIALjBMmXSQbw/fI/djPcBHxiwXIheNIlqIFl2SNPkvihpPF979BSkzjqdJNRPhE1vku3Q==}
     dependencies:
-      '@algolia/requester-common': 4.9.1
-      '@algolia/transporter': 4.9.1
+      '@algolia/client-common': 4.10.5
+      '@algolia/client-search': 4.10.5
+      '@algolia/transporter': 4.10.5
 
-  /@algolia/client-recommendation/4.9.1:
-    resolution: {integrity: sha512-Drtvvm1PNIOpYf4HFlkPFstFQ3IsN+TRmxur2F7y6Faplb5ybISa8ithu1tmlTdyTf3A78hQUQjgJet6qD2XZw==}
+  /@algolia/client-analytics/4.10.5:
+    resolution: {integrity: sha512-h2owwJSkovPxzc+xIsjY1pMl0gj+jdVwP9rcnGjlaTY2fqHbSLrR9yvGyyr6305LvTppxsQnfAbRdE/5Z3eFxw==}
     dependencies:
-      '@algolia/client-common': 4.9.1
-      '@algolia/requester-common': 4.9.1
-      '@algolia/transporter': 4.9.1
+      '@algolia/client-common': 4.10.5
+      '@algolia/client-search': 4.10.5
+      '@algolia/requester-common': 4.10.5
+      '@algolia/transporter': 4.10.5
 
-  /@algolia/client-search/4.9.1:
-    resolution: {integrity: sha512-r9Cw2r8kJr45iYncFDht6EshARghU265wuY8Q8oHrpFHjAziEYdsUOdNmQKbsSH5J3gLjDPx1EI5DzVd6ivn3w==}
+  /@algolia/client-common/4.10.5:
+    resolution: {integrity: sha512-21FAvIai5qm8DVmZHm2Gp4LssQ/a0nWwMchAx+1hIRj1TX7OcdW6oZDPyZ8asQdvTtK7rStQrRnD8a95SCUnzA==}
     dependencies:
-      '@algolia/client-common': 4.9.1
-      '@algolia/requester-common': 4.9.1
-      '@algolia/transporter': 4.9.1
+      '@algolia/requester-common': 4.10.5
+      '@algolia/transporter': 4.10.5
 
-  /@algolia/logger-common/4.9.1:
-    resolution: {integrity: sha512-9mPrbFlFyPT7or/7PXTiJjyOewWB9QRkZKVXkt5zHAUiUzGxmmdpJIGpPv3YQnDur8lXrXaRI0MHXUuIDMY1ng==}
-
-  /@algolia/logger-console/4.9.1:
-    resolution: {integrity: sha512-74VUwjtFjFpjZpi3QoHIPv0kcr3vWUSHX/Vs8PJW3lPsD4CgyhFenQbG9v+ZnyH0JrJwiYTtzfmrVh7IMWZGrQ==}
+  /@algolia/client-personalization/4.10.5:
+    resolution: {integrity: sha512-nH+IyFKBi8tCyzGOanJTbXC5t4dspSovX3+ABfmwKWUYllYzmiQNFUadpb3qo+MLA3jFx5IwBesjneN6dD5o3w==}
     dependencies:
-      '@algolia/logger-common': 4.9.1
+      '@algolia/client-common': 4.10.5
+      '@algolia/requester-common': 4.10.5
+      '@algolia/transporter': 4.10.5
 
-  /@algolia/requester-browser-xhr/4.9.1:
-    resolution: {integrity: sha512-zc46tk5o0ikOAz3uYiRAMxC2iVKAMFKT7nNZnLB5IzT0uqAh7pz/+D/UvIxP4bKmsllpBSnPcpfQF+OI4Ag/BA==}
+  /@algolia/client-search/4.10.5:
+    resolution: {integrity: sha512-1eQFMz9uodrc5OM+9HeT+hHcfR1E1AsgFWXwyJ9Q3xejA2c1c4eObGgOgC9ZoshuHHdptaTN1m3rexqAxXRDBg==}
     dependencies:
-      '@algolia/requester-common': 4.9.1
+      '@algolia/client-common': 4.10.5
+      '@algolia/requester-common': 4.10.5
+      '@algolia/transporter': 4.10.5
 
-  /@algolia/requester-common/4.9.1:
-    resolution: {integrity: sha512-9hPgXnlCSbqJqF69M5x5WN3h51Dc+mk/iWNeJSVxExHGvCDfBBZd0v6S15i8q2a9cD1I2RnhMpbnX5BmGtabVA==}
+  /@algolia/logger-common/4.10.5:
+    resolution: {integrity: sha512-gRJo9zt1UYP4k3woEmZm4iuEBIQd/FrArIsjzsL/b+ihNoOqIxZKTSuGFU4UUZOEhvmxDReiA4gzvQXG+TMTmA==}
 
-  /@algolia/requester-node-http/4.9.1:
-    resolution: {integrity: sha512-vYNVbSCuyrCSCjHBQJk+tLZtWCjvvDf5tSbRJjyJYMqpnXuIuP7gZm24iHil4NPYBhbBj5NU2ZDAhc/gTn75Ag==}
+  /@algolia/logger-console/4.10.5:
+    resolution: {integrity: sha512-4WfIbn4253EDU12u9UiYvz+QTvAXDv39mKNg9xSoMCjKE5szcQxfcSczw2byc6pYhahOJ9PmxPBfs1doqsdTKQ==}
     dependencies:
-      '@algolia/requester-common': 4.9.1
+      '@algolia/logger-common': 4.10.5
 
-  /@algolia/transporter/4.9.1:
-    resolution: {integrity: sha512-AbjFfGzX+cAuj7Qyc536OxIQzjFOA5FU2ANGStx8LBH+AKXScwfkx67C05riuaRR5adSCLMSEbVvUscH0nF+6A==}
+  /@algolia/requester-browser-xhr/4.10.5:
+    resolution: {integrity: sha512-53/MURQEqtK+bGdfq4ITSPwTh5hnADU99qzvpAINGQveUFNSFGERipJxHjTJjIrjFz3vxj5kKwjtxDnU6ygO9g==}
     dependencies:
-      '@algolia/cache-common': 4.9.1
-      '@algolia/logger-common': 4.9.1
-      '@algolia/requester-common': 4.9.1
+      '@algolia/requester-common': 4.10.5
 
-  /@antfu/eslint-config-basic/0.6.5_eslint@7.28.0:
-    resolution: {integrity: sha512-nPk/rvcotk9pVU+GuQJti7IcIn///AWXjK1Qdsw9mZudqJNbSgmBeWjALcor8rPuhY34S4+JoNBjoChzl6mzQg==}
-    peerDependencies:
-      eslint: '>=7.4.0'
-    dependencies:
-      eslint: 7.28.0
-      eslint-config-standard: 16.0.3_9b1ed0fbb6e25a41b84e6554ef04a7db
-      eslint-plugin-eslint-comments: 3.2.0_eslint@7.28.0
-      eslint-plugin-html: 6.1.2
-      eslint-plugin-import: 2.23.4_eslint@7.28.0
-      eslint-plugin-jsonc: 1.2.1_eslint@7.28.0
-      eslint-plugin-node: 11.1.0_eslint@7.28.0
-      eslint-plugin-promise: 4.3.1
-      eslint-plugin-unicorn: 28.0.2_eslint@7.28.0
-      eslint-plugin-yml: 0.8.1_eslint@7.28.0
-      jsonc-eslint-parser: 1.0.1
-      yaml-eslint-parser: 0.3.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  /@algolia/requester-common/4.10.5:
+    resolution: {integrity: sha512-UkVa1Oyuj6NPiAEt5ZvrbVopEv1m/mKqjs40KLB+dvfZnNcj+9Fry4Oxnt15HMy/HLORXsx4UwcthAvBuOXE9Q==}
 
-  /@antfu/eslint-config-react/0.6.5_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-qAYIMRkd6RcyzqBHMawDPTmnMql5/DNZjS87Laeqrp1DA6oacGhl94TY4Q1FUCQfjxzRsvKFxumArIbDSCg8Fw==}
-    peerDependencies:
-      eslint: '>=7.4.0'
+  /@algolia/requester-node-http/4.10.5:
+    resolution: {integrity: sha512-aNEKVKXL4fiiC+bS7yJwAHdxln81ieBwY3tsMCtM4zF9f5KwCzY2OtN4WKEZa5AAADVcghSAUdyjs4AcGUlO5w==}
     dependencies:
-      '@antfu/eslint-config-ts': 0.6.5_eslint@7.28.0+typescript@4.3.2
-      eslint: 7.28.0
-      eslint-plugin-react: 7.24.0_eslint@7.28.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
+      '@algolia/requester-common': 4.10.5
 
-  /@antfu/eslint-config-ts/0.6.5_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-MAPY34AZNxf8//R5JoWNImw4niYl2lJgMhhKlcjfYq39Iu/v31tJ6Cu5xr4tGWuUvwvAjvOmlB/7LQZatly0mw==}
-    peerDependencies:
-      eslint: '>=7.4.0'
-      typescript: '>=3.9'
+  /@algolia/transporter/4.10.5:
+    resolution: {integrity: sha512-F8DLkmIlvCoMwSCZA3FKHtmdjH3o5clbt0pi2ktFStVNpC6ZDmY307HcK619bKP5xW6h8sVJhcvrLB775D2cyA==}
     dependencies:
-      '@antfu/eslint-config-basic': 0.6.5_eslint@7.28.0
-      '@typescript-eslint/eslint-plugin': 4.26.1_c8cbd5e7f5f92609ec78d991aced454b
-      '@typescript-eslint/parser': 4.26.1_eslint@7.28.0+typescript@4.3.2
-      eslint: 7.28.0
-      typescript: 4.3.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+      '@algolia/cache-common': 4.10.5
+      '@algolia/logger-common': 4.10.5
+      '@algolia/requester-common': 4.10.5
 
-  /@antfu/eslint-config-vue/0.6.5_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-bt32OW58u4Po76dkr3xGb5jGdXus7kQbTdrX7CfZOo9I/EzYXm4Vm80L4eB99RUfx2aRvsF8ADXfmONSQQ5lvA==}
-    peerDependencies:
-      eslint: '>=7.4.0'
+  /@antfu/utils/0.2.4:
+    resolution: {integrity: sha512-2bZNkVfL9IZESmvE26UKi8SzyvSoaIsGXDcnbHFMtmGMqUiB1fXpAJ1ijGf+tSqKRQ5yagck2U1Qk0p+705/kw==}
     dependencies:
-      '@antfu/eslint-config-ts': 0.6.5_eslint@7.28.0+typescript@4.3.2
-      eslint: 7.28.0
-      eslint-plugin-vue: 7.7.0_eslint@7.28.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+      '@types/throttle-debounce': 2.1.0
     dev: true
 
-  /@antfu/eslint-config/0.6.5_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-zCy9Zg54DJ5UfWYTX568jBmKAGgXGSQJneRyG1bX13ifgQlWQwdvu0OF/eggEOkUORVHuu/YeHtex60lRmzJcw==}
-    peerDependencies:
-      eslint: '>=7.4.0'
+  /@antfu/utils/0.3.0:
+    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
     dependencies:
-      '@antfu/eslint-config-react': 0.6.5_eslint@7.28.0+typescript@4.3.2
-      '@antfu/eslint-config-vue': 0.6.5_eslint@7.28.0+typescript@4.3.2
-      eslint: 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
-  /@antfu/utils/0.1.6:
-    resolution: {integrity: sha512-1lcCCEOv4gYlYa/OCjM2JA5nbNll04mNMhSXYu4QetbG14m3LdCvkyDAPlc2AmqRQEqkKpJldRL++9sPpOIydw==}
+      '@types/throttle-debounce': 2.1.0
     dev: true
 
   /@arr/every/1.0.1:
@@ -273,34 +180,36 @@ packages:
   /@babel/code-frame/7.12.11:
     resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
     dependencies:
-      '@babel/highlight': 7.14.0
+      '@babel/highlight': 7.14.5
     dev: true
 
-  /@babel/code-frame/7.12.13:
-    resolution: {integrity: sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==}
+  /@babel/code-frame/7.14.5:
+    resolution: {integrity: sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.14.0
+      '@babel/highlight': 7.14.5
     dev: true
 
-  /@babel/compat-data/7.14.4:
-    resolution: {integrity: sha512-i2wXrWQNkH6JplJQGn3Rd2I4Pij8GdHkXwHMxm+zV5YG/Jci+bCNrWZEWC4o+umiDkRrRs4dVzH3X4GP7vyjQQ==}
+  /@babel/compat-data/7.15.0:
+    resolution: {integrity: sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==}
+    engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core/7.14.3:
-    resolution: {integrity: sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==}
+  /@babel/core/7.15.0:
+    resolution: {integrity: sha512-tXtmTminrze5HEUPn/a0JtOzzfp0nk+UEXQ/tqIJo3WDGypl/2OFQEMll/zSFU8f/lfmfLXvTaORHF3cfXIQMw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.12.13
-      '@babel/generator': 7.14.3
-      '@babel/helper-compilation-targets': 7.14.4_@babel+core@7.14.3
-      '@babel/helper-module-transforms': 7.14.2
-      '@babel/helpers': 7.14.0
-      '@babel/parser': 7.14.4
-      '@babel/template': 7.12.13
-      '@babel/traverse': 7.14.2
-      '@babel/types': 7.14.4
-      convert-source-map: 1.7.0
-      debug: 4.3.1
+      '@babel/code-frame': 7.14.5
+      '@babel/generator': 7.15.0
+      '@babel/helper-compilation-targets': 7.15.0_@babel+core@7.15.0
+      '@babel/helper-module-transforms': 7.15.0
+      '@babel/helpers': 7.15.3
+      '@babel/parser': 7.15.3
+      '@babel/template': 7.14.5
+      '@babel/traverse': 7.15.0
+      '@babel/types': 7.15.0
+      convert-source-map: 1.8.0
+      debug: 4.3.2
       gensync: 1.0.0-beta.2
       json5: 2.2.0
       semver: 6.3.0
@@ -309,197 +218,207 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/eslint-parser/7.14.4_@babel+core@7.14.3+eslint@7.28.0:
-    resolution: {integrity: sha512-7CTckFLPBGEfCKqlrnJq2PIId3UmJ5hW+D4dsv/VvuA5DapgqyZFCttq+8oeRIJMZQizFIe5gel3xm2SbrqlYA==}
+  /@babel/eslint-parser/7.15.0_@babel+core@7.15.0+eslint@7.32.0:
+    resolution: {integrity: sha512-+gSPtjSBxOZz4Uh8Ggqu7HbfpB8cT1LwW0DnVVLZEJvzXauiD0Di3zszcBkRmfGGrLdYeHUwcflG7i3tr9kQlw==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
       '@babel/core': '>=7.11.0'
       eslint: '>=7.5.0'
     dependencies:
-      '@babel/core': 7.14.3
-      eslint: 7.28.0
+      '@babel/core': 7.15.0
+      eslint: 7.32.0
       eslint-scope: 5.1.1
       eslint-visitor-keys: 2.1.0
       semver: 6.3.0
     dev: true
 
-  /@babel/generator/7.14.3:
-    resolution: {integrity: sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==}
+  /@babel/generator/7.15.0:
+    resolution: {integrity: sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
       jsesc: 2.5.2
       source-map: 0.5.7
     dev: true
 
-  /@babel/helper-compilation-targets/7.14.4_@babel+core@7.14.3:
-    resolution: {integrity: sha512-JgdzOYZ/qGaKTVkn5qEDV/SXAh8KcyUVkCoSWGN8T3bwrgd6m+/dJa2kVGi6RJYJgEYPBdZ84BZp9dUjNWkBaA==}
+  /@babel/helper-compilation-targets/7.15.0_@babel+core@7.15.0:
+    resolution: {integrity: sha512-h+/9t0ncd4jfZ8wsdAsoIxSa61qhBYlycXiHWqJaQBCXAhDCMbPRSMTGnZIkkmt1u4ag+UQmuqcILwqKzZ4N2A==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/compat-data': 7.14.4
-      '@babel/core': 7.14.3
-      '@babel/helper-validator-option': 7.12.17
-      browserslist: 4.16.6
+      '@babel/compat-data': 7.15.0
+      '@babel/core': 7.15.0
+      '@babel/helper-validator-option': 7.14.5
+      browserslist: 4.16.8
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-function-name/7.14.2:
-    resolution: {integrity: sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==}
+  /@babel/helper-function-name/7.14.5:
+    resolution: {integrity: sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-get-function-arity': 7.12.13
-      '@babel/template': 7.12.13
-      '@babel/types': 7.14.4
+      '@babel/helper-get-function-arity': 7.14.5
+      '@babel/template': 7.14.5
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-get-function-arity/7.12.13:
-    resolution: {integrity: sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==}
+  /@babel/helper-get-function-arity/7.14.5:
+    resolution: {integrity: sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-member-expression-to-functions/7.13.12:
-    resolution: {integrity: sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==}
+  /@babel/helper-hoist-variables/7.14.5:
+    resolution: {integrity: sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-module-imports/7.13.12:
-    resolution: {integrity: sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==}
+  /@babel/helper-member-expression-to-functions/7.15.0:
+    resolution: {integrity: sha512-Jq8H8U2kYiafuj2xMTPQwkTBnEEdGKpT35lJEQsRRjnG0LW3neucsaMWLgKcwu3OHKNeYugfw+Z20BXBSEs2Lg==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-module-transforms/7.14.2:
-    resolution: {integrity: sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==}
+  /@babel/helper-module-imports/7.14.5:
+    resolution: {integrity: sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-module-imports': 7.13.12
-      '@babel/helper-replace-supers': 7.14.4
-      '@babel/helper-simple-access': 7.13.12
-      '@babel/helper-split-export-declaration': 7.12.13
-      '@babel/helper-validator-identifier': 7.14.0
-      '@babel/template': 7.12.13
-      '@babel/traverse': 7.14.2
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
+    dev: true
+
+  /@babel/helper-module-transforms/7.15.0:
+    resolution: {integrity: sha512-RkGiW5Rer7fpXv9m1B3iHIFDZdItnO2/BLfWVW/9q7+KqQSDY5kUfQEbzdXM1MVhJGcugKV7kRrNVzNxmk7NBg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-module-imports': 7.14.5
+      '@babel/helper-replace-supers': 7.15.0
+      '@babel/helper-simple-access': 7.14.8
+      '@babel/helper-split-export-declaration': 7.14.5
+      '@babel/helper-validator-identifier': 7.14.9
+      '@babel/template': 7.14.5
+      '@babel/traverse': 7.15.0
+      '@babel/types': 7.15.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helper-optimise-call-expression/7.12.13:
-    resolution: {integrity: sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==}
+  /@babel/helper-optimise-call-expression/7.14.5:
+    resolution: {integrity: sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-replace-supers/7.14.4:
-    resolution: {integrity: sha512-zZ7uHCWlxfEAAOVDYQpEf/uyi1dmeC7fX4nCf2iz9drnCwi1zvwXL3HwWWNXUQEJ1k23yVn3VbddiI9iJEXaTQ==}
+  /@babel/helper-replace-supers/7.15.0:
+    resolution: {integrity: sha512-6O+eWrhx+HEra/uJnifCwhwMd6Bp5+ZfZeJwbqUTuqkhIT6YcRhiZCOOFChRypOIe0cV46kFrRBlm+t5vHCEaA==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-member-expression-to-functions': 7.13.12
-      '@babel/helper-optimise-call-expression': 7.12.13
-      '@babel/traverse': 7.14.2
-      '@babel/types': 7.14.4
+      '@babel/helper-member-expression-to-functions': 7.15.0
+      '@babel/helper-optimise-call-expression': 7.14.5
+      '@babel/traverse': 7.15.0
+      '@babel/types': 7.15.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helper-simple-access/7.13.12:
-    resolution: {integrity: sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==}
+  /@babel/helper-simple-access/7.14.8:
+    resolution: {integrity: sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-split-export-declaration/7.12.13:
-    resolution: {integrity: sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==}
+  /@babel/helper-split-export-declaration/7.14.5:
+    resolution: {integrity: sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.14.4
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/helper-validator-identifier/7.14.0:
-    resolution: {integrity: sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==}
+  /@babel/helper-validator-identifier/7.14.9:
+    resolution: {integrity: sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==}
+    engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-option/7.12.17:
-    resolution: {integrity: sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==}
+  /@babel/helper-validator-option/7.14.5:
+    resolution: {integrity: sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==}
+    engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helpers/7.14.0:
-    resolution: {integrity: sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==}
+  /@babel/helpers/7.15.3:
+    resolution: {integrity: sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.12.13
-      '@babel/traverse': 7.14.2
-      '@babel/types': 7.14.4
+      '@babel/template': 7.14.5
+      '@babel/traverse': 7.15.0
+      '@babel/types': 7.15.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/highlight/7.14.0:
-    resolution: {integrity: sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==}
+  /@babel/highlight/7.14.5:
+    resolution: {integrity: sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.14.0
+      '@babel/helper-validator-identifier': 7.14.9
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser/7.14.4:
-    resolution: {integrity: sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA==}
+  /@babel/parser/7.15.3:
+    resolution: {integrity: sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  /@babel/template/7.12.13:
-    resolution: {integrity: sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==}
+  /@babel/template/7.14.5:
+    resolution: {integrity: sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.12.13
-      '@babel/parser': 7.14.4
-      '@babel/types': 7.14.4
+      '@babel/code-frame': 7.14.5
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
     dev: true
 
-  /@babel/traverse/7.14.2:
-    resolution: {integrity: sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==}
+  /@babel/traverse/7.15.0:
+    resolution: {integrity: sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.12.13
-      '@babel/generator': 7.14.3
-      '@babel/helper-function-name': 7.14.2
-      '@babel/helper-split-export-declaration': 7.12.13
-      '@babel/parser': 7.14.4
-      '@babel/types': 7.14.4
-      debug: 4.3.1
+      '@babel/code-frame': 7.14.5
+      '@babel/generator': 7.15.0
+      '@babel/helper-function-name': 7.14.5
+      '@babel/helper-hoist-variables': 7.14.5
+      '@babel/helper-split-export-declaration': 7.14.5
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
+      debug: 4.3.2
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types/7.14.4:
-    resolution: {integrity: sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==}
+  /@babel/types/7.15.0:
+    resolution: {integrity: sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==}
+    engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.14.0
+      '@babel/helper-validator-identifier': 7.14.9
       to-fast-properties: 2.0.0
 
   /@docsearch/css/1.0.0-alpha.28:
     resolution: {integrity: sha512-1AhRzVdAkrWwhaxTX6/R7SnFHz8yLz1W8I/AldlTrfbNvZs9INk1FZiEFTJdgHaP68nhgQNWSGlQiDiI3y2RYg==}
 
-  /@docsearch/css/3.0.0-alpha.36:
-    resolution: {integrity: sha512-zSN2SXuZPDqQaSFzYa1kOwToukqzhLHG7c66iO+/PlmWb6/RZ5cjTkG6VCJynlohRWea7AqZKWS/ptm8kM2Dmg==}
-    dev: false
-
   /@docsearch/js/1.0.0-alpha.28:
     resolution: {integrity: sha512-2g7aPhBy7FoEyeZW2G3LYHWVa8CFvqyozEz8PXt3hyywdFcmEIqmoCRwn8kboVftrOKCjtPcuLCewsaBoB3uiw==}
     dependencies:
       '@docsearch/react': 1.0.0-alpha.28
-      preact: 10.5.13
+      preact: 10.5.14
     transitivePeerDependencies:
       - react
       - react-dom
 
-  /@docsearch/js/3.0.0-alpha.36:
-    resolution: {integrity: sha512-ki63bExytZtOA9rNy9afpyEEG11AtSAzUuMniATte1vk5lrR+mV/fu8KzOGjCWkcFr+Dc3urZxzZCPBmNiGZ2g==}
-    dependencies:
-      '@docsearch/react': 3.0.0-alpha.36
-      preact: 10.5.13
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/react'
-      - react
-      - react-dom
-    dev: false
-
   /@docsearch/react/1.0.0-alpha.28:
     resolution: {integrity: sha512-XjJOnCBXn+UZmtuDmgzlVIHnnvh6yHVwG4aFq8AXN6xJEIX3f180FvGaowFWAxgdtHplJxFGux0Xx4piHqBzIw==}
     peerDependencies:
@@ -509,31 +428,32 @@ packages:
       '@docsearch/css': 1.0.0-alpha.28
       '@francoischalifour/autocomplete-core': 1.0.0-alpha.28
       '@francoischalifour/autocomplete-preset-algolia': 1.0.0-alpha.28
-      algoliasearch: 4.9.1
+      algoliasearch: 4.10.5
 
-  /@docsearch/react/3.0.0-alpha.36:
-    resolution: {integrity: sha512-synYZDHalvMzesFiy7kK+uoz4oTdWSTbe2cU+iiUjwFMyQ+WWjWwGVnvcvk+cjj9pRCVaZo5y5WpqNXq1j8k9Q==}
-    peerDependencies:
-      '@types/react': '>= 16.8.0 < 18.0.0'
-      react: '>= 16.8.0 < 18.0.0'
-      react-dom: '>= 16.8.0 < 18.0.0'
-    dependencies:
-      '@algolia/autocomplete-core': 1.0.0-alpha.44
-      '@algolia/autocomplete-preset-algolia': 1.0.0-alpha.44_algoliasearch@4.9.1
-      '@docsearch/css': 3.0.0-alpha.36
-      algoliasearch: 4.9.1
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-    dev: false
+  /@emmetio/abbreviation/2.2.2:
+    resolution: {integrity: sha512-TtE/dBnkTCct8+LntkqVrwqQao6EnPAs1YN3cUgxOxTaBlesBCY37ROUAVZrRlG64GNnVShdl/b70RfAI3w5lw==}
+    dependencies:
+      '@emmetio/scanner': 1.0.0
+    dev: true
 
-  /@eslint/eslintrc/0.4.2:
-    resolution: {integrity: sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==}
+  /@emmetio/css-abbreviation/2.1.4:
+    resolution: {integrity: sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw==}
+    dependencies:
+      '@emmetio/scanner': 1.0.0
+    dev: true
+
+  /@emmetio/scanner/1.0.0:
+    resolution: {integrity: sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==}
+    dev: true
+
+  /@eslint/eslintrc/0.4.3:
+    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.1
+      debug: 4.3.2
       espree: 7.3.1
-      globals: 13.9.0
+      globals: 13.11.0
       ignore: 4.0.6
       import-fresh: 3.3.0
       js-yaml: 3.14.1
@@ -549,12 +469,102 @@ packages:
   /@francoischalifour/autocomplete-preset-algolia/1.0.0-alpha.28:
     resolution: {integrity: sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==}
 
+  /@hannoeru/eslint-config-basic/0.2.4_eslint@7.32.0:
+    resolution: {integrity: sha512-e8XYNHO/EtI65ZbV2fRi2U1kmJXVftji2HxBfD/LSH/i1f+mUmI2hXwulBiCXKL41xHqUJVqOruooYiakl8FcA==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      eslint: 7.32.0
+      eslint-config-standard: 16.0.3_dfa64ed3583b1f068d7b5761cc0291ce
+      eslint-plugin-eslint-comments: 3.2.0_eslint@7.32.0
+      eslint-plugin-html: 6.1.2
+      eslint-plugin-import: 2.24.2_eslint@7.32.0
+      eslint-plugin-jsonc: 1.6.0_eslint@7.32.0
+      eslint-plugin-node: 11.1.0_eslint@7.32.0
+      eslint-plugin-promise: 5.1.0_eslint@7.32.0
+      eslint-plugin-unicorn: 34.0.1_eslint@7.32.0
+      eslint-plugin-yml: 0.9.0_eslint@7.32.0
+      jsonc-eslint-parser: 1.3.0_eslint@7.32.0
+      yaml-eslint-parser: 0.3.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@hannoeru/eslint-config-react/0.2.4_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-W5b3PZwpIGkLVBvp88PM/tKDYAnbuAbatcJkBzPPukhoBPFOMAsuahIUQXBZevrLg9Fffhz9IOpU9ZcODsunww==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      '@hannoeru/eslint-config-ts': 0.2.4_eslint@7.32.0+typescript@4.4.2
+      eslint: 7.32.0
+      eslint-plugin-react: 7.24.0_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@hannoeru/eslint-config-ts/0.2.4_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-dpvUi3DVHFt858vMO6NxlGXBvPWPRmZROjs8t06SSw6jwzn0n1uqzl585HxIsyDE7Ju5Ru+/1lqhfAMo5uSP6Q==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+      typescript: '>=3.9'
+    dependencies:
+      '@hannoeru/eslint-config-basic': 0.2.4_eslint@7.32.0
+      '@typescript-eslint/eslint-plugin': 4.29.3_5b13bab190e8051f191796d8c4619073
+      '@typescript-eslint/parser': 4.29.3_eslint@7.32.0+typescript@4.4.2
+      eslint: 7.32.0
+      typescript: 4.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@hannoeru/eslint-config-vue/0.2.4_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-hH9UPzG/FyWWuHLvz3/JuOoacXHkSpBuPKvSpgS0i6vIHJ+Ke0ihMvR8i508MhTV/xctOxdvh01b8LxZl5g7MQ==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      '@hannoeru/eslint-config-ts': 0.2.4_eslint@7.32.0+typescript@4.4.2
+      eslint: 7.32.0
+      eslint-plugin-vue: 7.12.1_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@hannoeru/eslint-config/0.2.4_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-qVXBmA5uXIcPd1QDLOFL07GZggp4V+897+0o33BQM/wNglXjbXVcqV+9Y5PxEoE1SUZbNmbxlRW4SalMVOfAeA==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      '@hannoeru/eslint-config-react': 0.2.4_eslint@7.32.0+typescript@4.4.2
+      '@hannoeru/eslint-config-vue': 0.2.4_eslint@7.32.0+typescript@4.4.2
+      eslint: 7.32.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@humanwhocodes/config-array/0.5.0:
+    resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.0
+      debug: 4.3.2
+      minimatch: 3.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/object-schema/1.2.0:
+    resolution: {integrity: sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==}
+    dev: true
+
   /@iconify/json-tools/1.0.10:
     resolution: {integrity: sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==}
     dev: true
 
-  /@iconify/json/1.1.354:
-    resolution: {integrity: sha512-zFW5iV4FQmu/Mhn5fUNDtESLJFuQ8Mr9B0vBM2DmKbWJmTuMoF3sfV1w3tXMCvKFAXSTUcBTdXeEYP2rWnA8jA==}
+  /@iconify/json/1.1.394:
+    resolution: {integrity: sha512-+8nlTbiHvAwFAk9txSURj15XdkkP/cQjakWRtRYexOGIHaJkW2qWLb0jBB+6uD5Mf6si/tBp9ERefpcKKPbsTg==}
     dev: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -570,83 +580,102 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
-  /@nodelib/fs.walk/1.2.7:
-    resolution: {integrity: sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==}
+  /@nodelib/fs.walk/1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.11.0
+      fastq: 1.12.0
     dev: true
 
   /@polka/url/0.5.0:
     resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
     dev: true
 
-  /@polka/url/1.0.0-next.15:
-    resolution: {integrity: sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==}
+  /@polka/url/1.0.0-next.20:
+    resolution: {integrity: sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==}
     dev: true
 
-  /@types/codemirror/5.60.0:
-    resolution: {integrity: sha512-xgzXZyCzedLRNC67/Nn8rpBtTFnAsX2C+Q/LGoH6zgcpF/LqdNHJMHEOhqT1bwUcSp6kQdOIuKzRbeW9DYhEhg==}
+  /@types/codemirror/5.60.2:
+    resolution: {integrity: sha512-tk8YxckrdU49GaJYRKxdzzzXrTlyT2nQGnobb8rAk34jt+kYXOxPKGqNgr7SJpl5r6YGaRD4CDfqiL+6A+/z7w==}
     dependencies:
-      '@types/tern': 0.23.3
+      '@types/tern': 0.23.4
     dev: true
 
-  /@types/cookie/0.3.3:
-    resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
-    dev: false
-    optional: true
-
   /@types/estree/0.0.48:
     resolution: {integrity: sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==}
     dev: true
 
-  /@types/json-schema/7.0.7:
-    resolution: {integrity: sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==}
+  /@types/estree/0.0.50:
+    resolution: {integrity: sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==}
+    dev: true
+
+  /@types/json-schema/7.0.9:
+    resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
     dev: true
 
   /@types/json5/0.0.29:
     resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
     dev: true
 
+  /@types/linkify-it/3.0.2:
+    resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
+    dev: true
+
   /@types/lz-string/1.3.34:
     resolution: {integrity: sha512-j6G1e8DULJx3ONf6NdR5JiR2ZY3K3PaaqiEuKYkLQO0Czfi1AzrtjfnfCROyWGeDd5IVMKCwsgSmMip9OWijow==}
     dev: true
 
-  /@types/mdast/3.0.3:
-    resolution: {integrity: sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==}
+  /@types/markdown-it/12.2.0:
+    resolution: {integrity: sha512-YEpywby5S2wt64C2E3bcpLvtIV8BuCj+4AGtL7tU51V8Vr1qwm+cX9gFfWRyclgLC0UK/7w2heYmhymDi+snzw==}
     dependencies:
-      '@types/unist': 2.0.3
+      '@types/linkify-it': 3.0.2
+      '@types/mdurl': 1.0.2
+      highlight.js: 10.7.3
     dev: true
 
-  /@types/node/15.12.2:
-    resolution: {integrity: sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==}
+  /@types/mdast/3.0.10:
+    resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
+  /@types/mdurl/1.0.2:
+    resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
 
-  /@types/normalize-package-data/2.4.0:
-    resolution: {integrity: sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==}
+  /@types/node/16.7.2:
+    resolution: {integrity: sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==}
     dev: true
 
-  /@types/prismjs/1.16.5:
-    resolution: {integrity: sha512-nSU7U6FQDJJCraFNwaHmH5YDsd/VA9rTnJ7B7AGFdn+m+VSt3FjLWN7+AbqxZ67dbFazqtrDFUto3HK4ljrHIg==}
+  /@types/normalize-package-data/2.4.1:
+    resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
-  /@types/resolve/1.20.0:
-    resolution: {integrity: sha512-SFT3jdUNlLkjxUWwH/0QjLiEsV38hjdDX8oMcX9jZAD8KWNzRLdg6INZE7UMz9O86b2BOHzA3dR8nF+DbonX2Q==}
+  /@types/prismjs/1.16.6:
+    resolution: {integrity: sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==}
     dev: true
 
-  /@types/tern/0.23.3:
-    resolution: {integrity: sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==}
+  /@types/resolve/1.20.1:
+    resolution: {integrity: sha512-Ku5+GPFa12S3W26Uwtw+xyrtIpaZsGYHH6zxNbZlstmlvMYSZRzOwzwsXbxlVUbHyUucctSyuFtu6bNxwYomIw==}
+    dev: true
+
+  /@types/tern/0.23.4:
+    resolution: {integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==}
     dependencies:
-      '@types/estree': 0.0.48
+      '@types/estree': 0.0.50
     dev: true
 
-  /@types/unist/2.0.3:
-    resolution: {integrity: sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==}
+  /@types/throttle-debounce/2.1.0:
+    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin/4.26.1_c8cbd5e7f5f92609ec78d991aced454b:
-    resolution: {integrity: sha512-aoIusj/8CR+xDWmZxARivZjbMBQTT9dImUtdZ8tVCVRXgBUuuZyM5Of5A9D9arQPxbi/0rlJLcuArclz/rCMJw==}
+  /@types/unist/2.0.6:
+    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
+    dev: true
+
+  /@typescript-eslint/eslint-plugin/4.29.3_5b13bab190e8051f191796d8c4619073:
+    resolution: {integrity: sha512-tBgfA3K/3TsZY46ROGvoRxQr1wBkclbVqRQep97MjVHJzcRBURRY3sNFqLk0/Xr//BY5hM9H2p/kp+6qim85SA==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^4.0.0
@@ -656,41 +685,40 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/experimental-utils': 4.26.1_eslint@7.28.0+typescript@4.3.2
-      '@typescript-eslint/parser': 4.26.1_eslint@7.28.0+typescript@4.3.2
-      '@typescript-eslint/scope-manager': 4.26.1
-      debug: 4.3.1
-      eslint: 7.28.0
+      '@typescript-eslint/experimental-utils': 4.29.3_eslint@7.32.0+typescript@4.4.2
+      '@typescript-eslint/parser': 4.29.3_eslint@7.32.0+typescript@4.4.2
+      '@typescript-eslint/scope-manager': 4.29.3
+      debug: 4.3.2
+      eslint: 7.32.0
       functional-red-black-tree: 1.0.1
-      lodash: 4.17.21
-      regexpp: 3.1.0
+      regexpp: 3.2.0
       semver: 7.3.5
-      tsutils: 3.21.0_typescript@4.3.2
-      typescript: 4.3.2
+      tsutils: 3.21.0_typescript@4.4.2
+      typescript: 4.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/experimental-utils/4.26.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==}
+  /@typescript-eslint/experimental-utils/4.29.3_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-ffIvbytTVWz+3keg+Sy94FG1QeOvmV9dP2YSdLFHw/ieLXWCa3U1TYu8IRCOpMv2/SPS8XqhM1+ou1YHsdzKrg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
       eslint: '*'
     dependencies:
-      '@types/json-schema': 7.0.7
-      '@typescript-eslint/scope-manager': 4.26.1
-      '@typescript-eslint/types': 4.26.1
-      '@typescript-eslint/typescript-estree': 4.26.1_typescript@4.3.2
-      eslint: 7.28.0
+      '@types/json-schema': 7.0.9
+      '@typescript-eslint/scope-manager': 4.29.3
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/typescript-estree': 4.29.3_typescript@4.4.2
+      eslint: 7.32.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@7.28.0
+      eslint-utils: 3.0.0_eslint@7.32.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/parser/4.26.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-q7F3zSo/nU6YJpPJvQveVlIIzx9/wu75lr6oDbDzoeIRWxpoc/HQ43G4rmMoCc5my/3uSj2VEpg/D83LYZF5HQ==}
+  /@typescript-eslint/parser/4.29.3_eslint@7.32.0+typescript@4.4.2:
+    resolution: {integrity: sha512-jrHOV5g2u8ROghmspKoW7pN8T/qUzk0+DITun0MELptvngtMrwUJ1tv5zMI04CYVEUsSrN4jV7AKSv+I0y0EfQ==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
       eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
@@ -699,31 +727,31 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 4.26.1
-      '@typescript-eslint/types': 4.26.1
-      '@typescript-eslint/typescript-estree': 4.26.1_typescript@4.3.2
-      debug: 4.3.1
-      eslint: 7.28.0
-      typescript: 4.3.2
+      '@typescript-eslint/scope-manager': 4.29.3
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/typescript-estree': 4.29.3_typescript@4.4.2
+      debug: 4.3.2
+      eslint: 7.32.0
+      typescript: 4.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/4.26.1:
-    resolution: {integrity: sha512-TW1X2p62FQ8Rlne+WEShyd7ac2LA6o27S9i131W4NwDSfyeVlQWhw8ylldNNS8JG6oJB9Ha9Xyc+IUcqipvheQ==}
+  /@typescript-eslint/scope-manager/4.29.3:
+    resolution: {integrity: sha512-x+w8BLXO7iWPkG5mEy9bA1iFRnk36p/goVlYobVWHyDw69YmaH9q6eA+Fgl7kYHmFvWlebUTUfhtIg4zbbl8PA==}
     engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
     dependencies:
-      '@typescript-eslint/types': 4.26.1
-      '@typescript-eslint/visitor-keys': 4.26.1
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/visitor-keys': 4.29.3
     dev: true
 
-  /@typescript-eslint/types/4.26.1:
-    resolution: {integrity: sha512-STyMPxR3cS+LaNvS8yK15rb8Y0iL0tFXq0uyl6gY45glyI7w0CsyqyEXl/Fa0JlQy+pVANeK3sbwPneCbWE7yg==}
+  /@typescript-eslint/types/4.29.3:
+    resolution: {integrity: sha512-s1eV1lKNgoIYLAl1JUba8NhULmf+jOmmeFO1G5MN/RBCyyzg4TIOfIOICVNC06lor+Xmy4FypIIhFiJXOknhIg==}
     engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
     dev: true
 
-  /@typescript-eslint/typescript-estree/4.26.1_typescript@4.3.2:
-    resolution: {integrity: sha512-l3ZXob+h0NQzz80lBGaykdScYaiEbFqznEs99uwzm8fPHhDjwaBFfQkjUC/slw6Sm7npFL8qrGEAMxcfBsBJUg==}
+  /@typescript-eslint/typescript-estree/4.29.3_typescript@4.4.2:
+    resolution: {integrity: sha512-45oQJA0bxna4O5TMwz55/TpgjX1YrAPOI/rb6kPgmdnemRZx/dB0rsx+Ku8jpDvqTxcE1C/qEbVHbS3h0hflag==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
       typescript: '*'
@@ -731,271 +759,249 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 4.26.1
-      '@typescript-eslint/visitor-keys': 4.26.1
-      debug: 4.3.1
-      globby: 11.0.3
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/visitor-keys': 4.29.3
+      debug: 4.3.2
+      globby: 11.0.4
       is-glob: 4.0.1
       semver: 7.3.5
-      tsutils: 3.21.0_typescript@4.3.2
-      typescript: 4.3.2
+      tsutils: 3.21.0_typescript@4.4.2
+      typescript: 4.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/visitor-keys/4.26.1:
-    resolution: {integrity: sha512-IGouNSSd+6x/fHtYRyLOM6/C+QxMDzWlDtN41ea+flWuSF9g02iqcIlX8wM53JkfljoIjP0U+yp7SiTS1onEkw==}
+  /@typescript-eslint/visitor-keys/4.29.3:
+    resolution: {integrity: sha512-MGGfJvXT4asUTeVs0Q2m+sY63UsfnA+C/FDgBKV3itLBmM9H0u+URcneePtkd0at1YELmZK6HSolCqM4Fzs6yA==}
     engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
     dependencies:
-      '@typescript-eslint/types': 4.26.1
+      '@typescript-eslint/types': 4.29.3
       eslint-visitor-keys: 2.1.0
     dev: true
 
-  /@vitejs/plugin-vue/1.2.3:
-    resolution: {integrity: sha512-LlnLpObkGKZ+b7dcpL4T24l13nPSHLjo+6Oc7MbZiKz5PMAUzADfNJ3EKfYIQ0l0969nxf2jp/9vsfnuJ7h6fw==}
+  /@vitejs/plugin-vue/1.6.0_@vue+compiler-sfc@3.2.6:
+    resolution: {integrity: sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      '@vue/compiler-sfc': ^3.0.8
+      '@vue/compiler-sfc': ^3.2.6
+    dependencies:
+      '@vue/compiler-sfc': 3.2.6
     dev: true
 
-  /@vitejs/plugin-vue/1.2.3_@vue+compiler-sfc@3.1.1:
-    resolution: {integrity: sha512-LlnLpObkGKZ+b7dcpL4T24l13nPSHLjo+6Oc7MbZiKz5PMAUzADfNJ3EKfYIQ0l0969nxf2jp/9vsfnuJ7h6fw==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@vue/compiler-sfc': ^3.0.8
+  /@volar/code-gen/0.27.7:
+    resolution: {integrity: sha512-CIvgh9YpZ3nlqgtq0oSZNZBZ1paxUVUB67njWBxO9S8WeQFIRcLRn9QUkSDyleROoqFXXuXn1GT8I5qY+Cv5mg==}
+    dependencies:
+      '@volar/shared': 0.27.7
+      '@volar/source-map': 0.27.7
+    dev: true
+
+  /@volar/html2pug/0.27.7:
+    resolution: {integrity: sha512-QPTyRSWxH+KnFuk4q5vzJxFGtTkAhAj2pkFc2TQVrp8J1Px8NM2eIZ/G9dr8r+av+1fzwEM8DCBrZNLfwV1yJQ==}
+    dependencies:
+      domelementtype: 2.2.0
+      domhandler: 4.2.0
+      htmlparser2: 6.1.0
+      pug: 3.0.2
+    dev: true
+
+  /@volar/shared/0.27.7:
+    resolution: {integrity: sha512-Uu/FrqDUDesVUxDifuTnIbyTIgRxNd6yyBabv8K0K2LpmilP6zd3Oqe6V5vhfNE8fojbUSjBmGWYYyuPbFwi5A==}
     dependencies:
-      '@vue/compiler-sfc': 3.1.1_vue@3.1.1
+      upath: 2.0.1
+      vscode-jsonrpc: 8.0.0-next.2
+      vscode-uri: 3.0.2
     dev: true
 
-  /@vue/compiler-core/3.1.1:
-    resolution: {integrity: sha512-Z1RO3T6AEtAUFf2EqqovFm3ohAeTvFzRtB0qUENW2nEerJfdlk13/LS1a0EgsqlzxmYfR/S/S/gW9PLbFZZxkA==}
+  /@volar/source-map/0.27.7:
+    resolution: {integrity: sha512-vG8YQJ5JEyB/sO5RTETpkB6uQ6H4aRIa76X0wGa9rCdJgTt5lLZGLMjG+Xo2osIaUnWyRRQ/bRU/gF+C/QfziA==}
     dependencies:
-      '@babel/parser': 7.14.4
-      '@babel/types': 7.14.4
-      '@vue/shared': 3.1.1
+      '@volar/shared': 0.27.7
+    dev: true
+
+  /@volar/transforms/0.27.7:
+    resolution: {integrity: sha512-pOmi/18KjCtpEupbAxUvhj+EBH0vBwYKxI2VmbY+lXWBDcFZqGOZFdMt9hdoZEB/FHKeNbi13rs5WBNuZUXQAA==}
+    dependencies:
+      '@volar/shared': 0.27.7
+    dev: true
+
+  /@vscode/emmet-helper/2.7.0:
+    resolution: {integrity: sha512-LL7MoKNLUQASacQROO7hBdx5IAxsEnA0UdJFd9xXyf3sBQgz8NE3QEfo3IezE7uin8W2fkG2+EXMst3oqK6+KQ==}
+    dependencies:
+      emmet: 2.3.4
+      jsonc-parser: 2.3.1
+      vscode-languageserver-textdocument: 1.0.1
+      vscode-languageserver-types: 3.16.0
+      vscode-nls: 5.0.0
+      vscode-uri: 2.1.2
+    dev: true
+
+  /@vue/compiler-core/3.2.6:
+    resolution: {integrity: sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==}
+    dependencies:
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
+      '@vue/shared': 3.2.6
       estree-walker: 2.0.2
       source-map: 0.6.1
 
-  /@vue/compiler-dom/3.1.1:
-    resolution: {integrity: sha512-nobRIo0t5ibzg+q8nC31m+aJhbq8FbWUoKvk6h3Vs1EqTDJaj6lBTcVTq5or8AYht7FbSpdAJ81isbJ1rWNX7A==}
+  /@vue/compiler-dom/3.2.6:
+    resolution: {integrity: sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==}
     dependencies:
-      '@vue/compiler-core': 3.1.1
-      '@vue/shared': 3.1.1
+      '@vue/compiler-core': 3.2.6
+      '@vue/shared': 3.2.6
 
-  /@vue/compiler-sfc/3.1.1_vue@3.1.1:
-    resolution: {integrity: sha512-lSgMsZaYHF+bAgryq5aUqpvyfhu52GJI2/4LoiJCE5uaxc6FCZfxfgqgw/d9ltiZghv+HiISFtmQVAVvlsk+/w==}
-    peerDependencies:
-      vue: 3.1.1
-    dependencies:
-      '@babel/parser': 7.14.4
-      '@babel/types': 7.14.4
-      '@vue/compiler-core': 3.1.1
-      '@vue/compiler-dom': 3.1.1
-      '@vue/compiler-ssr': 3.1.1
-      '@vue/shared': 3.1.1
+  /@vue/compiler-sfc/3.2.6:
+    resolution: {integrity: sha512-Ariz1eDsf+2fw6oWXVwnBNtfKHav72RjlWXpEgozYBLnfRPzP+7jhJRw4Nq0OjSsLx2HqjF3QX7HutTjYB0/eA==}
+    dependencies:
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
+      '@types/estree': 0.0.48
+      '@vue/compiler-core': 3.2.6
+      '@vue/compiler-dom': 3.2.6
+      '@vue/compiler-ssr': 3.2.6
+      '@vue/ref-transform': 3.2.6
+      '@vue/shared': 3.2.6
       consolidate: 0.16.0
       estree-walker: 2.0.2
       hash-sum: 2.0.0
       lru-cache: 5.1.1
       magic-string: 0.25.7
       merge-source-map: 1.1.0
-      postcss: 8.3.0
-      postcss-modules: 4.1.3_postcss@8.3.0
+      postcss: 8.3.6
+      postcss-modules: 4.2.2_postcss@8.3.6
       postcss-selector-parser: 6.0.6
       source-map: 0.6.1
-      vue: 3.1.1
     dev: true
 
-  /@vue/compiler-ssr/3.1.1:
-    resolution: {integrity: sha512-7H6krZtVt3h/YzfNp7eYK41hMDz8ZskiBy+Wby+EDRINX6BD9JQ5C8zyy2xAa7T6Iz2VrQzsaJ/Bb52lTPSS5A==}
+  /@vue/compiler-ssr/3.2.6:
+    resolution: {integrity: sha512-A7IKRKHSyPnTC4w1FxHkjzoyjXInsXkcs/oX22nBQ+6AWlXj2Tt1le96CWPOXy5vYlsTYkF1IgfBaKIdeN/39g==}
     dependencies:
-      '@vue/compiler-dom': 3.1.1
-      '@vue/shared': 3.1.1
+      '@vue/compiler-dom': 3.2.6
+      '@vue/shared': 3.2.6
     dev: true
 
-  /@vue/reactivity/3.1.1:
-    resolution: {integrity: sha512-DsH5woNVCcPK1M0RRYVgJEU1GJDU2ASOKpAqW3ppHk+XjoFLCbqc/26RTCgTpJYd9z8VN+79Q1u7/QqgQPbuLQ==}
+  /@vue/reactivity/3.2.6:
+    resolution: {integrity: sha512-8vIDD2wpCnYisNNZjmcIj+Rixn0uhZNY3G1vzlgdVdLygeRSuFjkmnZk6WwvGzUWpKfnG0e/NUySM3mVi59hAA==}
     dependencies:
-      '@vue/shared': 3.1.1
+      '@vue/shared': 3.2.6
 
-  /@vue/runtime-core/3.1.1:
-    resolution: {integrity: sha512-GboqR02txOtkd9F3Ysd8ltPL68vTCqIx2p/J52/gFtpgb5FG9hvOAPEwFUqxeEJRu7ResvQnmdOHiEycGPCLhQ==}
+  /@vue/ref-transform/3.2.6:
+    resolution: {integrity: sha512-ie39+Y4nbirDLvH+WEq6Eo/l3n3mFATayqR+kEMSphrtMW6Uh/eEMx1Gk2Jnf82zmj3VLRq7dnmPx72JLcBYkQ==}
     dependencies:
-      '@vue/reactivity': 3.1.1
-      '@vue/shared': 3.1.1
-
-  /@vue/runtime-dom/3.1.1:
-    resolution: {integrity: sha512-o57n/199e/BBAmLRMSXmD2r12Old/h/gf6BgL0RON1NT2pwm6MWaMY4Ul55eyq+FsDILz4jR/UgoPQ9vYB8xcw==}
-    dependencies:
-      '@vue/runtime-core': 3.1.1
-      '@vue/shared': 3.1.1
-      csstype: 2.6.17
-
-  /@vue/server-renderer/3.1.1_vue@3.1.1:
-    resolution: {integrity: sha512-b0UFiOfF27CGeWw25eoaRTiYqezBxY/ODl2VeuDMgdcbakdPP4T/ieSyjuN5g/ZxDCnGO6q/sMRZQgmQhYltww==}
-    peerDependencies:
-      vue: 3.1.1
-    dependencies:
-      '@vue/compiler-ssr': 3.1.1
-      '@vue/shared': 3.1.1
-      vue: 3.1.1
+      '@babel/parser': 7.15.3
+      '@vue/compiler-core': 3.2.6
+      '@vue/shared': 3.2.6
+      estree-walker: 2.0.2
+      magic-string: 0.25.7
     dev: true
 
-  /@vue/shared/3.1.1:
-    resolution: {integrity: sha512-g+4pzAw7PYSjARtLBoDq6DmcblX8i9KJHSCnyM5VDDFFifUaUT9iHbFpOF/KOizQ9f7QAqU2JH3Y6aXjzUMhVA==}
-
-  /@vueuse/core/4.11.2_vue@3.1.1:
-    resolution: {integrity: sha512-4A17XvKXpMR6829EVWvrdSKEeAjTWaiC3+xh51KEtlyCwvWQwZ0xwKDrbMj+e15ANxjHrTw/0bJVaWDfPQt/Pw==}
+  /@vue/runtime-core/3.2.6:
+    resolution: {integrity: sha512-3mqtgpj/YSGFxtvTufSERRApo92B16JNNxz9p+5eG6PPuqTmuRJz214MqhKBEgLEAIQ6R6YCbd83ZDtjQnyw2g==}
     dependencies:
-      '@vueuse/shared': 4.11.2_vue@3.1.1
-      vue-demi: 0.9.1_vue@3.1.1
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
+      '@vue/reactivity': 3.2.6
+      '@vue/shared': 3.2.6
 
-  /@vueuse/core/5.0.1_vue@3.1.1:
-    resolution: {integrity: sha512-hzcyYNvW1p9ZEwm+oBaWrHgGx6S93pJBiXLZUj2pgCNiJZjaedoePT9xzesi1SBxeKcYxwToaTISLeKdE4VKeg==}
+  /@vue/runtime-dom/3.2.6:
+    resolution: {integrity: sha512-fq33urnP0BNCGm2O3KCzkJlKIHI80C94HJ4qDZbjsTtxyOn5IHqwKSqXVN3RQvO6epcQH+sWS+JNwcNDPzoasg==}
     dependencies:
-      '@vueuse/shared': 5.0.1_vue@3.1.1
-      vue-demi: 0.9.1_vue@3.1.1
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
+      '@vue/runtime-core': 3.2.6
+      '@vue/shared': 3.2.6
+      csstype: 2.6.17
 
-  /@vueuse/integrations/4.11.2_vue@3.1.1:
-    resolution: {integrity: sha512-sksW5CCWHjrBgzuLFI3wleIA0HYJnIQlmUUVnFcukA68sbLaDOWNYl9qYzolgMzs1LSWw3Ws0izlUR99JCRqzw==}
+  /@vue/server-renderer/3.2.6_vue@3.2.6:
+    resolution: {integrity: sha512-Izc4F79W8Q36qLV442Yp1xOdwekb5DwA2p8wFsWmhgDLDeZOP9LeyYqN5BduDtAfLVe7gHOwt2Xg7QQltSVuBA==}
+    peerDependencies:
+      vue: 3.2.6
     dependencies:
-      '@vueuse/shared': 4.11.2_vue@3.1.1
-      vue-demi: 0.9.1_vue@3.1.1
-    optionalDependencies:
-      axios: 0.21.1
-      focus-trap: 6.5.0
-      jwt-decode: 3.1.2
-      nprogress: 0.2.0
-      qrcode: 1.4.4
-      universal-cookie: 4.0.4
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - debug
-      - vue
-    dev: false
+      '@vue/compiler-ssr': 3.2.6
+      '@vue/shared': 3.2.6
+      vue: 3.2.6
+    dev: true
 
-  /@vueuse/integrations/5.0.1_vue@3.1.1:
-    resolution: {integrity: sha512-1MxtbHITrlQS8mcbI/LMbEl28e08IM3Z9Gy6ZU1xwcWJlMIN9fsrGtsvSj8HzEwsFsUyiwZN9klB4wcNXLvSNQ==}
-    dependencies:
-      '@vueuse/shared': 5.0.1_vue@3.1.1
-      vue-demi: 0.9.1_vue@3.1.1
-    optionalDependencies:
-      axios: 0.21.1
-      focus-trap: 6.5.0
-      jwt-decode: 3.1.2
-      nprogress: 0.2.0
-      qrcode: 1.4.4
-      universal-cookie: 4.0.4
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - debug
-      - vue
-    dev: false
+  /@vue/shared/3.2.6:
+    resolution: {integrity: sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==}
 
-  /@vueuse/shared/4.11.2_vue@3.1.1:
-    resolution: {integrity: sha512-vTbTi6ou7ljH3CkKVoaIaCAoWB5T1ewSogpL6VnO1duMPNuiv7x8K/LunMbnTg4tVyt6QwaiCuEq/kyS6AUBRg==}
+  /@vueuse/core/6.0.0_vue@3.2.6:
+    resolution: {integrity: sha512-PuBfNo/Zv+NkLcZaYWBA1WjqxQhTDC0DMQpoAIJdo/GFul/1SpBbONhUho2zqtOmq8vyGuK200wNFvyA4YUAMg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
     dependencies:
-      vue-demi: 0.9.1_vue@3.1.1
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      '@vueuse/shared': 6.0.0_vue@3.2.6
+      vue: 3.2.6
+      vue-demi: 0.11.3_vue@3.2.6
     dev: false
 
-  /@vueuse/shared/5.0.1_vue@3.1.1:
-    resolution: {integrity: sha512-/+kRII9chn45PhFfRuPVbSQApJHhhqXFhPrWjnYKckMfQE9ZOuNMb1bmQnDTqzuNkoS/ENeHBMq0rnV/cfz/3Q==}
+  /@vueuse/shared/6.0.0_vue@3.2.6:
+    resolution: {integrity: sha512-PLjjqL8bxI5q86qk/ifXy572nfQE3rJc1RMem+dKcGayaagMnC4kXHEt64V98DVielSwr2FuYaeFodi4KJrvdg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
     dependencies:
-      vue-demi: 0.9.1_vue@3.1.1
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      vue: 3.2.6
+      vue-demi: 0.11.3_vue@3.2.6
     dev: false
 
-  /@windicss/plugin-utils/0.14.6:
-    resolution: {integrity: sha512-jF+dJ6D4/UqVHSbH5kCdSoPnklLTZDf+seck4unICI0qyzmyPsrO15nmSS/gIvnmCedUfBrQj1MfYOX0tccFjQ==}
+  /@windicss/config/1.3.0_typescript@4.4.2:
+    resolution: {integrity: sha512-/F2dg9ltkoQLA4cpr4YQP4V+Y1hO0WOF8jtHoErCKKBr1wBnFLieRjhsXcolM5ZbqH7wLoUrPkdBkIFlocDblg==}
     dependencies:
       debug: 4.3.2
-      fast-glob: 3.2.5
-      magic-string: 0.25.7
-      micromatch: 4.0.4
-      pirates: 4.0.1
-      sucrase: 3.18.2
-      windicss: 2.5.14
+      jiti: 1.11.0
+      tsup: 4.14.0_typescript@4.4.2
+      windicss: 3.1.7
     transitivePeerDependencies:
       - supports-color
+      - ts-node
+      - typescript
     dev: true
 
-  /@windicss/plugin-utils/1.0.2:
-    resolution: {integrity: sha512-W9fZoPNsD3NMVyqzt9eNb1DNp9p4oy7EscCfGVIg1KBxAC8S+AnXtkaR/rad09y+aqzbILKNfzDKdimDR2FA9g==}
+  /@windicss/plugin-utils/1.3.0_typescript@4.4.2:
+    resolution: {integrity: sha512-4qOXUStYPI3WTHR6WdxGhzKWMZar7vwWY08QFVc9Zztg5eoQ3GyYsMPn83OSRwc/jA7mSkkoCtHLGzop2KjHcg==}
     dependencies:
-      '@antfu/utils': 0.1.6
+      '@antfu/utils': 0.2.4
+      '@windicss/config': 1.3.0_typescript@4.4.2
       debug: 4.3.2
-      fast-glob: 3.2.5
-      jiti: 1.10.1
+      fast-glob: 3.2.7
       magic-string: 0.25.7
       micromatch: 4.0.4
-      windicss: 3.1.3
+      windicss: 3.1.7
     transitivePeerDependencies:
       - supports-color
+      - ts-node
+      - typescript
     dev: true
 
-  /@windicss/shared-components/0.1.3_vue@3.1.1+windicss@3.1.3:
-    resolution: {integrity: sha512-6Go1CY+Xq+kgrCwknWwWXi7rI8sAfNFKy2vS+y1FKEs3wNbPkFxps7M/raoOr9pOZebXhK9aStHfPEi71rjxTA==}
+  /@windicss/shared-components/0.1.5_vue@3.2.6+windicss@3.1.7:
+    resolution: {integrity: sha512-kGssHnd7r51IJpTXb+4PWE3YPfchVx6VBzULovgITh0CHRxogJr8xXF0yvEMzOfmeWtb6V21utfygkUZGZ2mDA==}
     peerDependencies:
       vue: '>=3'
-      windicss: ^2.5.9
+      windicss: '>=3'
     dependencies:
-      prismjs: 1.23.0
-      vue: 3.1.1
-      windicss: 3.1.3
-    dev: false
-
-  /@windicss/vitepress-theme/0.1.6:
-    resolution: {integrity: sha512-Rrg+ZbdneW798QoiaIzNCh9J+pFnmbGMBIiQIie5Wh4WBVzKFWFsGZKXnTxSqhsVqwCsq2mVdw/xm61nS9Txmg==}
-    dependencies:
-      '@docsearch/css': 1.0.0-alpha.28
-      '@docsearch/js': 1.0.0-alpha.28
-      '@docsearch/react': 1.0.0-alpha.28
-      '@vueuse/core': 4.11.2_vue@3.1.1
-      '@vueuse/integrations': 4.11.2_vue@3.1.1
-      '@windicss/shared-components': 0.1.3_vue@3.1.1+windicss@3.1.3
-      axios: 0.21.1
-      codemirror: 5.61.1
-      codemirror-theme-vars: 0.1.1
-      json5: 2.2.0
-      lz-string: 1.4.4
-      mitt: 2.1.0
-      prism-theme-vars: 0.2.2
-      prismjs: 1.23.0
-      splitpanes: 3.0.4
-      vue: 3.1.1
-      vue-board: 0.0.5_vue@3.1.1
-      vue-demi: 0.9.1_vue@3.1.1
-      windicss: 3.1.3
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - debug
-      - react
-      - react-dom
+      prismjs: 1.24.1
+      vue: 3.2.6
+      windicss: 3.1.7
     dev: false
 
   /accepts/1.3.7:
     resolution: {integrity: sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-types: 2.1.31
+      mime-types: 2.1.32
       negotiator: 0.6.2
     dev: true
 
-  /acorn-jsx/5.3.1_acorn@7.4.1:
-    resolution: {integrity: sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==}
+  /acorn-jsx/5.3.2_acorn@7.4.1:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
@@ -1017,8 +1023,8 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv/8.6.0:
-    resolution: {integrity: sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==}
+  /ajv/8.6.2:
+    resolution: {integrity: sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==}
     dependencies:
       fast-deep-equal: 3.1.3
       json-schema-traverse: 1.0.0
@@ -1026,35 +1032,29 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /algoliasearch/4.9.1:
-    resolution: {integrity: sha512-EeJUYXzBEhZSsL6tXc3hseLBCtlNLa1MZ4mlMK6EeX38yRjY5vgnFcNNml6uUhlOjvheKxgkKRpPWkxgL8Cqkg==}
-    dependencies:
-      '@algolia/cache-browser-local-storage': 4.9.1
-      '@algolia/cache-common': 4.9.1
-      '@algolia/cache-in-memory': 4.9.1
-      '@algolia/client-account': 4.9.1
-      '@algolia/client-analytics': 4.9.1
-      '@algolia/client-common': 4.9.1
-      '@algolia/client-recommendation': 4.9.1
-      '@algolia/client-search': 4.9.1
-      '@algolia/logger-common': 4.9.1
-      '@algolia/logger-console': 4.9.1
-      '@algolia/requester-browser-xhr': 4.9.1
-      '@algolia/requester-common': 4.9.1
-      '@algolia/requester-node-http': 4.9.1
-      '@algolia/transporter': 4.9.1
+  /algoliasearch/4.10.5:
+    resolution: {integrity: sha512-KmH2XkiN+8FxhND4nWFbQDkIoU6g2OjfeU9kIv4Lb+EiOOs3Gpp7jvd+JnatsCisAZsnWQdjd7zVlW7I/85QvQ==}
+    dependencies:
+      '@algolia/cache-browser-local-storage': 4.10.5
+      '@algolia/cache-common': 4.10.5
+      '@algolia/cache-in-memory': 4.10.5
+      '@algolia/client-account': 4.10.5
+      '@algolia/client-analytics': 4.10.5
+      '@algolia/client-common': 4.10.5
+      '@algolia/client-personalization': 4.10.5
+      '@algolia/client-search': 4.10.5
+      '@algolia/logger-common': 4.10.5
+      '@algolia/logger-console': 4.10.5
+      '@algolia/requester-browser-xhr': 4.10.5
+      '@algolia/requester-common': 4.10.5
+      '@algolia/requester-node-http': 4.10.5
+      '@algolia/transporter': 4.10.5
 
   /ansi-colors/4.1.1:
     resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==}
     engines: {node: '>=6'}
     dev: true
 
-  /ansi-regex/4.1.0:
-    resolution: {integrity: sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==}
-    engines: {node: '>=6'}
-    dev: false
-    optional: true
-
   /ansi-regex/5.0.0:
     resolution: {integrity: sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==}
     engines: {node: '>=8'}
@@ -1065,6 +1065,7 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
+    dev: true
 
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -1101,9 +1102,9 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
       get-intrinsic: 1.1.1
-      is-string: 1.0.6
+      is-string: 1.0.7
     dev: true
 
   /array-union/2.1.0:
@@ -1117,7 +1118,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
     dev: true
 
   /array.prototype.flatmap/1.2.4:
@@ -1126,27 +1127,29 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
       function-bind: 1.1.1
     dev: true
 
+  /asap/2.0.6:
+    resolution: {integrity: sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=}
+    dev: true
+
+  /assert-never/1.2.1:
+    resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
+    dev: true
+
   /astral-regex/2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
     dev: true
 
-  /at-least-node/1.0.0:
-    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
-    engines: {node: '>= 4.0.0'}
-    dev: true
-
-  /axios/0.21.1:
-    resolution: {integrity: sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==}
+  /babel-walk/3.0.0-canary-5:
+    resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
+    engines: {node: '>= 10.0.0'}
     dependencies:
-      follow-redirects: 1.14.1
-    transitivePeerDependencies:
-      - debug
-    dev: false
+      '@babel/types': 7.15.0
+    dev: true
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1154,6 +1157,7 @@ packages:
 
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: true
 
   /big.js/5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
@@ -1194,46 +1198,29 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist/4.16.6:
-    resolution: {integrity: sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==}
+  /browserslist/4.16.8:
+    resolution: {integrity: sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001235
-      colorette: 1.2.2
-      electron-to-chromium: 1.3.749
+      caniuse-lite: 1.0.30001252
+      colorette: 1.3.0
+      electron-to-chromium: 1.3.820
       escalade: 3.1.1
-      node-releases: 1.1.73
+      node-releases: 1.1.75
     dev: true
 
-  /buffer-alloc-unsafe/1.1.0:
-    resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
-    dev: false
-    optional: true
-
-  /buffer-alloc/1.2.0:
-    resolution: {integrity: sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==}
-    dependencies:
-      buffer-alloc-unsafe: 1.1.0
-      buffer-fill: 1.0.0
-    dev: false
-    optional: true
-
-  /buffer-fill/1.0.0:
-    resolution: {integrity: sha1-+PeLdniYiO858gXNY39o5wISKyw=}
-    dev: false
-    optional: true
-
-  /buffer-from/1.1.1:
-    resolution: {integrity: sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==}
-    dev: false
-    optional: true
-
   /buffer/5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
+    dev: true
+
+  /builtin-modules/3.2.0:
+    resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
+    engines: {node: '>=6'}
+    dev: true
 
   /bytes/3.0.0:
     resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
@@ -1257,14 +1244,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /camelcase/5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-    dev: false
-    optional: true
-
-  /caniuse-lite/1.0.30001235:
-    resolution: {integrity: sha512-zWEwIVqnzPkSAXOUlQnPW2oKoYb2aLQ4Q5ejdjBcnH63rfypaW34CxaeBn1VMya2XaEU3P/R2qHpWyj+l0BT1A==}
+  /caniuse-lite/1.0.30001252:
+    resolution: {integrity: sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==}
     dev: true
 
   /chalk/2.4.2:
@@ -1276,8 +1257,8 @@ packages:
       supports-color: 5.5.0
     dev: true
 
-  /chalk/4.1.1:
-    resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
+  /chalk/4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
     dependencies:
       ansi-styles: 4.3.0
@@ -1292,6 +1273,12 @@ packages:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
     dev: true
 
+  /character-parser/2.2.0:
+    resolution: {integrity: sha1-x84o821LzZdE5f/CxfzeHHMmH8A=}
+    dependencies:
+      is-regex: 1.1.4
+    dev: true
+
   /character-reference-invalid/1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
@@ -1306,8 +1293,8 @@ packages:
       domutils: 2.7.0
     dev: true
 
-  /cheerio/1.0.0-rc.9:
-    resolution: {integrity: sha512-QF6XVdrLONO6DXRF5iaolY+odmhj2CLj+xzNod7INPWMi/x9X4SOylH0S/vaPpX+AUU6t04s34SQNh7DbkuCng==}
+  /cheerio/1.0.0-rc.10:
+    resolution: {integrity: sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==}
     engines: {node: '>= 6'}
     dependencies:
       cheerio-select: 1.5.0
@@ -1316,11 +1303,11 @@ packages:
       htmlparser2: 6.1.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
-      tslib: 2.2.0
+      tslib: 2.3.1
     dev: true
 
-  /chokidar/3.5.1:
-    resolution: {integrity: sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==}
+  /chokidar/3.5.2:
+    resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==}
     engines: {node: '>= 8.10.0'}
     dependencies:
       anymatch: 3.1.2
@@ -1329,13 +1316,13 @@ packages:
       is-binary-path: 2.1.0
       is-glob: 4.0.1
       normalize-path: 3.0.0
-      readdirp: 3.5.0
+      readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /ci-info/2.0.0:
-    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
+  /ci-info/3.2.0:
+    resolution: {integrity: sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==}
     dev: true
 
   /clean-regexp/1.0.0:
@@ -1357,23 +1344,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /clipboard/2.0.8:
-    resolution: {integrity: sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==}
-    dependencies:
-      good-listener: 1.2.2
-      select: 1.1.2
-      tiny-emitter: 2.1.0
-    optional: true
-
-  /cliui/5.0.0:
-    resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
-    dependencies:
-      string-width: 3.1.0
-      strip-ansi: 5.2.0
-      wrap-ansi: 5.1.0
-    dev: false
-    optional: true
-
   /clone/1.0.4:
     resolution: {integrity: sha1-2jCcwmPfFZlMaIypAheco8fNfH4=}
     engines: {node: '>=0.8'}
@@ -1383,14 +1353,15 @@ packages:
     resolution: {integrity: sha512-Au0Ysn6tUMZB/1Jd5S8g4Or1kZxTuTnNx6MVs9H46Ad7w8IEjkHusH+4oyia/FBcVuAJO4DIlkDnPM8Qnnf1rg==}
     dev: false
 
-  /codemirror/5.61.1:
-    resolution: {integrity: sha512-+D1NZjAucuzE93vJGbAaXzvoBHwp9nJZWWWF9utjv25+5AZUiah6CIlfb4ikG4MoDsFsCG8niiJH5++OO2LgIQ==}
+  /codemirror/5.62.3:
+    resolution: {integrity: sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg==}
     dev: false
 
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
       color-name: 1.1.3
+    dev: true
 
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -1401,13 +1372,14 @@ packages:
 
   /color-name/1.1.3:
     resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=}
+    dev: true
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
-  /colorette/1.2.2:
-    resolution: {integrity: sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==}
+  /colorette/1.3.0:
+    resolution: {integrity: sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==}
     dev: true
 
   /commander/4.1.1:
@@ -1419,7 +1391,7 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-db: 1.48.0
+      mime-db: 1.49.0
     dev: true
 
   /compression/1.7.4:
@@ -1456,17 +1428,18 @@ packages:
       bluebird: 3.7.2
     dev: true
 
-  /convert-source-map/1.7.0:
-    resolution: {integrity: sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==}
+  /constantinople/4.0.1:
+    resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
     dependencies:
-      safe-buffer: 5.1.2
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
     dev: true
 
-  /cookie/0.4.1:
-    resolution: {integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==}
-    engines: {node: '>= 0.6'}
-    dev: false
-    optional: true
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
 
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -1509,18 +1482,6 @@ packages:
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    dependencies:
-      ms: 2.1.3
-    dev: true
-
-  /debug/4.3.1:
-    resolution: {integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.2
     dev: true
@@ -1537,16 +1498,10 @@ packages:
       ms: 2.1.2
     dev: true
 
-  /decamelize/1.2.0:
-    resolution: {integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-    optional: true
-
   /declass/0.0.1:
     resolution: {integrity: sha512-V1tO9kGH+GLfkeiYCF016HSBcTP5mI+eMusSFgxZv0BzKvUQgI/Xn6FdoFuMwQHEqxKXhaW02s8oZqXPclKPUg==}
     dependencies:
-      cheerio: 1.0.0-rc.9
+      cheerio: 1.0.0-rc.10
     dev: true
 
   /deep-is/0.1.3:
@@ -1566,19 +1521,10 @@ packages:
       object-keys: 1.1.1
     dev: true
 
-  /delegate/3.2.0:
-    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
-    optional: true
-
   /diacritics/1.3.0:
     resolution: {integrity: sha1-PvqHMj67hj5mls67AILUj/PW96E=}
     dev: true
 
-  /dijkstrajs/1.0.2:
-    resolution: {integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==}
-    dev: false
-    optional: true
-
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1600,6 +1546,10 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /doctypes/1.1.0:
+    resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=}
+    dev: true
+
   /dom-serializer/1.3.2:
     resolution: {integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==}
     dependencies:
@@ -1631,14 +1581,16 @@ packages:
     resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
     dev: true
 
-  /electron-to-chromium/1.3.749:
-    resolution: {integrity: sha512-F+v2zxZgw/fMwPz/VUGIggG4ZndDsYy0vlpthi3tjmDZlcfbhN5mYW0evXUsBr2sUtuDANFtle410A9u/sd/4A==}
+  /electron-to-chromium/1.3.820:
+    resolution: {integrity: sha512-5cFwDmo2yzEA9hn55KZ9+cX/b6DSFvpKz8Hb2fiDmriXWB+DBoXKXmncQwNRFBBTlUdsvPHCoy594OoMLAO0Tg==}
     dev: true
 
-  /emoji-regex/7.0.3:
-    resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
-    dev: false
-    optional: true
+  /emmet/2.3.4:
+    resolution: {integrity: sha512-3IqSwmO+N2ZGeuhDyhV/TIOJFUbkChi53bcasSNRE7Yd+4eorbbYz4e53TpMECt38NtYkZNupQCZRlwdAYA42A==}
+    dependencies:
+      '@emmetio/abbreviation': 2.2.2
+      '@emmetio/css-abbreviation': 2.1.4
+    dev: true
 
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1675,8 +1627,8 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
-  /es-abstract/1.18.3:
-    resolution: {integrity: sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==}
+  /es-abstract/1.18.5:
+    resolution: {integrity: sha512-DDggyJLoS91CkJjgauM5c0yZMjiD1uK3KcaCeAmffGwZ+ODWzOkPN4QwRbsK5DOFf06fywmyLci3ZD8jLGhVYA==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.2
@@ -1685,11 +1637,12 @@ packages:
       get-intrinsic: 1.1.1
       has: 1.0.3
       has-symbols: 1.0.2
-      is-callable: 1.2.3
+      internal-slot: 1.0.3
+      is-callable: 1.2.4
       is-negative-zero: 2.0.1
-      is-regex: 1.1.3
-      is-string: 1.0.6
-      object-inspect: 1.10.3
+      is-regex: 1.1.4
+      is-string: 1.0.7
+      object-inspect: 1.11.0
       object-keys: 1.1.1
       object.assign: 4.1.2
       string.prototype.trimend: 1.0.4
@@ -1701,26 +1654,21 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      is-callable: 1.2.3
-      is-date-object: 1.0.4
+      is-callable: 1.2.4
+      is-date-object: 1.0.5
       is-symbol: 1.0.4
     dev: true
 
-  /esbuild-register/2.5.0:
-    resolution: {integrity: sha512-5a8W3rH7IQbIPR9pPXJFkC3+CRMtm/OSpBz3hkWUUU63oPZ3NU6dVDGfaIjKnRizCTIRoGjNE6KEDt5p1sLwEw==}
+  /esbuild-register/3.0.0:
+    resolution: {integrity: sha512-No7U3ZUd6gPrrC6gqdb3XFcf2lNqzn8nvQXcgcyOl8szMVuN6YUvOplnmakxWyogI9d8SiJMl0uzBzJck+Aoxw==}
+    peerDependencies:
+      esbuild: '>=0.12 <1'
     dependencies:
-      esbuild: 0.11.23
       jsonc-parser: 3.0.0
     dev: true
 
-  /esbuild/0.11.23:
-    resolution: {integrity: sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-
-  /esbuild/0.12.6:
-    resolution: {integrity: sha512-RDvVLvAjsq/kIZJoneMiUOH7EE7t2QaW7T3Q7EdQij14+bZbDq5sndb0tTanmHIFSqZVMBMMyqzVHkS3dJobeA==}
+  /esbuild/0.12.23:
+    resolution: {integrity: sha512-qvS4aKnmKikoWGscd5lVAzgobMovlH/JhaWitRiQ8xJx0x1Fym0pqVjMFs43Nvff8WpibeWm+fWoLK88T1U0Xw==}
     hasBin: true
     requiresBuild: true
     dev: true
@@ -1744,7 +1692,7 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-standard/16.0.3_9b1ed0fbb6e25a41b84e6554ef04a7db:
+  /eslint-config-standard/16.0.3_dfa64ed3583b1f068d7b5761cc0291ce:
     resolution: {integrity: sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==}
     peerDependencies:
       eslint: ^7.12.1
@@ -1752,46 +1700,46 @@ packages:
       eslint-plugin-node: ^11.1.0
       eslint-plugin-promise: ^4.2.1 || ^5.0.0
     dependencies:
-      eslint: 7.28.0
-      eslint-plugin-import: 2.23.4_eslint@7.28.0
-      eslint-plugin-node: 11.1.0_eslint@7.28.0
-      eslint-plugin-promise: 4.3.1
+      eslint: 7.32.0
+      eslint-plugin-import: 2.24.2_eslint@7.32.0
+      eslint-plugin-node: 11.1.0_eslint@7.32.0
+      eslint-plugin-promise: 5.1.0_eslint@7.32.0
     dev: true
 
-  /eslint-import-resolver-node/0.3.4:
-    resolution: {integrity: sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==}
+  /eslint-import-resolver-node/0.3.6:
+    resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
     dependencies:
-      debug: 2.6.9
+      debug: 3.2.7
       resolve: 1.20.0
     dev: true
 
-  /eslint-module-utils/2.6.1:
-    resolution: {integrity: sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==}
+  /eslint-module-utils/2.6.2:
+    resolution: {integrity: sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==}
     engines: {node: '>=4'}
     dependencies:
       debug: 3.2.7
       pkg-dir: 2.0.0
     dev: true
 
-  /eslint-plugin-es/3.0.1_eslint@7.28.0:
+  /eslint-plugin-es/3.0.1_eslint@7.32.0:
     resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
-      eslint: 7.28.0
+      eslint: 7.32.0
       eslint-utils: 2.1.0
-      regexpp: 3.1.0
+      regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-eslint-comments/3.2.0_eslint@7.28.0:
+  /eslint-plugin-eslint-comments/3.2.0_eslint@7.32.0:
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 7.28.0
+      eslint: 7.32.0
       ignore: 5.1.8
     dev: true
 
@@ -1801,8 +1749,8 @@ packages:
       htmlparser2: 6.1.0
     dev: true
 
-  /eslint-plugin-import/2.23.4_eslint@7.28.0:
-    resolution: {integrity: sha512-6/wP8zZRsnQFiR3iaPFgh5ImVRM1WN5NUWfTIRqwOdeiGJlBcSk82o1FEVq8yXmy4lkIzTo7YhHCIxlU/2HyEQ==}
+  /eslint-plugin-import/2.24.2_eslint@7.32.0:
+    resolution: {integrity: sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==}
     engines: {node: '>=4'}
     peerDependencies:
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0
@@ -1811,51 +1759,52 @@ packages:
       array.prototype.flat: 1.2.4
       debug: 2.6.9
       doctrine: 2.1.0
-      eslint: 7.28.0
-      eslint-import-resolver-node: 0.3.4
-      eslint-module-utils: 2.6.1
+      eslint: 7.32.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.6.2
       find-up: 2.1.0
       has: 1.0.3
-      is-core-module: 2.4.0
+      is-core-module: 2.6.0
       minimatch: 3.0.4
       object.values: 1.1.4
       pkg-up: 2.0.0
       read-pkg-up: 3.0.0
       resolve: 1.20.0
-      tsconfig-paths: 3.9.0
+      tsconfig-paths: 3.11.0
     dev: true
 
-  /eslint-plugin-jsonc/1.2.1_eslint@7.28.0:
-    resolution: {integrity: sha512-m7o4gaNKojSwRJDNP0/7HK1vGfGgynX6DeTHTXhYGxWn2DB8E2RU5jeK95CYw1/mwej4ku2Xd9Tevn6WOlI6Dg==}
+  /eslint-plugin-jsonc/1.6.0_eslint@7.32.0:
+    resolution: {integrity: sha512-0J/8SAjrBkgARsiQ/fyrMTochEy6t24fE9uQ5Gq5KmPZUXAKQuOjS3Zned2iI4r9jyUAoQlAXBfcGDQpWbJkCQ==}
+    engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: ^5.0.0 || >=6.0.0
     dependencies:
-      eslint: 7.28.0
-      eslint-utils: 2.1.0
-      jsonc-eslint-parser: 1.0.1
+      eslint: 7.32.0
+      eslint-utils: 3.0.0_eslint@7.32.0
+      jsonc-eslint-parser: 1.3.0_eslint@7.32.0
       natural-compare: 1.4.0
     dev: true
 
-  /eslint-plugin-markdown/2.2.0_eslint@7.28.0:
+  /eslint-plugin-markdown/2.2.0_eslint@7.32.0:
     resolution: {integrity: sha512-Ctuc7aP1tU92qnFwVO1wDLEzf1jqMxwRkcSTw7gjbvnEqfh5CKUcTXM0sxg8CB2KDXrqpTuMZPgJ1XE9Olr7KA==}
     engines: {node: ^8.10.0 || ^10.12.0 || >= 12.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      eslint: 7.28.0
+      eslint: 7.32.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-node/11.1.0_eslint@7.28.0:
+  /eslint-plugin-node/11.1.0_eslint@7.32.0:
     resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=5.16.0'
     dependencies:
-      eslint: 7.28.0
-      eslint-plugin-es: 3.0.1_eslint@7.28.0
+      eslint: 7.32.0
+      eslint-plugin-es: 3.0.1_eslint@7.32.0
       eslint-utils: 2.1.0
       ignore: 5.1.8
       minimatch: 3.0.4
@@ -1863,12 +1812,16 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /eslint-plugin-promise/4.3.1:
-    resolution: {integrity: sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==}
-    engines: {node: '>=6'}
+  /eslint-plugin-promise/5.1.0_eslint@7.32.0:
+    resolution: {integrity: sha512-NGmI6BH5L12pl7ScQHbg7tvtk4wPxxj8yPHH47NvSmMtFneC077PSeY3huFj06ZWZvtbfxSPt3RuOQD5XcR4ng==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    peerDependencies:
+      eslint: ^7.0.0
+    dependencies:
+      eslint: 7.32.0
     dev: true
 
-  /eslint-plugin-react/7.24.0_eslint@7.28.0:
+  /eslint-plugin-react/7.24.0_eslint@7.32.0:
     resolution: {integrity: sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -1877,7 +1830,7 @@ packages:
       array-includes: 3.1.3
       array.prototype.flatmap: 1.2.4
       doctrine: 2.1.0
-      eslint: 7.28.0
+      eslint: 7.32.0
       has: 1.0.3
       jsx-ast-utils: 3.2.0
       minimatch: 3.0.4
@@ -1889,19 +1842,18 @@ packages:
       string.prototype.matchall: 4.0.5
     dev: true
 
-  /eslint-plugin-unicorn/28.0.2_eslint@7.28.0:
-    resolution: {integrity: sha512-k4AoFP7n8/oq6lBXkdc9Flid6vw2B8j7aXFCxgzJCyKvmaKrCUFb1TFPhG9eSJQFZowqmymMPRtl8oo9NKLUbw==}
-    engines: {node: '>=10'}
+  /eslint-plugin-unicorn/34.0.1_eslint@7.32.0:
+    resolution: {integrity: sha512-GUBtRYRhPVOW/GDu6QtOjrneSZxY/MulOT8puJU+47VKCzNmMgS/iHO2gZqoQ7KPMrpNYlebUlvCWy3IR1USVQ==}
+    engines: {node: '>=12'}
     peerDependencies:
-      eslint: '>=7.17.0'
+      eslint: '>=7.28.0'
     dependencies:
-      ci-info: 2.0.0
+      ci-info: 3.2.0
       clean-regexp: 1.0.0
-      eslint: 7.28.0
-      eslint-template-visitor: 2.3.2_eslint@7.28.0
-      eslint-utils: 2.1.0
-      eslint-visitor-keys: 2.1.0
-      import-modules: 2.1.0
+      eslint: 7.32.0
+      eslint-template-visitor: 2.3.2_eslint@7.32.0
+      eslint-utils: 3.0.0_eslint@7.32.0
+      is-builtin-module: 3.1.0
       lodash: 4.17.21
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
@@ -1913,28 +1865,28 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-vue/7.7.0_eslint@7.28.0:
-    resolution: {integrity: sha512-mYz4bpLGv5jx6YG/GvKkqbGSfV7uma2u1P3mLA41Q5vQl8W1MeuTneB8tfsLq6xxxesFubcrOC0BZBJ5R+eaCQ==}
+  /eslint-plugin-vue/7.12.1_eslint@7.32.0:
+    resolution: {integrity: sha512-xHf/wCt88qmzqQerjaSteUFGASj7fPreglKD4ijnvoKRkoSJ3/H3kuJE8QFFtc+2wjw6hRDs834HH7vpuTJQzg==}
     engines: {node: '>=8.10'}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0
     dependencies:
-      eslint: 7.28.0
+      eslint: 7.32.0
       eslint-utils: 2.1.0
       natural-compare: 1.4.0
       semver: 7.3.5
-      vue-eslint-parser: 7.6.0_eslint@7.28.0
+      vue-eslint-parser: 7.10.0_eslint@7.32.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-yml/0.8.1_eslint@7.28.0:
-    resolution: {integrity: sha512-Cmqj/8eUoQ3ryesaOgsS2wdhYJJ6NCCBiO1BtCMZ8d3LRvnW0J2aImfiAtgqkpXEbmfL8P9wI1FqxSVOdujbSA==}
+  /eslint-plugin-yml/0.9.0_eslint@7.32.0:
+    resolution: {integrity: sha512-0hHBm/aOyaRSQ3y7iEJ5uSIksYf2kdv3riMLEJoyyOBoQ6p1ODxJCBBhWdo/cbnFZRPvGhzDd5RCTqgExsIqMA==}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.3.1
-      eslint: 7.28.0
+      debug: 4.3.2
+      eslint: 7.32.0
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 0.3.2
@@ -1950,14 +1902,14 @@ packages:
       estraverse: 4.3.0
     dev: true
 
-  /eslint-template-visitor/2.3.2_eslint@7.28.0:
+  /eslint-template-visitor/2.3.2_eslint@7.32.0:
     resolution: {integrity: sha512-3ydhqFpuV7x1M9EK52BPNj6V0Kwu0KKkcIAfpUhwHbR8ocRln/oUHgfxQupY8O1h4Qv/POHDumb/BwwNfxbtnA==}
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      '@babel/core': 7.14.3
-      '@babel/eslint-parser': 7.14.4_@babel+core@7.14.3+eslint@7.28.0
-      eslint: 7.28.0
+      '@babel/core': 7.15.0
+      '@babel/eslint-parser': 7.15.0_@babel+core@7.15.0+eslint@7.32.0
+      eslint: 7.32.0
       eslint-visitor-keys: 2.1.0
       esquery: 1.4.0
       multimap: 1.1.0
@@ -1972,13 +1924,13 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@7.28.0:
+  /eslint-utils/3.0.0_eslint@7.32.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 7.28.0
+      eslint: 7.32.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -1992,17 +1944,18 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint/7.28.0:
-    resolution: {integrity: sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==}
+  /eslint/7.32.0:
+    resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
     engines: {node: ^10.12.0 || >=12.0.0}
     hasBin: true
     dependencies:
       '@babel/code-frame': 7.12.11
-      '@eslint/eslintrc': 0.4.2
+      '@eslint/eslintrc': 0.4.3
+      '@humanwhocodes/config-array': 0.5.0
       ajv: 6.12.6
-      chalk: 4.1.1
+      chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.1
+      debug: 4.3.2
       doctrine: 3.0.0
       enquirer: 2.3.6
       escape-string-regexp: 4.0.0
@@ -2016,7 +1969,7 @@ packages:
       file-entry-cache: 6.0.1
       functional-red-black-tree: 1.0.1
       glob-parent: 5.1.2
-      globals: 13.9.0
+      globals: 13.11.0
       ignore: 4.0.6
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
@@ -2029,7 +1982,7 @@ packages:
       natural-compare: 1.4.0
       optionator: 0.9.1
       progress: 2.0.3
-      regexpp: 3.1.0
+      regexpp: 3.2.0
       semver: 7.3.5
       strip-ansi: 6.0.0
       strip-json-comments: 3.1.1
@@ -2045,7 +1998,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       acorn: 7.4.1
-      acorn-jsx: 5.3.1_acorn@7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
       eslint-visitor-keys: 1.3.0
     dev: true
 
@@ -2054,7 +2007,7 @@ packages:
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       acorn: 7.4.1
-      acorn-jsx: 5.3.1_acorn@7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
       eslint-visitor-keys: 1.3.0
     dev: true
 
@@ -2096,6 +2049,21 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /execa/5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.3
+      strip-final-newline: 2.0.0
+    dev: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=}
     engines: {node: '>=0.10.0'}
@@ -2107,16 +2075,15 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
-  /fast-glob/3.2.5:
-    resolution: {integrity: sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==}
+  /fast-glob/3.2.7:
+    resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==}
     engines: {node: '>=8'}
     dependencies:
       '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.7
+      '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.4
-      picomatch: 2.3.0
     dev: true
 
   /fast-json-stable-stringify/2.1.0:
@@ -2127,8 +2094,8 @@ packages:
     resolution: {integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=}
     dev: true
 
-  /fastq/1.11.0:
-    resolution: {integrity: sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==}
+  /fastq/1.12.0:
+    resolution: {integrity: sha512-VNX0QkHK3RsXVKr9KrlUv/FoTa0NdbYoHHl7uXHv2rzyHSlxjdNAKug2twd9luJxpcyNeAgf5iPPMutJO67Dfg==}
     dependencies:
       reusify: 1.0.4
     dev: true
@@ -2167,14 +2134,6 @@ packages:
       locate-path: 2.0.0
     dev: true
 
-  /find-up/3.0.0:
-    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
-    engines: {node: '>=6'}
-    dependencies:
-      locate-path: 3.0.0
-    dev: false
-    optional: true
-
   /find-up/4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -2187,46 +2146,19 @@ packages:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flatted: 3.1.1
+      flatted: 3.2.2
       rimraf: 3.0.2
     dev: true
 
-  /flatted/3.1.1:
-    resolution: {integrity: sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==}
+  /flatted/3.2.2:
+    resolution: {integrity: sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==}
     dev: true
 
-  /focus-trap/6.5.0:
-    resolution: {integrity: sha512-mezVantxaWNMrcJcrdw/bDfW3rVkl0xcdHKiHbNZzJ2R+KfcW9S6j48wFUAu7C52GFeQDGEWgDEIAvk9PxFvZw==}
-    dependencies:
-      tabbable: 5.2.0
-    dev: false
-    optional: true
-
-  /follow-redirects/1.14.1:
-    resolution: {integrity: sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   /fs-extra/10.0.0:
     resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
     engines: {node: '>=12'}
     dependencies:
-      graceful-fs: 4.2.6
-      jsonfile: 6.1.0
-      universalify: 2.0.0
-    dev: true
-
-  /fs-extra/9.1.0:
-    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      at-least-node: 1.0.0
-      graceful-fs: 4.2.6
+      graceful-fs: 4.2.8
       jsonfile: 6.1.0
       universalify: 2.0.0
     dev: true
@@ -2261,12 +2193,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /get-caller-file/2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-    dev: false
-    optional: true
-
   /get-intrinsic/1.1.1:
     resolution: {integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==}
     dependencies:
@@ -2275,6 +2201,11 @@ packages:
       has-symbols: 1.0.2
     dev: true
 
+  /get-stream/6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2309,33 +2240,27 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /globals/13.9.0:
-    resolution: {integrity: sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==}
+  /globals/13.11.0:
+    resolution: {integrity: sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
     dev: true
 
-  /globby/11.0.3:
-    resolution: {integrity: sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==}
+  /globby/11.0.4:
+    resolution: {integrity: sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==}
     engines: {node: '>=10'}
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.5
+      fast-glob: 3.2.7
       ignore: 5.1.8
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
 
-  /good-listener/1.2.2:
-    resolution: {integrity: sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=}
-    dependencies:
-      delegate: 3.2.0
-    optional: true
-
-  /graceful-fs/4.2.6:
-    resolution: {integrity: sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==}
+  /graceful-fs/4.2.8:
+    resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==}
     dev: true
 
   /gray-matter/4.0.3:
@@ -2367,6 +2292,13 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /has-tostringtag/1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.2
+    dev: true
+
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -2378,6 +2310,10 @@ packages:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
     dev: true
 
+  /highlight.js/10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: true
+
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -2391,21 +2327,27 @@ packages:
       entities: 2.2.0
     dev: true
 
+  /human-signals/2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
   /icss-replace-symbols/1.1.0:
     resolution: {integrity: sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=}
     dev: true
 
-  /icss-utils/5.1.0_postcss@8.3.0:
+  /icss-utils/5.1.0_postcss@8.3.6:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.3.0
+      postcss: 8.3.6
     dev: true
 
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: true
 
   /ignore/4.0.6:
     resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
@@ -2417,6 +2359,13 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /import-cwd/3.0.0:
+    resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
+    engines: {node: '>=8'}
+    dependencies:
+      import-from: 3.0.0
+    dev: true
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2425,9 +2374,11 @@ packages:
       resolve-from: 4.0.0
     dev: true
 
-  /import-modules/2.1.0:
-    resolution: {integrity: sha512-8HEWcnkbGpovH9yInoisxaSoIg9Brbul+Ju3Kqe2UsYDUBJD/iQjSgEj0zPcTDPKfPp2fs5xlv1i+JSye/m1/A==}
+  /import-from/3.0.0:
+    resolution: {integrity: sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==}
     engines: {node: '>=8'}
+    dependencies:
+      resolve-from: 5.0.0
     dev: true
 
   /imurmurhash/0.1.4:
@@ -2470,8 +2421,10 @@ packages:
     resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
     dev: true
 
-  /is-bigint/1.0.2:
-    resolution: {integrity: sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==}
+  /is-bigint/1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.1
     dev: true
 
   /is-binary-path/2.1.0:
@@ -2481,33 +2434,50 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
-  /is-boolean-object/1.1.1:
-    resolution: {integrity: sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==}
+  /is-boolean-object/1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.2
+      has-tostringtag: 1.0.0
     dev: true
 
-  /is-callable/1.2.3:
-    resolution: {integrity: sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==}
+  /is-builtin-module/3.1.0:
+    resolution: {integrity: sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.2.0
+    dev: true
+
+  /is-callable/1.2.4:
+    resolution: {integrity: sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==}
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-core-module/2.4.0:
-    resolution: {integrity: sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==}
+  /is-core-module/2.6.0:
+    resolution: {integrity: sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==}
     dependencies:
       has: 1.0.3
     dev: true
 
-  /is-date-object/1.0.4:
-    resolution: {integrity: sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==}
+  /is-date-object/1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
     dev: true
 
   /is-decimal/1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
     dev: true
 
+  /is-expression/4.0.0:
+    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+    dev: true
+
   /is-extendable/0.1.1:
     resolution: {integrity: sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=}
     engines: {node: '>=0.10.0'}
@@ -2518,12 +2488,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /is-fullwidth-code-point/2.0.0:
-    resolution: {integrity: sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=}
-    engines: {node: '>=4'}
-    dev: false
-    optional: true
-
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -2550,9 +2514,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-number-object/1.0.5:
-    resolution: {integrity: sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==}
+  /is-number-object/1.0.6:
+    resolution: {integrity: sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==}
     engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
     dev: true
 
   /is-number/7.0.0:
@@ -2560,17 +2526,28 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
-  /is-regex/1.1.3:
-    resolution: {integrity: sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==}
+  /is-promise/2.2.2:
+    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
+    dev: true
+
+  /is-regex/1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.2
-      has-symbols: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-stream/2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
     dev: true
 
-  /is-string/1.0.6:
-    resolution: {integrity: sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==}
+  /is-string/1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
     engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
     dev: true
 
   /is-symbol/1.0.4:
@@ -2585,20 +2562,24 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /isarray/2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-    optional: true
-
   /isexe/2.0.0:
     resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
     dev: true
 
-  /jiti/1.10.1:
-    resolution: {integrity: sha512-qux9juDtAC8HlZxAk/fku73ak4TWNLigRFTNzFShE/kw4bXVFsVu538vLXAxvNyPszXgpX4YxkXfwTYEi+zf5A==}
+  /jiti/1.11.0:
+    resolution: {integrity: sha512-/2c7e61hxxTIN34UeHBB0LCJ5Tq64kgJDV7GR+++e8XRxCKRIKmB8tH6ww1W+Z6Kgd6By+C3RSCu1lXjbPT68A==}
     hasBin: true
     dev: true
 
+  /joycon/3.0.1:
+    resolution: {integrity: sha512-SJcJNBg32dGgxhPtM0wQqxqV0ax9k/9TaUskGDSJkSFSQOEWWvQ3zzWdGQRIUry2j1zA5+ReH13t0Mf3StuVZA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /js-stringify/1.0.2:
+    resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=}
+    dev: true
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -2651,12 +2632,20 @@ packages:
     dependencies:
       minimist: 1.2.5
 
-  /jsonc-eslint-parser/1.0.1:
-    resolution: {integrity: sha512-mh5LY5byThmc692EqJS3Ss9sViNoNeCLNG5VQUgJLoAFFM3FzdIetd99qEiiQ+NXBVAIUgX5sWeK9leniS8RbQ==}
+  /jsonc-eslint-parser/1.3.0_eslint@7.32.0:
+    resolution: {integrity: sha512-+xXdr4lCtRpeOKFl+v64QgVUcz3z0XvcUZSKspAARII3zPKt53zGPPsSjepydtJifKzeOpqf46CaI8LvSxLHyA==}
+    engines: {node: '>=8.10.0'}
     dependencies:
-      eslint-utils: 2.1.0
+      eslint-utils: 3.0.0_eslint@7.32.0
       eslint-visitor-keys: 2.1.0
       espree: 7.3.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - eslint
+    dev: true
+
+  /jsonc-parser/2.3.1:
+    resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
     dev: true
 
   /jsonc-parser/3.0.0:
@@ -2668,7 +2657,14 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.6
+      graceful-fs: 4.2.8
+    dev: true
+
+  /jstransformer/1.0.0:
+    resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=}
+    dependencies:
+      is-promise: 2.2.2
+      promise: 7.3.1
     dev: true
 
   /jsx-ast-utils/3.2.0:
@@ -2679,11 +2675,6 @@ packages:
       object.assign: 4.1.2
     dev: true
 
-  /jwt-decode/3.1.2:
-    resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
-    dev: false
-    optional: true
-
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -2697,6 +2688,11 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lilconfig/2.0.3:
+    resolution: {integrity: sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /lines-and-columns/1.1.6:
     resolution: {integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=}
     dev: true
@@ -2711,7 +2707,7 @@ packages:
     resolution: {integrity: sha1-L19Fq5HjMhYjT9U62rZo607AmTs=}
     engines: {node: '>=4'}
     dependencies:
-      graceful-fs: 4.2.6
+      graceful-fs: 4.2.8
       parse-json: 4.0.0
       pify: 3.0.0
       strip-bom: 3.0.0
@@ -2734,15 +2730,6 @@ packages:
       path-exists: 3.0.0
     dev: true
 
-  /locate-path/3.0.0:
-    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-locate: 3.0.0
-      path-exists: 3.0.0
-    dev: false
-    optional: true
-
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -2774,7 +2761,7 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
     dependencies:
-      chalk: 4.1.1
+      chalk: 4.1.2
       is-unicode-supported: 0.1.0
     dev: true
 
@@ -2809,12 +2796,12 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
-  /markdown-it-anchor/7.1.0_markdown-it@12.0.6:
+  /markdown-it-anchor/7.1.0_markdown-it@12.2.0:
     resolution: {integrity: sha512-loQggrwsIkkP7TOrESvmYkV2ikbQNNKhHcWyqC7/C2CmfHl1tkUizJJU8C5aGgg7J6oXVQJx17gk7i47tNn/lQ==}
     peerDependencies:
       markdown-it: '*'
     dependencies:
-      markdown-it: 12.0.6
+      markdown-it: 12.2.0
     dev: true
 
   /markdown-it-container/3.0.0:
@@ -2830,8 +2817,8 @@ packages:
     engines: {node: '>6.4.0'}
     dev: true
 
-  /markdown-it/12.0.6:
-    resolution: {integrity: sha512-qv3sVLl4lMT96LLtR7xeRJX11OUFjsaD5oVat2/SNBIb21bJXwal2+SklcRbTwGwqWpWH/HRtYavOoJE+seL8w==}
+  /markdown-it/12.2.0:
+    resolution: {integrity: sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==}
     hasBin: true
     dependencies:
       argparse: 2.0.1
@@ -2851,7 +2838,7 @@ packages:
   /mdast-util-from-markdown/0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
-      '@types/mdast': 3.0.3
+      '@types/mdast': 3.0.10
       mdast-util-to-string: 2.0.0
       micromark: 2.11.4
       parse-entities: 2.0.0
@@ -2874,6 +2861,10 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /merge-stream/2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
+
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2882,7 +2873,7 @@ packages:
   /micromark/2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
-      debug: 4.3.1
+      debug: 4.3.2
       parse-entities: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -2896,16 +2887,16 @@ packages:
       picomatch: 2.3.0
     dev: true
 
-  /mime-db/1.48.0:
-    resolution: {integrity: sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==}
+  /mime-db/1.49.0:
+    resolution: {integrity: sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==}
     engines: {node: '>= 0.6'}
     dev: true
 
-  /mime-types/2.1.31:
-    resolution: {integrity: sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==}
+  /mime-types/2.1.32:
+    resolution: {integrity: sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-db: 1.48.0
+      mime-db: 1.49.0
     dev: true
 
   /mime/2.5.2:
@@ -2928,8 +2919,8 @@ packages:
   /minimist/1.2.5:
     resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
 
-  /mitt/2.1.0:
-    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+  /mitt/3.0.0:
+    resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
     dev: false
 
   /ms/2.0.0:
@@ -2940,10 +2931,6 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
-  /ms/2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: true
-
   /multimap/1.1.0:
     resolution: {integrity: sha512-0ZIR9PasPxGXmRsEF8jsDzndzHDj7tIav+JUmvIFB/WHswliFnquxECT/De7GR4yg99ky/NlRKJT82G1y271bw==}
     dev: true
@@ -2956,8 +2943,8 @@ packages:
       thenify-all: 1.6.0
     dev: true
 
-  /nanoid/3.1.23:
-    resolution: {integrity: sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==}
+  /nanoid/3.1.25:
+    resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
     dev: true
@@ -2976,8 +2963,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /node-releases/1.1.73:
-    resolution: {integrity: sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==}
+  /node-releases/1.1.75:
+    resolution: {integrity: sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==}
     dev: true
 
   /normalize-package-data/2.5.0:
@@ -2994,10 +2981,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /nprogress/0.2.0:
-    resolution: {integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E=}
-    dev: false
-    optional: true
+  /npm-run-path/4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
 
   /nth-check/2.0.0:
     resolution: {integrity: sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==}
@@ -3010,8 +2999,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /object-inspect/1.10.3:
-    resolution: {integrity: sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==}
+  /object-inspect/1.11.0:
+    resolution: {integrity: sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==}
     dev: true
 
   /object-keys/1.1.1:
@@ -3035,7 +3024,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
     dev: true
 
   /object.fromentries/2.0.4:
@@ -3044,7 +3033,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
       has: 1.0.3
     dev: true
 
@@ -3054,7 +3043,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
     dev: true
 
   /on-finished/2.3.0:
@@ -3094,12 +3083,12 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
-  /ora/5.4.0:
-    resolution: {integrity: sha512-1StwyXQGoU6gdjYkyVcqOLnVlbKj+6yPNNOxJVgpt9t4eksKjiriiHuxktLYkgllwk+D6MbC4ihH84L1udRXPg==}
+  /ora/5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
     dependencies:
       bl: 4.1.0
-      chalk: 4.1.1
+      chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.0
       is-interactive: 1.0.0
@@ -3121,6 +3110,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       p-try: 2.2.0
+    dev: true
 
   /p-locate/2.0.0:
     resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
@@ -3129,14 +3119,6 @@ packages:
       p-limit: 1.3.0
     dev: true
 
-  /p-locate/3.0.0:
-    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-limit: 2.3.0
-    dev: false
-    optional: true
-
   /p-locate/4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -3152,6 +3134,7 @@ packages:
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
+    dev: true
 
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
@@ -3183,7 +3166,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.12.13
+      '@babel/code-frame': 7.14.5
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.1.6
@@ -3207,6 +3190,7 @@ packages:
   /path-exists/3.0.0:
     resolution: {integrity: sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=}
     engines: {node: '>=4'}
+    dev: true
 
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -3275,12 +3259,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /pngjs/3.4.0:
-    resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
-    engines: {node: '>=4.0.0'}
-    dev: false
-    optional: true
-
   /polka/0.5.2:
     resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
     dependencies:
@@ -3288,60 +3266,74 @@ packages:
       trouter: 2.0.1
     dev: true
 
-  /postcss-modules-extract-imports/3.0.0_postcss@8.3.0:
+  /postcss-load-config/3.1.0:
+    resolution: {integrity: sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+    dependencies:
+      import-cwd: 3.0.0
+      lilconfig: 2.0.3
+      yaml: 1.10.2
+    dev: true
+
+  /postcss-modules-extract-imports/3.0.0_postcss@8.3.6:
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.3.0
+      postcss: 8.3.6
     dev: true
 
-  /postcss-modules-local-by-default/4.0.0_postcss@8.3.0:
+  /postcss-modules-local-by-default/4.0.0_postcss@8.3.6:
     resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0_postcss@8.3.0
-      postcss: 8.3.0
+      icss-utils: 5.1.0_postcss@8.3.6
+      postcss: 8.3.6
       postcss-selector-parser: 6.0.6
       postcss-value-parser: 4.1.0
     dev: true
 
-  /postcss-modules-scope/3.0.0_postcss@8.3.0:
+  /postcss-modules-scope/3.0.0_postcss@8.3.6:
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.3.0
+      postcss: 8.3.6
       postcss-selector-parser: 6.0.6
     dev: true
 
-  /postcss-modules-values/4.0.0_postcss@8.3.0:
+  /postcss-modules-values/4.0.0_postcss@8.3.6:
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0_postcss@8.3.0
-      postcss: 8.3.0
+      icss-utils: 5.1.0_postcss@8.3.6
+      postcss: 8.3.6
     dev: true
 
-  /postcss-modules/4.1.3_postcss@8.3.0:
-    resolution: {integrity: sha512-dBT39hrXe4OAVYJe/2ZuIZ9BzYhOe7t+IhedYeQ2OxKwDpAGlkEN/fR0fGnrbx4BvgbMReRX4hCubYK9cE/pJQ==}
+  /postcss-modules/4.2.2_postcss@8.3.6:
+    resolution: {integrity: sha512-/H08MGEmaalv/OU8j6bUKi/kZr2kqGF6huAW8m9UAgOLWtpFdhA14+gPBoymtqyv+D4MLsmqaF2zvIegdCxJXg==}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
       generic-names: 2.0.1
       icss-replace-symbols: 1.1.0
       lodash.camelcase: 4.3.0
-      postcss: 8.3.0
-      postcss-modules-extract-imports: 3.0.0_postcss@8.3.0
-      postcss-modules-local-by-default: 4.0.0_postcss@8.3.0
-      postcss-modules-scope: 3.0.0_postcss@8.3.0
-      postcss-modules-values: 4.0.0_postcss@8.3.0
+      postcss: 8.3.6
+      postcss-modules-extract-imports: 3.0.0_postcss@8.3.6
+      postcss-modules-local-by-default: 4.0.0_postcss@8.3.6
+      postcss-modules-scope: 3.0.0_postcss@8.3.6
+      postcss-modules-values: 4.0.0_postcss@8.3.6
       string-hash: 1.1.3
     dev: true
 
@@ -3357,17 +3349,17 @@ packages:
     resolution: {integrity: sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==}
     dev: true
 
-  /postcss/8.3.0:
-    resolution: {integrity: sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==}
+  /postcss/8.3.6:
+    resolution: {integrity: sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      colorette: 1.2.2
-      nanoid: 3.1.23
+      colorette: 1.3.0
+      nanoid: 3.1.25
       source-map-js: 0.6.2
     dev: true
 
-  /preact/10.5.13:
-    resolution: {integrity: sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==}
+  /preact/10.5.14:
+    resolution: {integrity: sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ==}
 
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -3378,16 +3370,20 @@ packages:
     resolution: {integrity: sha512-EL9ifuU/F8tEldoCa2sspiiLWysCL54xDbf2gN/ubwdtbuJROqOGopG5kSwunapwaioT+jLUQ/Ky+7jnv62xJA==}
     dev: false
 
-  /prismjs/1.23.0:
-    resolution: {integrity: sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==}
-    optionalDependencies:
-      clipboard: 2.0.8
+  /prismjs/1.24.1:
+    resolution: {integrity: sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow==}
 
   /progress/2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /promise/7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+    dependencies:
+      asap: 2.0.6
+    dev: true
+
   /prop-types/15.7.2:
     resolution: {integrity: sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==}
     dependencies:
@@ -3396,26 +3392,102 @@ packages:
       react-is: 16.13.1
     dev: true
 
+  /pug-attrs/3.0.0:
+    resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
+    dependencies:
+      constantinople: 4.0.1
+      js-stringify: 1.0.2
+      pug-runtime: 3.0.1
+    dev: true
+
+  /pug-code-gen/3.0.2:
+    resolution: {integrity: sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==}
+    dependencies:
+      constantinople: 4.0.1
+      doctypes: 1.1.0
+      js-stringify: 1.0.2
+      pug-attrs: 3.0.0
+      pug-error: 2.0.0
+      pug-runtime: 3.0.1
+      void-elements: 3.1.0
+      with: 7.0.2
+    dev: true
+
+  /pug-error/2.0.0:
+    resolution: {integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==}
+    dev: true
+
+  /pug-filters/4.0.0:
+    resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
+    dependencies:
+      constantinople: 4.0.1
+      jstransformer: 1.0.0
+      pug-error: 2.0.0
+      pug-walk: 2.0.0
+      resolve: 1.20.0
+    dev: true
+
+  /pug-lexer/5.0.1:
+    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.0.0
+    dev: true
+
+  /pug-linker/4.0.0:
+    resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
+    dependencies:
+      pug-error: 2.0.0
+      pug-walk: 2.0.0
+    dev: true
+
+  /pug-load/3.0.0:
+    resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
+    dependencies:
+      object-assign: 4.1.1
+      pug-walk: 2.0.0
+    dev: true
+
+  /pug-parser/6.0.0:
+    resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
+    dependencies:
+      pug-error: 2.0.0
+      token-stream: 1.0.0
+    dev: true
+
+  /pug-runtime/3.0.1:
+    resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
+    dev: true
+
+  /pug-strip-comments/2.0.0:
+    resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
+    dependencies:
+      pug-error: 2.0.0
+    dev: true
+
+  /pug-walk/2.0.0:
+    resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
+    dev: true
+
+  /pug/3.0.2:
+    resolution: {integrity: sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==}
+    dependencies:
+      pug-code-gen: 3.0.2
+      pug-filters: 4.0.0
+      pug-lexer: 5.0.1
+      pug-linker: 4.0.0
+      pug-load: 3.0.0
+      pug-parser: 6.0.0
+      pug-runtime: 3.0.1
+      pug-strip-comments: 2.0.0
+    dev: true
+
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
     dev: true
 
-  /qrcode/1.4.4:
-    resolution: {integrity: sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dependencies:
-      buffer: 5.7.1
-      buffer-alloc: 1.2.0
-      buffer-from: 1.1.1
-      dijkstrajs: 1.0.2
-      isarray: 2.0.5
-      pngjs: 3.4.0
-      yargs: 13.3.2
-    dev: false
-    optional: true
-
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -3454,7 +3526,7 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
     dependencies:
-      '@types/normalize-package-data': 2.4.0
+      '@types/normalize-package-data': 2.4.1
       normalize-package-data: 2.5.0
       parse-json: 5.2.0
       type-fest: 0.6.0
@@ -3469,8 +3541,8 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /readdirp/3.5.0:
-    resolution: {integrity: sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==}
+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.0
@@ -3489,27 +3561,20 @@ packages:
       define-properties: 1.1.3
     dev: true
 
-  /regexpp/3.1.0:
-    resolution: {integrity: sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==}
+  /regexpp/3.2.0:
+    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
     dev: true
 
-  /require-directory/2.1.1:
-    resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-    optional: true
+  /request-light/0.5.4:
+    resolution: {integrity: sha512-t3566CMweOFlUk7Y1DJMu5OrtpoZEb6aSTsLQVT3wtrIEJ5NhcY9G/Oqxvjllzl4a15zXfFlcr9q40LbLVQJqw==}
+    dev: true
 
   /require-from-string/2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /require-main-filename/2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: false
-    optional: true
-
   /reserved-words/0.1.2:
     resolution: {integrity: sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=}
     dev: true
@@ -3519,17 +3584,22 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /resolve-from/5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /resolve/1.20.0:
     resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==}
     dependencies:
-      is-core-module: 2.4.0
+      is-core-module: 2.6.0
       path-parse: 1.0.7
     dev: true
 
   /resolve/2.0.0-next.3:
     resolution: {integrity: sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==}
     dependencies:
-      is-core-module: 2.4.0
+      is-core-module: 2.6.0
       path-parse: 1.0.7
     dev: true
 
@@ -3553,8 +3623,8 @@ packages:
       glob: 7.1.7
     dev: true
 
-  /rollup/2.51.0:
-    resolution: {integrity: sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==}
+  /rollup/2.56.3:
+    resolution: {integrity: sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
@@ -3589,10 +3659,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /select/1.1.2:
-    resolution: {integrity: sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=}
-    optional: true
-
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
@@ -3611,11 +3677,6 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /set-blocking/2.0.0:
-    resolution: {integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=}
-    dev: false
-    optional: true
-
   /shebang-command/2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -3633,18 +3694,18 @@ packages:
     dependencies:
       call-bind: 1.0.2
       get-intrinsic: 1.1.1
-      object-inspect: 1.10.3
+      object-inspect: 1.11.0
     dev: true
 
   /signal-exit/3.0.3:
     resolution: {integrity: sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==}
     dev: true
 
-  /sirv/1.0.12:
-    resolution: {integrity: sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==}
+  /sirv/1.0.17:
+    resolution: {integrity: sha512-qx9go5yraB7ekT7bCMqUHJ5jEaOC/GXBxUWv+jeWnb7WzHUFdcQPGWk7YmAwFBaQBrogpuSqd/azbC2lZRqqmw==}
     engines: {node: '>= 10'}
     dependencies:
-      '@polka/url': 1.0.0-next.15
+      '@polka/url': 1.0.0-next.20
       mime: 2.5.2
       totalist: 1.1.0
     dev: true
@@ -3685,7 +3746,7 @@ packages:
     resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.9
+      spdx-license-ids: 3.0.10
     dev: true
 
   /spdx-exceptions/2.3.0:
@@ -3696,15 +3757,15 @@ packages:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.9
+      spdx-license-ids: 3.0.10
     dev: true
 
-  /spdx-license-ids/3.0.9:
-    resolution: {integrity: sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==}
+  /spdx-license-ids/3.0.10:
+    resolution: {integrity: sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==}
     dev: true
 
-  /splitpanes/3.0.4:
-    resolution: {integrity: sha512-KRaPtMDpu++OfvAzNQYE5U7WT5NoMA6l9B0buC4PhYoDILVLY8zN7Sp9cHXAgLhH59jI3lKzVoNqyf4OGRv7QQ==}
+  /splitpanes/3.0.6:
+    resolution: {integrity: sha512-Ogxc+e2te4Tp5IpMwjOPO1ZvXUf2PsuEoyZhF9H5Hp6XOB0mLg/OnEZFaK2MxT7Q3O+WSEKE7CeOoTC+4zsQ6A==}
     dev: false
 
   /sprintf-js/1.0.3:
@@ -3720,16 +3781,6 @@ packages:
     resolution: {integrity: sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=}
     dev: true
 
-  /string-width/3.1.0:
-    resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==}
-    engines: {node: '>=6'}
-    dependencies:
-      emoji-regex: 7.0.3
-      is-fullwidth-code-point: 2.0.0
-      strip-ansi: 5.2.0
-    dev: false
-    optional: true
-
   /string-width/4.2.2:
     resolution: {integrity: sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==}
     engines: {node: '>=8'}
@@ -3744,7 +3795,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
-      es-abstract: 1.18.3
+      es-abstract: 1.18.5
       get-intrinsic: 1.1.1
       has-symbols: 1.0.2
       internal-slot: 1.0.3
@@ -3772,14 +3823,6 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /strip-ansi/5.2.0:
-    resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
-    engines: {node: '>=6'}
-    dependencies:
-      ansi-regex: 4.1.0
-    dev: false
-    optional: true
-
   /strip-ansi/6.0.0:
     resolution: {integrity: sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==}
     engines: {node: '>=8'}
@@ -3797,13 +3840,18 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /strip-final-newline/2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
     dev: true
 
-  /sucrase/3.18.2:
-    resolution: {integrity: sha512-xCFP35OA6uAtBUVB8jPSftiR2Udjh0d9JkQnUOYppILpN4rBSk0yxiy67GVzD3XsFGIB6LlyIfhCABtwlopMSw==}
+  /sucrase/3.20.1:
+    resolution: {integrity: sha512-BIG59HaJOxNct9Va6KvT5yzBA/rcMGetzvZyTx0ZdCcspIbpJTPS64zuAfYlJuOj+3WaI5JOdA+F0bJQQi8ZiQ==}
     engines: {node: '>=8'}
     hasBin: true
     dependencies:
@@ -3829,16 +3877,11 @@ packages:
       has-flag: 4.0.0
     dev: true
 
-  /tabbable/5.2.0:
-    resolution: {integrity: sha512-0uyt8wbP0P3T4rrsfYg/5Rg3cIJ8Shl1RJ54QMqYxm1TLdWqJD1u6+RQjr2Lor3wmfT7JRHkirIwy99ydBsyPg==}
-    dev: false
-    optional: true
-
   /table/6.7.1:
     resolution: {integrity: sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==}
     engines: {node: '>=10.0.0'}
     dependencies:
-      ajv: 8.6.0
+      ajv: 8.6.2
       lodash.clonedeep: 4.5.0
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
@@ -3863,10 +3906,6 @@ packages:
       any-promise: 1.3.0
     dev: true
 
-  /tiny-emitter/2.1.0:
-    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
-    optional: true
-
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
     engines: {node: '>=4'}
@@ -3878,11 +3917,20 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /token-stream/1.0.0:
+    resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
+    dev: true
+
   /totalist/1.1.0:
     resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==}
     engines: {node: '>=6'}
     dev: true
 
+  /tree-kill/1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+    dev: true
+
   /trouter/2.0.1:
     resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
     engines: {node: '>=6'}
@@ -3894,8 +3942,8 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /tsconfig-paths/3.9.0:
-    resolution: {integrity: sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==}
+  /tsconfig-paths/3.11.0:
+    resolution: {integrity: sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==}
     dependencies:
       '@types/json5': 0.0.29
       json5: 1.0.1
@@ -3907,18 +3955,46 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tslib/2.2.0:
-    resolution: {integrity: sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==}
+  /tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
+    dev: true
+
+  /tsup/4.14.0_typescript@4.4.2:
+    resolution: {integrity: sha512-77rWdzhikTP9mQ34XMRzK83tw++LF6f4ox/HNERlgesB7g6g5VQ1iJlueG9O0P9HAZGVKavUwyoZv0+322p6rg==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^4.2.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      cac: 6.7.3
+      chalk: 4.1.2
+      chokidar: 3.5.2
+      debug: 4.3.2
+      esbuild: 0.12.23
+      execa: 5.1.1
+      globby: 11.0.4
+      joycon: 3.0.1
+      postcss-load-config: 3.1.0
+      resolve-from: 5.0.0
+      rollup: 2.56.3
+      sucrase: 3.20.1
+      tree-kill: 1.2.2
+      typescript: 4.4.2
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
     dev: true
 
-  /tsutils/3.21.0_typescript@4.3.2:
+  /tsutils/3.21.0_typescript@4.4.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.3.2
+      typescript: 4.4.2
     dev: true
 
   /type-check/0.4.0:
@@ -3943,8 +4019,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /typescript/4.3.2:
-    resolution: {integrity: sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==}
+  /typescript/4.4.2:
+    resolution: {integrity: sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==}
     engines: {node: '>=4.2.0'}
     hasBin: true
     dev: true
@@ -3965,17 +4041,9 @@ packages:
   /unist-util-stringify-position/2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
-      '@types/unist': 2.0.3
+      '@types/unist': 2.0.6
     dev: true
 
-  /universal-cookie/4.0.4:
-    resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
-    dependencies:
-      '@types/cookie': 0.3.3
-      cookie: 0.4.1
-    dev: false
-    optional: true
-
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -3986,6 +4054,11 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /upath/2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+    dev: true
+
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -4017,23 +4090,22 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-plugin-components/0.10.4_vite@2.3.6:
-    resolution: {integrity: sha512-QOGd+7IE4EonPGMlxmudj0HadVxKzCdvaZmZcRgap4gE8F55sAIztuAQN4IHACEKuappWsB6XpMAY1iVrJUqog==}
+  /vite-plugin-components/0.13.2_vite@2.5.0:
+    resolution: {integrity: sha512-Fv5iTlZUvqUUjODdAkTadijobcys+SvrtYclj27/SCE7b4LtwNySd+nHvJcGI/GsL8npTdccj2IRwGsWLrTcvQ==}
     peerDependencies:
-      vite: ^2.0.0-beta.69
+      vite: ^2.0.0
     dependencies:
-      chokidar: 3.5.1
       debug: 4.3.2
-      fast-glob: 3.2.5
+      fast-glob: 3.2.7
       magic-string: 0.25.7
       minimatch: 3.0.4
-      vite: 2.3.6
+      vite: 2.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-icons/0.6.1_@iconify+json@1.1.354:
-    resolution: {integrity: sha512-OoH+JWK8Kx7Yeud/a2LLmsESs6WTYsn/qAkOdFI4j9Kq/PQn8/YpeTpmDjuTEs0EMe7DUe5OFokBO+dtH3ztCg==}
+  /vite-plugin-icons/0.6.5_03d2c571c47277889d0f7cb457412944:
+    resolution: {integrity: sha512-lfePr8juO2ajp0571iLL+9zIoyBD9nSSSHlC4JYXbAeMOJB6WTP+Vdc2gze8yI8JRO+Z0TXCCvvL9bPgvkI4Cg==}
     peerDependencies:
       '@iconify/json': '*'
       '@vue/compiler-sfc': ^3.0.2
@@ -4044,123 +4116,253 @@ packages:
       vue-template-compiler:
         optional: true
     dependencies:
-      '@iconify/json': 1.1.354
+      '@iconify/json': 1.1.394
       '@iconify/json-tools': 1.0.10
+      '@vue/compiler-sfc': 3.2.6
       vue-template-es2015-compiler: 1.9.1
     dev: true
 
-  /vite-plugin-restart/0.0.2_vite@2.3.6:
+  /vite-plugin-restart/0.0.2_vite@2.5.0:
     resolution: {integrity: sha512-WZ2Qp8Jo83wqBcZFQo481JchQcNgEYLIjd3NbhwPXr/mbg1mUC7hCMCrvafF5WcEQPChd7agx6fBm8RYrRR46A==}
     peerDependencies:
       vite: ^2.0.0-beta.69
     dependencies:
-      chalk: 4.1.1
+      chalk: 4.1.2
       micromatch: 4.0.4
-      vite: 2.3.6
+      vite: 2.5.0
     dev: true
 
-  /vite-plugin-windicss/1.0.2_vite@2.3.6:
-    resolution: {integrity: sha512-iTmkxm8Yp+ZCFWLOs//9q3d4hYaBVDlkRGLzNBUNvRW9AQFVea57ZPhglMm9xOt1nW/O68n5Rkg4/In8rrEjHQ==}
+  /vite-plugin-windicss/1.3.0_typescript@4.4.2+vite@2.5.0:
+    resolution: {integrity: sha512-Xd9VxXX8z9bsdKs3iL6qXJDXsDDl/HQSWqJOLZFkkp23b3goGRnlT4Rlo5WeIAfrEV944r8bF7wfpDXCkk8XCg==}
     peerDependencies:
       vite: ^2.0.1
     dependencies:
-      '@windicss/plugin-utils': 1.0.2
-      chalk: 4.1.1
+      '@windicss/plugin-utils': 1.3.0_typescript@4.4.2
+      chalk: 4.1.2
       debug: 4.3.2
-      vite: 2.3.6
-      windicss: 3.1.3
+      vite: 2.5.0
+      windicss: 3.1.7
     transitivePeerDependencies:
       - supports-color
+      - ts-node
+      - typescript
     dev: true
 
-  /vite/2.3.6:
-    resolution: {integrity: sha512-fsEpNKDHgh3Sn66JH06ZnUBnIgUVUtw6ucDhlOj1CEqxIkymU25yv1/kWDPlIjyYHnalr0cN6V+zzUJ+fmWHYw==}
-    engines: {node: '>=12.0.0'}
+  /vite/2.5.0:
+    resolution: {integrity: sha512-Dn4B+g54PJsMG5WCc4QeFy1ygMXRdTtFrUPegqfk4+vzVQcbF/DqqmI/1bxezArzbujBJg/67QeT5wz8edfJVQ==}
+    engines: {node: '>=12.2.0'}
     hasBin: true
     dependencies:
-      esbuild: 0.12.6
-      postcss: 8.3.0
+      esbuild: 0.12.23
+      postcss: 8.3.6
       resolve: 1.20.0
-      rollup: 2.51.0
+      rollup: 2.56.3
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress/0.14.0:
-    resolution: {integrity: sha512-Oqzl0skBpe85eiKBvg2r8YIuzluTIvJZhbX9oOmooTP0v5UH4YXIBdrlQtMHeGP77cX2VvQbXjCxLgM1jEZEUg==}
+  /vite/2.5.1:
+    resolution: {integrity: sha512-FwmLbbz8MB1pBs9dKoRDgpiqoijif8hSK1+NNUYc12/cnf+pM2UFhhQ1rcpXgbMhm/5c2USZdVAf0FSkSxaFDA==}
+    engines: {node: '>=12.2.0'}
+    hasBin: true
+    dependencies:
+      esbuild: 0.12.23
+      postcss: 8.3.6
+      resolve: 1.20.0
+      rollup: 2.56.3
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vitepress/0.16.1:
+    resolution: {integrity: sha512-jsgNY+b4mngVHQ1mZZ7ZGJliup/nM0jwdKTGoptwVzSQfkx5i3lF14jRRMb6ulC+9X5xbQ7N/zNcWqVWMFd/cQ==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
       '@docsearch/css': 1.0.0-alpha.28
       '@docsearch/js': 1.0.0-alpha.28
-      '@vitejs/plugin-vue': 1.2.3_@vue+compiler-sfc@3.1.1
-      '@vue/compiler-sfc': 3.1.1_vue@3.1.1
-      '@vue/server-renderer': 3.1.1_vue@3.1.1
-      chalk: 4.1.1
+      '@types/markdown-it': 12.2.0
+      '@vitejs/plugin-vue': 1.6.0_@vue+compiler-sfc@3.2.6
+      '@vue/compiler-sfc': 3.2.6
+      '@vue/server-renderer': 3.2.6_vue@3.2.6
+      chalk: 4.1.2
       compression: 1.7.4
       debug: 4.3.2
       diacritics: 1.3.0
       escape-html: 1.0.3
       fs-extra: 10.0.0
-      globby: 11.0.3
+      globby: 11.0.4
       gray-matter: 4.0.3
       lru-cache: 6.0.0
-      markdown-it: 12.0.6
-      markdown-it-anchor: 7.1.0_markdown-it@12.0.6
+      markdown-it: 12.2.0
+      markdown-it-anchor: 7.1.0_markdown-it@12.2.0
       markdown-it-container: 3.0.0
       markdown-it-emoji: 2.0.0
       markdown-it-table-of-contents: 0.5.2
       minimist: 1.2.5
-      ora: 5.4.0
+      ora: 5.4.1
       polka: 0.5.2
-      prismjs: 1.23.0
-      sirv: 1.0.12
-      vite: 2.3.6
-      vue: 3.1.1
+      prismjs: 1.24.1
+      sirv: 1.0.17
+      vite: 2.5.1
+      vue: 3.2.6
     transitivePeerDependencies:
       - react
       - react-dom
       - supports-color
     dev: true
 
-  /vue-board/0.0.5_vue@3.1.1:
-    resolution: {integrity: sha512-PJhE68kTUJyhY+3y8okrMXaGMMWv3u5TLu62w/Ik835s9u6ukVmxiTuLoIU/3/rZW3zKmCPT73fycIGWu4QHVg==}
-    peerDependencies:
-      vue: '>=3'
+  /void-elements/3.1.0:
+    resolution: {integrity: sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /vscode-css-languageservice/5.1.4:
+    resolution: {integrity: sha512-fIJZJMXbaBsK0ifBb2RmSiLtzwn6NrZnKn7O+0ziIjwAY+rPvSK9St2qqQXFU3reZVRAt/I4GBp40dC/THcUDA==}
     dependencies:
-      '@vueuse/core': 4.11.2_vue@3.1.1
-      vue: 3.1.1
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-    dev: false
+      vscode-languageserver-textdocument: 1.0.1
+      vscode-languageserver-types: 3.16.0
+      vscode-nls: 5.0.0
+      vscode-uri: 3.0.2
+    dev: true
+
+  /vscode-html-languageservice/4.0.7:
+    resolution: {integrity: sha512-P5TQMYpgxAdLs+PwpC7Lm+0lXCyQAC6kZ41YuPYNHVooC4XO7Y2+ncHBcQJVK4C9LU2cTOAl0lzq4WAxuwRHYw==}
+    dependencies:
+      vscode-languageserver-textdocument: 1.0.1
+      vscode-languageserver-types: 3.16.0
+      vscode-nls: 5.0.0
+      vscode-uri: 3.0.2
+    dev: true
+
+  /vscode-json-languageservice/4.1.7:
+    resolution: {integrity: sha512-cwG5TwZyHYthsk2aS3W1dVgVP6Vwn3o+zscwN58uMgZt/nKuyxd9vdEB1F58Ix+S5kSKAnkUCP6hvulcoImQQQ==}
+    engines: {npm: '>=7.0.0'}
+    dependencies:
+      jsonc-parser: 3.0.0
+      vscode-languageserver-textdocument: 1.0.1
+      vscode-languageserver-types: 3.16.0
+      vscode-nls: 5.0.0
+      vscode-uri: 3.0.2
+    dev: true
+
+  /vscode-jsonrpc/8.0.0-next.2:
+    resolution: {integrity: sha512-gxUyTBAjmwGkiHW/UaRScre2s4i98P8M7gnc3VB4DrVQUm3vQ0idi2cN9nbkfcjATx+uEt8C22j+MLN/8UzsJA==}
+    engines: {node: '>=8.0.0 || >=10.0.0'}
+    dev: true
 
-  /vue-demi/0.9.1_vue@3.1.1:
-    resolution: {integrity: sha512-7s1lufRD2l369eFWPjgLvhqCRk0XzGWJsQc7K4q+0mZtixyGIvsK1Cg88P4NcaRIEiBuuN4q1NN4SZKFKwQswA==}
+  /vscode-languageserver-protocol/3.17.0-next.8:
+    resolution: {integrity: sha512-P89vSuJ+FA5JzFmcOoZN13Ig1yd6LsiPOig0O5m5BSGuO/rplQegCd9J0wKpaTy7trf/SYHRoypnbUBdzy14sg==}
+    dependencies:
+      vscode-jsonrpc: 8.0.0-next.2
+      vscode-languageserver-types: 3.17.0-next.3
+    dev: true
+
+  /vscode-languageserver-textdocument/1.0.1:
+    resolution: {integrity: sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==}
+    dev: true
+
+  /vscode-languageserver-types/3.16.0:
+    resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==}
+    dev: true
+
+  /vscode-languageserver-types/3.17.0-next.3:
+    resolution: {integrity: sha512-VQcXnhKYxUW6OiRMhG++SzmZYMJwusXknJGd+FfdOnS1yHAo734OHyR0e2eEHDlv0/oWc8RZPgx/VKSKyondVg==}
+    dev: true
+
+  /vscode-languageserver/8.0.0-next.2:
+    resolution: {integrity: sha512-7qCEXTeGZKkI8BGvlKh0JPXTY7BaWoiwQYKCcGaUgnMs34wt6F/yaKcxoC3XIouBBVyRxiI6Ml/JdztM3XYEaA==}
+    hasBin: true
+    dependencies:
+      vscode-languageserver-protocol: 3.17.0-next.8
+    dev: true
+
+  /vscode-nls/5.0.0:
+    resolution: {integrity: sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==}
+    dev: true
+
+  /vscode-pug-languageservice/0.27.7:
+    resolution: {integrity: sha512-pRKKUNfbAwbDujyIQiLNBLeHIrIUXEDPzgYPxz3KFCxJ/t2RXk+RRZeWFXWsdsQi6uESAPyFTv+jHJltKwSCfw==}
+    dependencies:
+      '@volar/code-gen': 0.27.7
+      '@volar/shared': 0.27.7
+      '@volar/source-map': 0.27.7
+      '@volar/transforms': 0.27.7
+      pug-lexer: 5.0.1
+      pug-parser: 6.0.0
+      vscode-languageserver: 8.0.0-next.2
+    dev: true
+
+  /vscode-typescript-languageservice/0.27.7:
+    resolution: {integrity: sha512-7DAwUy6ZOHyitAvBSqDFrdhPmr9SrOsC9K/h1aDg1CKPZR321XjgeE0lOZlrFKCi7XL/JeTvZubYD1lc321ZOg==}
+    dependencies:
+      '@volar/shared': 0.27.7
+      upath: 2.0.1
+      vscode-languageserver: 8.0.0-next.2
+      vscode-languageserver-textdocument: 1.0.1
+    dev: true
+
+  /vscode-uri/2.1.2:
+    resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}
+    dev: true
+
+  /vscode-uri/3.0.2:
+    resolution: {integrity: sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==}
+    dev: true
+
+  /vscode-vue-languageservice/0.27.7:
+    resolution: {integrity: sha512-UXFkaPwkw+H32eXLaEyA23BNf4OUUOSffAwLu2/+W8Wi4/X0fr2aSsc2YKO+FNeIKAfIjS0qWDLo51kj1YIeCA==}
+    dependencies:
+      '@volar/code-gen': 0.27.7
+      '@volar/html2pug': 0.27.7
+      '@volar/shared': 0.27.7
+      '@volar/source-map': 0.27.7
+      '@volar/transforms': 0.27.7
+      '@vscode/emmet-helper': 2.7.0
+      '@vue/compiler-dom': 3.2.6
+      '@vue/compiler-sfc': 3.2.6
+      '@vue/reactivity': 3.2.6
+      '@vue/shared': 3.2.6
+      request-light: 0.5.4
+      upath: 2.0.1
+      vscode-css-languageservice: 5.1.4
+      vscode-html-languageservice: 4.0.7
+      vscode-json-languageservice: 4.1.7
+      vscode-languageserver: 8.0.0-next.2
+      vscode-languageserver-textdocument: 1.0.1
+      vscode-pug-languageservice: 0.27.7
+      vscode-typescript-languageservice: 0.27.7
+    dev: true
+
+  /vue-demi/0.11.3_vue@3.2.6:
+    resolution: {integrity: sha512-DpM0TTMpclRZDV6AIacgg837zrim/C9Zn+2ztXBs9hsESJN9vC83ztjTe4KC4HgJuVle8YUjPp7HTwWtwOHfmg==}
+    engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     peerDependencies:
-      '@vue/composition-api': ^1.0.0-beta.1
-      vue: ^2.6.0 || >=3.0.0-rc.1
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.1.1
+      vue: 3.2.6
     dev: false
 
-  /vue-eslint-parser/7.6.0_eslint@7.28.0:
-    resolution: {integrity: sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==}
+  /vue-eslint-parser/7.10.0_eslint@7.32.0:
+    resolution: {integrity: sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==}
     engines: {node: '>=8.10'}
     peerDependencies:
       eslint: '>=5.0.0'
     dependencies:
-      debug: 4.3.1
-      eslint: 7.28.0
+      debug: 4.3.2
+      eslint: 7.32.0
       eslint-scope: 5.1.1
       eslint-visitor-keys: 1.3.0
       espree: 6.2.1
       esquery: 1.4.0
       lodash: 4.17.21
+      semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4169,12 +4371,22 @@ packages:
     resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
     dev: true
 
-  /vue/3.1.1:
-    resolution: {integrity: sha512-j9fj3PNPMxo2eqOKYjMuss9XBS8ZtmczLY3kPvjcp9d3DbhyNqLYbaMQH18+1pDIzzVvQCQBvIf774LsjjqSKA==}
+  /vue-tsc/0.3.0_typescript@4.4.2:
+    resolution: {integrity: sha512-zaDRZBxwRIz1XjhNP92FqugG71st6BUMnA2EwPeXrAyzbEYVRz6TezNFceYl3QYqqN8CtaxbqUhaQEDj/ntoCA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      typescript: 4.4.2
+      vscode-vue-languageservice: 0.27.7
+    dev: true
+
+  /vue/3.2.6:
+    resolution: {integrity: sha512-Zlb3LMemQS3Xxa6xPsecu45bNjr1hxO8Bh5FUmE0Dr6Ot0znZBKiM47rK6O7FTcakxOnvVN+NTXWJF6u8ajpCQ==}
     dependencies:
-      '@vue/compiler-dom': 3.1.1
-      '@vue/runtime-dom': 3.1.1
-      '@vue/shared': 3.1.1
+      '@vue/compiler-dom': 3.2.6
+      '@vue/runtime-dom': 3.2.6
+      '@vue/shared': 3.2.6
 
   /wcwidth/1.0.1:
     resolution: {integrity: sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=}
@@ -4185,18 +4397,13 @@ packages:
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
-      is-bigint: 1.0.2
-      is-boolean-object: 1.1.1
-      is-number-object: 1.0.5
-      is-string: 1.0.6
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.6
+      is-string: 1.0.7
       is-symbol: 1.0.4
     dev: true
 
-  /which-module/2.0.0:
-    resolution: {integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=}
-    dev: false
-    optional: true
-
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -4205,56 +4412,47 @@ packages:
       isexe: 2.0.0
     dev: true
 
-  /windicss-analysis/0.2.0:
-    resolution: {integrity: sha512-zlbLASJ6eu91OeQqo6Bza1pLZ70ccDsejj8sEccqG2nrWC0aArUM5nklouhifv0XyNMHHDFiLvIn0vNqbSfr6g==}
+  /windicss-analysis/0.3.4_typescript@4.4.2:
+    resolution: {integrity: sha512-3GbzXNQ53UuyMAnrdSw6qaB6+mR8sZziRqPo/ZUamD9L8aQu+paw2NFuJ4CF/FLfPZo+kjUZika7e/XGHCf9kQ==}
     hasBin: true
     dependencies:
-      '@windicss/plugin-utils': 0.14.6
+      '@windicss/plugin-utils': 1.3.0_typescript@4.4.2
       cac: 6.7.3
       connect: 3.7.0
       declass: 0.0.1
-      fast-glob: 3.2.5
-      fs-extra: 9.1.0
-      sirv: 1.0.12
+      fast-glob: 3.2.7
+      fs-extra: 10.0.0
+      sirv: 1.0.17
     transitivePeerDependencies:
       - supports-color
+      - ts-node
+      - typescript
     dev: true
 
-  /windicss/2.5.14:
-    resolution: {integrity: sha512-8Lm7U1M5AzJPbiaVSVz7qWdETRzlkv//5LBMICBBAojos1jo09lUGhNZ5rBzHeldB9JmqYMDOGgrrXHExu0EAg==}
+  /windicss/3.1.7:
+    resolution: {integrity: sha512-Q/HQ9j+r2R0fdt85zAjccdo11kHWzQmpkuwIUQIO6PSypyDmBTfN14aAy4szLrpgo2woyuHM7Y+kir4IG4qnKQ==}
     engines: {node: '>= 12'}
     hasBin: true
-    dev: true
 
-  /windicss/3.1.3:
-    resolution: {integrity: sha512-l7fpoba2LY9AYRy4UgcuOpbPsed8UsbpEQYUVWRR1wdAwiKxK6bGIMfpiKJtjPAPdh0GOGUqr6KJar0EDZSxzg==}
-    engines: {node: '>= 12'}
-    hasBin: true
+  /with/7.0.2:
+    resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
+    engines: {node: '>= 10.0.0'}
+    dependencies:
+      '@babel/parser': 7.15.3
+      '@babel/types': 7.15.0
+      assert-never: 1.2.1
+      babel-walk: 3.0.0-canary-5
+    dev: true
 
   /word-wrap/1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /wrap-ansi/5.1.0:
-    resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==}
-    engines: {node: '>=6'}
-    dependencies:
-      ansi-styles: 3.2.1
-      string-width: 3.1.0
-      strip-ansi: 5.2.0
-    dev: false
-    optional: true
-
   /wrappy/1.0.2:
     resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=}
     dev: true
 
-  /y18n/4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-    dev: false
-    optional: true
-
   /yallist/3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
     dev: true
@@ -4275,27 +4473,3 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
     dev: true
-
-  /yargs-parser/13.1.2:
-    resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-    dev: false
-    optional: true
-
-  /yargs/13.3.2:
-    resolution: {integrity: sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==}
-    dependencies:
-      cliui: 5.0.0
-      find-up: 3.0.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 3.1.0
-      which-module: 2.0.0
-      y18n: 4.0.3
-      yargs-parser: 13.1.2
-    dev: false
-    optional: true
diff --git a/posts/story.md b/posts/story.md
index ab393aed..92df4248 100644
--- a/posts/story.md
+++ b/posts/story.md
@@ -1,6 +1,6 @@
 [Windi CSS]: https://github.com/windicss/windicss
 
-# The Story: by @voorjaar
+# The Story <span class="text-base text-gray-500">by [@voorjaar](https://github.com/voorjaar)</span>
 
 > After two months of development, I am very happy to tell you that Windi CSS has now entered the stable version stage. From now on, there will be no destructive improvements added, please rest assured to use.
 
@@ -31,7 +31,7 @@ I have never read the source code of Tailwind CSS, at least not carefully. I jus
 
 I can roughly talk about the principle of windicss, which is actually a very simple parsing principle. You can even understand it as a simple programming language. Suppose you enter a className, such as `bg-green-300`, Windi CSS will first match `bg-green-300` in the static dictionary. If it exists, it will return the corresponding css, and if it does not exist, continue dynamic matching. First, Windi CSS will extract `bg` as the key to match whether the key is included in the dynamic utility. If it does, input the entire className to see if css will be generated. If not, the className will be ignored and return. Dynamic utilities use completely different processing methods to Tailwind, that is, unrestricted build. Windicss will be based on your input. First of all, see if it is the static value specified in the configuration. If not, it will guess what type it is based on regular expressions, then generate the corresponding css.
 
-As for how to deal with base styles, we have done some processing on css in advance, so that it can be quickly filtered through html tags, so we can generate a minimized preflight every time. For the base styles added by third-party plugins, we obviously can’t do this, because it will burden developers, so we use css-chosen to purge styles for the base styles of third-party plugins. Because it is fast and small, real-time purge can be achieved.
+As for how to deal with base styles, we have done some processing on css in advance, so that it can be quickly filtered through html tags, so we can generate a minimized preflight every time. For the base styles added by third-party plugins, we obviously can't do this, because it will burden developers, so we use css-chosen to purge styles for the base styles of third-party plugins. Because it is fast and small, real-time purge can be achieved.
 
 Of course, there are more detailed questions, you need to read our source code.
 
diff --git a/posts/v30-5.md b/posts/v30-5.md
index c1e4e589..b703c2ef 100644
--- a/posts/v30-5.md
+++ b/posts/v30-5.md
@@ -1,6 +1,6 @@
-## Recent changes (v3.0.0-v3.0.5)
+# Recent changes (v3.0.0-v3.0.5)
 
-### Windi CLI
+## Windi CLI
 
 Recently we have added some new features and bug fixes in windi cli, [the documentation](https://windicss.org/integrations/cli.html) has been changed, please check it out.
 
@@ -11,7 +11,7 @@ Recently we have added some new features and bug fixes in windi cli, [the docume
 - Support extractors in config
 - bug fixes and performance improvements
 
-### Color Callback function
+## Color Callback function
 
 We now support color callback, which allows you to specify variables with support for opacity.
 
@@ -34,12 +34,11 @@ module.exports = {
 }
 ```
 
-### Handlers Config
+## Handlers Config
 
 Added a handlers config. If you want to turn off auto-infer completely, you can configure
 
-```js
-// windi.config.js
+```js windi.config.js
 module.exports = {
   theme: {
     // …
@@ -68,6 +67,6 @@ module.exports = {
 }
 ```
 
-### Bug Fixes
+## Bug Fixes
 
 [#287](https://github.com/windicss/windicss/issues/287) [#75](https://github.com/windicss/windicss/issues/75) [#256](https://github.com/windicss/windicss/issues/256) [#270](https://github.com/windicss/windicss/issues/270) [#242](https://github.com/windicss/windicss/issues/242) [#226](https://github.com/windicss/windicss/issues/226) [#274](https://github.com/windicss/windicss/issues/274) [#266](https://github.com/windicss/windicss/issues/266) [#197](https://github.com/windicss/windicss/issues/197) [#179](https://github.com/windicss/windicss/issues/179) [#219](https://github.com/windicss/windicss/issues/219) [#246](https://github.com/windicss/windicss/issues/246) [#262](https://github.com/windicss/windicss/issues/262) [#245](https://github.com/windicss/windicss/issues/245)
\ No newline at end of file
diff --git a/posts/v30-utilities.md b/posts/v30-utilities.md
index 31e14ade..eab9b0a4 100644
--- a/posts/v30-utilities.md
+++ b/posts/v30-utilities.md
@@ -66,10 +66,10 @@ Utilities for controlling whether an element should explicitly create a new stac
 <PlaygroundWithVariants
   variant='isolate'
   :variants="['isolate', 'isolation-auto']"
-  fixed='dark:text-white opacity-85 overflow-hidden h-screen'
-  appended='w-32 h-32 bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black'
+  fixed='dark:text-white opacity-85 overflow-hidden h-full'
+  appended='w-full h-32 bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black'
   nested=true
-  html='&lt;div class="w-32 h-32 bg-green-400"&gt;
+  html='&lt;div class="w-full h-32 bg-green-400"&gt;
   &lt;div class="{class}"&gt;
     &lt;div class="bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black"&gt;auto&lt;/div&gt;
   &lt;/div&gt;
@@ -84,7 +84,7 @@ Utilities for controlling how an element should blend with the background.
   variant='multiply'
   :variants="['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']"
   prefix='mix-blend'
-  fixed='dark:text-white opacity-85 overflow-hidden h-screen'
+  fixed='dark:text-white opacity-85 overflow-hidden h-full'
   appended='flex justify-center items-center bg-teal-300 bg-yellow-300 w-36 h-36 w-24 h-24 rounded-md'
   nested=true
   html='&lt;div class=&quot;flex justify-center&quot;&gt;
@@ -101,15 +101,14 @@ Utilities for controlling how an element should blend with the background.
   type='color'
   prefix='shadow'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='bg-teal-400 w-32 h-32 rounded-md shadow-2xl'
+  appended='bg-teal-400 w-full h-32 rounded-md shadow-2xl'
   nested=true
-  html='&lt;div class=&quot;bg-teal-400 w-32 h-32 rounded-md shadow-2xl {class}&quot;&gt;&lt;/div&gt;'
+  html='&lt;div class=&quot;bg-teal-400 w-full h-32 rounded-md shadow-2xl {class}&quot;&gt;&lt;/div&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     boxShadowColor: {
@@ -160,7 +159,7 @@ Utilities for controlling how element fragments should be rendered across multip
   variant='slice'
   :variants="['slice', 'clone']"
   prefix='decoration'
-  fixed='dark:text-white opacity-85 overflow-hidden p-2 h-screen'
+  fixed='dark:text-white opacity-85 overflow-hidden p-2 h-full'
   nested=true
   appended='text-5xl font-extrabold bg-gradient-to-r from-green-400 to-blue-500 rounded-16px px-4 text-sm text-white'
   html="
@@ -185,8 +184,7 @@ Utilities for controlling the color of insertion text.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     caretColor: {
@@ -216,8 +214,7 @@ Utilities for controlling the opacity of an element's caret color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -240,9 +237,9 @@ The `image-render` utility defines how the browser should render an image if it
   :variants="['auto', 'pixel', 'edge']"
   prefix='image-render'
   fixed='p-2 dark:text-white opacity-85'
-  appended='w-32 h-32'
+  appended='w-full h-32'
   nested=true
-  html="&lt;img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==' class='{class} w-32 h-32'&gt;"
+  html="&lt;img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==' class='{class} w-full h-32'&gt;"
 />
 
 ## List Style Type
@@ -264,8 +261,7 @@ Utilities for controlling the bullet/number style of a list.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     listStyleType: {
@@ -382,8 +378,7 @@ The tab-size utilities are used to customize the width of tab characters (U+0009
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     tabSize: {
@@ -426,8 +421,7 @@ Utilities for controlling the color of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textDecorationColor: {
@@ -457,8 +451,7 @@ Utilities for controlling the opacity of an element's decoration color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -490,8 +483,7 @@ Utilities for controlling the length of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -521,8 +513,7 @@ Utilities for controlling the offset of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textDecorationOffset: {
@@ -550,8 +541,7 @@ Utilities for controlling the indentation of text.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -584,8 +574,7 @@ Utilities for controlling the width of text stroke.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -614,8 +603,7 @@ Utilities for controlling the color of text stroke.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textStrokeColor: {
@@ -643,8 +631,7 @@ Utilities for controlling the shadow of a text element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textShadow: {
@@ -776,10 +763,10 @@ The transform-style utility sets whether children of an element are positioned i
   variant='3d'
   :variants="['flat', '3d']"
   prefix='preserve'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -821,10 +808,10 @@ The transform-style utility sets whether children of an element are positioned i
   variant='12'
   :variants="['0', '6', '12', '30', '45', '72.5', '90', '180', '-180', '-90', '-72.5', '-45', '-12', '-6']"
   prefix='rotate-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -842,10 +829,10 @@ The transform-style utility sets whether children of an element are positioned i
   variant='90'
   :variants="['0', '25', '50', '75', '90', '95', '100', '105', '110', '125', '150']"
   prefix='scale-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -859,8 +846,7 @@ The transform-style utility sets whether children of an element are positioned i
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     scale: {
@@ -879,10 +865,10 @@ export default {
   variant='0'
   :variants="['0', 'px', 'full', '6', '12', '7.5', '1/2', '2/3', '3/4', '3/5', '3.5rem', '42px', '6em', '-px', '-full', '-6', '-12', '-7.5', '-1/2', '-2/3', '-3/4', '-3/5', '-3.5rem', '-42px']"
   prefix='translate-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -898,8 +884,7 @@ export default {
 
 You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -915,8 +900,7 @@ export default {
 
 To customize the translate scale separately, use the theme.translate section of your windi.config.js file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -943,10 +927,10 @@ The `perspect` utility determines the distance between the z=0 plane and the use
   variant='lg'
   :variants="['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '100', '200', '300', '400', '500', '600', '700', '800px', '23rem']"
   prefix='perspect'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center {class} perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center {class} perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -960,8 +944,7 @@ The `perspect` utility determines the distance between the z=0 plane and the use
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -985,10 +968,10 @@ The `perspect-origin` utility determines the position at which the viewer is loo
    variant='center'
   :variants="['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', '[150%]', '[-150%]', '[150%_150%]']"
   prefix='perspect-origin'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 {class}"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 {class}"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -1002,8 +985,7 @@ The `perspect-origin` utility determines the position at which the viewer is loo
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -1046,8 +1028,7 @@ Utilities for enabling and disabling filters on an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     blur: {
@@ -1075,8 +1056,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     brightness: {
@@ -1104,8 +1084,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     contrast: {
@@ -1133,8 +1112,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     dropShadow: {
@@ -1161,8 +1139,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     grayscale: {
@@ -1189,8 +1166,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     hueRotate: {
@@ -1218,8 +1194,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     invert: {
@@ -1246,8 +1221,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     saturate: {
@@ -1275,8 +1249,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     sepia: {
@@ -1297,11 +1270,11 @@ Utilities for enabling and disabling backdrop filters on an element.
   variant=''
   :variants="['', 'none']"
   prefix='backdrop-filter'
-  fixed='dark:text-white opacity-85 h-screen overflow-hidden'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  fixed='dark:text-white opacity-85 h-full overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="{class} !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-4"&gt;
       &lt;p&gt;backdrop-blur&lt;/p&gt;
     &lt;/div&gt;
@@ -1317,10 +1290,10 @@ Utilities for enabling and disabling backdrop filters on an element.
   :variants="['', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '0', '1', '2', '3', '9', '12', '24px', '2rem']"
   prefix='backdrop-blur'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-30 text-center p-4"&gt;
       &lt;p&gt;backdrop-blur&lt;/p&gt;
     &lt;/div&gt;
@@ -1329,8 +1302,7 @@ Utilities for enabling and disabling backdrop filters on an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropBlur: {
@@ -1351,10 +1323,10 @@ export default {
   :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']"
   prefix='backdrop-brightness'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-brightness&lt;/p&gt;
     &lt;/div&gt;
@@ -1363,8 +1335,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropBrightness: {
@@ -1385,10 +1356,10 @@ export default {
   :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']"
   prefix='backdrop-contrast'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-contrast&lt;/p&gt;
     &lt;/div&gt;
@@ -1397,8 +1368,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropContrast: {
@@ -1419,10 +1389,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-grayscale'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-grayscale&lt;/p&gt;
     &lt;/div&gt;
@@ -1431,8 +1401,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropGrayscale: {
@@ -1452,10 +1421,10 @@ export default {
   :variants="['0', '15', '30', '45', '60', '90', '120', '180', '-120', '-90', '-60', '-45', '-30', '-15']"
   prefix='backdrop-hue-rotate'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-hue-rotate&lt;/p&gt;
     &lt;/div&gt;
@@ -1464,8 +1433,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropHueRotate: {
@@ -1486,10 +1454,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-invert'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-invert&lt;/p&gt;
     &lt;/div&gt;
@@ -1498,8 +1466,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropInvert: {
@@ -1519,10 +1486,10 @@ export default {
   type='opacity'
   prefix='backdrop-opacity'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm text-center p-2 p-4 flex flex-col justify-center overflow-hidden border-2'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm text-center p-2 p-4 flex flex-col justify-center overflow-hidden border-2'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm text-center p-4 border-2"&gt;
       &lt;p&gt;backdrop-opacity&lt;/p&gt;
     &lt;/div&gt;
@@ -1532,8 +1499,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropOpacity: {
@@ -1553,10 +1519,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-saturate'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-saturate&lt;/p&gt;
     &lt;/div&gt;
@@ -1565,8 +1531,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropSaturate: {
@@ -1587,10 +1552,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-sepia'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-sepia&lt;/p&gt;
     &lt;/div&gt;
@@ -1599,8 +1564,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropSepia: {
diff --git a/posts/v30.md b/posts/v30.md
index 86fb53d6..157145b1 100644
--- a/posts/v30.md
+++ b/posts/v30.md
@@ -101,8 +101,8 @@ We brought two new colors, `dark` and `light`. Dark colors are particularly usef
 
 #### dark
 
-| Key      | Value   | Preview                                                      |
-| :------- | :------ | ------------------------------------------------------------ |
+| Key      | Value   | Preview                                                                                |
+| :------- | :------ | -------------------------------------------------------------------------------------- |
 | dark-50  | #4A4A4A | <div style="background-color:#4A4A4A;width:3rem;height:2rem;border-radius:4px;"></div> |
 | dark-100 | #3C3C3C | <div style="background-color:#3C3C3C;width:3rem;height:2rem;border-radius:4px;"></div> |
 | dark-200 | #323232 | <div style="background-color:#323232;width:3rem;height:2rem;border-radius:4px;"></div> |
@@ -116,8 +116,8 @@ We brought two new colors, `dark` and `light`. Dark colors are particularly usef
 
 #### light
 
-| Key       | Value   | Preview                                                      |
-| :-------- | :------ | ------------------------------------------------------------ |
+| Key       | Value   | Preview                                                                                |
+| :-------- | :------ | -------------------------------------------------------------------------------------- |
 | light-50  | #FDFDFD | <div style="background-color:#FDFDFD;width:3rem;height:2rem;border-radius:4px;"></div> |
 | light-100 | #FCFCFC | <div style="background-color:#FCFCFC;width:3rem;height:2rem;border-radius:4px;"></div> |
 | light-200 | #FAFAFA | <div style="background-color:#FAFAFA;width:3rem;height:2rem;border-radius:4px;"></div> |
@@ -133,15 +133,14 @@ We brought two new colors, `dark` and `light`. Dark colors are particularly usef
 
 We introduced shortcuts in the [v2.2 version](https://windicss.org/posts/v22.html), allowing you to quickly reuse some commonly used combinations. For me, I like to use these shortcuts in the project, it will make my project look cleaner and tidy. I guess you all have your way of using it.
 
-```js
-// windi.config.ts
+```js windi.config.ts
 export default {
   shortcuts: {
     'hstack': 'flex items-center',
     'vstack': 'flex flex-col',
     'icon': 'w-6 h-6 fill-current',
     'app-border': 'border-gray-200 dark:border-dark-300',
-    'app-modal': 'fixed top-0 w-full h-screen z-50 bg-white bg-opacity-70 blur-5 shadow-lg',
+    'app-modal': 'fixed top-0 w-full h-full z-50 bg-white bg-opacity-70 blur-5 shadow-lg',
     // ...
   },
 }
@@ -149,8 +148,7 @@ export default {
 
 Back to the topic, the way shortcuts works is to first build a separate class, such as `.hstack`. Then we thought about whether we can achieve the same thing by using simple text replacement without compiling. I heard that some people are very obsessed with using a single utility. So you just got it. With alias config, actually the syntax is similar to shortcuts, except that complex nested css is not supported. 
 
-```js
-// windi.config.ts
+```js windi.config.ts
 export default {
   alias: {
     hstack: 'flex items-center',
diff --git a/posts/v31.md b/posts/v31.md
index 74109ff2..92b071bd 100644
--- a/posts/v31.md
+++ b/posts/v31.md
@@ -166,8 +166,7 @@ We also added a new time handler, which allows you to use the corresponding time
 
 You can control its switch by configuring `handlers.time`
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     // ...
diff --git a/tsconfig.json b/tsconfig.json
index c5e615c3..7fe13bbf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "target": "esnext",
     "module": "esnext",
     "lib": ["ESNext", "DOM", "DOM.Iterable", "webworker"],
     "moduleResolution": "node",
@@ -11,14 +11,14 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "noUnusedLocals": true,
-    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./.vitepress/theme/*"]
+    }
   },
   "include": [
     ".vitepress/**/*.ts",
+    ".vitepress/**/*.d.ts",
     ".vitepress/**/*.vue",
-  ],
-  "exclude": [
-    "**/dist/**",
-    ".shared-components"
+    "components.d.ts"
   ]
 }
diff --git a/utilities/backgrounds.md b/utilities/backgrounds.md
index 70026285..8725b46e 100644
--- a/utilities/backgrounds.md
+++ b/utilities/backgrounds.md
@@ -8,11 +8,11 @@ Utilities for controlling how a background image behaves when scrolling.
   variant='fixed'
   :variants="['fixed', 'local', 'scroll']"
   prefix='bg'
-  fixed='p-2 dark:text-white opacity-85 overflow-hidden'
+  fixed='p-2 dark:text-white opacity-85 overflow-hidden flex'
   nested=true
-  appended='w-full h-48 overflow-y-scroll h-screen bg-center bg-no-repeat'
-  html='&lt;div class="{class} w-full h-screen overflow-y-scroll bg-no-repeat bg-center" style="background-image:url(&#39;/assets/bg-blue.svg&#39;);"
-&gt;&lt;p&gt;The quick brown fox jumps over the lazy dog&lt;/p&gt;&lt;/div&gt;'
+  appended='w-full h-full overflow-y-scroll bg-center bg-no-repeat'
+  html='&lt;div class="{class} w-full h-full overflow-y-scroll bg-no-repeat bg-center" style="background-image:url(&#39;/assets/bg-blue.svg&#39;);"
+&gt;&lt;p&gt;The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.&lt;/p&gt;&lt;/div&gt;'
 />
 
 ## Background Clip
@@ -25,8 +25,8 @@ Utilities for controlling the bounding box of an element's background.
   prefix='bg-clip'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='p-6 rounded-md bg-blue-300 border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center py-2'
-  html="&lt;div class=&quot;{class} p-6 rounded-md bg-blue-300 border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center&quot;&gt;
+  appended='p-6 bg-cover rounded-md bg-blue-300 border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center py-2'
+  html="&lt;div class=&quot;{class} p-6 bg-cover rounded-md bg-blue-300 border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center&quot;&gt;
       &lt;span class=&quot;py-2&quot;&gt;Hello World&lt;/span&gt;
     &lt;/div&gt;"
 />
@@ -61,8 +61,7 @@ Utilities for controlling an element's background color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backgroundColor: theme => ({
@@ -93,8 +92,7 @@ Utilities for controlling the opacity of an element's background color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -116,16 +114,15 @@ Utilities for controlling the position of an element's background image.
   variant='bottom'
   :variants="['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top']"
   prefix='bg'
-  fixed='h-screen dark:text-white opacity-85 flex flex-col justify-center pb-4'
+  fixed='dark:text-white opacity-85'
   nested=true
-  appended='mx-auto bg-blue-300 rounded-md w-36 h-36 bg-no-repeat'
-  html='&lt;div class=&quot;mx-auto {class} bg-blue-300 rounded-md w-36 h-36 bg-no-repeat&quot; style=&quot;background-image:url(&#39;/assets/bg-square.svg&#39;);&quot;&gt;&lt;/div&gt;'
+  appended='mx-auto bg-blue-300 rounded-md w-full bg-no-repeat'
+  html='&lt;div class=&quot;mx-auto {class} bg-blue-300 rounded-md w-full bg-no-repeat&quot; style=&quot;background-image:url(&#39;/assets/bg-square.svg&#39;);aspect-ratio: 1 / 1;&quot;&gt;&lt;/div&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backgroundPosition: {
@@ -155,10 +152,10 @@ Utilities for controlling the repetition of an element's background image.
   variant='repeat'
   :variants="['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'repeat-round', 'repeat-space']"
   prefix='bg'
-  fixed='h-screen dark:text-white opacity-85 flex flex-col justify-center pb-4'
+  fixed='h-full dark:text-white opacity-85'
   nested=true
-  appended='mx-auto w-full h-36 bg-blue-300 rounded-md'
-  html='&lt;div class=&quot;mx-auto w-full h-36 bg-blue-300 rounded-md {class}&quot; style=&quot;background-image:url(&#39;/assets/bg-square.svg&#39;);&quot;&gt;
+  appended='mx-auto w-full bg-blue-300 rounded-md'
+  html='&lt;div class=&quot;mx-auto w-full bg-blue-300 rounded-md {class}&quot; style=&quot;background-image:url(&#39;/assets/bg-square.svg&#39;);aspect-ratio: 1 / 1;&quot;&gt;
   &lt;/div&gt;'
 />
 
@@ -172,8 +169,8 @@ Utilities for controlling the background size of an element's background image.
   prefix='bg'
   fixed='dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='w-full h-36 bg-no-repeat bg-center'
-  html="&lt;div class=&quot;w-full h-36 {class} bg-no-repeat bg-center&quot; style=&quot;background-image:url(&#39;/assets/bg-blue.svg&#39;);&quot;&gt;
+  appended='w-full h-full bg-no-repeat bg-center'
+  html="&lt;div class=&quot;w-full h-full {class} bg-no-repeat bg-center&quot; style=&quot;background-image:url(&#39;/assets/bg-blue.svg&#39;);&quot;&gt;
   &lt;/div&gt;"
 />
 
@@ -221,14 +218,13 @@ Utilities for controlling an element's background image.
   prefix='bg'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='h-36 w-36 rounded-md from-green-400 to-blue-500'
-  html="&lt;div class=&quot;h-36 w-36 rounded-md {class} from-green-400 to-blue-500&quot;&gt;&lt;/div&gt;"
+  appended='h-full w-full rounded-md from-green-400 to-blue-500'
+  html="&lt;div class=&quot;h-full w-full rounded-md {class} from-green-400 to-blue-500&quot;&gt;&lt;/div&gt;"
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -255,8 +251,8 @@ Utilities for controlling background gradients.
   prefix='from'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='h-36 w-36 rounded-md bg-gradient-to-r to-blue-500'
-  html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r {class} to-blue-500&quot;&gt;&lt;/div&gt;"
+  appended='h-full w-full rounded-md bg-gradient-to-r to-blue-500'
+  html="&lt;div class=&quot;h-full w-full rounded-md bg-gradient-to-r {class} to-blue-500&quot;&gt;&lt;/div&gt;"
 />
 
 ### Gradient Via
@@ -267,8 +263,8 @@ Utilities for controlling background gradients.
   prefix='via'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='h-36 w-36 rounded-md bg-gradient-to-r from-red-500 to-blue-500'
-  html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r from-red-500 {class} to-blue-500&quot;&gt;&lt;/div&gt;"
+  appended='h-full w-full rounded-md bg-gradient-to-r from-red-500 to-blue-500'
+  html="&lt;div class=&quot;h-full w-full rounded-md bg-gradient-to-r from-red-500 {class} to-blue-500&quot;&gt;&lt;/div&gt;"
 />
 
 ### Gradient To
@@ -279,8 +275,8 @@ Utilities for controlling background gradients.
   prefix='to'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='h-36 w-36 rounded-md bg-gradient-to-r from-green-500'
-  html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r from-green-500 {class}&quot;&gt;&lt;/div&gt;"
+  appended='h-full w-full rounded-md bg-gradient-to-r from-green-500'
+  html="&lt;div class=&quot;h-full w-full rounded-md bg-gradient-to-r from-green-500 {class}&quot;&gt;&lt;/div&gt;"
 />
 
 ## Background Blend Mode
@@ -293,7 +289,7 @@ Utilities for controlling how an element's background image should blend with it
   prefix='bg-blend'
   fixed='dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='w-full h-36 bg-no-repeat bg-contain bg-center bg-green-300 rounded-md'
-  html="&lt;div class=&quot;w-full h-36 bg-no-repeat bg-green-300 rounded-md bg-contain bg-center {class}&quot; style=&quot;background-image:url(&#39;/assets/bg-blue.svg&#39;);&quot;&gt;
+  appended='w-full h-full bg-no-repeat bg-contain bg-center bg-green-300 rounded-md'
+  html="&lt;div class=&quot;w-full h-full bg-no-repeat bg-green-300 rounded-md bg-contain bg-center {class}&quot; style=&quot;background-image:url(&#39;/assets/bg-blue.svg&#39;);&quot;&gt;
   &lt;/div&gt;"
 />
diff --git a/utilities/behaviors.md b/utilities/behaviors.md
index 86deda45..9228679f 100644
--- a/utilities/behaviors.md
+++ b/utilities/behaviors.md
@@ -8,18 +8,17 @@ Utilities for animating elements with CSS animations.
   variant='bounce'
   :variants="['none', 'spin', 'ping', 'pulse', 'bounce']"
   prefix='animate'
-  fixed='p-2 dark:text-white opacity-85 h-screen flex flex-col justify-center'
+  fixed='p-2 dark:text-white opacity-85 h-full flex flex-col justify-center'
   nested=true
-  appended='transition ease-in-out focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
-  html='&lt;button tabindex="-1"; class="transition {class} ease-in-out focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
+  appended='transition ease-in-out focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
+  html='&lt;button tabindex="-1"; class="transition {class} ease-in-out focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
     Click me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -33,8 +32,7 @@ export default {
 
 To add new animation @keyframes, use the keyframes section of your theme configuration:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -59,7 +57,7 @@ Utilities for suppressing native form control styling.
   variant='none'
   :variants="['none']"
   prefix='appearance'
-  fixed='p-2 dark:text-white opacity-85 overflow-hidden flex flex-col justify-center space-y-5 h-screen bg-blue-100 rounded-md'
+  fixed='p-2 dark:text-white opacity-85 overflow-hidden flex flex-col justify-center space-y-5 h-full bg-blue-100 rounded-md'
   appended='w-12'
   nested=true
   html='
@@ -81,7 +79,7 @@ Utilities for controlling how element fragments should be rendered across multip
   variant='slice'
   :variants="['slice', 'clone']"
   prefix='decoration'
-  fixed='dark:text-white opacity-85 overflow-hidden p-2 h-screen'
+  fixed='dark:text-white opacity-85 overflow-hidden p-2 h-full'
   nested=true
   appended='text-5xl font-extrabold bg-gradient-to-r from-green-400 to-blue-500 rounded-16px px-4 text-sm text-white'
   html="
@@ -106,8 +104,7 @@ Utilities for controlling the color of insertion text.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     caretColor: {
@@ -137,8 +134,7 @@ Utilities for controlling the opacity of an element's caret color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -161,17 +157,16 @@ Utilities for controlling the cursor style when hovering over an element.
   :variants="['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed']"
   prefix='cursor'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-blue-500 ring-4 ring-opacity-50'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-blue-500 ring-4 ring-opacity-50'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 {class}&quot;&gt;
     Hover me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     cursor: {
@@ -200,9 +195,9 @@ The `image-render` utility defines how the browser should render an image if it
   :variants="['auto', 'pixel', 'edge']"
   prefix='image-render'
   fixed='p-2 dark:text-white opacity-85'
-  appended='w-32 h-32'
+  appended='w-full h-32'
   nested=true
-  html="&lt;img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==' class='{class} w-32 h-32'&gt;"
+  html="&lt;img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==' class='{class} w-full h-32'&gt;"
 />
 
 ## List Style Type
@@ -224,8 +219,7 @@ Utilities for controlling the bullet/number style of a list.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     listStyleType: {
@@ -268,9 +262,9 @@ Utilities for controlling an element's outline.
   :variants="['none', 'white', 'black', 'gray-500', 'red-500', 'yellow-500', 'blue-500', 'green-500']"
   prefix='outline'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
@@ -282,9 +276,9 @@ Utilities for controlling an element's outline.
   :variants="['none', 'white', 'black', 'gray-500', 'red-500', 'yellow-500', 'blue-500', 'green-500']"
   prefix='outline-solid'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
@@ -296,17 +290,16 @@ Utilities for controlling an element's outline.
   :variants="['none', 'white', 'black', 'gray-500', 'red-500', 'yellow-500', 'blue-500', 'green-500']"
   prefix='outline-dotted'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -320,8 +313,7 @@ export default {
 
 You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -345,8 +337,8 @@ Utilities for controlling how an element handles content that is too large for t
   prefix='overflow'
   fixed='dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='bg-blue-100 p-2 rounded-md text-xs'
-  html='&lt;div class="bg-blue-100 p-2 rounded-md text-xs {class}"&gt;
+  appended='bg-blue-100 dark:bg-blue-400 p-2 rounded-md text-xs'
+  html='&lt;div class="bg-blue-100 dark:bg-blue-400 p-2 rounded-md text-xs {class}"&gt;
 The value of Pi is
           3.1415926535897932384626433832795029. The value of e is
           2.7182818284590452353602874713526625.
@@ -370,8 +362,8 @@ Utilities for controlling how the browser behaves when reaching the boundary of
   prefix='overscroll'
   fixed='dark:text-white opacity-85 overflow-hidden'
   nested=true
-  appended='bg-blue-100 p-2 rounded-md text-xs overflow-auto'
-  html='&lt;div class="bg-blue-100 p-2 rounded-md text-xs overflow-auto {class}"&gt;
+  appended='bg-blue-100 dark:bg-blue-400 p-2 rounded-md text-xs overflow-auto'
+  html='&lt;div class="bg-blue-100 dark:bg-blue-400 p-2 rounded-md text-xs overflow-auto {class}"&gt;
 The value of Pi is
           3.1415926535897932384626433832795029. The value of e is
           2.7182818284590452353602874713526625.
@@ -395,8 +387,7 @@ Utilities for controlling the color of placeholder text.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     placeholderColor: {
@@ -426,8 +417,7 @@ Utilities for controlling the opacity of an element's placeholder color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -487,10 +477,10 @@ Utilities for controlling whether the user can select text in an element.
 
 Utilities for improving accessibility with screen readers.
 
-| Class | Properties |
-| :---- | :--------- |
-| sr-only | position: absolute;<br>width: 1px;<br>height: 1px;<br>padding: 0;<br>margin: -1px;<br>overflow: hidden;<br>clip: rect(0, 0, 0, 0);<br>white-space: nowrap;<br>border-width: 0; |
-| not-sr-only | position: static;<br>width: auto;<br>height: auto;<br>padding: 0;<br>margin: 0;<br>overflow: visible;<br>clip: auto;<br>white-space: normal; |
+| Class       | Properties                                                                                                                                                                     |
+| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| sr-only     | position: absolute;<br>width: 1px;<br>height: 1px;<br>padding: 0;<br>margin: -1px;<br>overflow: hidden;<br>clip: rect(0, 0, 0, 0);<br>white-space: nowrap;<br>border-width: 0; |
+| not-sr-only | position: static;<br>width: auto;<br>height: auto;<br>padding: 0;<br>margin: 0;<br>overflow: visible;<br>clip: auto;<br>white-space: normal;                                   |
 
 ### Usage
 
diff --git a/utilities/borders.md b/utilities/borders.md
index bcc28412..b4abe3fb 100644
--- a/utilities/borders.md
+++ b/utilities/borders.md
@@ -8,13 +8,12 @@ Utilities for controlling the border radius of an element.
   variant='3xl'
   :variants="['none', 'sm', '', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '1/2', 'full']"
   prefix='rounded'
-  fixed='bg-teal-500 m-auto mt-6 mb-2 w-30 h-30 text-transparent transition-all duration-300'
+  fixed='bg-teal-500 w-full h-full text-transparent transition-all duration-300'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     borderRadius: {
@@ -41,13 +40,12 @@ Utilities for controlling the width of an element's borders.
   variant=''
   :variants="['', '0', 1, 2, 3, 4, 5]"
   prefix='border'
-  fixed='bg-gray-500 bg-opacity-5 border-teal-500 m-auto mt-6 mb-2 w-30 h-30 text-transparent transition-all'
+  fixed='bg-gray-500 bg-opacity-5 border-teal-500 w-full h-full text-transparent transition-all'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     borderWidth: {
@@ -69,15 +67,14 @@ Utilities for controlling the color of an element's borders.
   variant='gray-500'
   type='color'
   prefix='border'
-  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 m-auto mt-6 mb-2 w-30 h-30 text-transparent transition-all'
+  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 w-full h-full text-transparent transition-all'
 />
 
 <Customizing>
 
 You can customize your color palette by editing the `theme.colors` section of your `windi.config.js` file, or customize just your border colors using the theme.borderColor section.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     borderColor: theme => ({
@@ -101,13 +98,12 @@ Utilities for controlling the opacity of an element's border color.
   variant='50'
   type='opacity'
   prefix='border-opacity'
-  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 m-auto mt-6 mb-2 w-30 h-30 text-transparent transition-all'
+  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 w-full h-full text-transparent transition-all'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -129,7 +125,7 @@ Utilities for controlling the style of an element's borders.
   variant='solid'
   :variants="['solid', 'dashed', 'dotted', 'double', 'none']"
   prefix='border'
-  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 m-auto mt-6 mb-2 w-30 h-30 text-transparent transition-all'
+  fixed='bg-gray-500 bg-opacity-5 border-3 border-teal-500 w-full h-full text-transparent transition-all'
 />
 
 ## Divide Width
@@ -172,8 +168,7 @@ Utilities for controlling the border width between elements.
 
 The divide width scale inherits its values from the `borderWidth` scale by default, so if you'd like to customize your values for both border width and divide width together, use the `theme.borderWidth` section of your `windi.config.js` file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     borderWidth: {
@@ -191,8 +186,7 @@ export default {
 
 To customize only the divide width values, use the theme.divideWidth section of your windi.config.js file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     divideWidth: {
@@ -230,8 +224,7 @@ Utilities for controlling the border color between elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     divideColor: theme => ({
@@ -267,8 +260,7 @@ Utilities for controlling the opacity borders between elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -311,17 +303,16 @@ Utilities for creating outline rings with box-shadows.
   :variants="['', 'inset', '0', '1', '2', '4', '6', '8']"
   prefix='ring'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-blue-500'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-blue-500'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 {class} ring-blue-500&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 {class} ring-blue-500&quot;&gt;
     Button
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -346,17 +337,16 @@ Utilities for setting the color of outline rings.
   type='color'
   prefix='ring'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 const colors = require('windicss/colors')
 
 export default {
@@ -380,17 +370,16 @@ Utilities for setting the opacity of outline rings.
   type='opacity'
   prefix='ring-opacity'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-blue-500 ring-4'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-blue-500 ring-4'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -415,9 +404,9 @@ Utilities for simulating an offset when adding outline rings.
   :variants="['0', '1', '2', '4', '6', '8', '10', '12', '14', '16', '20']"
   prefix='ring-offset'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-green-400'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-green-400'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 {class} ring-offset-green-400&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 {class} ring-offset-green-400&quot;&gt;
     Button
   &lt;/button&gt;'
 />
@@ -425,8 +414,7 @@ Utilities for simulating an offset when adding outline rings.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -451,17 +439,16 @@ Utilities for setting the color of outline ring offsets.
   type='color'
   prefix='ring-offset'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-4'
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-4'
   nested=true
-  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-4 {class}&quot;&gt;
+  html='&lt;button tabindex=&quot;-1&quot; class=&quot;focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring ring-blue-500 ring-offset-4 {class}&quot;&gt;
     Button
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 const colors = require('windicss/colors')
 
 export default {
diff --git a/utilities/colors.md b/utilities/colors.md
index 5f011682..1bb393cb 100644
--- a/utilities/colors.md
+++ b/utilities/colors.md
@@ -4,8 +4,7 @@
 
 ## Customization 
 
-```ts
-// windi.config.js
+```ts windi.config.js
 export default {
   theme: {
     colors: {
@@ -19,10 +18,9 @@ export default {
 
 All the colors from the palette are enabled by default. If you want to set alias or reuse some colors from the palette, you can import them from `windicss/colors` module.
 
-```ts
+```ts windi.config.js
 import colors from 'windicss/colors'
 
-// windi.config.js
 export default {
   theme: {
     colors: {
diff --git a/utilities/container.md b/utilities/container.md
index 092f3088..ba7c7da5 100644
--- a/utilities/container.md
+++ b/utilities/container.md
@@ -5,7 +5,7 @@
 A component for fixing an element's width to the current breakpoint.
 
 | Class     | Breakpoint     | Properties         |
-| :----     | :------------- | :----------------- |
+| :-------- | :------------- | :----------------- |
 | container | *None*         | width: 100%;       |
 |           | sm *(640px)*   | max-width: 640px;  |
 |           | md *(768px)*   | max-width: 768px;  |
@@ -44,8 +44,7 @@ To use a container at only a certain breakpoint and up:
 
 #### Centering by default
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     container: {
@@ -57,8 +56,7 @@ export default {
 
 #### Horizontal padding
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     container: {
@@ -70,8 +68,7 @@ export default {
 
 Specify a different padding amount for each breakpoint
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     container: {
diff --git a/utilities/display.md b/utilities/display.md
index ee4b44d4..f6021bf1 100644
--- a/utilities/display.md
+++ b/utilities/display.md
@@ -8,7 +8,7 @@ The `block` utility generates a block element box, generating line breaks both b
   variant='block'
   :variants="[]"
   nested=true
-  fixed='!block space-y-2 pt-6 pl-12'
+  fixed='space-y-2 pt-6 pl-12'
   appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400'
   html='
 &lt;div class="{class} rounded-md bg-red-400 w-8 h-8"&gt;&lt;/div&gt;
@@ -24,7 +24,7 @@ The `inline-block` utility generates a block element box that will be flowed wit
   variant='inline-block'
   :variants="[]"
   nested=true
-  fixed='!block space-x-1 pt-12 pl-4 text-xs'
+  fixed='space-x-1 pt-12 pl-4 text-xs'
   appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 text-gray-500'
   html='
 &lt;div class="{class} rounded-md bg-red-400 w-8 h-8"&gt;&lt;/div&gt;
@@ -41,7 +41,7 @@ The `inline` utility generates one or more inline element boxes that do not gene
   variant='inline'
   :variants="['inline', 'inline-block']"
   nested=true
-  fixed='!block space-x-1 pt-12 pl-2 text-xs text-white'
+  fixed='space-x-1 pt-12 pl-2 text-xs text-white'
   appended='rounded-md bg-teal-500 bg-teal-100 py-2 px-3 bg-red-400 bg-green-400 bg-blue-400 text-gray-500'
   html='
 &lt;div class="{class} rounded-md bg-red-400 py-2 px-3"&gt;1&lt;/div&gt;
@@ -54,15 +54,15 @@ The `inline` utility generates one or more inline element boxes that do not gene
 
 The `flow-root` utility generates a block element box that establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.
 
-| Class | Properties |
-| :---- | :--------- |
-| flow-root	| display: flow-root; |
+| Class     | Properties          |
+| :-------- | :------------------ |
+| flow-root | display: flow-root; |
 
 <PlaygroundWithVariants
   variant='flow-root'
   :variants="[]"
   nested=true
-  fixed='!block space-y-2 pt-2'
+  fixed='space-y-2 pt-2'
   appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 m-1 bg-red-400 bg-green-400 bg-blue-400 bg-teal-100'
   html='
 &lt;div class="{class} bg-teal-100 rounded-md"&gt;
@@ -84,7 +84,7 @@ The `contents` utilities don't produce a specific box by themselves. They are re
   variant='contents'
   :variants="['block', 'contents']"
   nested=true
-  fixed='!block pt-10'
+  fixed='pt-10'
   appended='flex items-center rounded-md flex-1 bg-teal-500 bg-teal-100 h-6 bg-red-400 bg-yellow-400 bg-green-400 bg-blue-400 bg-indigo-100 w-10 m-1 p-1'
   html='&lt;div class="flex items-center bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="flex-1 rounded-md bg-red-400 h-6 m-1"&gt;&lt;/div&gt;
@@ -104,7 +104,7 @@ Turns off the `display` of an element so that it has no effect on layout (the do
   variant='hidden'
   :variants="['block', 'hidden']"
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="flex items-center bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-8 h-8 m-1"&gt;&lt;/div&gt;
@@ -121,7 +121,7 @@ Utilities for controlling the visibility of an element. The `visibility` CSS pro
   variant='visible'
   :variants="['visible', 'invisible']"
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="flex items-center bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-8 h-8 m-1"&gt;&lt;/div&gt;
diff --git a/utilities/effects.md b/utilities/effects.md
index 1415ab0d..31cb42c7 100644
--- a/utilities/effects.md
+++ b/utilities/effects.md
@@ -9,15 +9,14 @@ Utilities for controlling the box shadow of an element.
   :variants="['', 'sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none']"
   prefix='shadow'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='bg-teal-400 w-32 h-32 rounded-md'
+  appended='bg-teal-400 w-full h-32 rounded-md'
   nested=true
-  html='&lt;div class=&quot;bg-teal-400 w-32 h-32 rounded-md {class}&quot;&gt;&lt;/div&gt;'
+  html='&lt;div class=&quot;bg-teal-400 w-full h-32 rounded-md {class}&quot;&gt;&lt;/div&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     boxShadow: {
@@ -44,15 +43,14 @@ export default {
   type='color'
   prefix='shadow'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='bg-teal-400 w-32 h-32 rounded-md shadow-2xl'
+  appended='bg-teal-400 w-full h-32 rounded-md shadow-2xl'
   nested=true
-  html='&lt;div class=&quot;bg-teal-400 w-32 h-32 rounded-md shadow-2xl {class}&quot;&gt;&lt;/div&gt;'
+  html='&lt;div class=&quot;bg-teal-400 w-full h-32 rounded-md shadow-2xl {class}&quot;&gt;&lt;/div&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     boxShadowColor: {
@@ -73,16 +71,15 @@ Utilities for controlling the opacity of an element.
   type='opacity'
   prefix='opacity'
   fixed='p-2 dark:text-white opacity-85 overflow-hidden'
-  appended='bg-teal-400 w-32 h-32 rounded-md'
+  appended='bg-teal-400 w-full h-32 rounded-md'
   nested=true
-  html='&lt;div class=&quot;bg-teal-400 w-32 h-32 rounded-md {class}&quot;&gt;&lt;/div&gt;'
+  html='&lt;div class=&quot;bg-teal-400 w-full h-32 rounded-md {class}&quot;&gt;&lt;/div&gt;'
 />
 
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     opacity: {
@@ -103,7 +100,7 @@ Utilities for controlling how an element should blend with the background.
   variant='multiply'
   :variants="['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']"
   prefix='mix-blend'
-  fixed='dark:text-white opacity-85 overflow-hidden h-screen'
+  fixed='dark:text-white opacity-85 overflow-hidden h-full'
   appended='flex justify-center items-center bg-teal-300 bg-yellow-300 w-36 h-36 w-24 h-24 rounded-md'
   nested=true
   html='&lt;div class=&quot;flex justify-center&quot;&gt;
diff --git a/utilities/filters.md b/utilities/filters.md
index 50e55d75..d39c5a72 100644
--- a/utilities/filters.md
+++ b/utilities/filters.md
@@ -28,8 +28,7 @@ Utilities for enabling and disabling filters on an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     blur: {
@@ -57,8 +56,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     brightness: {
@@ -86,8 +84,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     contrast: {
@@ -115,8 +112,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     dropShadow: {
@@ -143,8 +139,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     grayscale: {
@@ -171,8 +166,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     hueRotate: {
@@ -200,8 +194,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     invert: {
@@ -228,8 +221,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     saturate: {
@@ -257,8 +249,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     sepia: {
@@ -279,11 +270,11 @@ Utilities for enabling and disabling backdrop filters on an element.
   variant=''
   :variants="['', 'none']"
   prefix='backdrop-filter'
-  fixed='dark:text-white opacity-85 h-screen overflow-hidden'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  fixed='dark:text-white opacity-85 h-full overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="{class} !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-4"&gt;
       &lt;p&gt;backdrop-blur&lt;/p&gt;
     &lt;/div&gt;
@@ -299,10 +290,10 @@ Utilities for enabling and disabling backdrop filters on an element.
   :variants="['', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '0', '1', '2', '3', '9', '12', '24px', '2rem']"
   prefix='backdrop-blur'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-30 text-center p-4"&gt;
       &lt;p&gt;backdrop-blur&lt;/p&gt;
     &lt;/div&gt;
@@ -311,8 +302,7 @@ Utilities for enabling and disabling backdrop filters on an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropBlur: {
@@ -333,10 +323,10 @@ export default {
   :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']"
   prefix='backdrop-brightness'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-brightness&lt;/p&gt;
     &lt;/div&gt;
@@ -345,8 +335,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropBrightness: {
@@ -367,10 +356,10 @@ export default {
   :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']"
   prefix='backdrop-contrast'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-contrast&lt;/p&gt;
     &lt;/div&gt;
@@ -379,8 +368,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropContrast: {
@@ -401,10 +389,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-grayscale'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-grayscale&lt;/p&gt;
     &lt;/div&gt;
@@ -413,8 +401,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropGrayscale: {
@@ -434,10 +421,10 @@ export default {
   :variants="['0', '15', '30', '45', '60', '90', '120', '180', '-120', '-90', '-60', '-45', '-30', '-15']"
   prefix='backdrop-hue-rotate'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-hue-rotate&lt;/p&gt;
     &lt;/div&gt;
@@ -446,8 +433,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropHueRotate: {
@@ -468,10 +454,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-invert'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-invert&lt;/p&gt;
     &lt;/div&gt;
@@ -480,8 +466,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropInvert: {
@@ -501,10 +486,10 @@ export default {
   type='opacity'
   prefix='backdrop-opacity'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm text-center p-2 p-4 flex flex-col justify-center overflow-hidden border-2'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm text-center p-2 p-4 flex flex-col justify-center overflow-hidden border-2'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm text-center p-4 border-2"&gt;
       &lt;p&gt;backdrop-opacity&lt;/p&gt;
     &lt;/div&gt;
@@ -514,8 +499,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropOpacity: {
@@ -535,10 +519,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-saturate'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-saturate&lt;/p&gt;
     &lt;/div&gt;
@@ -547,8 +531,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropSaturate: {
@@ -569,10 +552,10 @@ export default {
   :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']"
   prefix='backdrop-sepia'
   fixed='dark:text-white opacity-85'
-  appended='w-screen h-screen bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
+  appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden'
   nested=true
   html='
-  &lt;div class="p-2 w-screen h-screen bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
+  &lt;div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"&gt;
     &lt;div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"&gt;
       &lt;p&gt;backdrop-sepia&lt;/p&gt;
     &lt;/div&gt;
@@ -581,8 +564,7 @@ export default {
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     backdropSepia: {
diff --git a/utilities/flexbox.md b/utilities/flexbox.md
index 9f50ce3f..50d7f6ec 100644
--- a/utilities/flexbox.md
+++ b/utilities/flexbox.md
@@ -8,7 +8,7 @@ Use `flex` to create a block-level flex container.
   variant='flex'
   :variants="[]"
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='rounded-md bg-teal-500 bg-teal-100 p-2 space-x-2 w-6 h-6'
   html='&lt;div class="{class} bg-teal-100 rounded-md p-2 space-x-2"&gt;
 &lt;div class="rounded-md bg-teal-500 w-6 h-6"&gt;&lt;/div&gt;
@@ -24,7 +24,7 @@ Use `inline-flex` to create an inline flex container.
 <PlaygroundWithVariants
   variant='inline-flex'
   :variants="[]"
-  fixed='!block pt-20'
+  fixed='pt-20'
   nested=true
   appended='rounded-md bg-teal-500 bg-teal-100 p-2 space-x-2 w-6 h-6'
   html='&lt;div class="{class} bg-teal-100 rounded-md p-2 space-x-2"&gt;
@@ -43,7 +43,7 @@ Utilities for controlling the direction of flex items.
   :variants="['row', 'row-reverse', 'col', 'col-reverse']"
   prefix='flex'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-6 h-6 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="flex items-center {class} bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-6 h-6 m-1"&gt;&lt;/div&gt;
@@ -61,7 +61,7 @@ Utilities for controlling how flex items wrap.
   :variants="['wrap', 'wrap-reverse', 'nowrap']"
   prefix='flex'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-6 h-6 bg-red-400 bg-teal-400 bg-yellow-400 bg-green-400 bg-blue-400 bg-purple-400 m-1 p-1'
   html='&lt;div class="flex items-center {class} bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-6 h-6 m-1"&gt;&lt;/div&gt;
@@ -82,7 +82,7 @@ Utilities for controlling how flex items both grow and shrink.
   :variants="['1', 'auto', 'initial', 'none']"
   prefix='flex'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-6 h-6 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="flex items-center bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-6 h-6 m-1"&gt;&lt;/div&gt;
@@ -93,8 +93,7 @@ Utilities for controlling how flex items both grow and shrink.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     flex: {
@@ -120,7 +119,7 @@ Utilities for controlling how flex items grow.
   :variants="['grow-0', 'grow']"
   prefix='flex'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-6 h-6 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="flex items-center bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-6 h-6 m-1"&gt;&lt;/div&gt;
@@ -131,8 +130,7 @@ Utilities for controlling how flex items grow.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     flexGrow: {
@@ -155,7 +153,7 @@ Utilities for controlling how flex items shrink.
   :variants="['shrink-0', 'shrink']"
   prefix='flex'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex items-center flex-nowrap rounded-md bg-teal-500 bg-teal-100 w-6 h-6 bg-red-400 bg-teal-400 bg-yellow-400 bg-green-400 bg-blue-400 bg-purple-400 m-1 p-1'
   html='&lt;div class="flex items-center flex-nowrap bg-teal-100 rounded-md p-1"&gt;
 &lt;div class="rounded-md bg-red-400 w-6 h-6 m-1"&gt;&lt;/div&gt;
@@ -169,8 +167,7 @@ Utilities for controlling how flex items shrink.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     flexShrink: {
diff --git a/utilities/grid.md b/utilities/grid.md
index 6ab9e3bc..70fb671d 100644
--- a/utilities/grid.md
+++ b/utilities/grid.md
@@ -81,8 +81,7 @@ Utilities for specifying the columns in a grid layout.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -126,8 +125,7 @@ Utilities for specifying the rows in a grid layout.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -170,8 +168,7 @@ Utilities for specifying the column size of an element in a grid layout.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -214,8 +211,7 @@ Utilities for specifying the row size of an element in a grid layout.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -258,8 +254,7 @@ Utilities to make an element start at the nth grid line. These utilities should
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -304,8 +299,7 @@ Utilities to make an element end at the nth grid line. These utilities should be
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -348,8 +342,7 @@ Utilities to make an element start at the nth grid line. These utilities should
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -394,8 +387,7 @@ Utilities to make an element end at the nth grid line. These utilities should be
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -458,8 +450,7 @@ Utilities for controlling the size of implicitly-created grid columns.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -498,8 +489,7 @@ Utilities for controlling the size of implicitly-created grid rows.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -544,8 +534,7 @@ Utilities for controlling gutters between grid rows and columns.
 
 You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -559,8 +548,7 @@ export default {
 
 To customize the gap scale separately, use the gap section of your Tailwind theme config.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
diff --git a/utilities/positioning.md b/utilities/positioning.md
index bdf6b614..dc707a0d 100644
--- a/utilities/positioning.md
+++ b/utilities/positioning.md
@@ -29,8 +29,7 @@ Utilities for controlling the order of flex and grid items.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     order: {
@@ -54,7 +53,7 @@ Utilities for controlling how flex and grid items are positioned along a contain
   :variants="['start', 'end', 'center', 'between', 'around', 'evenly']"
   prefix='justify'
   nested=true
-  fixed='!block pt-20'
+  fixed='pt-20'
   appended='flex rounded-md bg-teal-500 bg-teal-100 p-2 space-x-2 w-6 h-6'
   html='&lt;div class="flex {class} bg-teal-100 rounded-md p-2 space-x-2"&gt;
 &lt;div class="rounded-md bg-teal-500 w-6 h-6"&gt;&lt;/div&gt;
@@ -139,7 +138,7 @@ Utilities for controlling how flex and grid items are positioned along a contain
   :variants="['start', 'end', 'center', 'baseline', 'stretch']"
   prefix='items'
   nested=true
-  fixed='!block pt-10'
+  fixed='pt-10'
   appended='flex justify-center rounded-md bg-teal-500 bg-teal-100 p-2 space-x-2 w-6 min-h-6 h-32'
   html='&lt;div class="flex {class} justify-center bg-teal-100 rounded-md p-2 space-x-2 h-32"&gt;
 &lt;div class="rounded-md bg-teal-500 w-6 min-h-6"&gt;&lt;/div&gt;
@@ -157,7 +156,7 @@ Utilities for controlling how an individual flex or grid item is positioned alon
   :variants="['auto', 'start', 'end', 'center', 'stretch']"
   prefix='self'
   nested=true
-  fixed='!block pt-10'
+  fixed='pt-10'
   appended='flex justify-center rounded-md bg-teal-500 bg-yellow-400 bg-teal-100 p-2 space-x-2 w-6 min-h-6 h-32'
   html='&lt;div class="flex justify-center bg-teal-100 rounded-md p-2 space-x-2 h-32"&gt;
 &lt;div class="rounded-md bg-teal-500 w-6 min-h-6"&gt;&lt;/div&gt;
@@ -237,7 +236,7 @@ Utilities for controlling how an element is positioned in the DOM.
   variant='static'
   :variants="['static', 'fixed', 'absolute', 'relative', 'sticky']"
   nested=true
-  fixed='!block relative text-xs'
+  fixed='relative text-xs'
   appended='rounded-md clear-both bg-teal-500 bg-teal-100 w-8 h-8 mr-2 bg-red-400 bg-green-400 bg-blue-400 inline-block top-0 left-0'
   html='&lt;p&gt;In this demo you can control the &lt;code&gt;position&lt;/code&gt; property for the green box.&lt;/p&gt;
 &lt;div class="inline-block rounded-md w-8 h-8 bg-red-400 mr-2"&gt;&lt;/div&gt;
@@ -261,15 +260,14 @@ Utilities for controlling the placement of positioned elements.
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='inset'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     inset: {
@@ -289,7 +287,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='inset-y'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -301,7 +299,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='inset-x'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -314,7 +312,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='top'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -327,7 +325,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='right'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -339,7 +337,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='bottom'
   nested=true
-  fixed='!block relative text-xs text-white w-screen h-screen'
+  fixed='relative text-xs text-white w-screen h-full'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -351,7 +349,7 @@ export default {
   :variants="['0', 'px', 'auto', 'full', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1/3', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-1/3', '-1.5rem', '-32px', '-full']"
   prefix='left'
   nested=true
-  fixed='!block relative text-xs text-white'
+  fixed='relative text-xs text-white'
   appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2'
   html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
 />
@@ -365,7 +363,7 @@ Utilities for controlling the wrapping of content around an element.
   :variants="['right', 'left', 'none']"
   prefix='float'
   nested=true
-  fixed='!block text-xs'
+  fixed='text-xs'
   appended='bg-blue-300 rounded-md p-3 text-white'
   html='&lt;div class="{class} bg-blue-300 rounded-md p-3 text-white"&gt;Float me&lt;/div&gt;
 As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.'
@@ -380,7 +378,7 @@ Utilities for controlling the wrapping of content around an element.
   :variants="['right', 'left', 'both', 'none']"
   prefix='clear'
   nested=true
-  fixed='!block text-xs'
+  fixed='text-xs'
   appended='bg-blue-300 rounded-md p-3 text-white float-left float-right h-24'
   html='&lt;div class="float-left bg-blue-300 rounded-md p-3 text-white"&gt;Left&lt;/div&gt;
   &lt;div class="float-right bg-blue-300 rounded-md p-3 text-white h-24"&gt;Right&lt;/div&gt;
@@ -396,10 +394,10 @@ Utilities for controlling whether an element should explicitly create a new stac
 <PlaygroundWithVariants
   variant='isolate'
   :variants="['isolate', 'isolation-auto']"
-  fixed='dark:text-white opacity-85 overflow-hidden h-screen'
-  appended='w-32 h-32 bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black'
+  fixed='dark:text-white opacity-85 overflow-hidden h-full'
+  appended='w-full h-32 bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black'
   nested=true
-  html='&lt;div class="w-32 h-32 bg-green-400"&gt;
+  html='&lt;div class="w-full h-32 bg-green-400"&gt;
   &lt;div class="{class}"&gt;
     &lt;div class="bg-green-400 w-16 h-16 mix-blend-difference border-2 border-black"&gt;auto&lt;/div&gt;
   &lt;/div&gt;
@@ -436,8 +434,7 @@ Utilities for controlling how a replaced element's content should be positioned
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     objectPosition: {
@@ -481,8 +478,7 @@ Utilities for controlling the stack order of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     zIndex: {
diff --git a/utilities/sizing.md b/utilities/sizing.md
index 96afdd2e..170a7bd8 100644
--- a/utilities/sizing.md
+++ b/utilities/sizing.md
@@ -10,7 +10,7 @@ Utilities for setting the width of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='w'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 h-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} h-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -19,8 +19,7 @@ Utilities for setting the width of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -44,7 +43,7 @@ Utilities for setting the minimum width of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='min-w'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 h-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} h-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -53,8 +52,7 @@ Utilities for setting the minimum width of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     minWidth: {
@@ -77,7 +75,7 @@ Utilities for setting the maximum width of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='max-w'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 h-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} h-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -86,8 +84,7 @@ Utilities for setting the maximum width of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     maxWidth: {
@@ -111,7 +108,7 @@ Utilities for setting the height of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='h'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} w-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -120,8 +117,7 @@ Utilities for setting the height of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     height: {
@@ -146,7 +142,7 @@ Utilities for setting the minimum height of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='min-h'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} w-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -155,8 +151,7 @@ Utilities for setting the minimum height of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     minHeight: {
@@ -182,7 +177,7 @@ Utilities for setting the maximum height of an element
     '0', '1', '1.5', '2', '4', '8', '10', '12', '14', '18', '20', '24', '1/2', '1/3', '3/5', '11/12', '4rem', '60px']"
   prefix='max-h'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-auto bg-green-400 m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} w-auto flex-shrink-0 p-2"&gt;{class}&lt;/p&gt;
@@ -191,8 +186,7 @@ Utilities for setting the maximum height of an element
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     maxHeight: {
@@ -221,9 +215,9 @@ Utilities for controlling how the browser should calculate an element's total si
   :variants="['border', 'content']"
   prefix='box'
   nested=true
-  fixed='!block text-white text-xs'
-  appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-32 h-32 bg-green-400 text-center flex flex-col justify-center m-1 p-2'
+  fixed='text-white text-xs'
+  appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-full h-32 bg-green-400 text-center flex flex-col justify-center m-1 p-2'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
-&lt;div class="rounded bg-green-400 {class} w-32 h-32 flex-shrink-0 p-2 text-center flex flex-col justify-center"&gt;w-32 x h-32&lt;/div&gt;
+&lt;div class="rounded bg-green-400 {class} w-full h-32 flex-shrink-0 p-2 text-center flex flex-col justify-center"&gt;w-full x h-32&lt;/div&gt;
 &lt;/div&gt;'
 />
\ No newline at end of file
diff --git a/utilities/spacing.md b/utilities/spacing.md
index b006aa10..66fdaeb0 100644
--- a/utilities/spacing.md
+++ b/utilities/spacing.md
@@ -9,7 +9,7 @@ Utilities for controlling an element's padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='p'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 bg-teal-100 flex-shrink-0 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -18,8 +18,7 @@ Utilities for controlling an element's padding.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     padding: {
@@ -43,7 +42,7 @@ Utilities for controlling an element's vertical padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='py'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 flex-shrink-0 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -59,7 +58,7 @@ Utilities for controlling an element's horizontal padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='px'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-500 flex-shrink-0 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -75,7 +74,7 @@ Utilities for controlling an element's top padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='pt'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded flex-shrink-0 bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -91,7 +90,7 @@ Utilities for controlling an element's left padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='pl'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded flex-shrink-0 bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class}"&gt;{class}&lt;/p&gt;
@@ -107,7 +106,7 @@ Utilities for controlling an element's bottom padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='pb'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center flex-shrink-0 rounded bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class}"&gt;{class}&lt;/p&gt;
@@ -123,7 +122,7 @@ Utilities for controlling an element's right padding.
   :variants="['0', 'px', '0.5', '1', '2', '4', '8', '10', '12', '14', '16', '20', '24', '48', '1.5rem', '32px']"
   prefix='pr'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center flex-shrink-0 rounded bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded flex-shrink-0 bg-green-400 {class}"&gt;{class}&lt;/p&gt;
@@ -139,7 +138,7 @@ Utilities for controlling an element's margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='m'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} p-2 flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -148,8 +147,7 @@ Utilities for controlling an element's margin.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     margin: {
@@ -173,7 +171,7 @@ Utilities for controlling an element's vertical margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='my'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} p-2 flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -189,7 +187,7 @@ Utilities for controlling an element's horizontal margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='mx'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class} p-2"&gt;{class}&lt;/p&gt;
@@ -205,7 +203,7 @@ Utilities for controlling an element's top margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='mt'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class} p-2"&gt;{class}&lt;/p&gt;
@@ -221,7 +219,7 @@ Utilities for controlling an element's left margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='ml'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class} p-2"&gt;{class}&lt;/p&gt;
@@ -237,7 +235,7 @@ Utilities for controlling an element's bottom margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='mb'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 flex-shrink-0 {class} p-2"&gt;{class}&lt;/p&gt;
@@ -253,7 +251,7 @@ Utilities for controlling an element's right margin.
   :variants="['0', 'px', 'auto', '0.5', '1', '2', '4', '8', '12', '14', '16', '20', '24', '48', '1.5rem', '32px', '-px', '-0.5', '-2', '-4', '-8', '-12', '-14', '-16', '-20', '-24', '-48', '-1.5rem', '-32px']"
   prefix='mr'
   nested=true
-  fixed='!block text-white text-xs'
+  fixed='text-white text-xs'
   appended='inline-flex items-center rounded bg-teal-100 bg-green-400 p-2 flex-shrink-0'
   html='&lt;div class="inline-flex items-center bg-teal-100 rounded"&gt;
 &lt;p class="rounded bg-green-400 {class} p-2 flex-shrink-0"&gt;{class}&lt;/p&gt;
@@ -280,8 +278,7 @@ Utilities for controlling the space between vertical align child elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     space: {
@@ -334,8 +331,7 @@ Utilities for controlling the space between horizontal align child elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     space: {
diff --git a/utilities/svg.md b/utilities/svg.md
index d7840ac9..09398781 100644
--- a/utilities/svg.md
+++ b/utilities/svg.md
@@ -15,8 +15,7 @@ Utilities for styling the fill of SVG elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     fill: theme => ({
@@ -46,8 +45,7 @@ Utilities for styling the stroke of SVG elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     stroke: theme => ({
@@ -145,8 +143,7 @@ Utilities for styling the stroke width of SVG elements.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
diff --git a/utilities/transforms.md b/utilities/transforms.md
index 547e34eb..4714961e 100644
--- a/utilities/transforms.md
+++ b/utilities/transforms.md
@@ -22,10 +22,10 @@ The transform-style utility sets whether children of an element are positioned i
   variant='3d'
   :variants="['flat', '3d']"
   prefix='preserve'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -45,7 +45,7 @@ Utilities for specifying the origin for an element's transformations.
   variant='center'
   :variants="['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left']"
   prefix='origin'
-  fixed='p-2 dark:text-white opacity-85 w-full h-screen'
+  fixed='p-2 dark:text-white opacity-85 w-full h-full'
   nested=true
   appended='mx-auto transform rotate-90 w-16 h-16 bg-teal-300 rounded-full'
   html='&lt;div class="mx-auto w-16 h-16 bg-teal-300 rounded-full"&gt;
@@ -55,8 +55,7 @@ Utilities for specifying the origin for an element's transformations.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -87,8 +86,7 @@ Utilities for rotating elements with transform.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     rotate: {
@@ -130,10 +128,10 @@ export default {
   variant='12'
   :variants="['0', '6', '12', '30', '45', '72.5', '90', '180', '-180', '-90', '-72.5', '-45', '-12', '-6']"
   prefix='rotate-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -189,10 +187,10 @@ Utilities for scaling elements with transform.
   variant='90'
   :variants="['0', '25', '50', '75', '90', '95', '100', '105', '110', '125', '150']"
   prefix='scale-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -206,8 +204,7 @@ Utilities for scaling elements with transform.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     scale: {
@@ -250,8 +247,7 @@ Utilities for skewing elements with transform.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -299,10 +295,10 @@ Utilities for translating elements with transform.
   variant='0'
   :variants="['0', 'px', 'full', '6', '12', '7.5', '1/2', '2/3', '3/4', '3/5', '3.5rem', '42px', '6em', '-px', '-full', '-6', '-12', '-7.5', '-1/2', '-2/3', '-3/4', '-3/5', '-3.5rem', '-42px']"
   prefix='translate-z'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d transform {class}"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -318,8 +314,7 @@ Utilities for translating elements with transform.
 
 You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -335,8 +330,7 @@ export default {
 
 To customize the translate scale separately, use the theme.translate section of your windi.config.js file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -363,10 +357,10 @@ The `perspect` utility determines the distance between the z=0 plane and the use
   variant='lg'
   :variants="['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '100', '200', '300', '400', '500', '600', '700', '800px', '23rem']"
   prefix='perspect'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center {class} perspect-origin-[150%_150%]"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 perspect-origin-[150%_150%] absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center {class} perspect-origin-[150%_150%]"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -380,8 +374,7 @@ The `perspect` utility determines the distance between the z=0 plane and the use
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -405,10 +398,10 @@ The `perspect-origin` utility determines the position at which the viewer is loo
    variant='center'
   :variants="['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', '[150%]', '[-150%]', '[150%_150%]']"
   prefix='perspect-origin'
-  fixed='!block pl-6 pt-6'
+  fixed='pl-6 pt-6'
   nested=true
-  appended='w-32 h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
-  html='&lt;div class="w-32 h-32 text-white text-4xl text-center perspect-650 {class}"&gt;
+  appended='w-full h-32 text-white text-4xl text-center w-full h-full backface-visible preserve-3d perspect-650 absolute flex items-center justify-center w-24 h-24 transform translate-z-12 rotate-y-180 rotate-y-90 -rotate-y-90 rotate-x-90 -rotate-x-90 bg-opacity-30 bg-opacity-70 bg-black bg-green-500 bg-red-500 bg-blue-500 bg-yellow-500 bg-pink-500'
+  html='&lt;div class="w-full h-32 text-white text-4xl text-center perspect-650 {class}"&gt;
   &lt;div class="w-full h-full backface-visible preserve-3d"&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-black bg-opacity-30 transform translate-z-12"&gt;1&lt;/div&gt;
     &lt;div class="absolute flex items-center justify-center w-24 h-24 bg-green-500 bg-opacity-70 transform rotate-y-180 translate-z-12"&gt;2&lt;/div&gt;
@@ -422,8 +415,7 @@ The `perspect-origin` utility determines the position at which the viewer is loo
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
diff --git a/utilities/transitions.md b/utilities/transitions.md
index 838ed561..43d31027 100644
--- a/utilities/transitions.md
+++ b/utilities/transitions.md
@@ -8,18 +8,17 @@ Utilities for controlling which CSS properties transition.
   variant=''
   :variants="['', 'all', 'colors', 'opacity', 'shadow', 'transform', 'none']"
   prefix='transition'
-  fixed='p-2 dark:text-white opacity-85 h-screen flex flex-col justify-center'
+  fixed='p-2 dark:text-white opacity-85 h-full flex flex-col justify-center'
   nested=true
-  appended='focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:bg-indigo-400 hover:ring-indigo-500 hover:scale-110 hover:-translate-y-1 !duration-300 hover:shadow-xl hover:opacity-80 shadow-indigo-500'
-  html='&lt;button tabindex="-1"; class="{class} !duration-300 focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer hover:bg-indigo-400 hover:ring-indigo-500 transform hover:scale-110 hover:-translate-y-1 hover:shadow-xl hover:opacity-80 shadow-indigo-500"&gt;
+  appended='focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:bg-indigo-400 hover:ring-indigo-500 hover:scale-110 hover:-translate-y-1 !duration-300 hover:shadow-xl hover:opacity-80 shadow-indigo-500'
+  html='&lt;button tabindex="-1"; class="{class} !duration-300 focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer hover:bg-indigo-400 hover:ring-indigo-500 transform hover:scale-110 hover:-translate-y-1 hover:shadow-xl hover:opacity-80 shadow-indigo-500"&gt;
     Hover me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -42,18 +41,17 @@ Utilities for controlling the duration of CSS transitions.
   variant='150'
   :variants="['0', '50', '75', '100', '150', '200', '300', '400', '500', '600', '700', '1000']"
   prefix='duration'
-  fixed='p-2 dark:text-white opacity-85 h-screen flex flex-col justify-center'
+  fixed='p-2 dark:text-white opacity-85 h-full flex flex-col justify-center'
   nested=true
-  appended='transition focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
-  html='&lt;button tabindex="-1"; class="transition {class} focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
+  appended='transition focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
+  html='&lt;button tabindex="-1"; class="transition {class} focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
     Hover me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -76,18 +74,17 @@ Utilities for controlling the easing of CSS transitions.
   variant='linear'
   :variants="['linear', 'in', 'out', 'in-out']"
   prefix='ease'
-  fixed='p-2 dark:text-white opacity-85 h-screen flex flex-col justify-center'
+  fixed='p-2 dark:text-white opacity-85 h-full flex flex-col justify-center'
   nested=true
-  appended='transition focus:outline-none ease-in-out w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1 duration-600'
-  html='&lt;button tabindex="-1"; class="transition ease-in-out {class} duration-600 focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
+  appended='transition focus:outline-none ease-in-out w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1 duration-600'
+  html='&lt;button tabindex="-1"; class="transition ease-in-out {class} duration-600 focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
     Hover me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -110,18 +107,17 @@ Utilities for controlling the delay of CSS transitions.
   variant='150'
   :variants="['0', '50', '75', '100', '150', '200', '300', '400', '500', '600', '700', '1000']"
   prefix='delay'
-  fixed='p-2 dark:text-white opacity-85 h-screen flex flex-col justify-center'
+  fixed='p-2 dark:text-white opacity-85 h-full flex flex-col justify-center'
   nested=true
-  appended='transition ease-in-out focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
-  html='&lt;button tabindex="-1"; class="transition {class} ease-in-out focus:outline-none w-32 py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
+  appended='transition ease-in-out focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1'
+  html='&lt;button tabindex="-1"; class="transition {class} ease-in-out focus:outline-none w-full py-3 rounded font-bold text-white bg-blue-400 ring-4 ring-blue-500 ring-opacity-50 cursor-pointer transform hover:scale-110 hover:-translate-y-1"&gt;
     Hover me
   &lt;/button&gt;'
 />
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
diff --git a/utilities/typography.md b/utilities/typography.md
index 49e067cf..f3582c1d 100644
--- a/utilities/typography.md
+++ b/utilities/typography.md
@@ -68,8 +68,7 @@ Utilities for controlling the font size of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     fontSize: {
@@ -92,8 +91,7 @@ export default {
 
 You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight] in your windi.config.js file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     fontSize: {
@@ -108,8 +106,7 @@ export default {
 
 If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your windi.config.js file.
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     fontSize: {
@@ -164,8 +161,7 @@ Utilities for controlling the font weight of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     fontWeight: {
@@ -227,8 +223,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     letterSpacing: {
@@ -260,8 +255,7 @@ Utilities for controlling the leading (line height) of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -294,8 +288,7 @@ The tab-size utilities are used to customize the width of tab characters (U+0009
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     tabSize: {
@@ -337,8 +330,7 @@ Utilities for controlling the text color of an element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textColor: {
@@ -393,8 +385,7 @@ Utilities for controlling the color of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textDecorationColor: {
@@ -424,8 +415,7 @@ Utilities for controlling the opacity of an element's decoration color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -457,8 +447,7 @@ Utilities for controlling the length of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -488,8 +477,7 @@ Utilities for controlling the offset of text decoration.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textDecorationOffset: {
@@ -517,8 +505,7 @@ Utilities for controlling the indentation of text.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -541,7 +528,7 @@ Utilities for controlling the opacity of an element's text color.
   variant='50'
   type='opacity'
   prefix='text-opacity'
-  fixed='p-2 dark:text-white opacity-85 overflow-hidden'
+  fixed='p-2 opacity-85 overflow-hidden'
   appended='text-black'
   nested=true
   html="&lt;p class='text-black {class}'&gt;The quick brown fox jumps over the lazy dog&lt;/&gt;"
@@ -549,8 +536,7 @@ Utilities for controlling the opacity of an element's text color.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -580,8 +566,7 @@ Utilities for controlling the shadow of a text element.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textShadow: {
@@ -613,8 +598,7 @@ Utilities for controlling the width of text stroke.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     extend: {
@@ -643,8 +627,7 @@ Utilities for controlling the color of text stroke.
 
 <Customizing>
 
-```js
-// windi.config.js
+```js windi.config.js
 export default {
   theme: {
     textStrokeColor: {
diff --git a/vite.config.ts b/vite.config.ts
index e13770b6..fccfee59 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,35 +1,29 @@
-import { dirname, resolve } from 'path'
+import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import Components from 'vite-plugin-components'
 import Icons, { ViteIconsResolver } from 'vite-plugin-icons'
 import WindiCSS from 'vite-plugin-windicss'
 import ViteRestart from 'vite-plugin-restart'
-import { sync } from 'resolve'
-import { ensurePrefix, slash } from '@antfu/utils'
-
-export function resolveImportPath(importName: string) {
-  return sync(importName, {
-    preserveSymlinks: false,
-  })
-}
-
-export function toAtFS(path: string) {
-  return `/@fs${ensurePrefix('/', slash(path))}`
-}
-
-const themeRoot = dirname(resolveImportPath('@windicss/vitepress-theme/package.json'))
 
 export default defineConfig({
   resolve: {
     alias: {
-      '@windicss/vitepress-theme/': `${toAtFS(themeRoot)}/`,
+      '@/': `${resolve(__dirname, '.vitepress/theme')}/`,
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          windicss: ['windicss'],
+        },
+      },
     },
   },
   plugins: [
     Components({
       dirs: [
         '.vitepress/theme/components',
-        `${themeRoot}/components`,
       ],
       extensions: ['vue', 'ts'],
       customLoaderMatcher: id => id.endsWith('.md'),
@@ -38,40 +32,12 @@ export default defineConfig({
           componentPrefix: '',
         }),
       ],
+      globalComponentsDeclaration: true,
     }),
-    Icons({
-      defaultStyle: 'vertical-align: middle;',
-    }),
-    WindiCSS({
-      configFiles: [
-        resolve(themeRoot, 'windi.config.ts'),
-      ],
-    }),
+    Icons(),
+    WindiCSS(),
     ViteRestart({
       restart: '.vitepress/config/*.*',
     }),
   ],
-  optimizeDeps: {
-    include: [
-      'vue',
-      'mitt',
-      'json5',
-      'lz-string',
-      'splitpanes',
-      '@vueuse/core',
-      '@vueuse/integrations',
-      'windicss',
-      'windicss/colors',
-      'windicss/utils/style',
-      'windicss/utils/parser',
-      'prismjs',
-      'prismjs/components/prism-css',
-      'codemirror',
-      'codemirror/mode/css/css',
-      'codemirror/mode/javascript/javascript',
-    ],
-    exclude: [
-      '@windicss/shared-components',
-    ],
-  },
 })
diff --git a/windi.config.ts b/windi.config.ts
new file mode 100644
index 00000000..1a251ae8
--- /dev/null
+++ b/windi.config.ts
@@ -0,0 +1,70 @@
+import { defineConfig } from 'vite-plugin-windicss'
+import typography from 'windicss/plugin/typography'
+
+export default defineConfig({
+  extract: {
+    include: [
+      '.vitepress/theme/**/*.{ts,vue}',
+    ],
+  },
+  safelist: [
+    'pb-5',
+    'logo-float-xl',
+    'dark:text-white',
+    'opacity-85',
+  ],
+  shortcuts: {
+    'logo-float-xl': 'text-6xl m-2 mr-6 float-right',
+  },
+  theme: {
+    extend: {
+      screens: {
+        '2xl': '1400px',
+      },
+      colors: {
+        primary: {
+          DEFAULT: '#48B0F1',
+          50: '#7ae2ff',
+          100: '#70d8ff',
+          200: '#66ceff',
+          300: '#5cc4ff',
+          400: '#52bafb',
+          500: '#48b0f1',
+          600: '#3ea6e7',
+          700: '#349cdd',
+          800: '#2a92d3',
+          900: '#2088c9',
+        },
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: 'none',
+            color: 'inherit',
+            a: {
+              color: '#48B0F1',
+              textDecoration: 'none',
+            },
+            b: { color: 'inherit' },
+            strong: { color: 'inherit' },
+            em: { color: 'inherit' },
+            h1: { color: 'inherit' },
+            h2: { color: 'inherit' },
+            h3: { color: 'inherit' },
+            h4: { color: 'inherit' },
+            code: { color: 'inherit' },
+            pre: { color: 'inherit', fontSize: '.9rem' },
+            thead: { color: 'inherit' },
+            blockquote: { color: 'inherit' },
+            table: {
+              borderCollapse: 'collapse',
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [
+    typography(),
+  ],
+})