diff --git a/.github/workflows/ci-dev.yml b/.github/workflows/ci-dev.yml
index 2b5e7c27..e05f1f70 100644
--- a/.github/workflows/ci-dev.yml
+++ b/.github/workflows/ci-dev.yml
@@ -21,6 +21,9 @@ jobs:
         os: [ubuntu-latest] # macos-latest, windows-latest
         node: [18]
 
+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
     steps:
       - uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 357cfa5f..1de84d18 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,6 +14,9 @@ jobs:
         os: [ubuntu-latest] # macos-latest, windows-latest
         node: [18]
 
+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
     steps:
       - uses: actions/setup-node@v4
         with:
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..50aead73
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "prettier.enable": false
+}
diff --git a/docs/.env.example b/docs/.env.example
index b0342bcc..8856c6ef 100644
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -1,6 +1,8 @@
-# To link Nuxt UI Pro in development
+# Specify the path of @nuxt/ui-pro locally
 NUXT_UI_PRO_PATH=
-# To use Nuxt UI Pro in production
-NUXT_UI_PRO_TOKEN=
+# Production token for @nuxt/ui-pro, purchase on https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
 # Used when pre-rendering the docs for dynamic OG images
 NUXT_PUBLIC_SITE_URL=
+# Used to fetch `nuxt/ui-pro` docs content
+NUXT_GITHUB_TOKEN=
diff --git a/docs/app.vue b/docs/app.vue
index 67802987..759f07df 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,16 +1,16 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <Header />
+    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <Footer />
+    <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
     </ClientOnly>
 
     <UNotifications>
@@ -42,10 +42,17 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
 // Computed
 
 const navigation = computed(() => {
-  const main = nav.value.filter(item => item._path !== '/dev')
-  const dev = nav.value.find(item => item._path === '/dev')?.children
+  if (branch.value?.name === 'dev') {
+    const dev = nav.value.find(item => item._path === '/dev')?.children
+    const pro = nav.value.find(item => item._path === '/pro')
 
-  return branch.value?.name === 'dev' ? dev : main
+    return [
+      pro,
+      ...dev
+    ]
+  }
+
+  return nav.value.filter(item => item._path !== '/dev')
 })
 
 const groups = computed(() => {
@@ -58,6 +65,54 @@ const groups = computed(() => {
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Watch
 
 watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index f2185fff..713e45fb 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -1,22 +1,16 @@
 <template>
-  <div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-900 px-4">
+  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+    <div v-if="!['/playground', '/roadmap'].includes($route.path)" class="bg-white dark:bg-gray-900 px-4">
       <LogoOnly class="w-5 h-5" />
     </div>
   </div>
 
-  <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
+  <UFooter>
     <template #left>
-      <div class="text-sm text-gray-500 dark:text-gray-400">
-        Made by
-        <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
-          <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
-        </NuxtLink>
-      </div>
-    </template>
-
-    <template #center>
-      <span class="text-sm text-gray-500 dark:text-gray-400">
+      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
+        Purchase Nuxt UI Pro
+      </a>
+      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
         Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
           MIT License
         </NuxtLink>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index 20e07773..95dcaf1d 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -31,42 +31,35 @@
     </template>
 
     <template #panel>
-      <BranchSelect />
+      <UAsideLinks :links="links" />
 
-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <UDivider type="dashed" class="mt-4 mb-3" />
+
+      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+
+      <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
     </template>
   </UHeader>
 </template>
 
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { Link } from '#ui-pro/types'
 
+defineProps<{
+  links: Link[]
+}>()
+
+const route = useRoute()
 const { metaSymbol } = useShortcuts()
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const nav = inject<Ref<NavItem[]>>('navigation')
 
-const links = computed(() => {
-  return [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open-solid',
-    to: '/getting-started'
-  }, {
-    label: 'Examples',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/getting-started/examples'
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Pro',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/pro'
-  }, {
-    label: 'Releases',
-    icon: 'i-heroicons-rocket-launch-solid',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
+const navigation = computed(() => {
+  if (route.path.startsWith('/pro')) {
+    return nav.value.find(item => item._path === '/pro')?.children
+  }
+
+  return nav.value.filter(item => !item._path.startsWith('/pro'))
 })
 </script>
diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index e4f57ca4..8afc1879 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -36,8 +36,8 @@
       </div>
     </div>
 
-    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, overflowClass]">
-      <component :is="name" v-model="vModel" v-bind="fullProps">
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, extraClass]">
+      <component :is="name" v-model="vModel" v-bind="fullProps" :class="componentClass">
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
 
         <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
@@ -99,13 +99,17 @@ const props = defineProps({
     type: String,
     default: 'bg-white dark:bg-gray-900'
   },
-  overflowClass: {
+  extraClass: {
     type: String,
     default: ''
   },
   previewOnly: {
     type: Boolean,
     default: false
+  },
+  componentClass: {
+    type: String,
+    default: ''
   }
 })
 
@@ -116,10 +120,16 @@ const componentProps = reactive({ ...props.props })
 const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}
 
 const meta = await fetchComponentMeta(name)
 
diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index 774e11d9..525587ba 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
     <div
-      class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
-      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
+      class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
+      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
     >
-      <component :is="camelName" v-if="component" v-bind="componentProps" />
+      <template v-if="component">
+        <iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
+        <component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
+      </template>
+
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
     <template v-if="hasCode">
@@ -43,18 +47,36 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  prose: {
+    type: Boolean,
+    default: false
+  },
+  iframe: {
+    type: Boolean,
+    default: false
+  },
+  iframeProps: {
+    type: Object,
+    default: () => ({})
+  },
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
   },
-  overflowClass: {
+  extraClass: {
     type: String,
     default: ''
   }
 })
 
+let component = props.component
+// TODO: Remove once merged on `main` branch
+if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
+  component = component.replace('-theme', '-example-theme')
+}
+
 const instance = getCurrentInstance()
-const camelName = camelCase(props.component)
+const camelName = camelCase(component)
 const data = await fetchContentExampleCode(camelName)
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
diff --git a/docs/components/content/ComponentProps.vue b/docs/components/content/ComponentProps.vue
index b48ad399..c8eca2b7 100644
--- a/docs/components/content/ComponentProps.vue
+++ b/docs/components/content/ComponentProps.vue
@@ -17,10 +17,16 @@ const props = defineProps({
 })
 
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}
 
 const meta = await fetchComponentMeta(name)
 </script>
diff --git a/docs/components/content/ComponentPropsField.vue b/docs/components/content/ComponentPropsField.vue
index d27dd9aa..d73db29c 100644
--- a/docs/components/content/ComponentPropsField.vue
+++ b/docs/components/content/ComponentPropsField.vue
@@ -1,21 +1,24 @@
 <template>
   <Field v-bind="prop">
     <code v-if="prop.default">{{ prop.default }}</code>
+    <p v-if="prop.description">
+      {{ prop.description }}
+    </p>
 
     <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
         <ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
     <Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
         <template v-for="subSchema in schema.schema" :key="subSchema.name">
           <ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
         </template>
       </FieldGroup>
     </Collapsible>
     <Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
-      <FieldGroup class="!mt-0">
+      <FieldGroup>
         <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
diff --git a/docs/components/content/ComponentSlots.vue b/docs/components/content/ComponentSlots.vue
index 606a89db..36fbd892 100644
--- a/docs/components/content/ComponentSlots.vue
+++ b/docs/components/content/ComponentSlots.vue
@@ -1,19 +1,8 @@
 <template>
   <div>
-    <table>
-      <thead>
-        <tr>
-          <th>Slot</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="slot in (meta.meta.slots as any[])" :key="slot.name">
-          <td class="whitespace-nowrap">
-            <code>{{ slot.name }}</code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <FieldGroup>
+      <Field v-for="slot in meta?.meta.slots" :key="slot.name" v-bind="slot" />
+    </FieldGroup>
   </div>
 </template>
 
@@ -28,10 +17,8 @@ const props = defineProps({
 })
 
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
 
 const meta = await fetchComponentMeta(name)
 </script>
diff --git a/docs/components/content/Placeholder.vue b/docs/components/content/Placeholder.vue
index a11f9468..05cddfdb 100644
--- a/docs/components/content/Placeholder.vue
+++ b/docs/components/content/Placeholder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75">
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
     <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
       <defs>
         <pattern
diff --git a/docs/components/content/VoltaEmbed.vue b/docs/components/content/VoltaEmbed.vue
deleted file mode 100644
index 986cc982..00000000
--- a/docs/components/content/VoltaEmbed.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <iframe :src="src" class="w-full min-h-[calc(100vh/1.5)] border border-gray-200 dark:border-gray-800 rounded-md" />
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  token: {
-    type: String,
-    required: true
-  }
-})
-
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const src = computed(() => `https://volta.net/embed/${props.token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
-</script>
diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
similarity index 100%
rename from docs/components/content/themes/CommandPaletteThemeAlgolia.vue
rename to docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
diff --git a/docs/components/content/themes/CommandPaletteThemeRaycast.vue b/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
similarity index 100%
rename from docs/components/content/themes/CommandPaletteThemeRaycast.vue
rename to docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
diff --git a/docs/components/content/themes/PaginationThemeRounded.vue b/docs/components/content/examples/PaginationExampleThemeRounded.vue
similarity index 100%
rename from docs/components/content/themes/PaginationThemeRounded.vue
rename to docs/components/content/examples/PaginationExampleThemeRounded.vue
diff --git a/docs/components/content/examples/TableExampleAdvanced.vue b/docs/components/content/examples/TableExampleAdvanced.vue
index 17bca10d..b5758963 100644
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -84,11 +84,11 @@ const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
 const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))
 
 // Data
-const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
+const { data: todos, pending } = await useLazyAsyncData<{
   id: number
   title: string
   completed: string
-}[]>(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
+}[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
   query: {
     q: search.value,
     '_page': page.value,
diff --git a/docs/components/content/themes/VerticalNavigationThemeTailwind.vue b/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
similarity index 100%
rename from docs/components/content/themes/VerticalNavigationThemeTailwind.vue
rename to docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index a14bd9f8..4aded309 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -150,4 +150,13 @@ Update your `package.json` to the following:
 }
 ```
 
+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxt/ui": "^2.9.0"
++   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+  }
+}
+```
+
 Then run `pnpm install`, `yarn install` or `npm install`.
diff --git a/docs/content/1.getting-started/5.examples.md b/docs/content/1.getting-started/5.examples.md
index 610d16d0..0635ad88 100644
--- a/docs/content/1.getting-started/5.examples.md
+++ b/docs/content/1.getting-started/5.examples.md
@@ -134,14 +134,14 @@ Here is some examples of what you can do with the [CommandPalette](/navigation/c
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-algolia'
+component: 'command-palette-example-theme-algolia'
 componentProps:
   class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
 Take a look at the component!
 ::
 
@@ -150,24 +150,24 @@ Take a look at the component!
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-raycast'
+component: 'command-palette-example-theme-raycast'
 componentProps:
   class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
 Take a look at the component!
 ::
 
 ### VerticalNavigation
 
-:component-example{component="vertical-navigation-theme-tailwind"}
+:component-example{component="vertical-navigation-example-theme-tailwind"}
 
 ### Pagination
 
-:component-example{component="pagination-theme-rounded"}
+:component-example{component="pagination-example-theme-rounded"}
 
 ## RTL Support
 
diff --git a/docs/content/1.getting-started/7.roadmap.md b/docs/content/1.getting-started/7.roadmap.md
deleted file mode 100644
index 0f1a3fa2..00000000
--- a/docs/content/1.getting-started/7.roadmap.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Roadmap
-description: Discover our Volta board for @nuxt/ui development status.
-toc: false
----
-
-:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9"}
diff --git a/docs/content/2.elements/11.meter.md b/docs/content/2.elements/11.meter.md
index 2647453f..d22ef4e6 100644
--- a/docs/content/2.elements/11.meter.md
+++ b/docs/content/2.elements/11.meter.md
@@ -117,7 +117,7 @@ To group multiple meters into a group, adding all values, use the `MeterGroup` c
 - To show a label for each meter, use the `label` prop on each meter.
 - To change the icon for each meter, use the `icon` prop.
 
-::component-card{slug="MeterGroup"}
+::component-card{slug="UMeterGroup"}
 ---
 baseProps:
   icon: i-heroicons-minus
@@ -169,7 +169,7 @@ The `label` slot can be used to change how the label below the meter bar is show
 
 :u-divider{label="MeterGroup" type="dashed" class="my-12"}
 
-:component-props{slug="MeterGroup"}
+:component-props{slug="UMeterGroup"}
 
 ## Config
 
diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index 0b73d980..33cfd72d 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -90,7 +90,7 @@ To stack avatars as a group, use the `AvatarGroup` component.
 - To size all the avatars equally, pass the `size` prop
 - To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
 
-::component-card{slug="AvatarGroup"}
+::component-card{slug="UAvatarGroup"}
 ---
 props:
   size: 'sm'
@@ -113,10 +113,10 @@ code: |
 
 :u-divider{label="AvatarGroup" type="dashed" class="my-12"}
 
-:component-props{slug="avatar-group"}
+:component-props{slug="UAvatarGroup"}
 
 ## Config
 
 :component-preset
 
-:component-preset{slug="avatar-group"}
+:component-preset{slug="AvatarGroup"}
diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md
index f3fac37c..109e1e2d 100644
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.elements/5.button.md
@@ -295,7 +295,7 @@ To stack buttons as a group, use the `ButtonGroup` component.
 - To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -312,7 +312,7 @@ code: |
 
 This can also work with an [Input](/forms/input) component for example:
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -375,7 +375,7 @@ excludedProps:
 
 :u-divider{label="ButtonGroup" type="dashed" class="my-12"}
 
-:component-props{slug="ButtonGroup"}
+:component-props{slug="UButtonGroup"}
 
 ## Config
 
diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/3.forms/6.radio-group.md
index 28cf88ff..1a554a11 100644
--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -75,7 +75,7 @@ This prop also work on the Radio component.
 
 Use the `label` prop to display a label on the right of the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -86,7 +86,7 @@ props:
 
 Use the `required` prop to display a red star next to the label of the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -98,7 +98,7 @@ props:
 
 Use the `help` prop to display some text under the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -116,7 +116,7 @@ Use the `#label` slot to override the label of each option.
 
 Alternatively, you can do the same with individual Radio:
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 slots:
   label: <span class="italic">Label</span>
@@ -149,10 +149,10 @@ slots:
 
 :u-divider{label="Radio" type="dashed" class="my-12"}
 
-:component-props{slug="radio"}
+:component-props{slug="URadio"}
 
 ## Config
 
 :component-preset
 
-:component-preset{slug="radio"}
+:component-preset{slug="Radio"}
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 66c4ba82..f210f4ba 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -13,7 +13,6 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-basic'
 componentProps:
   class: 'flex-1'
@@ -33,7 +32,6 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns'
 componentProps:
   class: 'flex-1'
@@ -45,7 +43,6 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-selectable'
 componentProps:
   class: 'flex-1'
@@ -59,7 +56,6 @@ You can make the columns sortable by setting the `sortable` property to `true` i
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-sortable'
 componentProps:
   class: 'flex-1'
@@ -82,7 +78,6 @@ Use the `sort-button` prop to customize the sort button in the header. You can p
 ::component-card{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -187,7 +182,6 @@ The initial value of `sort` will be respected as the initial sort column and dir
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-reactive-sorting'
 componentProps:
   class: 'flex-1'
@@ -201,7 +195,6 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-selectable'
 componentProps:
   class: 'flex-1'
@@ -219,7 +212,6 @@ You can use this to navigate to a page, open a modal or even to select the row m
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-clickable'
 componentProps:
   class: 'flex-1'
@@ -233,7 +225,6 @@ You can easily use the [Input](/forms/input) component to filter the rows.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-searchable'
 componentProps:
   class: 'flex-1'
@@ -247,7 +238,6 @@ You can easily use the [Pagination](/navigation/pagination) component to paginat
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-paginable'
 componentProps:
   class: 'flex-1'
@@ -265,7 +255,6 @@ You can also set it to `null` to hide the loading state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -314,7 +303,6 @@ You can also set it to `null` to hide the empty state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -380,7 +368,6 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-slots'
 componentProps:
   class: 'flex-1'
@@ -394,7 +381,6 @@ Use the `#loading-state` slot to customize the loading state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-loading-slot'
 componentProps:
   class: 'flex-1'
@@ -408,7 +394,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-empty-slot'
 componentProps:
   class: 'flex-1'
diff --git a/docs/content/5.navigation/2.command-palette.md b/docs/content/5.navigation/2.command-palette.md
index 5a7d8bfc..cd57efa7 100644
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/5.navigation/2.command-palette.md
@@ -225,7 +225,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'command-palette-example-empty-slot'
 componentProps:
   class: 'flex-1'
diff --git a/docs/content/index.yml b/docs/content/index.yml
index d00988d8..5c9eb2a5 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -1,5 +1,5 @@
 navigation: false
-title: 'Nuxt UI: Fully styled and customizable components for Nuxt'
+title: 'Nuxt UI: A UI Library for Modern Web Apps'
 description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
 hero:
   title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
diff --git a/docs/error.vue b/docs/error.vue
index 815af38b..84c4ad4e 100644
--- a/docs/error.vue
+++ b/docs/error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header />
+    <Header :links="links" />
 
     <UContainer>
       <UMain>
@@ -11,7 +11,7 @@
     </UContainer>
 
     <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" />
+      <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
     </ClientOnly>
 
     <UNotifications />
@@ -45,6 +45,54 @@ const navigation = computed(() => {
   return branch.value?.name === 'dev' ? dev : main
 })
 
+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Provide
 
 provide('navigation', navigation)
diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue
index e01a998c..05fc5bdb 100644
--- a/docs/layouts/docs.vue
+++ b/docs/layouts/docs.vue
@@ -19,5 +19,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const navigation = inject<NavItem[]>('navigation')
+const nav = inject<Ref<NavItem[]>>('navigation')
+
+const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
 </script>
diff --git a/docs/modules/content-examples-code.ts b/docs/modules/content-examples-code.ts
index aa1cb146..16021f3e 100644
--- a/docs/modules/content-examples-code.ts
+++ b/docs/modules/content-examples-code.ts
@@ -74,11 +74,7 @@ export default defineNuxtModule({
 
     nuxt.hook('components:extend', async (_components) => {
       components = _components
-        .filter(
-          (v) =>
-            v.shortPath.startsWith('components/content/examples/') ||
-            v.shortPath.startsWith('components/content/themes/')
-        )
+        .filter((v) => v.shortPath.includes('components/content/examples/'))
         .reduce((acc, component) => {
           acc[component.pascalName] = component
           return acc
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 50adf319..768c4c1a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -8,7 +8,13 @@ const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
   // @ts-ignore
-  extends: process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro',
+  extends: process.env.NUXT_UI_PRO_PATH ? [
+    process.env.NUXT_UI_PRO_PATH,
+    resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
+  ] : [
+    '@nuxt/ui-pro',
+    process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
+  ].filter(Boolean),
   modules: [
     '@nuxt/content',
     'nuxt-og-image',
@@ -30,7 +36,7 @@ export default defineNuxtConfig({
   },
   ui: {
     global: true,
-    icons: ['heroicons', 'simple-icons'],
+    icons: ['heroicons', 'logos', 'simple-icons'],
     safelistColors: excludeColors(colors)
   },
   content: {
@@ -46,7 +52,19 @@ export default defineNuxtConfig({
         repo: 'nuxt/ui',
         branch: 'main',
         dir: 'docs/content'
-      }
+      },
+      pro: process.env.NUXT_UI_PRO_PATH ? {
+        prefix: '/pro',
+        driver: 'fs',
+        base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
+      } : process.env.NUXT_GITHUB_TOKEN ? {
+        prefix: '/pro',
+        driver: 'github',
+        repo: 'nuxt/ui-pro',
+        branch: 'dev',
+        dir: '.docs/content/pro',
+        token: process.env.NUXT_GITHUB_TOKEN || ''
+      } : undefined
     }
   },
   fontMetrics: {
@@ -70,11 +88,20 @@ export default defineNuxtConfig({
     }
   },
   componentMeta: {
-    globalsOnly: true,
-    exclude: ['@nuxtjs/mdc', resolve('./components'), resolve('@nuxt/ui-pro/components')],
+    exclude: [
+      '@nuxt/content',
+      '@nuxt/ui-templates',
+      '@nuxtjs/color-mode',
+      '@nuxtjs/mdc',
+      'nuxt/dist',
+      'nuxt-og-image',
+      'nuxt-site-config',
+      resolve('./components'),
+      process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, '.docs', 'components') : '.c12'
+    ],
     metaFields: {
       props: true,
-      slots: false,
+      slots: true,
       events: false,
       exposed: false
     }
@@ -87,7 +114,9 @@ export default defineNuxtConfig({
     // Related to https://github.com/nuxt/nuxt/pull/22558
     'components:extend': (components) => {
       components.forEach((component) => {
-        if (component.global) {
+        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
+          component.global = true
+        } else if (component.global) {
           component.global = 'sync'
         }
       })
diff --git a/docs/package.json b/docs/package.json
index 60906ee6..47786601 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -6,22 +6,24 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.13",
+    "@iconify-json/logos": "^1.1.37",
     "@iconify-json/simple-icons": "^1.1.76",
-    "@nuxt/content": "^2.8.5",
+    "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "^1.0.0",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22",
-    "@nuxthq/studio": "^1.0.2",
+    "@nuxt/ui-pro": "^0.4.1",
+    "@nuxthq/studio": "^1.0.3",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
+    "@nuxtjs/mdc": "^0.2.6",
     "@nuxtjs/plausible": "^0.2.3",
     "@vueuse/nuxt": "^10.5.0",
     "eslint": "^8.52.0",
     "joi": "^17.11.0",
     "nuxt": "^3.8.0",
     "nuxt-cloudflare-analytics": "^1.0.8",
-    "nuxt-component-meta": "^0.5.4",
-    "nuxt-og-image": "^2.1.3",
+    "nuxt-component-meta": "npm:nuxt-component-meta-edge@0.5.5-28315603.0a285c7",
+    "nuxt-og-image": "^2.2.3",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "ufo": "^1.3.1",
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 34d0dc6e..541da8a1 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -7,7 +7,7 @@
 
       <hr v-if="surround?.length">
 
-      <UDocsSurround :surround="(surround as ParsedContent[])" />
+      <UDocsSurround :surround="surround" />
     </UPageBody>
 
     <template v-if="page.body?.toc?.links?.length" #right>
@@ -26,7 +26,6 @@
 
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
 const route = useRoute()
 const { branch } = useContentSource()
diff --git a/docs/pages/examples/[...slug].vue b/docs/pages/examples/[...slug].vue
new file mode 100644
index 00000000..f4a3b6e8
--- /dev/null
+++ b/docs/pages/examples/[...slug].vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="p-4 flex flex-col justify-center h-screen overflow-auto">
+    <component :is="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const name = route.params.slug[0]
+</script>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index ef2b4318..48edad23 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,7 +1,19 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
+    <ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
+      <template #headline>
+        <UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
+          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version}`" target="_blank" class="focus:outline-none" tabindex="-1">
+            <span class="absolute inset-0" aria-hidden="true" />
+          </NuxtLink>
+
+          <span class="flex items-center gap-1">
+            Nuxt UI {{ config.version.split('.').slice(0, -1).join('.') }} is out!
+          </span>
+        </UBadge>
+      </template>
+
       <template #title>
         <span v-html="page.hero?.title" />
       </template>
@@ -72,16 +84,14 @@
             }"
             class="flex flex-col"
           >
-            <div v-if="card.image">
-              <UColorModeImage
-                :light="`${card.image.path}-light.svg`"
-                :dark="`${card.image.path}-dark.svg`"
-                :width="card.image.width"
-                :height="card.image.height"
-                :alt="card.title"
-                class="object-cover w-full"
-              />
-            </div>
+            <UColorModeImage
+              :light="`${card.image.path}-light.svg`"
+              :dark="`${card.image.path}-dark.svg`"
+              :width="card.image.width"
+              :height="card.image.height"
+              :alt="card.title"
+              class="object-cover w-full"
+            />
           </ULandingCard>
         </ULandingGrid>
       </template>
@@ -199,6 +209,7 @@ const { data: module } = await useFetch<{
 
 const source = ref('npm i @nuxt/ui')
 
+const config = useRuntimeConfig().public
 const { copy, copied } = useClipboard({ source })
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 63d2d29a..e699e5b2 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -16,7 +16,7 @@ defineOgImage({
 </script>
 
 <template>
-  <div class="h-[calc(100vh-var(--header-height))]">
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
     <ClientOnly>
       <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${$colorMode.preference}`" width="100%" height="100%" />
     </ClientOnly>
diff --git a/docs/pages/pro.vue b/docs/pages/pro.vue
deleted file mode 100644
index 5692f3de..00000000
--- a/docs/pages/pro.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <UMain>
-    <ULandingHero>
-      <template #top>
-        <svg class="hidden dark:block absolute inset-0 -z-10 h-full w-full stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
-          <defs>
-            <pattern
-              id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
-              width="200"
-              height="200"
-              x="50%"
-              y="-1"
-              patternUnits="userSpaceOnUse"
-            >
-              <path d="M.5 200V.5H200" fill="none" />
-            </pattern>
-          </defs>
-          <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
-            <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" />
-          </svg>
-          <rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
-        </svg>
-
-        <svg class="dark:hidden absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
-          <defs>
-            <pattern
-              id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
-              width="200"
-              height="200"
-              x="50%"
-              y="-1"
-              patternUnits="userSpaceOnUse"
-            >
-              <path d="M.5 200V.5H200" fill="none" />
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" stroke-width="0" fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" />
-        </svg>
-
-        <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)] right-0" aria-hidden="true">
-          <div class="aspect-[1108/632] w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/20 opacity-20" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)" />
-        </div>
-      </template>
-
-      <template #badges>
-        <UBadge color="primary" size="lg" variant="subtle">
-          Coming Soon 🚀
-        </UBadge>
-      </template>
-
-      <template #links>
-        <UButton
-          trailing-icon="i-heroicons-arrow-right"
-          color="gray"
-          size="md"
-          variant="solid"
-          to="https://ui.nuxt.com/pro/purchase"
-        >
-          Early access
-        </UButton>
-      </template>
-
-      <template #title>
-        The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
-      </template>
-
-      <template #description>
-        Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.
-      </template>
-
-      <MDC
-        :value="pro.code"
-        tag="pre"
-        class="prose prose-primary dark:prose-invert max-w-none -mt-6"
-      />
-    </ULandingHero>
-  </UMain>
-</template>
-
-<script setup>
-const title = 'Nuxt UI Pro: The Building Blocks for Modern Web Apps'
-const description = 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, marketing pages, blogs, documentations or entire SaaS products.'
-
-useSeoMeta({
-  titleTemplate: '',
-  title: title,
-  ogTitle: `${title} - Nuxt UI`,
-  description: description,
-  ogDescription: description
-})
-</script>
diff --git a/docs/pages/roadmap.vue b/docs/pages/roadmap.vue
new file mode 100644
index 00000000..db2713c7
--- /dev/null
+++ b/docs/pages/roadmap.vue
@@ -0,0 +1,31 @@
+<script setup>
+const title = 'Roadmap'
+const description = 'Discover our Volta board for @nuxt/ui development status.'
+
+useSeoMeta({
+  title,
+  ogTitle: 'Nuxt UI Roadmap',
+  description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title,
+  description
+})
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
+
+const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
+    <ClientOnly>
+      <iframe :src="src" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>
diff --git a/docs/utils/pro.ts b/docs/utils/pro.ts
deleted file mode 100644
index 36c9df9e..00000000
--- a/docs/utils/pro.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const pro = {
-  code: `
-\`\`\`vue [app.vue]
-<script setup lang="ts">
-const links = [
-  { to: '/', label: 'Home' },
-  { to: '/about', label: 'About' },
-  { to: '/contact', label: 'Contact' }
-]
-</script>
-
-<template>
-  <UHeader :links="links" />
-
-  <UMain>
-    <ULandingHero title="Hello World" />
-
-    <ULandingSection title="Features">
-      <UPageGrid>
-        <ULandingCard title="First Card" />
-        <ULandingCard title="Second Card" />
-        <ULandingCard title="Third Card" />
-      </UPageGrid>
-    </ULandingSection>
-  </UMain>
-
-  <UFooter />
-</template>
-\`\`\`
-  `
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 055279ac..4fbb60d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,12 +127,15 @@ importers:
       '@iconify-json/heroicons':
         specifier: ^1.1.13
         version: 1.1.13
+      '@iconify-json/logos':
+        specifier: ^1.1.37
+        version: 1.1.37
       '@iconify-json/simple-icons':
         specifier: ^1.1.76
         version: 1.1.76
       '@nuxt/content':
-        specifier: ^2.8.5
-        version: 2.8.5(rollup@3.29.1)(vue@3.3.4)
+        specifier: ^2.9.0
+        version: 2.9.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4)
       '@nuxt/devtools':
         specifier: ^1.0.0
         version: 1.0.0(nuxt@3.8.0)(rollup@3.29.1)(vite@4.5.0)
@@ -140,17 +143,20 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.52.0)
       '@nuxt/ui-pro':
-        specifier: npm:@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22
-        version: /@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: ^0.4.1
+        version: 0.4.1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
-        specifier: ^1.0.2
-        version: 1.0.2(rollup@3.29.1)
+        specifier: ^1.0.3
+        version: 1.0.3(rollup@3.29.1)
       '@nuxtjs/fontaine':
         specifier: ^0.4.1
         version: 0.4.1(rollup@3.29.1)
       '@nuxtjs/google-fonts':
         specifier: ^3.0.2
         version: 3.0.2(rollup@3.29.1)
+      '@nuxtjs/mdc':
+        specifier: ^0.2.6
+        version: 0.2.6(rollup@3.29.1)
       '@nuxtjs/plausible':
         specifier: ^0.2.3
         version: 0.2.3(rollup@3.29.1)
@@ -170,11 +176,11 @@ importers:
         specifier: ^1.0.8
         version: 1.0.8(rollup@3.29.1)
       nuxt-component-meta:
-        specifier: ^0.5.4
-        version: 0.5.4(rollup@3.29.1)
+        specifier: npm:nuxt-component-meta-edge@0.5.5-28315603.0a285c7
+        version: /nuxt-component-meta-edge@0.5.5-28315603.0a285c7(rollup@3.29.1)
       nuxt-og-image:
-        specifier: ^2.1.3
-        version: 2.1.3(rollup@3.29.1)(vue@3.3.4)
+        specifier: ^2.2.3
+        version: 2.2.3(rollup@3.29.1)(vue@3.3.4)
       prettier:
         specifier: ^3.0.3
         version: 3.0.3
@@ -1295,6 +1301,12 @@ packages:
     dependencies:
       '@iconify/types': 2.0.0
 
+  /@iconify-json/logos@1.1.37:
+    resolution: {integrity: sha512-H2S8frTEznk6paX2kMzeUGn4KSiykghvO0b8UvEDd1fFFzt0WxCXpP1tBv67XaWK99e6JgA34hhv4lRGAm1hJg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/simple-icons@1.1.76:
     resolution: {integrity: sha512-jZEMvkMfD5tTadFJIOIxKE4cTVXslrktWEiMJV6HaABi9qw02zS7bzrllR1YtGPxzniKkq2UVg/dKS6lliIxVA==}
     dependencies:
@@ -1538,15 +1550,17 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/content@2.8.5(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-sWVGoZJOjwEd8v6XYTrHYtQ7c11HR6yK9dcqruf+7WM2WJmwTSeY8B1ir6+9mE1FPQAFnqg26qSkxwafpS9o+g==}
+  /@nuxt/content@2.9.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-//mt++/AgOmjT6TpanugNJpJfx6q8g7wV8/vnk7vSSrrgki8tG6jpupuJmxHHB8DcqqTJfuBWFIdaLhv/Z9Gzg==}
     dependencies:
-      '@nuxt/kit': 3.7.4(rollup@3.29.1)
-      '@nuxtjs/mdc': 0.2.1(rollup@3.29.1)
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
+      '@nuxtjs/mdc': 0.2.6(rollup@3.29.1)
+      '@vueuse/core': 10.5.0(vue@3.3.4)
       '@vueuse/head': 2.0.0(vue@3.3.4)
+      '@vueuse/nuxt': 10.5.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4)
       consola: 3.2.3
-      defu: 6.1.2
-      destr: 2.0.1
+      defu: 6.1.3
+      destr: 2.0.2
       json5: 2.2.3
       knitwork: 1.0.0
       listhen: 1.5.5
@@ -1555,6 +1569,7 @@ packages:
       micromark: 4.0.0
       micromark-util-sanitize-uri: 2.0.0
       micromark-util-types: 2.0.0
+      minisearch: 6.2.0
       ohash: 1.1.3
       pathe: 1.1.1
       scule: 1.0.0
@@ -1576,8 +1591,10 @@ packages:
       - '@planetscale/database'
       - '@upstash/redis'
       - '@vercel/kv'
+      - '@vue/composition-api'
       - bufferutil
       - idb-keyval
+      - nuxt
       - rollup
       - supports-color
       - utf-8-validate
@@ -1633,7 +1650,7 @@ packages:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
       birpc: 0.2.14
       consola: 3.2.3
-      destr: 2.0.1
+      destr: 2.0.2
       error-stack-parser-es: 0.1.1
       execa: 7.2.0
       fast-glob: 3.3.1
@@ -1838,7 +1855,7 @@ packages:
       consola: 3.2.3
       create-require: 1.1.1
       defu: 6.1.3
-      destr: 2.0.2
+      destr: 2.0.1
       dotenv: 16.3.1
       git-url-parse: 13.1.0
       is-docker: 3.0.0
@@ -1855,8 +1872,41 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/ui-edge@2.9.0-28303819.ace8fc1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-GrN0ZKCtm838flgZMVg5QiN+5W2L9pCKyTtPlPiGbSYrLqxwQWvkqMlPP2+9RsvVhCAUyUu6ikl6nRh1f2O6QQ==}
+  /@nuxt/ui-pro@0.4.1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-Ue82QTXo0oh5gM/nn3PkCFgiZvtAi40plxs3hiIkHpOijfXU1sLv9As/r2m3d3c6vRLbvBOpb82YuVkt7mi/bw==}
+    dependencies:
+      '@nuxt/ui': 2.10.0(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
+      '@vueuse/core': 10.5.0(vue@3.3.4)
+      defu: 6.1.3
+      nuxt-icon: 0.6.1(rollup@3.29.1)(vue@3.3.4)
+      ofetch: 1.3.3
+      pathe: 1.1.1
+      tailwind-merge: 1.14.0
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - focus-trap
+      - idb-keyval
+      - jwt-decode
+      - nprogress
+      - qrcode
+      - rollup
+      - sortablejs
+      - supports-color
+      - ts-node
+      - universal-cookie
+      - vue
+      - webpack
+    dev: true
+
+  /@nuxt/ui-templates@1.3.1:
+    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
+
+  /@nuxt/ui@2.10.0(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-pMv0BWWkeUOAJ+YkXr6xirbg2iHXKerIk9hYS7blp0aBehBTBq1gxHdtl+iA2hq9+LFahO6WyA7SJnw3h0thvQ==}
     engines: {node: '>=v16.20.2'}
     dependencies:
       '@egoist/tailwindcss-icons': 1.4.0(tailwindcss@3.3.5)
@@ -1901,39 +1951,6 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-J2zc5H3UVoIeZQH7j5KSAB4PMXUiYkZ1OaV03dylRZvWkgeUtq9oc2QsC+Wz8QKZh0tLMxbFLrN7TIsJz9tBig==}
-    dependencies:
-      '@nuxt/ui': /@nuxt/ui-edge@2.9.0-28303819.ace8fc1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
-      '@vueuse/core': 10.5.0(vue@3.3.4)
-      defu: 6.1.3
-      nuxt-icon: 0.6.0(rollup@3.29.1)(vue@3.3.4)
-      ofetch: 1.3.3
-      pathe: 1.1.1
-      tailwind-merge: 1.14.0
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - focus-trap
-      - idb-keyval
-      - jwt-decode
-      - nprogress
-      - qrcode
-      - rollup
-      - sortablejs
-      - supports-color
-      - ts-node
-      - universal-cookie
-      - vue
-      - webpack
-    dev: true
-
-  /@nuxt/ui-templates@1.3.1:
-    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
-
   /@nuxt/vite-builder@3.8.0(eslint@8.52.0)(rollup@3.29.1)(typescript@5.2.2)(vue-tsc@1.8.21)(vue@3.3.4):
     resolution: {integrity: sha512-F9BfH+c/Idp6sBGVHR4QJSuoO42evtE4D0OelD45NgkqVvmBmOawlj0Oz5fDKoV64LDPI2+yE+xnBdQtsNv/VA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1996,11 +2013,11 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/studio@1.0.2(rollup@3.29.1):
-    resolution: {integrity: sha512-QoF6oYigr6IcHgNeQqAUBmCrSqnuPffoF9Tbg8cToF3oYU7WHkKgYCe+diICFdWuiH/SHTEfSm9kaone/Bp2gw==}
+  /@nuxthq/studio@1.0.3(rollup@3.29.1):
+    resolution: {integrity: sha512-4jHEz53xVj9WDoJdfu8iX/IGcBKm0Z797aDWoZdrTvwg/FSSj+CTnJmlML77574WQoGPoUkQ6pMSM5X/3NOVSg==}
     dependencies:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      defu: 6.1.2
+      defu: 6.1.3
       nuxt-component-meta: 0.5.4(rollup@3.29.1)
       nuxt-config-schema: 0.4.6(rollup@3.29.1)
       socket.io-client: 4.7.2
@@ -2047,16 +2064,16 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxtjs/mdc@0.2.1(rollup@3.29.1):
-    resolution: {integrity: sha512-14TPZ4p2UcG3IWqdPArx03hsUmWYQBlEYXkfm2Eq5sXu7hAg8UI9wEqZNNadMdnEi/WZvcMNf0xsbBhcRnxqew==}
+  /@nuxtjs/mdc@0.2.6(rollup@3.29.1):
+    resolution: {integrity: sha512-FDjJXfvFsNgtt3lm7mxjPymv5lovdOMS5bHxnAS/Vcoqd8qC4nkiSnKpZD2eLf4UGQKKNOMSn1mlC2viQHu2sg==}
     dependencies:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      '@types/hast': 3.0.1
-      '@types/mdast': 4.0.1
-      '@vue/compiler-core': 3.3.4
+      '@types/hast': 3.0.2
+      '@types/mdast': 4.0.2
+      '@vue/compiler-core': 3.3.7
       consola: 3.2.3
       defu: 6.1.3
-      destr: 2.0.1
+      destr: 2.0.2
       detab: 3.0.2
       github-slugger: 2.0.0
       hast-util-to-string: 3.0.0
@@ -2071,11 +2088,11 @@ packages:
       rehype-sort-attributes: 5.0.0
       remark-emoji: 4.0.0
       remark-gfm: 3.0.1
-      remark-mdc: 2.0.0
+      remark-mdc: 2.1.0
       remark-parse: 10.0.2
       remark-rehype: 10.1.0
       scule: 1.0.0
-      shikiji: 0.6.8
+      shikiji: 0.6.10
       ufo: 1.3.1
       unified: 11.0.3
       unist-builder: 4.0.0
@@ -2441,8 +2458,8 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@resvg/resvg-js-android-arm-eabi@2.4.1:
-    resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==}
+  /@resvg/resvg-js-android-arm-eabi@2.6.0:
+    resolution: {integrity: sha512-lJnZ/2P5aMocrFMW7HWhVne5gH82I8xH6zsfH75MYr4+/JOaVcGCTEQ06XFohGMdYRP3v05SSPLPvTM/RHjxfA==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [android]
@@ -2450,8 +2467,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-android-arm64@2.4.1:
-    resolution: {integrity: sha512-/QleoRdPfsEuH9jUjilYcDtKK/BkmWcK+1LXM8L2nsnf/CI8EnFyv7ZzCj4xAIvZGAy9dTYr/5NZBcTwxG2HQg==}
+  /@resvg/resvg-js-android-arm64@2.6.0:
+    resolution: {integrity: sha512-N527f529bjMwYWShZYfBD60dXA4Fux+D695QsHQ93BDYZSHUoOh1CUGUyICevnTxs7VgEl98XpArmUWBZQVMfQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
@@ -2459,8 +2476,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-darwin-arm64@2.4.1:
-    resolution: {integrity: sha512-U1oMNhea+kAXgiEXgzo7EbFGCD1Edq5aSlQoe6LMly6UjHzgx2W3N5kEXCwU/CgN5FiQhZr7PlSJSlcr7mdhfg==}
+  /@resvg/resvg-js-darwin-arm64@2.6.0:
+    resolution: {integrity: sha512-MabUKLVayEwlPo0mIqAmMt+qESN8LltCvv5+GLgVga1avpUrkxj/fkU1TKm8kQegutUjbP/B0QuMuUr0uhF8ew==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -2468,8 +2485,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-darwin-x64@2.4.1:
-    resolution: {integrity: sha512-avyVh6DpebBfHHtTQTZYSr6NG1Ur6TEilk1+H0n7V+g4F7x7WPOo8zL00ZhQCeRQ5H4f8WXNWIEKL8fwqcOkYw==}
+  /@resvg/resvg-js-darwin-x64@2.6.0:
+    resolution: {integrity: sha512-zrFetdnSw/suXjmyxSjfDV7i61hahv6DDG6kM7BYN2yJ3Es5+BZtqYZTcIWogPJedYKmzN1YTMWGd/3f0ubFiA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -2477,8 +2494,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm-gnueabihf@2.4.1:
-    resolution: {integrity: sha512-isY/mdKoBWH4VB5v621co+8l101jxxYjuTkwOLsbW+5RK9EbLciPlCB02M99ThAHzI2MYxIUjXNmNgOW8btXvw==}
+  /@resvg/resvg-js-linux-arm-gnueabihf@2.6.0:
+    resolution: {integrity: sha512-sH4gxXt7v7dGwjGyzLwn7SFGvwZG6DQqLaZ11MmzbCwd9Zosy1TnmrMJfn6TJ7RHezmQMgBPi18bl55FZ1AT4A==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -2486,8 +2503,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm64-gnu@2.4.1:
-    resolution: {integrity: sha512-uY5voSCrFI8TH95vIYBm5blpkOtltLxLRODyhKJhGfskOI7XkRw5/t1u0sWAGYD8rRSNX+CA+np86otKjubrNg==}
+  /@resvg/resvg-js-linux-arm64-gnu@2.6.0:
+    resolution: {integrity: sha512-fCyMncqCJtrlANADIduYF4IfnWQ295UKib7DAxFXQhBsM9PLDTpizr0qemZcCNadcwSVHnAIzL4tliZhCM8P6A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2495,8 +2512,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm64-musl@2.4.1:
-    resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==}
+  /@resvg/resvg-js-linux-arm64-musl@2.6.0:
+    resolution: {integrity: sha512-ouLjTgBQHQyxLht4FdMPTvuY8xzJigM9EM2Tlu0llWkN1mKyTQrvYWi6TA6XnKdzDJHy7ZLpWpjZi7F5+Pg+Vg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2504,8 +2521,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-x64-gnu@2.4.1:
-    resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==}
+  /@resvg/resvg-js-linux-x64-gnu@2.6.0:
+    resolution: {integrity: sha512-n3zC8DWsvxC1AwxpKFclIPapDFibs5XdIRoV/mcIlxlh0vseW1F49b97F33BtJQRmlntsqqN6GMMqx8byB7B+Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2513,8 +2530,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-x64-musl@2.4.1:
-    resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==}
+  /@resvg/resvg-js-linux-x64-musl@2.6.0:
+    resolution: {integrity: sha512-n4tasK1HOlAxdTEROgYA1aCfsEKk0UOFDNd/AQTTZlTmCbHKXPq+O8npaaKlwXquxlVK8vrkcWbksbiGqbCAcw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2522,8 +2539,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-arm64-msvc@2.4.1:
-    resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==}
+  /@resvg/resvg-js-win32-arm64-msvc@2.6.0:
+    resolution: {integrity: sha512-X2+EoBJFwDI5LDVb51Sk7ldnVLitMGr9WwU/i21i3fAeAXZb3hM16k67DeTy16OYkT2dk/RfU1tP1wG+rWbz2Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -2531,8 +2548,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-ia32-msvc@2.4.1:
-    resolution: {integrity: sha512-odyVFGrEWZIzzJ89KdaFtiYWaIJh9hJRW/frcEcG3agJ464VXkN/2oEVF5ulD+5mpGlug9qJg7htzHcKxDN8sg==}
+  /@resvg/resvg-js-win32-ia32-msvc@2.6.0:
+    resolution: {integrity: sha512-L7oevWjQoUgK5W1fCKn0euSVemhDXVhrjtwqpc7MwBKKimYeiOshO1Li1pa8bBt5PESahenhWgdB6lav9O0fEg==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -2540,8 +2557,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-x64-msvc@2.4.1:
-    resolution: {integrity: sha512-vY4kTLH2S3bP+puU5x7hlAxHv+ulFgcK6Zn3efKSr0M0KnZ9A3qeAjZteIpkowEFfUeMPNg2dvvoFRJA9zqxSw==}
+  /@resvg/resvg-js-win32-x64-msvc@2.6.0:
+    resolution: {integrity: sha512-8lJlghb+Unki5AyKgsnFbRJwkEj9r1NpwyuBG8yEJiG1W9eEGl03R3I7bsVa3haof/3J1NlWf0rzSa1G++A2iw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -2549,26 +2566,26 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js@2.4.1:
-    resolution: {integrity: sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A==}
+  /@resvg/resvg-js@2.6.0:
+    resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
     engines: {node: '>= 10'}
     optionalDependencies:
-      '@resvg/resvg-js-android-arm-eabi': 2.4.1
-      '@resvg/resvg-js-android-arm64': 2.4.1
-      '@resvg/resvg-js-darwin-arm64': 2.4.1
-      '@resvg/resvg-js-darwin-x64': 2.4.1
-      '@resvg/resvg-js-linux-arm-gnueabihf': 2.4.1
-      '@resvg/resvg-js-linux-arm64-gnu': 2.4.1
-      '@resvg/resvg-js-linux-arm64-musl': 2.4.1
-      '@resvg/resvg-js-linux-x64-gnu': 2.4.1
-      '@resvg/resvg-js-linux-x64-musl': 2.4.1
-      '@resvg/resvg-js-win32-arm64-msvc': 2.4.1
-      '@resvg/resvg-js-win32-ia32-msvc': 2.4.1
-      '@resvg/resvg-js-win32-x64-msvc': 2.4.1
+      '@resvg/resvg-js-android-arm-eabi': 2.6.0
+      '@resvg/resvg-js-android-arm64': 2.6.0
+      '@resvg/resvg-js-darwin-arm64': 2.6.0
+      '@resvg/resvg-js-darwin-x64': 2.6.0
+      '@resvg/resvg-js-linux-arm-gnueabihf': 2.6.0
+      '@resvg/resvg-js-linux-arm64-gnu': 2.6.0
+      '@resvg/resvg-js-linux-arm64-musl': 2.6.0
+      '@resvg/resvg-js-linux-x64-gnu': 2.6.0
+      '@resvg/resvg-js-linux-x64-musl': 2.6.0
+      '@resvg/resvg-js-win32-arm64-msvc': 2.6.0
+      '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
+      '@resvg/resvg-js-win32-x64-msvc': 2.6.0
     dev: true
 
-  /@resvg/resvg-wasm@2.4.1:
-    resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==}
+  /@resvg/resvg-wasm@2.6.0:
+    resolution: {integrity: sha512-iDkBM6Ivex8nULtBu8cX670/lfsGxq8U1cuqE+qS9xFpPQP1enPdVm/33Kq3+B+bAldA+AHNZnCgpmlHo/fZrQ==}
     engines: {node: '>= 10'}
     dev: true
 
@@ -2607,7 +2624,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
@@ -2658,7 +2675,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       rollup: 3.29.1
     dev: true
 
@@ -2684,7 +2701,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
@@ -2720,7 +2737,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       magic-string: 0.27.0
       rollup: 3.29.1
     dev: true
@@ -3004,6 +3021,15 @@ packages:
       minimatch: 9.0.3
     dev: true
 
+  /@twemoji/api@14.1.2:
+    resolution: {integrity: sha512-JLuszRq7t+NWJTaNwBD+Hbhf67gzn6jAqhNIDTPndEGT55kHiZTJAYRGCHZB/eA58OGVSp7mIvsJs+F/ZDJanA==}
+    dependencies:
+      fs-extra: 8.1.0
+      jsonfile: 5.0.0
+      twemoji-parser: 14.0.0
+      universalify: 0.1.2
+    dev: true
+
   /@types/chai-subset@1.3.4:
     resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
     dependencies:
@@ -3035,8 +3061,8 @@ packages:
   /@types/estree@1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
 
-  /@types/fs-extra@11.0.2:
-    resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==}
+  /@types/fs-extra@11.0.3:
+    resolution: {integrity: sha512-sF59BlXtUdzEAL1u0MSvuzWd7PdZvZEtnaVkzX5mjpdWTJ8brG0jUqve3jPCzSzvAKKMHTG8F8o/WMQLtleZdQ==}
     dependencies:
       '@types/jsonfile': 6.1.1
       '@types/node': 20.6.3
@@ -3048,8 +3074,8 @@ packages:
       '@types/unist': 2.0.8
     dev: true
 
-  /@types/hast@3.0.1:
-    resolution: {integrity: sha512-hs/iBJx2aydugBQx5ETV3ZgeSS0oIreQrFJ4bjBl0XvM4wAmDjFEALY7p0rTSLt2eL+ibjRAAs9dTPiCLtmbqQ==}
+  /@types/hast@3.0.2:
+    resolution: {integrity: sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==}
     dependencies:
       '@types/unist': 3.0.0
     dev: true
@@ -3089,6 +3115,12 @@ packages:
       '@types/unist': 3.0.0
     dev: true
 
+  /@types/mdast@4.0.2:
+    resolution: {integrity: sha512-tYR83EignvhYO9iU3kDg8V28M0jqyh9zzp5GV+EO+AYnyUl3P5ltkTeJuTiFZQFz670FSb3EwT/6LQdX+UdKfw==}
+    dependencies:
+      '@types/unist': 3.0.0
+    dev: true
+
   /@types/ms@0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: true
@@ -3390,36 +3422,18 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@volar/language-core@1.10.1:
-    resolution: {integrity: sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==}
-    dependencies:
-      '@volar/source-map': 1.10.1
-    dev: true
-
   /@volar/language-core@1.10.5:
     resolution: {integrity: sha512-xD71j4Ee0Ycq8WsiAE6H/aCThGdTobiZZeD+jFD+bvmbopa1Az296pqJysr3Ck8c7n5+GGF+xlKCS3WxRFYgSQ==}
     dependencies:
       '@volar/source-map': 1.10.5
     dev: true
 
-  /@volar/source-map@1.10.1:
-    resolution: {integrity: sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==}
-    dependencies:
-      muggle-string: 0.3.1
-    dev: true
-
   /@volar/source-map@1.10.5:
     resolution: {integrity: sha512-s4kgo66SA1kMzYvF9HFE6Vc1rxtXLUmcLrT2WKnchPDvLne+97Kw+xoR2NxJFmsvHoL18vmu/YGXYcN+Q5re1g==}
     dependencies:
       muggle-string: 0.3.1
     dev: true
 
-  /@volar/typescript@1.10.1:
-    resolution: {integrity: sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==}
-    dependencies:
-      '@volar/language-core': 1.10.1
-    dev: true
-
   /@volar/typescript@1.10.5:
     resolution: {integrity: sha512-kfDehpeLJku9i1BgsFOYIczPmFFH4herl+GZrLGdvX5urTqeCKsKYlF36iNmFaADzjMb9WlENcUZzPjK8MxNrQ==}
     dependencies:
@@ -3436,7 +3450,7 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       '@vue/compiler-sfc': 3.3.4
       ast-kit: 0.11.2(rollup@3.29.1)
       local-pkg: 0.4.3
@@ -3477,6 +3491,15 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-core@3.3.7:
+    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/shared': 3.3.7
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
@@ -3494,7 +3517,7 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.5
-      postcss: 8.4.31
+      postcss: 8.4.30
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.3.4:
@@ -3526,19 +3549,19 @@ packages:
       vue-template-compiler: 2.7.14
     dev: true
 
-  /@vue/language-core@1.8.8(typescript@5.2.2):
-    resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
+  /@vue/language-core@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@volar/language-core': 1.10.1
-      '@volar/source-map': 1.10.1
+      '@volar/language-core': 1.10.5
+      '@volar/source-map': 1.10.5
       '@vue/compiler-dom': 3.3.4
-      '@vue/reactivity': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/shared': 3.3.7
+      computeds: 0.0.1
       minimatch: 9.0.3
       muggle-string: 0.3.1
       typescript: 5.2.2
@@ -3584,6 +3607,10 @@ packages:
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
+  /@vue/shared@3.3.7:
+    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
+    dev: true
+
   /@vueuse/core@10.5.0(vue@3.3.4):
     resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
     dependencies:
@@ -4049,7 +4076,7 @@ packages:
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       pathe: 1.1.1
     transitivePeerDependencies:
       - rollup
@@ -4060,7 +4087,7 @@ packages:
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
       pathe: 1.1.1
     transitivePeerDependencies:
       - rollup
@@ -6629,7 +6656,7 @@ packages:
   /hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       '@types/unist': 3.0.0
       devlop: 1.1.0
       hastscript: 8.0.0
@@ -6642,13 +6669,13 @@ packages:
   /hast-util-heading-rank@3.0.0:
     resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
     dev: true
 
   /hast-util-is-element@3.0.0:
     resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
     dev: true
 
   /hast-util-parse-selector@3.1.1:
@@ -6660,7 +6687,7 @@ packages:
   /hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
     dev: true
 
   /hast-util-raw@7.2.3:
@@ -6682,7 +6709,7 @@ packages:
   /hast-util-raw@9.0.1:
     resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       '@types/unist': 3.0.0
       '@ungap/structured-clone': 1.2.0
       hast-util-from-parse5: 8.0.1
@@ -6700,7 +6727,7 @@ packages:
   /hast-util-to-html@9.0.0:
     resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       '@types/unist': 3.0.0
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
@@ -6728,7 +6755,7 @@ packages:
   /hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       property-information: 6.3.0
@@ -6740,13 +6767,13 @@ packages:
   /hast-util-to-string@3.0.0:
     resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
     dev: true
 
   /hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
     dev: true
 
   /hastscript@7.2.0:
@@ -6762,7 +6789,7 @@ packages:
   /hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       comma-separated-tokens: 2.0.3
       hast-util-parse-selector: 4.0.0
       property-information: 6.3.0
@@ -7872,7 +7899,7 @@ packages:
     resolution: {integrity: sha512-C9m5/JqFV1/CMrMFDf1PqmvMc8ohrssmlF5bdgea7nUqqn6D9xzKVTa6DIm0LReCqvEPS35o1UElmb7PmoSfHQ==}
     dependencies:
       estree-walker: 3.0.3
-      magic-string: 0.30.5
+      magic-string: 0.30.3
       mlly: 1.4.2
       type-level-regexp: 0.1.17
       ufo: 1.3.1
@@ -7991,7 +8018,7 @@ packages:
   /mdast-util-find-and-replace@3.0.1:
     resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
     dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
       escape-string-regexp: 5.0.0
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
@@ -8019,7 +8046,7 @@ packages:
   /mdast-util-from-markdown@2.0.0:
     resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==}
     dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
       '@types/unist': 3.0.0
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
@@ -8101,7 +8128,7 @@ packages:
   /mdast-util-phrasing@4.0.0:
     resolution: {integrity: sha512-xadSsJayQIucJ9n053dfQwVu1kuXg7jCTdYsMK8rqzKZh52nLfSH/k0sAxE0u+pj/zKZX+o5wB+ML5mRayOxFA==}
     dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
       unist-util-is: 6.0.0
     dev: true
 
@@ -8121,8 +8148,8 @@ packages:
   /mdast-util-to-hast@13.0.2:
     resolution: {integrity: sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==}
     dependencies:
-      '@types/hast': 3.0.1
-      '@types/mdast': 4.0.1
+      '@types/hast': 3.0.2
+      '@types/mdast': 4.0.2
       '@ungap/structured-clone': 1.2.0
       devlop: 1.1.0
       micromark-util-sanitize-uri: 2.0.0
@@ -8147,7 +8174,7 @@ packages:
   /mdast-util-to-markdown@2.1.0:
     resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
     dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
       '@types/unist': 3.0.0
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.0.0
@@ -8774,6 +8801,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
+  /minisearch@6.2.0:
+    resolution: {integrity: sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==}
+    dev: true
+
   /minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
@@ -9215,13 +9246,25 @@ packages:
       - supports-color
     dev: true
 
+  /nuxt-component-meta-edge@0.5.5-28315603.0a285c7(rollup@3.29.1):
+    resolution: {integrity: sha512-Hw2ByxuO1Itd7i2AyZ8oJhE+kbHAjI6FccCvJgKP2K/b2TgzfQSecjs5FNPtD1URa/4aCIFB8PVHpdNxoW5Piw==}
+    dependencies:
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
+      scule: 1.0.0
+      typescript: 5.2.2
+      vue-component-meta: 1.8.22(typescript@5.2.2)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /nuxt-component-meta@0.5.4(rollup@3.29.1):
     resolution: {integrity: sha512-0ou1O5Dky/avUAm6XrO4r4aZiRgP3wCwBlOe49FcyVZo0uAULFw8b3j48BvKWzBdOywf8hJEL4V5o7FWnd1E+A==}
     dependencies:
-      '@nuxt/kit': 3.7.4(rollup@3.29.1)
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
       scule: 1.0.0
       typescript: 5.2.2
-      vue-component-meta: 1.8.8(typescript@5.2.2)
+      vue-component-meta: 1.8.22(typescript@5.2.2)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -9240,8 +9283,8 @@ packages:
       - supports-color
     dev: true
 
-  /nuxt-icon@0.6.0(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-yFhdd1inv8z4soCF8HZphVMn0wJJN+5m+ZHs1QQblrdxXJDV7UuZeTjN6Fy8VDHfWbZJm6coXSQrK483kU+ipA==}
+  /nuxt-icon@0.6.1(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-a4/MEmbP2hXB0sLWBqevC+569FADEMs+VfYJ6nzbktUSJY57/PoHyen0PtqAAkMjGGhHgDVHAcjy5RCJyYZRYg==}
     dependencies:
       '@iconify/vue': 4.1.1(vue@3.3.4)
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
@@ -9251,13 +9294,14 @@ packages:
       - vue
     dev: true
 
-  /nuxt-og-image@2.1.3(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-ro9DrArtnBZNtITnDLZPrHoyF4KQIYc2tADkZWIdHchY34O5csyCF77kR7dxfvP/1jXrL8kG2HULoNzmS5/uug==}
+  /nuxt-og-image@2.2.3(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-r6EfYcprzndoDIFnfUU+Qq0/iEp5b413LRGehaigTBABRspWzMvI6fqKHlovSbi/k44Y/vWCVUaJQD0gwZ65Wg==}
     dependencies:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      '@resvg/resvg-js': 2.4.1
-      '@resvg/resvg-wasm': 2.4.1
-      '@types/fs-extra': 11.0.2
+      '@resvg/resvg-js': 2.6.0
+      '@resvg/resvg-wasm': 2.6.0
+      '@twemoji/api': 14.1.2
+      '@types/fs-extra': 11.0.3
       birpc: 0.2.14
       chalk: 5.3.0
       chrome-launcher: 1.1.0
@@ -9270,8 +9314,8 @@ packages:
       globby: 13.2.2
       image-size: 1.0.2
       launch-editor: 2.6.1
-      nuxt-site-config: 1.5.4(rollup@3.29.1)(vue@3.3.4)
-      nuxt-site-config-kit: 1.5.4(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config: 1.5.5(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config-kit: 1.5.5(rollup@3.29.1)(vue@3.3.4)
       nypm: 0.3.3
       ofetch: 1.3.3
       ohash: 1.1.3
@@ -9297,13 +9341,13 @@ packages:
       - vue
     dev: true
 
-  /nuxt-site-config-kit@1.5.4(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-anTcPXIb5/1S7BP9nce3BU/UgbX38A6mofZ0c+cvni4O512GOx07SWJCpq9GXlS5qInEbg8f5azIEupTD+d+iQ==}
+  /nuxt-site-config-kit@1.5.5(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-87mf+Ij5njs0qmSl/X/fUhfaSe9kf6feulZnrfGqI0yqk7XmcpdiDZl5xLOWaFQI5Ial+eMeIDz86hrKptiLrQ==}
     dependencies:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
       '@nuxt/schema': 3.8.0(rollup@3.29.1)
       pkg-types: 1.0.3
-      site-config-stack: 1.5.4(vue@3.3.4)
+      site-config-stack: 1.5.5(vue@3.3.4)
       std-env: 3.4.3
       ufo: 1.3.1
     transitivePeerDependencies:
@@ -9312,14 +9356,14 @@ packages:
       - vue
     dev: true
 
-  /nuxt-site-config@1.5.4(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-u6N1D+2iAul5fHL0heeMMdvaa/TIqUXA9eNhwbGibc9Tiw+cOals4bFdQYFp6PXcRZrQC81dX27p87qgOa5q+g==}
+  /nuxt-site-config@1.5.5(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-L1mjCyFvIb0mp7WwTgGngGCN6xlIza52zL/84R7rqY8r6gMkUtcTHH7OUCMO9Sq9bGI70HZLl7hsLuIqle+cWw==}
     dependencies:
       '@nuxt/kit': 3.8.0(rollup@3.29.1)
       '@nuxt/schema': 3.8.0(rollup@3.29.1)
-      nuxt-site-config-kit: 1.5.4(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config-kit: 1.5.5(rollup@3.29.1)(vue@3.3.4)
       pathe: 1.1.1
-      site-config-stack: 1.5.4(vue@3.3.4)
+      site-config-stack: 1.5.5(vue@3.3.4)
       ufo: 1.3.1
     transitivePeerDependencies:
       - rollup
@@ -10336,6 +10380,14 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  /postcss@8.4.30:
+    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -10507,7 +10559,7 @@ packages:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
     dependencies:
       defu: 6.1.3
-      destr: 2.0.1
+      destr: 2.0.2
       flat: 5.0.2
 
   /rc@1.2.8:
@@ -10647,7 +10699,7 @@ packages:
   /rehype-external-links@3.0.0:
     resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       '@ungap/structured-clone': 1.2.0
       hast-util-is-element: 3.0.0
       is-absolute-url: 4.0.1
@@ -10666,7 +10718,7 @@ packages:
   /rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       github-slugger: 2.0.0
       hast-util-heading-rank: 3.0.0
       hast-util-to-string: 3.0.0
@@ -10676,7 +10728,7 @@ packages:
   /rehype-sort-attribute-values@5.0.0:
     resolution: {integrity: sha512-dQdHdCIRnpiU+BkrLSqH+aM4lWJyLqGzv49KvH4gHj+JxYwNqvGhoTXckS3AJu4V9ZutwsTcawP0pC7PhwX0tQ==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       hast-util-is-element: 3.0.0
       unist-util-visit: 5.0.0
     dev: true
@@ -10684,7 +10736,7 @@ packages:
   /rehype-sort-attributes@5.0.0:
     resolution: {integrity: sha512-6tJUH4xHFcdO85CZRwAcEtHNCzjZ9V9S0VZLgo1pzbN04qy8jiVCZ3oAxDmBVG3Rth5b1xFTDet5WG/UYZeJLQ==}
     dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
       unist-util-visit: 5.0.0
     dev: true
 
@@ -10746,10 +10798,10 @@ packages:
       - supports-color
     dev: true
 
-  /remark-mdc@2.0.0:
-    resolution: {integrity: sha512-zBonqJya1254h84GRLjJc1fU4aXng2cKaie5qk0T1edUIkP4lVY1kJD4TP+uoFaUziTeyR6LSvkmRcHDZiWtoA==}
+  /remark-mdc@2.1.0:
+    resolution: {integrity: sha512-N1jHp5fjzCvY6qXmhfoFOMjCauu6CfNz1q79vihtgwnUrp3/C0e6Nzkzm6QeoFLHhxrTRu0epWi6A3nQUUxOIA==}
     dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
       '@types/unist': 3.0.0
       flat: 5.0.2
       js-yaml: 4.1.0
@@ -10885,7 +10937,7 @@ packages:
       rollup: ^3.25.0
       typescript: ^4.5 || ^5.0
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.3
       rollup: 3.29.1
       typescript: 5.2.2
     optionalDependencies:
@@ -11132,8 +11184,8 @@ packages:
     resolution: {integrity: sha512-e+/aueHx0YeIEut6RXC6K8gSf0PykwZiHD7q7AHtpTW8Kd8TpFUIWqTwhAnrGjOyOMyrwv+syr5WPagMpDpVYQ==}
     dev: true
 
-  /shikiji@0.6.8:
-    resolution: {integrity: sha512-K0axxNAdB9KvLUflU7QoLC7p6i2p1R2MFG0eP+iclbjtuEZqng99jHcg3VJL0GWRO67yozTICnykjo1HjOzdkg==}
+  /shikiji@0.6.10:
+    resolution: {integrity: sha512-WE+A5Y2ntM5hL3iJQujk97qr5Uj7PSIRXpQfrZ6h+JWPXZ8KBEDhFXc4lqNriaRq1WGOVPUT83XMOzmHiH3W8A==}
     dependencies:
       hast-util-to-html: 9.0.0
     dev: true
@@ -11193,8 +11245,8 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
-  /site-config-stack@1.5.4(vue@3.3.4):
-    resolution: {integrity: sha512-VQUGuSSfaqBdaySLFKXj2YS9RCrbMjGcbXV06yOAJr9AygyzapSRNKjglolcRQVxdG8q+iQpW/qQQeN1IvHCeg==}
+  /site-config-stack@1.5.5(vue@3.3.4):
+    resolution: {integrity: sha512-aLSAUOC0RjDvA/EAG8TZUOEGRkgKj5EIUJAFCVViSLZwCQ2VCDCxTjWqdIULkhiB8y9NTGH4+M0iwiLbFfCP+g==}
     peerDependencies:
       vue: ^3
     dependencies:
@@ -12684,7 +12736,7 @@ packages:
       '@types/node': 20.6.3
       esbuild: 0.18.20
       postcss: 8.4.31
-      rollup: 3.29.1
+      rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -12800,23 +12852,23 @@ packages:
       ufo: 1.3.1
     dev: true
 
-  /vue-component-meta@1.8.8(typescript@5.2.2):
-    resolution: {integrity: sha512-iVwH7wGm6VpOAvQoMjFmv8Coe9oV61JqbRkUVx95Xegwb3hEYmltvv4hYvLwUjaev07JRkskPQctyzPBU3YFyQ==}
+  /vue-component-meta@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-xic335E3KOm3uMcg23UDqo0y1XII8PVPjwoIkzi3tjUzP0edM3m9jF8SYevnJLp1NqiZ035iG1N6QMEauSAulA==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@volar/typescript': 1.10.1
-      '@vue/language-core': 1.8.8(typescript@5.2.2)
+      '@volar/typescript': 1.10.5
+      '@vue/language-core': 1.8.22(typescript@5.2.2)
       typesafe-path: 0.2.2
       typescript: 5.2.2
-      vue-component-type-helpers: 1.8.8
+      vue-component-type-helpers: 1.8.22
     dev: true
 
-  /vue-component-type-helpers@1.8.8:
-    resolution: {integrity: sha512-Ohv9HQY92nSbpReC6WhY0X4YkOszHzwUHaaN/lev5tHQLM1AEw+LrLeB2bIGIyKGDU7ZVrncXcv/oBny4rjbYg==}
+  /vue-component-type-helpers@1.8.22:
+    resolution: {integrity: sha512-LK3wJHs3vJxHG292C8cnsRusgyC5SEZDCzDCD01mdE/AoREFMl2tzLRuzwyuEsOIz13tqgBcnvysN3Lxsa14Fw==}
     dev: true
 
   /vue-demi@0.14.6(vue@3.3.4):